LP#1268636 TPAC initial navigation headers

Added a screen-reader only CSS class ("sr-only") for adding content
which should only be read by screen readers and is otherwise invisible.

Added hidden generic <h1> and page-specific <h2> entries to improve
web accessibility navigation.

Additional content-specific headers (h3 and down) are recommended for
content grouping, but not included in this commit.

Signed-off-by: Bill Erickson <berick@esilibrary.com>
Signed-off-by: Dan Scott <dscott@laurentian.ca>

diff --git a/Open-ILS/src/templates/opac/advanced.tt2 b/Open-ILS/src/templates/opac/advanced.tt2
index 2d04448..904ee1a 100644 (file)
--- a/Open-ILS/src/templates/opac/advanced.tt2
+++ b/Open-ILS/src/templates/opac/advanced.tt2
@@ -5,6 +5,7 @@
     pane = CGI.param("pane") || "advanced";
     loc = ctx.search_ou;
 -%]
+    <h2 class="sr-only">[% l('Advanced Search') %]</h2>
     <div id="search-wrapper">
         <div id="search-box">
             <span class="search_catalog_lbl mobile_hide">[% l('Search the Catalog') %]</span>

diff --git a/Open-ILS/src/templates/opac/browse.tt2 b/Open-ILS/src/templates/opac/browse.tt2
index 9e7b91f..962dbd0 100644 (file)
--- a/Open-ILS/src/templates/opac/browse.tt2
+++ b/Open-ILS/src/templates/opac/browse.tt2
@@ -12,6 +12,7 @@
     depart_list = ['blimit', 'bterm', 'bpivot'];
 %]
 
+    <h2 class="sr-only">[% l('Catalog Browse') %]</h2>
     <div id="search-wrapper">
         [%# XXX TODO Give searchbar.tt2 more smarts so we can just do:
           # INCLUDE "opac/parts/searchbar.tt2" %]

diff --git a/Open-ILS/src/templates/opac/cnbrowse.tt2 b/Open-ILS/src/templates/opac/cnbrowse.tt2
index 958dfec..87a303e 100644 (file)
--- a/Open-ILS/src/templates/opac/cnbrowse.tt2
+++ b/Open-ILS/src/templates/opac/cnbrowse.tt2
@@ -6,6 +6,7 @@
     WRAPPER "opac/parts/base.tt2";
     INCLUDE "opac/parts/topnav.tt2";
     ctx.page_title = l("Call Number Browse"); %]
+    <h2 class="sr-only">[% l('Call Number Browse') %]</h2>
     [% INCLUDE "opac/parts/searchbar.tt2" %]
     <div id="content-wrapper">
         <div id="main-content">

diff --git a/Open-ILS/src/templates/opac/css/style.css.tt2 b/Open-ILS/src/templates/opac/css/style.css.tt2
index a5220fb..fadfd53 100644 (file)
--- a/Open-ILS/src/templates/opac/css/style.css.tt2
+++ b/Open-ILS/src/templates/opac/css/style.css.tt2
@@ -2005,3 +2005,19 @@ a.preflib_change {
         table#acct_holds_main_header td.hold_notes:before { content: "[% l('Notes') %]"; }
 }
 
+
+/* 
+For text which is visible only to screen readers.
+Borrowed from http://getbootstrap.com/css/#helper-classes-screen-readers 
+See also http://webaim.org/techniques/css/invisiblecontent/
+*/
+.sr-only {                                                                     
+    position: absolute;                                                          
+    width: 1px;                                                                  
+    height: 1px;                                                                 
+    padding: 0;                                                                  
+    margin: -1px;                                                                
+    overflow: hidden;                                                            
+    clip: rect(0, 0, 0, 0);                                                      
+    border: 0;                                                                   
+} 

diff --git a/Open-ILS/src/templates/opac/home.tt2 b/Open-ILS/src/templates/opac/home.tt2
index 123f47b..3257ba4 100644 (file)
--- a/Open-ILS/src/templates/opac/home.tt2
+++ b/Open-ILS/src/templates/opac/home.tt2
@@ -2,6 +2,7 @@
     WRAPPER "opac/parts/base.tt2";
     INCLUDE "opac/parts/topnav.tt2";
     ctx.page_title = l("Home") %]
