JBAS-2232 Patron self-reg WCAG fixes

Signed-off-by: Bill Erickson <berickxx@gmail.com>

diff --git a/KCLS/openils/var/templates_kcls/opac/register.tt2 b/KCLS/openils/var/templates_kcls/opac/register.tt2
index 265ba5c..d541596 100644 (file)
--- a/KCLS/openils/var/templates_kcls/opac/register.tt2
+++ b/KCLS/openils/var/templates_kcls/opac/register.tt2
@@ -115,7 +115,7 @@ END; # input_field()
 }
 .patron-reg-required {
     font-weight: bold;
-    color: red;
+    color: #961212;
 }
 .card-style-option {
   text-align:center;
@@ -241,7 +241,7 @@ END; # input_field()
 [% ctx.bc_header %]
 <!-- BC END HEADER -->
 
-<div id="content-wrapper">
+<div id="content-wrapper" role="main">
   <div id="main-content-register">
 
   <div id='main-content-left'>
@@ -341,14 +341,14 @@ END; # input_field()
         [%# if there is only one type of card, hide the selector %]
         [% IF keychain_cards.size > 0 AND wallet_cards.size > 0 %]
         <li>
-          <label>Choose a card size....</label>
+          <label id='card-size-label'>Choose a card size....</label>
           <span class="patron-reg-required">*</span>
           <div>
             <ul>
               <li>
                 <input type="radio" name='card-type' id="card-type-wallet" 
                   onclick="show_card_types('wallet')">
-                <label for="">Wallet Size (3in x 2in)</label>
+                <label for="card-type-wallet">Wallet Size (3in x 2in)</label>
               </li>
               <!--
               <li>
@@ -372,17 +372,20 @@ END; # input_field()
         <li id='wallet-cards' 
           [% IF keychain_cards.size > 0 %]style='display:none'[% END %]>
           [% IF keychain_cards.size > 0 %]
-          <label>Wallet Options</label>
+          <label id='card-choice-1'>Wallet Options</label>
           [% ELSE %]
-          <label>Choose a card:</label><br/><br/>
+          <label id='card-choice-1'>Choose a card:</label><br/><br/>
           [% END %]
           <div class="grid">
             [% FOR ctype IN wallet_cards %]
             <div class="grid-cell">
               <div><img class="card-img" src="[% card_url _ ctype _ '.png' %]"
+                alt="Card Option [% ctype %]"
                 onclick="select_card('[% ctype %]')"/></div>
+              <label hidden id='card-option-[% ctype %]'>[% ctype %]</label>
               <div class="card-style-option">
                 <input [% IF loop.first %]id='first-wallet-card'[% END %]
+                  aria-labelledby='card-choice-1 card-option-ctype-[% ctype %]'
                   type="radio" name="stgsc.10" value="[% ctype %]"/>
               </div>
             </div>
@@ -393,9 +396,9 @@ END; # input_field()
         <li id='keychain-cards' 
           [% IF wallet_cards.size > 0 %]style='display:none'[% END %]>
           [% IF wallet_cards.size > 0 %]
-          <label>Wallet-Key Combo Options</label>
+          <label id='card-choice-2'>Wallet-Key Combo Options</label>
           [% ELSE %]
-          <label>Choose a card (Wallet-Key Combo):</label><br/><br/>
+          <label id='card-choice-2'>Choose a card (Wallet-Key Combo):</label><br/><br/>
           [% END %]
 
           <div class="grid">
@@ -408,9 +411,12 @@ END; # input_field()
                 [% card_idx = card_idx + 1; %]
             <div class="grid-cell">
               <div><img class="card-img" src="[% card_url _ ctype _ '.png' %]"
+                alt="Card Option [% ctype %]"
                 onclick="select_card('[% ctype %]')"/></div>
+              <label hidden id='card-option-[% ctype %]'>[% ctype %]</label>
               <div class="card-style-option">
                 <input [% IF loop.first %]id='first-keychain-card'[% END %]
+                  aria-labelledby='card-choice-2 card-option-[% ctype %]'
                   type="radio" name="stgsc.10" value="[% ctype %]"/>
               </div>
             </div>
@@ -420,27 +426,31 @@ END; # input_field()
         </li>
 
         <li>
-          <label>Choose delivery method of your new library card:</label>
+          <label id='delivery-label'>
+            Choose delivery method of your new library card:
+          </label>
           <div>
             <ul>
               <li>
                 <input type='radio' name='stgu.delivery_method' 
+                  aria-labelledby='delivery-label delivery-by-mail'
                   value='Mail' [% IF !kiosk %]checked='checked'[% END %]/>
-                <label>Mail to me 
+                <label id='delivery-by-mail'>Mail to me 
                   <span style='font-size:85%'>(Delivered within 1-2 weeks)</span>
                 </label>
               </li>
               <li>
                 <input type='radio' name='stgu.delivery_method' 
+                  aria-labelledby='delivery-label delivery-by-pickup'
                   value='Pick up' [% IF kiosk %]checked='checked'[% END %]/>
-                <label>I will pick up at my home library</label>
+                <label id='delivery-by-pickup'>I will pick up at my home library</label>
               </li>
             </ul>
           </div>
         </li>
 
         <li><h2>Your Information</h2></li>
-        <hr/>
+        <li><hr/></li>
 
         <li><h3>Name</h3></li>
         <li>
@@ -546,7 +556,7 @@ END; # input_field()
         </li>
 
         <li><h2>Contact Preferences</h2></li>
-        <hr/>
+        <li><hr/></li>
 
         <li>
           <label>May we contact you?</label>
@@ -717,6 +727,7 @@ END; # input_field()
             img_width => 79,
             img_height => 20},
           { label => 'Chinese',
+            label2 => 'Mandarin'
             pdf => 'CHINESE%20KCLS%20600%20Library%20Card%20Application.pdf',
             img => 'cantonese.gif',
             img2 => 'Mandarin.gif',
@@ -764,6 +775,7 @@ END; # input_field()
             <li>
               <a href='[% app_url %]/[% lang.pdf %]'>
                 <img src='[% text_img_url %]/[% lang.img %]'
+                  alt="Instructions for [% lang.label %]"
                   width="[% lang.img_width %]"
                   height="[% lang.img_height %]"
                 />
@@ -771,6 +783,7 @@ END; # input_field()
               [% IF lang.img2 %]
               <a href='[% app_url %]/[% lang.pdf %]'>
                 <img src='[% text_img_url %]/[% lang.img2 %]'
+                  alt="Instructions for [% lang.label2 %]"
                   width="[% lang.img2_width %]"
                   height="[% lang.img2_height %]"
                 />