Merge pull request #1059 from edx/talbs/fix-a11y-accounts

Accessibility: Account-based Template Follow-up

lms/static/sass/multicourse/_account.scss

@@ -208,7 +208,7 @@
       margin-bottom: $baseline;
     }
 
-    fieldset {
+    .group-form {
       margin: 0;
       padding-top: 0;
       padding-bottom: $baseline;

lms/templates/login.html

@@ -90,7 +90,7 @@
 
 <section class="introduction">
   <header>
-    <h1 class="sr">${_("PLEASE LOG IN to access your account and courses")}</h1>
+    <h1 class="sr">${_("Please log in to access your account and courses")}</h1>
   </header>
 </section>
 
@@ -114,8 +114,8 @@
         ${_('Please provide the following information to log into your {platform_name} account. Required fields are noted by <strong class="indicator">bold text and an asterisk (*)</strong>.').format(platform_name=settings.PLATFORM_NAME)}
       </p>
 
-      <fieldset class="group group-form group-form-requiredinformation">
-        <legend class="sr">${_('Required Information')}</legend>
+      <div class="group group-form group-form-requiredinformation">
+        <h2 class="sr">${_('Required Information')}</h2>
 
         <ol class="list-input">
           <li class="field required text" id="field-email">
@@ -131,10 +131,10 @@
             </span>
           </li>
         </ol>
-      </fieldset>
+      </div>
 
-      <fieldset class="group group-form group-form-secondary group-form-accountpreferences">
-        <legend class="sr">${_('Account Preferences')}</legend>
+      <div class="group group-form group-form-secondary group-form-accountpreferences">
+        <h2 class="sr">${_('Account Preferences')}</h2>
 
         <ol class="list-input">
           <li class="field required checkbox" id="field-remember">
@@ -142,7 +142,7 @@
             <label for="remember-yes">${_('Remember me')}</label>
           </li>
         </ol>
-      </fieldset>
+      </div>
 
 % if course_id and enrollment_action:
       <input type="hidden" name="enrollment_action" value="${enrollment_action | h}" />

lms/templates/register.html

@@ -113,8 +113,8 @@
         ${_('Required fields are noted by <strong class="indicator">bold text and an asterisk (*)</strong>.')}
       </p>
 
-      <fieldset class="group group-form group-form-requiredinformation">
-        <legend class="sr">${_('Required Information')}</legend>
+      <div class="group group-form group-form-requiredinformation">
+        <h2 class="sr">${_('Required Information')}</h2>
 
         % if has_extauth_info is UNDEFINED:
 
@@ -159,16 +159,16 @@
 
           <li class="field required text" id="field-username">
             <label for="username">${_('Public Username')}</label>
-            <input id="username" type="text" name="username" value="${extauth_username}" placeholder="${_('example: JaneDoe')}" required aria-required="true" />
-            <span class="tip tip-input">${_('Will be shown in any discussions or forums you participate in')}</span>
+            <input id="username" type="text" name="username" value="${extauth_username}" placeholder="${_('example: JaneDoe')}" required aria-required="true" aria-describedby="username-tip" />
+            <span class="tip tip-input" id="id="username-tip>${_('Will be shown in any discussions or forums you participate in')}</span>
           </li>
 
           % if ask_for_fullname:
 
           <li class="field required text" id="field-name">
             <label for="name">${_('Full Name')}</label>
-            <input id="name" type="text" name="name" value="" placeholder="$_('example: Jane Doe')}" />
-            <span class="tip tip-input">${_("Needed for any certificates you may earn <strong>(cannot be changed later)</strong>")}</span>
+            <input id="name" type="text" name="name" value="" placeholder="$_('example: Jane Doe')}" aria-describedby="name-tip" />
+            <span class="tip tip-input" id="name-tip">${_("Needed for any certificates you may earn <strong>(cannot be changed later)</strong>")}</span>
           </li>
 
           % endif
@@ -176,10 +176,10 @@
         </ol>
 
         % endif
-      </fieldset>
+      </div>
 
-      <fieldset class="group group-form group-form-secondary group-form-personalinformation">
-        <legend class="sr">${_("Optional Personal Information")}</legend>
+      <div class="group group-form group-form-secondary group-form-personalinformation">
+        <h2 class="sr">${_("Optional Personal Information")}</h2>
 
         <ol class="list-input">
           <li class="field-group">
@@ -214,10 +214,10 @@
             </div>
           </li>
         </ol>
-      </fieldset>
+      </div>
 
-      <fieldset class="group group-form group-form-personalinformation2">
-        <legend class="sr">${_("Optional Personal Information")}</legend>
+      <div class="group group-form group-form-personalinformation2">
+        <h2 class="sr">${_("Optional Personal Information")}</h2>
 
         <ol class="list-input">
           <li class="field text" id="field-address-mailing">
@@ -230,10 +230,10 @@
             <textarea id="goals" name="goals" value=""></textarea>
           </li>
         </ol>
-      </fieldset>
+      </div>
 
-      <fieldset class="group group-form group-form-accountacknowledgements">
-        <legend class="sr">${_("Account Acknowledgements")}</legend>
+      <div class="group group-form group-form-accountacknowledgements">
+        <h2 class="sr">${_("Account Acknowledgements")}</h2>
 
         <ol class="list-input">
           <li class="field-group">
@@ -264,7 +264,7 @@
             </div>
           </li>
         </ol>
-      </fieldset>
+      </div>
 
 % if course_id and enrollment_action:
       <input type="hidden" name="enrollment_action" value="${enrollment_action | h}" />