+    <h2 class="sr-only">[% l('Catalog Home') %]</h2>
     [% INCLUDE "opac/parts/searchbar.tt2" %]
     <div id="content-wrapper">
         <div id="main-content-home">

diff --git a/Open-ILS/src/templates/opac/login.tt2 b/Open-ILS/src/templates/opac/login.tt2
index 9b6513f..0e82edf 100644 (file)
--- a/Open-ILS/src/templates/opac/login.tt2
+++ b/Open-ILS/src/templates/opac/login.tt2
@@ -3,11 +3,13 @@
     INCLUDE "opac/parts/topnav.tt2";
     basic_search = "f";
     ctx.page_title = l("Account Login") %]
+    <h2 class="sr-only">[% l('Account Login') %]</h2>
     <div class='mobile_hide'>
         [% INCLUDE "opac/parts/searchbar.tt2" %]
     </div>
     <div id="content-wrapper">
         <div id="main-content">
+            <h3 class="sr-only">[% l('Account Login Form') %]</h3>
             [% INCLUDE "opac/parts/login/form.tt2" %]
             <div class="clear-both very-big-height"></div>     
         </div>

diff --git a/Open-ILS/src/templates/opac/mylist.tt2 b/Open-ILS/src/templates/opac/mylist.tt2
index 2164e41..a710e97 100644 (file)
--- a/Open-ILS/src/templates/opac/mylist.tt2
+++ b/Open-ILS/src/templates/opac/mylist.tt2
@@ -3,6 +3,7 @@
     WRAPPER "opac/parts/base.tt2";
     INCLUDE "opac/parts/topnav.tt2";
     ctx.page_title = l("Record Detail") %]
+    <h2 class="sr-only">[% l('Temporary List') %]</h2>
     <div class="mobile_hide">
     [% INCLUDE "opac/parts/searchbar.tt2" %]
     </div>

diff --git a/Open-ILS/src/templates/opac/parts/base.tt2 b/Open-ILS/src/templates/opac/parts/base.tt2
index eaed67e..fc0c16e 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/base.tt2
+++ b/Open-ILS/src/templates/opac/parts/base.tt2
@@ -22,7 +22,10 @@
         [% INCLUDE 'opac/parts/goog_analytics.tt2' %]
     </head>
     <body[% IF want_dojo; ' class="tundra"'; END %]>
+        <h1 class="sr-only">[% l('Catalog') %]</h1>
+        [%#Each content page needs (at minimum) an <h2> describing the content%]
         [% content %] 
+        <h2 class="sr-only">[% l('Additional Resources') %]</h2>
         [% INCLUDE 'opac/parts/footer.tt2' %]
         [% INCLUDE 'opac/parts/js.tt2' %]
         [%- IF ENV.OILS_CHILIFRESH_ACCOUNT %]

diff --git a/Open-ILS/src/templates/opac/parts/searchbar.tt2 b/Open-ILS/src/templates/opac/parts/searchbar.tt2
index c8ac6ec..a7bdb90 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/searchbar.tt2
+++ b/Open-ILS/src/templates/opac/parts/searchbar.tt2
@@ -1,3 +1,4 @@
+<h3 class="sr-only">[% l('Catalog Search') %]</h3>
 [% PROCESS "opac/parts/org_selector.tt2" %]
 <div id="search-wrapper">
     [% UNLESS took_care_of_form -%]

diff --git a/Open-ILS/src/templates/opac/password_reset.tt2 b/Open-ILS/src/templates/opac/password_reset.tt2
index 6bc6b24..2856e47 100644 (file)
--- a/Open-ILS/src/templates/opac/password_reset.tt2
+++ b/Open-ILS/src/templates/opac/password_reset.tt2
@@ -3,6 +3,7 @@
     INCLUDE "opac/parts/topnav.tt2";
     ctx.page_title = l('Library system password reset request form');
 -%]
+<h2 class="sr-only">[% l('Reset Password') %]</h2>
 <div class="mobile_hide">
 [% INCLUDE "opac/parts/searchbar.tt2" %]
 </div>

