Merge pull request #1032 from edx/adam/a11y

Adam/a11y

lms/templates/help_modal.html

@@ -9,10 +9,10 @@
 % if settings.MITX_FEATURES.get('ENABLE_FEEDBACK_SUBMISSION', False):
 
 <div class="help-tab">
-  <a href="#help-modal" rel="leanModal">${_("Help")}</a>
+  <a href="#help-modal" rel="leanModal" role="button">${_("Help")}</a>
 </div>
 
-<section id="help-modal" class="modal" aria-hidden="true">
+<section id="help-modal" class="modal" aria-hidden="true" role="dialog" aria-label='${_("{platform_name} Help").format(platform_name=settings.PLATFORM_NAME)}'>
   <div class="inner-wrapper" id="help_wrapper">
     ## TODO: find a way to refactor this
     <a href="#" role="button" class="close-modal" tabindex="0" title="${_('Close Modal')}">&#10005;</a>
@@ -60,16 +60,16 @@ discussion_link = get_discussion_link(course) if course else None
     <form id="feedback_form" class="feedback_form" method="post" data-remote="true" action="/submit_feedback">
       <div id="feedback_error" class="modal-form-error" tabindex="-1"></div>
 % if not user.is_authenticated():
-      <label data-field="name">${_('Name*')}</label>
-      <input name="name" type="text">
-      <label data-field="email">${_('E-mail*')}</label>
-      <input name="email" type="text">
+      <label data-field="name" for="feedback_form_name">${_('Name*')}</label>
+      <input name="name" type="text" id="feedback_form_email" aria-required="true">
+      <label data-field="email" for="feedback_form_email">${_('E-mail*')}</label>
+      <input name="email" type="text" id="feedback_form_email" aria-required="true">
 % endif
-      <label data-field="subject">${_('Briefly describe your issue*')}</label>
-      <input name="subject" type="text">
-      <label data-field="details">${_('Tell us the details*')}
+      <label data-field="subject" for="feedback_form_subject">${_('Briefly describe your issue*')}</label>
+      <input name="subject" type="text" id="feedback_form_subject" aria-required="true">
+      <label data-field="details" for="feedback_form_details">${_('Tell us the details*')}
 <span class="tip">${_('Include error messages, steps which lead to the issue, etc')}</span></label>
-      <textarea name="details"></textarea>
+      <textarea name="details" id="feedback_form_details" aria-required="true"></textarea>
       <input name="issue_type" type="hidden">
 % if course:
       <input name="course_id" type="hidden" value="${course.id | h}">

lms/templates/register.html

@@ -129,13 +129,13 @@
           </li>
           <li class="field required text" id="field-username">
             <label for="username">${_('Public Username')}</label>
-            <input id="username" type="text" name="username" value="" 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="" placeholder="${_('example: JaneDoe')}" required aria-required="true" aria-describedby="username-tip"/>
+            <span class="tip tip-input" id="username-tip">${_('Will be shown in any discussions or forums you participate in')}</span>
           </li>
           <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')}" required aria-required="true" />
-            <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')}" required aria-required="true" 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>
         </ol>