Accessibility changes

app/assets/javascripts/main.js

@@ -91,7 +91,7 @@ $(document).ready(function() {
   // this should be pulled eventually from actual information
   // but for now using a placeholder as a ui proof of concept
   function newTextArea(number, data) {
-    var textarea = $('<textarea data-num="'+number+'" class="frequency_text" readonly=true rows=12 contenteditable="true"></textarea>');
+    var textarea = $('<textarea aria-label= "text frequency list" data-num="'+number+'" class="frequency_text" readonly=true rows=12 contenteditable="true"></textarea>');
     var text = data["novel"] + "\n";
     text += data["display"] + "\n";
     text += "Unique words: " + data["unique_words"] + "\n";

app/assets/stylesheets/style.scss.erb

@@ -589,3 +589,74 @@ pre code {
 */
 
 blockquote {font-size: 1em;}
+
+/* a11y changes */
+
+a {
+  text-decoration: underline;
+}
+
+a:hover {
+  text-decoration-thickness: 2px;
+}
+
+a.btn,
+a.btn:hover {
+  text-decoration: none;
+}
+
+.btn {
+  white-space: initial;
+}
+
+.back-to-top a {
+  background: #fff;
+  text-decoration: none;
+  font-weight: 500;
+  border: solid 1px $gray-light;
+  bottom: 0;
+  box-shadow: 0px 0px 5px 3px rgba($gray-dark,0.3);
+  padding: .5rem 2rem 0.5rem 1.25rem; // .1em 1em .3em 1em; 
+  position: fixed;
+  right: 2%;
+  z-index: 1000;
+
+  &:hover {
+  color: #000;
+  background-color: $gray-light;
+  }
+
+  &:after {
+    content: "\2191";
+    position: relative;
+    top: -1px;
+    left: 6px;
+  }
+}
+
+// sr-only with clip instead of position: absolute
+.sr-only-clip {
+  clip: rect(1px 1px 1px 1px); /* IE6, IE7  */
+  clip: rect(1px, 1px, 1px, 1px); /* other legacy browsers */
+  clip-path: inset(50%); /* modern browsers */
+  border: 0;
+  display: inline-block;
+  height: 1px;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  width: 1px;
+}
+
+// clip-path only, no display style
+.sr-only-clip-path {
+  border: 0;
+  clip-path: inset(50%);
+  height: 1px;
+  margin: 0;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}

app/controllers/search_controller.rb

@@ -14,6 +14,18 @@ def search
     @docs = $solr.query(options)
     @total_pages = @docs[:pages]
     @facets = $solr.get_facets(options)
+    # add search terms and filters to page title
+    title_facets = Facets.facet_list.map(&:to_s) << "page"
+    param_keys = params.keys
+    if params["qtext"].present? && param_keys.intersect?(title_facets)
+      @title = "Search Results: \"#{params["qtext"]}\" - #{display_facets(params)}"
+    elsif params["qtext"].present?
+      @title = "Search Results: \"#{params["qtext"]}\""
+    elsif param_keys.intersect?(title_facets)
+      @title = "Search Results: #{display_facets(params)}"
+    else
+      @title = "Search"
+    end
   end
 
 
@@ -44,4 +56,8 @@ def create_search_options(aParams)
     end
     return options
   end
+
+  def display_facets(params)
+    params.except(:action,:sort,:controller,:qfield,:qtext,:commit,:rows).values.compact_blank.join(" / ")
+  end
 end

app/views/frequencies/index.html.erb

@@ -7,25 +7,25 @@
 
     <ul class="nav nav-pills" role="tablist">
       <li role="presentation" class="active">
-        <a href="#one" aria-controls="home" role="tab" data-toggle="tab">Pride and Prejudice</a>
+        <a href="#one" aria-controls="one" role="tab" data-toggle="tab">Pride and Prejudice</a>
       </li>
       <li role="presentation">
-        <a href="#two" aria-controls="settings" role="tab" data-toggle="tab">Persuasion</a>
+        <a href="#two" aria-controls="two" role="tab" data-toggle="tab">Persuasion</a>
       </li>
       <li role="presentation">
-        <a href="#three" aria-controls="messages" role="tab" data-toggle="tab">Northanger Abbey</a>
+        <a href="#three" aria-controls="three" role="tab" data-toggle="tab">Northanger Abbey</a>
       </li>
       <li role="presentation">
-        <a href="#four" aria-controls="settings" role="tab" data-toggle="tab">Sense and Sensibility</a>
+        <a href="#four" aria-controls="four" role="tab" data-toggle="tab">Sense and Sensibility</a>
       </li>
       <li role="presentation">
-        <a href="#five" aria-controls="settings" role="tab" data-toggle="tab">Emma</a>
+        <a href="#five" aria-controls="five" role="tab" data-toggle="tab">Emma</a>
       </li>
       <li role="presentation">
-        <a href="#six" aria-controls="profile" role="tab" data-toggle="tab">Mansfield Park</a>
+        <a href="#six" aria-controls="six" role="tab" data-toggle="tab">Mansfield Park</a>
       </li>
       <li role="presentation">
-        <a href="#seven" aria-controls="profile" role="tab" data-toggle="tab">All Novels</a>
+        <a href="#seven" aria-controls="seven" role="tab" data-toggle="tab">All Novels</a>
       </li>
     </ul>
 

app/views/layouts/application.html.erb

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
-<html xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:tei="http://www.tei-c.org/ns/1.0" xmlns:functx="http://www.functx.com" xmlns="http://www.w3.org/1999/xhtml" class="<%= @page_class %>" hc="a0" hcx="0">
+<html lang="<%= I18n.locale %>" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:tei="http://www.tei-c.org/ns/1.0" xmlns:functx="http://www.functx.com" xmlns="http://www.w3.org/1999/xhtml" class="<%= @page_class %>" hc="a0" hcx="0">
 <head>
-  <title>Austen</title>
+  <title><% if @title.present? %><%= @title %> | <% end %>Austen Said</title>
 
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <meta charset="utf-8">
@@ -26,8 +26,12 @@
 </head>
 
 <body>
-
-	<div class="header"><div class="container"><div class="site_title">
+	<a href="#wrapper" class="sr-only sr-only-focusable">
+    Skip to main content
+  </a>
+
+  <div id="body_wrapper">
+	<header id="header" class="header"><div class="container"><div class="site_title">
 	<h1>Austen <span class="title_said">Said</span>:</h1>
 	<h2>Patterns of Diction in <span class="secondary_title">Jane Austen's Major Novels</span></h2>
 </div></div>
@@ -36,42 +40,47 @@
 <div class="navbar navbar-default">
       <div class="container">
         <div class="navbar-header">
-          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" aria-label="Expand or collapse main menu">
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </button>
 
         </div>
-        <div class="navbar-collapse collapse">
+        <nav class="navbar-collapse collapse" aria-label="Main Menu">
+          <div class="row">
           <ul class="nav navbar-nav">
-            <li><%= link_to "Home", home_path %></li>
-            <li><%= link_to "Word Frequencies", frequency_path %></li>
-            <li><%= link_to "Novel Visualizations", visual_index_path %></li>
-            <li><%= link_to "Background", background_path %></li>
-            <li><%= link_to "Search", search_path %></li>
-            <li><%= link_to "About", about_path %></li>
+            <li><%= link_to "Home", home_path, 'aria-current': (current_page?(home_path) ? 'page' : nil) %></li>
+            <li><%= link_to "Word Frequencies", frequency_path, 'aria-current': (current_page?(frequency_path) ? 'page' : nil) %></li>
+            <li><%= link_to "Novel Visualizations", visual_index_path, 'aria-current': (current_page?(visual_index_path) ? 'page' : nil) %></li>
+            <li><%= link_to "Background", background_path, 'aria-current': (current_page?(background_path) ? 'page' : nil) %></li>
+            <li><%= link_to "Search", search_path, 'aria-current': (current_page?(search_path) ? 'page' : nil) %></li>
+            <li><%= link_to "About", about_path, 'aria-current': (current_page?(about_path) ? 'page' : nil) %></li>
           </ul>
-        </div>
+          </div>
+        </nav>
 
       </div>
     </div>
-</div><!-- /header -->
+</header><!-- /header -->
 
 
-    <div class="container" id="wrapper">
+    <main class="container" id="wrapper">
       <%= yield %>
-    </div>
+    </main>
 
 
- <div class="footer">
-	        <div class="container">
-  	        <div class="footer_info">
-		        <p>Created by the <a href="http://cdrh.unl.edu">Center for Digital Research in the Humanities</a>.</p>
-		        <div class="footer_logo"><a href="http://www.unl.edu"><%= image_tag 'unl_black.png' %></a></div>
-  	        </div><!-- /footer_info -->
-	        </div> <!-- /container -->
-
-        </div><!-- /footer -->
+ <footer id="footer" class="footer">
+	 <div class="container">
+  	 <div class="footer_info">
+		    <p>Created by the <a href="https://cdrh.unl.edu">Center for Digital Research in the Humanities</a>.</p>
+		  <div class="footer_logo"><a href="https://www.unl.edu" rel="external"><%= image_tag 'unl_black.png', alt: "University of Nebraska-Lincoln logo" %></a></div>
+  	 </div><!-- /footer_info -->
+	 </div> <!-- /container -->   
+    <div class="back-to-top">
+      <a href="#body_wrapper">Back to top</a>
+    </div>
+</footer><!-- /footer -->
+</div>
 </body>
 </html>

app/views/search/_facet_panel.html.erb

@@ -9,8 +9,12 @@
           <% selected = facet_selected?(facet_type, label) %>
           <% display = label.length > 0 ? label : "No label" %>
           <li <%= selected_class(selected) %> >
-            <%= link_to display, search_path(facet_link(facet_type, label)) %> 
-            <span class="badge"><%= num %></span>
+            <%= link_to display, search_path(facet_link(facet_type, label)) %><span class="sr-only-clip">:</span>
+            <% if (num != 1) %>
+              <span class="badge"><%= num %><span class="sr-only-clip"><%= num %> results</span></span>
+            <% else %>
+              <span class="badge"><%= num %><span class="sr-only-clip"><%= num %> results</span></span>
+            <% end %>
             <% if selected %>
                 <%= link_to search_path(remove_facet(facet_type)) do %>
                   <button class="btn btn-warning btn-xs">x</button>

app/views/search/search.html.erb

@@ -119,7 +119,10 @@
         <% end %>
       </div>
       <div class="col-md-9 pagination_container">
-      <%= paginator(@total_pages, 3) %>
+        <h2 class="sr-only" id="pagination_label">Pagination</h2>
+        <nav aria-labelledby="pagination_label">
+          <%= paginator(@total_pages, 3) %>
+        </nav>
       </div>
     </div> <!-- /row search controls-->
 
@@ -158,7 +161,10 @@
       <div class="col-md-3 search_limit">
     </div>
     <div class="col-md-9 pagination_container">
-      <%= paginator(@total_pages, 3) %>
+      <h2 class="sr-only" id="bottom_pagination_label">Bottom Pagination</h2>
+      <nav aria-labelledby="bottom_pagination_label">
+        <%= paginator(@total_pages, 3) %>
+      </nav>
     </div>
   </div>
 </div><!-- /row -->