diff --git a/Open-ILS/src/templates/opac/place_hold.tt2 b/Open-ILS/src/templates/opac/place_hold.tt2
index 2c1da79..1ca06cc 100644 (file)
--- a/Open-ILS/src/templates/opac/place_hold.tt2
+++ b/Open-ILS/src/templates/opac/place_hold.tt2
@@ -5,6 +5,7 @@
         basic_search = "f";
     END;
     ctx.page_title = l("Place Hold") %]
+    <h2 class="sr-only">[% l('Hold Placement') %]</h2>
     [% INCLUDE "opac/parts/searchbar.tt2" %]
     <div id="content-wrapper">
         <div id="main-content">

diff --git a/Open-ILS/src/templates/opac/record.tt2 b/Open-ILS/src/templates/opac/record.tt2
index 935ebdd..0772c04 100644 (file)
--- a/Open-ILS/src/templates/opac/record.tt2
+++ b/Open-ILS/src/templates/opac/record.tt2
@@ -4,6 +4,7 @@
     ctx.page_title = l("Record Detail");
     IF CGI.param("expand"); basic_search = "f"; END;    
 -%]
+    <h2 class="sr-only">[% l('Record Details') %]</h2>
     [% INCLUDE "opac/parts/searchbar.tt2" %]
     <br class="clear-both" />
     <div id="content-wrapper" class="content-wrapper-record-page">

diff --git a/Open-ILS/src/templates/opac/register.tt2 b/Open-ILS/src/templates/opac/register.tt2
index 1e80cf6..cb04055 100644 (file)
--- a/Open-ILS/src/templates/opac/register.tt2
+++ b/Open-ILS/src/templates/opac/register.tt2
@@ -47,6 +47,7 @@ END;
 
 %]
 
+<h2 class="sr-only">[% l('Account Registration') %]</h2>
 <div id="content-wrapper">
     <div id="main-content-register">
         <div class="common-full-pad"></div>

diff --git a/Open-ILS/src/templates/opac/results.tt2 b/Open-ILS/src/templates/opac/results.tt2
index bbe00ec..eaea066 100644 (file)
--- a/Open-ILS/src/templates/opac/results.tt2
+++ b/Open-ILS/src/templates/opac/results.tt2
@@ -16,6 +16,7 @@
     PROCESS "opac/parts/misc_util.tt2";
     PROCESS get_library;
 -%]
+    <h2 class="sr-only">[% l('Search Results') %]</h2>
     <form action="[% ctx.opac_root %]/results" method="get">
     [% INCLUDE "opac/parts/searchbar.tt2" took_care_of_form=1 %]
     <div class="almost-content-wrapper">

diff --git a/Open-ILS/src/templates/opac/sms_cn.tt2 b/Open-ILS/src/templates/opac/sms_cn.tt2
index 5353a70..f8db37c 100644 (file)
--- a/Open-ILS/src/templates/opac/sms_cn.tt2
+++ b/Open-ILS/src/templates/opac/sms_cn.tt2
@@ -2,6 +2,7 @@
     WRAPPER "opac/parts/base.tt2";
     INCLUDE "opac/parts/topnav.tt2";
     ctx.page_title = l("Send Call Number via Text/SMS") %]
+    <h2 class="sr-only">[% l('Send Call Number via Text/SMS') %]</h2>
     <div class="mobile_hide">
     [% INCLUDE "opac/parts/searchbar.tt2" %]
     </div>

diff --git a/Open-ILS/src/templates/opac/temp_warn.tt2 b/Open-ILS/src/templates/opac/temp_warn.tt2
index 9adbcb5..8aa978d 100644 (file)
--- a/Open-ILS/src/templates/opac/temp_warn.tt2
+++ b/Open-ILS/src/templates/opac/temp_warn.tt2
@@ -3,6 +3,7 @@
     WRAPPER "opac/parts/base.tt2";
     INCLUDE "opac/parts/topnav.tt2";
     ctx.page_title = l("Temporary List Warning") %]
+    <h2 class="sr-only">[% l('Temporary List Warning') %]</h2>
     [% INCLUDE "opac/parts/searchbar.tt2" %]
     <div id="content-wrapper">
         <div id="main-content">