Merge pull request #93 from edx/giulio/accessibility

A number of important accessibility changes

common/lib/capa/capa/templates/annotationinput.html

@@ -14,7 +14,7 @@
     <div class="block block-comment">${comment}</div>
 
     <div class="block">${comment_prompt}</div>
-    <textarea class="comment" id="input_${id}_comment" name="input_${id}_comment">${comment_value|h}</textarea>
+    <textarea class="comment" id="input_${id}_comment" name="input_${id}_comment" aria-describedby="answer_${id}">${comment_value|h}</textarea>
 
     <div class="block">${tag_prompt}</div>
     <ul class="tags">
@@ -22,11 +22,11 @@
         <li>
             % if has_options_value:
                 % if all([c == 'correct' for c in option['choice'], status]):
-                <span class="tag-status correct" id="status_${id}"></span>
+                <span class="tag-status correct" id="status_${id}" aria-describedby="input_${id}_comment"><span class="sr">Status: Correct</span></span>
                 % elif all([c == 'partially-correct' for c in option['choice'], status]):
-                <span class="tag-status partially-correct" id="status_${id}"></span>
+                <span class="tag-status partially-correct" id="status_${id}" aria-describedby="input_${id}_comment"><span class="sr">Status: Partially Correct</span></span>
                 % elif all([c == 'incorrect' for c in option['choice'], status]):
-                <span class="tag-status incorrect" id="status_${id}"></span>
+                <span class="tag-status incorrect" id="status_${id}" aria-describedby="input_${id}_comment"><span class="sr">Status: Incorrect</span></span>
                 % endif
             % endif
 
@@ -53,11 +53,11 @@
     % endif
 
     % if status == 'unsubmitted':
-    <span class="unanswered" style="display:inline-block;" id="status_${id}"></span>
+    <span class="unanswered" style="display:inline-block;" id="status_${id}" aria-describedby="input_${id}"><span class="sr">Status: Unanswered</span></span>
     % elif status == 'incomplete':
-    <span class="incorrect" id="status_${id}"></span>
+    <span class="incorrect" id="status_${id}" aria-describedby="input_${id}"><span class="sr">Status: Incorrect</span></span>
     % elif status == 'incorrect' and not has_options_value:
-    <span class="incorrect" id="status_${id}"></span>
+    <span class="incorrect" id="status_${id}" aria-describedby="input_${id}"><span class="sr">Status: Incorrect</span></span>
     % endif
 
     <p id="answer_${id}" class="answer answer-annotation"></p>

common/lib/capa/capa/templates/chemicalequationinput.html

@@ -11,13 +11,13 @@
     <div class="incorrect" id="status_${id}">
     % endif
 
-    <input type="text" name="input_${id}" id="input_${id}" data-input-id="${id}" value="${value|h}"
+    <input type="text" name="input_${id}" id="input_${id}" aria-describedby="answer_${id}" data-input-id="${id}" value="${value|h}"
    % if size:
    size="${size}"
    % endif
    />
 
-      <p class="status">
+      <p class="status" aria-describedby="input_${id}">
         % if status == 'unsubmitted':
         unanswered
         % elif status == 'correct':

common/lib/capa/capa/templates/choicegroup.html

@@ -3,12 +3,12 @@
     % if input_type == 'checkbox' or not value:
         % if status == 'unsubmitted' or show_correctness == 'never':
         <span class="unanswered" style="display:inline-block;" id="status_${id}"></span>
-        % elif status == 'correct': 
-        <span class="correct" id="status_${id}"></span>
+        % elif status == 'correct':
+        <span class="correct" id="status_${id}"><span class="sr">Status: correct</span></span>
         % elif status == 'incorrect':
-        <span class="incorrect" id="status_${id}"></span>
+        <span class="incorrect" id="status_${id}"><span class="sr">Status: incorrect</span></span>
         % elif status == 'incomplete':
-        <span class="incorrect" id="status_${id}"></span>
+        <span class="incorrect" id="status_${id}"><span class="sr">Status: incomplete</span></span>
         % endif
     % endif
     </div>
@@ -18,7 +18,7 @@
         % for choice_id, choice_description in choices:
         <label for="input_${id}_${choice_id}"
             % if input_type == 'radio' and ( (isinstance(value, basestring) and (choice_id == value))  or  (not isinstance(value, basestring) and choice_id in value) ):
-            <% 
+            <%
                 if status == 'correct':
                     correctness = 'correct'
                 elif status == 'incorrect':
@@ -31,14 +31,29 @@
             % endif
             % endif
             >
-            <input type="${input_type}" name="input_${id}${name_array_suffix}" id="input_${id}_${choice_id}" value="${choice_id}"
+            <input type="${input_type}" name="input_${id}${name_array_suffix}" id="input_${id}_${choice_id}" aria-describedby="answer_${id}" value="${choice_id}"
             % if input_type == 'radio' and ( (isinstance(value, basestring) and (choice_id == value))  or  (not isinstance(value, basestring) and choice_id in value) ):
-            checked="true" 
+            checked="true"
             % elif input_type != 'radio' and choice_id in value:
             checked="true"
             % endif
 
-            /> ${choice_description} </label>
+            /> ${choice_description}
+
+            % if input_type == 'radio' and ( (isinstance(value, basestring) and (choice_id == value))  or  (not isinstance(value, basestring) and choice_id in value) ):
+            <%
+                if status == 'correct':
+                    correctness = 'correct'
+                elif status == 'incorrect':
+                    correctness = 'incorrect'
+                else:
+                    correctness = None
+            %>
+            % if correctness and not show_correctness=='never':
+            <span class="sr" aria-describedby="input_${id}_${choice_id}">Status: ${correctness}</span>
+            % endif
+            % endif
+        </label>
         % endfor
         <span id="answer_${id}"></span>
     </fieldset>

common/lib/capa/capa/templates/codeinput.html

 <section id="textbox_${id}" class="textbox">
-  <textarea rows="${rows}" cols="${cols}" name="input_${id}" id="input_${id}"
+  <textarea rows="${rows}" cols="${cols}" name="input_${id}" aria-describedby="answer_${id}" id="input_${id}"
        % if hidden:
       	    style="display:none;"
        % endif
@@ -7,13 +7,13 @@
 
   <div class="grader-status">
     % if status == 'unsubmitted':
-      <span class="unanswered" style="display:inline-block;" id="status_${id}">Unanswered</span>
+      <span class="unanswered" style="display:inline-block;" id="status_${id}" aria-describedby="input_${id}"><span class="sr">Status: </span>Unanswered</span>
     % elif status == 'correct':
-      <span class="correct" id="status_${id}">Correct</span>
+      <span class="correct" id="status_${id}" aria-describedby="input_${id}"><span class="sr">Status: </span>Correct</span>
     % elif status == 'incorrect':
-      <span class="incorrect" id="status_${id}">Incorrect</span>
+      <span class="incorrect" id="status_${id}" aria-describedby="input_${id}"><span class="sr">Status: </span>Incorrect</span>
     % elif status == 'queued':
-      <span class="processing" id="status_${id}">Queued</span>
+      <span class="processing" id="status_${id}" aria-describedby="input_${id}"><span class="sr">Status: </span>Queued</span>
       <span style="display:none;" class="xqueue" id="${id}" >${queue_len}</span>
     % endif
 

common/lib/capa/capa/templates/crystallography.html

@@ -20,9 +20,9 @@
     % endif
 
 
-    <input type="text" name="input_${id}" id="input_${id}" value="${value|h}" style="display:none;"/>
+    <input type="text" name="input_${id}" aria-describedby="answer_${id}" id="input_${id}" value="${value|h}" style="display:none;"/>
 
-    <p class="status">
+    <p class="status" aria-describedby="input_${id}">
         % if status == 'unsubmitted':
         unanswered
         % elif status == 'correct':

common/lib/capa/capa/templates/designprotein2dinput.html

@@ -11,12 +11,12 @@
     % elif status == 'incomplete':
     <div class="incomplete" id="status_${id}">
     % endif
-    
+
     <div id="protex_container"></div>
     <input type="hidden" name="target_shape" id="target_shape" value ="${target_shape}"></input>
-    <input type="hidden" name="input_${id}" id="input_${id}" value="${value|h}"/>
+    <input type="hidden" name="input_${id}" id="input_${id}" aria-describedby="answer_${id}" value="${value|h}"/>
 
-    <p class="status">
+    <p class="status" aria-describedby="input_${id}">
       % if status == 'unsubmitted':
       unanswered
       % elif status == 'correct':

common/lib/capa/capa/templates/drag_and_drop_input.html

@@ -19,10 +19,10 @@
     % endif
 
 
-    <input type="text" name="input_${id}" id="input_${id}" value="${value|h}"
+    <input type="text" name="input_${id}" id="input_${id}" aria-describedby="answer_${id}" value="${value|h}"
     style="display:none;"/>
 
-    <p class="status">
+    <p class="status" aria-describedby="input_${id}">
         % if status == 'unsubmitted':
         unanswered
         % elif status == 'correct':

common/lib/capa/capa/templates/editageneinput.html

@@ -11,13 +11,13 @@
     % elif status == 'incomplete':
     <div class="incomplete" id="status_${id}">
     % endif
-    
+
     <div id="genex_container"></div>
     <input type="hidden" name="genex_dna_sequence" id="genex_dna_sequence" value ="${genex_dna_sequence}"></input>
     <input type="hidden" name="genex_problem_number" id="genex_problem_number" value ="${genex_problem_number}"></input>
-    <input type="hidden" name="input_${id}" id="input_${id}" value="${value|h}"/>
+    <input type="hidden" name="input_${id}" aria-describedby="answer_${id}" id="input_${id}" value="${value|h}"/>
 
-    <p class="status">
+    <p class="status" aria-describedby="input_${id}">
       % if status == 'unsubmitted':
       unanswered
       % elif status == 'correct':

common/lib/capa/capa/templates/editamolecule.html

@@ -16,13 +16,13 @@
 
     <br/>
 
-    <input type="hidden" name="input_${id}" id="input_${id}" value="${value|h}"/>
+    <input type="hidden" name="input_${id}" id="input_${id}" aria-describedby="answer_${id}" value="${value|h}"/>
 
     <button id="reset_${id}" class="reset">Reset</button>
 
     <p id="answer_${id}" class="answer"></p>
 
-    <p class="status">
+    <p class="status" aria-describedby="input_${id}">
       % if status == 'unsubmitted':
       unanswered
       % elif status == 'correct':

common/lib/capa/capa/templates/imageinput.html

@@ -5,12 +5,20 @@
   </div>
 
   % if status == 'unsubmitted':
-  <span class="unanswered" style="display:inline-block;" id="status_${id}"></span>
-  % elif status == 'correct': 
-  <span class="correct" id="status_${id}"></span>
+  <span class="unanswered" style="display:inline-block;" id="status_${id}" aria-describedby="input_${id}">
+    <span class="sr">Status: unanswered</span>
+  </span>
+  % elif status == 'correct':
+  <span class="correct" id="status_${id}" aria-describedby="input_${id}">
+    <span class="sr">Status: correct</span>
+  </span>
   % elif status == 'incorrect':
-  <span class="incorrect" id="status_${id}"></span>
+  <span class="incorrect" id="status_${id}" aria-describedby="input_${id}">
+    <span class="sr">Status: incorrect</span>
+  </span>
   % elif status == 'incomplete':
-  <span class="incorrect" id="status_${id}"></span>
+  <span class="incorrect" id="status_${id}" aria-describedby="input_${id}">
+    <span class="sr">Status: incorrect</span>
+  </span>
   % endif
 </span>

common/lib/capa/capa/templates/jstextline.html

@@ -19,13 +19,21 @@
   % endif
 
   % if status == 'unsubmitted':
-  <span class="unanswered" style="display:inline-block;" id="status_${id}"></span>
+  <span class="unanswered" style="display:inline-block;" id="status_${id}" aria-describedby="input_${id}">
+    <span class="sr">Status: unanswered</span>
+  </span>
   % elif status == 'correct':
-  <span class="correct" id="status_${id}"></span>
+  <span class="correct" id="status_${id}" aria-describedby="input_${id}">
+    <span class="sr">Status: correct</span>
+  </span>
   % elif status == 'incorrect':
-  <span class="incorrect" id="status_${id}"></span>
+  <span class="incorrect" id="status_${id}" aria-describedby="input_${id}">
+    <span class="sr">Status: incorrect</span>
+  </span>
   % elif status == 'incomplete':
-  <span class="incorrect" id="status_${id}"></span>
+  <span class="incorrect" id="status_${id}" aria-describedby="input_${id}">
+    <span class="sr">Status: incorrect</span>
+  </span>
   % endif
   % if msg:
     <br/>

common/lib/capa/capa/templates/matlabinput.html

 <section id="textbox_${id}" class="textbox">
-  <textarea rows="${rows}" cols="${cols}" name="input_${id}" id="input_${id}"
+  <textarea rows="${rows}" cols="${cols}" name="input_${id}" aria-describedby="answer_${id}" id="input_${id}"
        % if hidden:
       	    style="display:none;"
        % endif
@@ -7,13 +7,13 @@
 
   <div class="grader-status">
     % if status == 'unsubmitted':
-      <span class="unanswered" style="display:inline-block;" id="status_${id}">Unanswered</span>
+      <span class="unanswered" style="display:inline-block;" id="status_${id}"><span class="sr">Status: </span>Unanswered</span>
     % elif status == 'correct':
-      <span class="correct" id="status_${id}">Correct</span>
+      <span class="correct" id="status_${id}" aria-describedby="input_${id}"><span class="sr">Status: </span>Correct</span>
     % elif status == 'incorrect':
-      <span class="incorrect" id="status_${id}">Incorrect</span>
+      <span class="incorrect" id="status_${id}" aria-describedby="input_${id}"><span class="sr">Status: </span>Incorrect</span>
     % elif status == 'queued':
-      <span class="processing" id="status_${id}">Queued</span>
+      <span class="processing" id="status_${id}" aria-describedby="input_${id}"><span class="sr">Status: </span>Queued</span>
       <span style="display:none;" class="xqueue" id="${id}" >${queue_len}</span>
     % endif
 
@@ -71,7 +71,7 @@
           $(parent_elt).find('.action').after(alert_elem);
           $(parent_elt).find('.capa_alert').css({opacity: 0}).animate({opacity: 1}, 700);
       }
-      
+
 
       // hook up the plot button
       var plot = function(event) {
@@ -97,10 +97,10 @@
               }
           }
 
-          var save_callback = function(response) { 
+          var save_callback = function(response) {
                   if(response.success) {
                       // send information to the problem's plot functionality
-                      Problem.inputAjax(url, input_id, 'plot', 
+                      Problem.inputAjax(url, input_id, 'plot',
                         {'submission': submission}, plot_callback);
                   }
                   else {

common/lib/capa/capa/templates/optioninput.html

 <form class="option-input">
-   <select name="input_${id}" id="input_${id}" >
+   <select name="input_${id}" id="input_${id}" aria-describedby="answer_${id}">
       <option value="option_${id}_dummy_default">  </option>
       % for option_id, option_description in options:
           <option value="${option_id}"
@@ -13,12 +13,20 @@
   <span id="answer_${id}"></span>
 
   % if status == 'unsubmitted':
-  <span class="unanswered" style="display:inline-block;" id="status_${id}"></span>
-  % elif status == 'correct': 
-  <span class="correct" id="status_${id}"></span>
+  <span class="unanswered" style="display:inline-block;" id="status_${id}" aria-describedby="input_${id}">
+    <span class="sr">Status: unsubmitted</span>
+  </span>
+  % elif status == 'correct':
+  <span class="correct" id="status_${id}" aria-describedby="input_${id}">
+    <span class="sr">Status: correct</span>
+  </span>
   % elif status == 'incorrect':
-  <span class="incorrect" id="status_${id}"></span>
+  <span class="incorrect" id="status_${id}" aria-describedby="input_${id}">
+    <span class="sr">Status: incorrect</span>
+  </span>
   % elif status == 'incomplete':
-  <span class="incorrect" id="status_${id}"></span>
+  <span class="incorrect" id="status_${id}" aria-describedby="input_${id}">
+    <span class="sr">Status: incomplete</span>
+  </span>
   % endif
 </form>

common/lib/capa/capa/templates/schematicinput.html

 <span>
-  <input type="hidden" class="schematic" height="${height}" width="${width}" parts="${parts}" analyses="${analyses}" name="input_${id}" id="input_${id}" value="" initial_value=""/>
+  <input type="hidden" class="schematic" height="${height}" width="${width}" parts="${parts}" analyses="${analyses}" name="input_${id}" id="input_${id}" aria-describedby="answer_${id}" value="" initial_value=""/>
 
   <div id="value_${id}" style="display:none">${value}</div>
   <div id="initial_value_${id}" style="display:none">${initial_value}</div>
@@ -13,13 +13,21 @@
 
   <span id="answer_${id}"></span>
   % if status == 'unsubmitted':
-  <span class="ui-icon ui-icon-bullet" style="display:inline-block;" id="status_${id}"></span>
-  % elif status == 'correct': 
-  <span class="ui-icon ui-icon-check" style="display:inline-block;" id="status_${id}"></span>
+  <span class="ui-icon ui-icon-bullet" style="display:inline-block;" id="status_${id}" aria-describedby="input_${id}">
+    <span class="sr">Status: unsubmitted</span>
+  </span>
+  % elif status == 'correct':
+  <span class="ui-icon ui-icon-check" style="display:inline-block;" id="status_${id}" aria-describedby="input_${id}">
+    <span class="sr">Status: correct</span>
+  </span>
   % elif status == 'incorrect':
-  <span class="ui-icon ui-icon-close" style="display:inline-block;" id="status_${id}"></span>
+  <span class="ui-icon ui-icon-close" style="display:inline-block;" id="status_${id}" aria-describedby="input_${id}">
+    <span class="sr">Status: incorrect</span>
+  </span>
   % elif status == 'incomplete':
-  <span class="ui-icon ui-icon-close" style="display:inline-block;" id="status_${id}"></span>
+  <span class="ui-icon ui-icon-close" style="display:inline-block;" id="status_${id}" aria-describedby="input_${id}">
+    <span class="sr">Status: incomplete</span>
+  </span>
   % endif
 </span>
 

common/lib/capa/capa/templates/textline.html

@@ -20,7 +20,7 @@
       <div style="display:none;" name="${hidden}" inputid="input_${id}" />
     % endif
 
-  <input type="text" name="input_${id}" id="input_${id}" value="${value|h}"
+  <input type="text" name="input_${id}" id="input_${id}" aria-describedby="answer_${id}" value="${value|h}"
         % if do_math:
             class="math"
         % endif
@@ -33,7 +33,7 @@
    />
    ${trailing_text | h}
 
-      <p class="status">
+      <p class="status" aria-describedby="input_${id}">
         % if status == 'unsubmitted':
         unanswered
         % elif status == 'correct':

common/lib/capa/capa/templates/vsepr_input.html

@@ -21,11 +21,11 @@
     <div class="incorrect" id="status_${id}">
     % endif
 
-  <input type="text" name="input_${id}" id="input_${id}" value="${value|h}"
+  <input type="text" name="input_${id}" id="input_${id}" aria-describedby="answer_${id}" value="${value|h}"
       style="display:none;"
    />
 
-      <p class="status">
+      <p class="status" aria-describedby="input_${id}">
         % if status == 'unsubmitted':
         unanswered
         % elif status == 'correct':

common/lib/xmodule/xmodule/css/capa/display.scss

@@ -555,6 +555,15 @@ section.problem {
       @extend .blue-button;
     }
 
+    button.show {
+      height: ($baseline*2);
+
+      span {
+        font-size: 1.0em;
+        font-weight: 600;
+      }
+    }
+
     .submission_feedback {
       // background: #F3F3F3;
       // border: 1px solid #ddd;
@@ -811,13 +820,13 @@ section.problem {
       }
       .selected-grade {
         background: #666;
-        color: white; 
+        color: white;
       }
       input[type=radio]:checked + label {
         background: #666;
         color: white; }
       input[class='score-selection'] {
-        display: none; 
+        display: none;
       }
   }
 
@@ -878,11 +887,11 @@ section.problem {
         .tag-status, .tag { padding: .25em .5em; }
       }
     }
-    textarea.comment { 
+    textarea.comment {
       $num-lines-to-show: 5;
       $line-height: 1.4em;
       $padding: .2em;
-      width: 100%; 
+      width: 100%;
       padding: $padding (2 * $padding);
       line-height: $line-height;
       height: ($num-lines-to-show * $line-height) + (2*$padding) - (($line-height - 1)/2);

common/lib/xmodule/xmodule/js/fixtures/problem_content.html

@@ -13,7 +13,7 @@
     <input class="check" type="button" value="Check">
     <input class="reset" type="button" value="Reset">
     <input class="save" type="button" value="Save">
-    <input class="show" type="button" value="Show Answer">
+    <button class="show"><span class="show-label">Show Answer(s)</span> <span class="sr">(for question(s) above - adjacent to each field)</span></button>
     <a href="/courseware/6.002_Spring_2012/${ explain }" class="new-page">Explanation</a>
     <section class="submission_feedback"></section>
   </section>

common/lib/xmodule/xmodule/js/spec/capa/display_spec.coffee

@@ -16,7 +16,7 @@ describe 'Problem', ->
 
     # note that the fixturesPath is set in spec/helper.coffee
     loadFixtures 'problem.html'
- 
+
     spyOn Logger, 'log'
     spyOn($.fn, 'load').andCallFake (url, callback) ->
       $(@).html readFixtures('problem_content.html')
@@ -27,13 +27,13 @@ describe 'Problem', ->
     it 'set the element from html', ->
       @problem999 = new Problem ("
         <section class='xmodule_display xmodule_CapaModule' data-type='Problem'>
-          <section id='problem_999' 
-                   class='problems-wrapper' 
-                   data-problem-id='i4x://edX/999/problem/Quiz' 
+          <section id='problem_999'
+                   class='problems-wrapper'
+                   data-problem-id='i4x://edX/999/problem/Quiz'
                    data-url='/problem/quiz/'>
           </section>
         </section>
-        ")      
+        ")
       expect(@problem999.element_id).toBe 'problem_999'
 
     it 'set the element from loadFixtures', ->
@@ -62,7 +62,7 @@ describe 'Problem', ->
       expect($('section.action input.reset')).toHandleWith 'click', @problem.reset
 
     it 'bind the show button', ->
-      expect($('section.action input.show')).toHandleWith 'click', @problem.show
+      expect($('section.action button.show')).toHandleWith 'click', @problem.show
 
     it 'bind the save button', ->
       expect($('section.action input.save')).toHandleWith 'click', @problem.save
@@ -126,14 +126,14 @@ describe 'Problem', ->
 
     describe 'when the response is correct', ->
       it 'call render with returned content', ->
-        spyOn($, 'postWithPrefix').andCallFake (url, answers, callback) -> 
+        spyOn($, 'postWithPrefix').andCallFake (url, answers, callback) ->
           callback(success: 'correct', contents: 'Correct!')
         @problem.check()
         expect(@problem.el.html()).toEqual 'Correct!'
 
     describe 'when the response is incorrect', ->
       it 'call render with returned content', ->
-        spyOn($, 'postWithPrefix').andCallFake (url, answers, callback) -> 
+        spyOn($, 'postWithPrefix').andCallFake (url, answers, callback) ->
           callback(success: 'incorrect', contents: 'Incorrect!')
         @problem.check()
         expect(@problem.el.html()).toEqual 'Incorrect!'
@@ -159,7 +159,7 @@ describe 'Problem', ->
     it 'POST to the problem reset page', ->
       spyOn $, 'postWithPrefix'
       @problem.reset()
-      expect($.postWithPrefix).toHaveBeenCalledWith '/problem/Problem1/problem_reset', 
+      expect($.postWithPrefix).toHaveBeenCalledWith '/problem/Problem1/problem_reset',
           { id: 'i4x://edX/101/problem/Problem1' }, jasmine.any(Function)
 
     it 'render the returned content', ->
@@ -179,7 +179,7 @@ describe 'Problem', ->
 
       it 'log the problem_show event', ->
         @problem.show()
-        expect(Logger.log).toHaveBeenCalledWith 'problem_show', 
+        expect(Logger.log).toHaveBeenCalledWith 'problem_show',
             problem: 'i4x://edX/101/problem/Problem1'
 
       it 'fetch the answers', ->
@@ -198,7 +198,7 @@ describe 'Problem', ->
       it 'toggle the show answer button', ->
         spyOn($, 'postWithPrefix').andCallFake (url, callback) -> callback(answers: {})
         @problem.show()
-        expect($('.show')).toHaveValue 'Hide Answer'
+        expect($('.show .show-label')).toHaveText 'Hide Answer(s)'
 
       it 'add the showed class to element', ->
         spyOn($, 'postWithPrefix').andCallFake (url, callback) -> callback(answers: {})
@@ -223,7 +223,7 @@ describe 'Problem', ->
           expect($('label[for="input_1_1_3"]')).toHaveAttr 'correct_answer', 'true'
           expect($('label[for="input_1_2_1"]')).not.toHaveAttr 'correct_answer', 'true'
 
-    describe 'when the answers are alreay shown', ->
+    describe 'when the answers are already shown', ->
       beforeEach ->
         @problem.el.addClass 'showed'
         @problem.el.prepend '''
@@ -243,7 +243,7 @@ describe 'Problem', ->
 
       it 'toggle the show answer button', ->
         @problem.show()
-        expect($('.show')).toHaveValue 'Show Answer'
+        expect($('.show .show-label')).toHaveText 'Show Answer(s)'
 
       it 'remove the showed class from element', ->
         @problem.show()
@@ -261,7 +261,7 @@ describe 'Problem', ->
     it 'POST to save problem', ->
       spyOn $, 'postWithPrefix'
       @problem.save()
-      expect($.postWithPrefix).toHaveBeenCalledWith '/problem/Problem1/problem_save', 
+      expect($.postWithPrefix).toHaveBeenCalledWith '/problem/Problem1/problem_save',
           'foo=1&bar=2', jasmine.any(Function)
 
     # TODO: figure out why failing

common/lib/xmodule/xmodule/js/src/capa/display.coffee

@@ -19,12 +19,12 @@ class @Problem
 
     problem_prefix = @element_id.replace(/problem_/,'')
     @inputs = @$("[id^=input_#{problem_prefix}_]")
-    
+
     @$('section.action input:button').click @refreshAnswers
     @$('section.action input.check').click @check_fd
     #@$('section.action input.check').click @check
     @$('section.action input.reset').click @reset
-    @$('section.action input.show').click @show
+    @$('section.action button.show').click @show
     @$('section.action input.save').click @save
 
     # Collapsibles
@@ -44,7 +44,7 @@ class @Problem
   forceUpdate: (response) =>
     @el.attr progress: response.progress_status
     @el.trigger('progressChanged')
-    
+
 
   queueing: =>
     @queued_items = @$(".xqueue")
@@ -59,11 +59,11 @@ class @Problem
   get_queuelen: =>
     minlen = Infinity
     @queued_items.each (index, qitem) ->
-      len = parseInt($.text(qitem))  
+      len = parseInt($.text(qitem))
       if len < minlen
         minlen = len
     return minlen
-    
+
   poll: =>
     $.postWithPrefix "#{@url}/problem_get", (response) =>
       # If queueing status changed, then render
@@ -73,9 +73,9 @@ class @Problem
         JavascriptLoader.executeModuleScripts @el, () =>
           @setupInputTypes()
           @bind()
-      
+
       @num_queued_items = @new_queued_items.length
-      if @num_queued_items == 0 
+      if @num_queued_items == 0
         @forceUpdate response
         delete window.queuePollerID
       else
@@ -83,12 +83,12 @@ class @Problem
         window.queuePollerID = window.setTimeout(@poll, 1000)
 
 
-  # Use this if you want to make an ajax call on the input type object 
+  # Use this if you want to make an ajax call on the input type object
   # static method so you don't have to instantiate a Problem in order to use it
   # Input:
-  #   url: the AJAX url of the problem 
+  #   url: the AJAX url of the problem
   #   input_id: the input_id of the input you would like to make the call on
-  #     NOTE: the id is the ${id} part of "input_${id}" during rendering 
+  #     NOTE: the id is the ${id} part of "input_${id}" during rendering
   #           If this function is passed the entire prefixed id, the backend may have trouble
   #           finding the correct input
   #   dispatch: string that indicates how this data should be handled by the inputtype
@@ -98,7 +98,7 @@ class @Problem
     data['dispatch'] = dispatch
     data['input_id'] = input_id
     $.postWithPrefix "#{url}/input_ajax", data, callback
-    
+
 
   render: (content) ->
     if content
@@ -141,7 +141,7 @@ class @Problem
     Logger.log 'problem_check', @answers
 
     # If there are no file inputs in the problem, we can fall back on @check
-    if $('input:file').length == 0 
+    if $('input:file').length == 0
       @check()
       return
 
@@ -150,7 +150,7 @@ class @Problem
       return
 
     fd = new FormData()
-    
+
     # Sanity checks on submission
     max_filesize = 4*1000*1000 # 4 MB
     file_too_large = false
@@ -195,19 +195,19 @@ class @Problem
 
     abort_submission = file_too_large or file_not_selected or unallowed_file_submitted or required_files_not_submitted
 
-    settings = 
+    settings =
       type: "POST"
       data: fd
       processData: false
       contentType: false
-      success: (response) => 
+      success: (response) =>
         switch response.success
           when 'incorrect', 'correct'
             @render(response.contents)
             @updateProgress response
           else
             @gentle_alert response.success
-    
+
     if not abort_submission
       $.ajaxWithPrefix("#{@url}/problem_check", settings)
 
@@ -260,14 +260,14 @@ class @Problem
           @el.find('.problem > div').each (index, element) =>
             MathJax.Hub.Queue ["Typeset", MathJax.Hub, element]
 
-        @$('.show').val 'Hide Answer'
+        @$('.show-label').text 'Hide Answer(s)'
         @el.addClass 'showed'
         @updateProgress response
     else
       @$('[id^=answer_], [id^=solution_]').text ''
       @$('[correct_answer]').attr correct_answer: null
       @el.removeClass 'showed'
-      @$('.show').val 'Show Answer'
+      @$('.show-label').text 'Show Answer(s)'
 
       @el.find(".capa_inputtype").each (index, inputtype) =>
         display = @inputtypeDisplays[$(inputtype).attr('id')]
@@ -306,7 +306,7 @@ class @Problem
       MathJax.Hub.Queue(['Text', jax, eqn], [@updateMathML, jax, element])
 
     return # Explicit return for CoffeeScript
-    
+
   updateMathML: (jax, element) =>
     try
       $("##{element.id}_dynamath").val(jax.root.toMathML '')

lms/djangoapps/courseware/tests/test_masquerade.py

@@ -64,7 +64,7 @@ class TestStaffMasqueradeAsStudent(LoginEnrollmentTestCase):
     def test_staff_debug_for_staff(self):
         resp = self.get_cw_section()
         sdebug = '<div><a href="#i4x_edX_graded_problem_H1P1_debug" id="i4x_edX_graded_problem_H1P1_trig">Staff Debug Info</a></div>'
-    
+
         self.assertTrue(sdebug in resp.content)
 
 
@@ -84,9 +84,9 @@ class TestStaffMasqueradeAsStudent(LoginEnrollmentTestCase):
 
         resp = self.get_cw_section()
         sdebug = '<div><a href="#i4x_edX_graded_problem_H1P1_debug" id="i4x_edX_graded_problem_H1P1_trig">Staff Debug Info</a></div>'
-    
+
         self.assertFalse(sdebug in resp.content)
-        
+
     def get_problem(self):
         pun = 'H1P1'
         problem_location = "i4x://edX/graded/problem/%s" % pun
@@ -105,7 +105,7 @@ class TestStaffMasqueradeAsStudent(LoginEnrollmentTestCase):
         resp = self.get_problem()
         html = json.loads(resp.content)['html']
         print html
-        sabut = '<input class="show" type="button" value="Show Answer">'
+        sabut = '<button class="show"><span class="show-label">Show Answer(s)</span> <span class="sr">(for question(s) above - adjacent to each field)</span></button>'
         self.assertTrue(sabut in html)
 
     def test_no_showanswer_for_student(self):
@@ -116,5 +116,5 @@ class TestStaffMasqueradeAsStudent(LoginEnrollmentTestCase):
         resp = self.get_problem()
         html = json.loads(resp.content)['html']
         print html
-        sabut = '<input class="show" type="button" value="Show Answer">'
+        sabut = '<button class="show"><span class="show-label">Show Answer(s)</span> <span class="sr">(for question(s) above - adjacent to each field)</span></button>'
         self.assertFalse(sabut in html)

lms/static/sass/base/_base.scss

@@ -209,7 +209,7 @@ mark {
 }
 
 .sr {
-  @include text-sr();
+  @extend .text-sr;
 }
 
 .help-tab {

lms/static/sass/base/_mixins.scss

@@ -14,18 +14,6 @@
   overflow: hidden;
 }
 
-// hidden elems - screenreaders
-@mixin text-sr() {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
 @mixin vertically-and-horizontally-centered ( $height, $width ) {
   left: 50%;
   margin-left: -$width / 2;
@@ -49,4 +37,18 @@
 //-----------------
 @mixin login_register_h1_style {}
 
-@mixin footer_references_style {}
+@mixin footer_references_style {}
\ No newline at end of file
+
+// ====================
+
+// extends -hidden elems - screenreaders
+.text-sr {
+  border: 0;
+  clip: rect(1px 1px 1px 1px);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}

lms/templates/courseware/accordion.html

@@ -3,14 +3,17 @@
 
 <%def name="make_chapter(chapter)">
   <div class="chapter">
-    <h3 ${' class="active"' if 'active' in chapter and chapter['active'] else ''}><a href="#">${chapter['display_name']}</a>
-    </h3>
+      <h3 ${' class="active"' if 'active' in chapter and chapter['active'] else ''} aria-label="${chapter['display_name']}${', current chapter' if 'active' in chapter and chapter['active'] else ''}">
+        <a href="#">
+          ${chapter['display_name']}
+        </a>
+      </h3>
 
     <ul>
       % for section in chapter['sections']:
           <li class="${'active' if 'active' in section and section['active'] else ''} ${'graded'  if 'graded' in section and section['graded'] else ''}">
             <a href="${reverse('courseware_section', args=[course_id, chapter['url_name'], section['url_name']])}">
-              <p>${section['display_name']}</p>
+              <p>${section['display_name']} ${'<span class="sr">, current section</span>' if 'active' in section and section['active'] else ''}</p>
               <p class="subtitle">${section['format']} ${"due " + get_default_time_display(section['due'], show_timezone) if section.get('due') is not None else ''}</p>
             </a>
           </li>

lms/templates/courseware/course_navigation.html

@@ -20,6 +20,9 @@ def url_class(is_active):
           <li>
              <a href="${tab.link | h}" class="${url_class(tab.is_active)}">
                  ${tab.name | h}
+                 % if tab.is_active == True:
+                  <span class="sr">, current location</span>
+                 %endif
                  % if tab.has_img == True:
                     <img src="${tab.img}"/>
                  %endif

lms/templates/courseware/progress.html

@@ -35,7 +35,7 @@ ${progress_graph.body(grade_summary, course.grade_cutoffs, "grade-detail-graph",
       </header>
 
       %if not course.disable_progress_graph:
-        <div id="grade-detail-graph"></div>
+        <div id="grade-detail-graph" aria-hidden="true"></div>
       %endif
 
       <ol class="chapters">
@@ -54,7 +54,12 @@ ${progress_graph.body(grade_summary, course.grade_cutoffs, "grade-detail-graph",
               %>
 
               <h3><a href="${reverse('courseware_section', kwargs=dict(course_id=course.id, chapter=chapter['url_name'], section=section['url_name']))}">
-                ${ section['display_name'] }</a>
+                ${ section['display_name'] }
+                %if total > 0 or earned > 0:
+                  <span class="sr">
+                    ${"{0:.3n} of {1:.3n} possible points".format( float(earned), float(total) )}
+                  </span></a>
+                %endif
                 %if total > 0 or earned > 0:
                   <span> ${"({0:.3n}/{1:.3n}) {2}".format( float(earned), float(total), percentageString )}</span>
                 %endif

lms/templates/login.html

@@ -86,7 +86,7 @@
 
 <section class="login container">
   <section role="main" class="content">
-    <form role="form" id="login-form" method="post" data-remote="true" action="/login_ajax">
+    <form role="form" id="login-form" method="post" data-remote="true" action="/login_ajax" novalidate>
 
       <!-- status messages -->
       <div role="alert" class="status message">
@@ -111,11 +111,11 @@
         <ol class="list-input">
           <li class="field required text" id="field-email">
             <label for="email">E-mail</label>
-            <input class="" id="email" type="email" name="email" value="" placeholder="example: username@domain.com" />
+            <input class="" id="email" type="email" name="email" value="" placeholder="example: username@domain.com" required aria-required="true" />
           </li>
           <li class="field required password" id="field-password">
             <label for="password">Password</label>
-            <input id="password" type="password" name="password" value="" />
+            <input id="password" type="password" name="password" value="" required aria-required="true" />
             <span class="tip tip-input">
               <a href="#forgot-password-modal" rel="leanModal" class="pwd-reset action action-forgotpw">Forgot password?</a>
             </span>

lms/templates/navigation.html

@@ -65,11 +65,11 @@ site_status_msg = get_site_status_msg(course_id)
       <li class="primary">
         <a href="${reverse('dashboard')}" class="user-link">
           <span class="avatar"></span>
-          ${user.username}
+          <span class="sr">Dashboard for: </span> ${user.username}
         </a>
       </li>
       <li class="primary">
-        <a href="#" class="dropdown">&#9662</a>
+        <a href="#" class="dropdown"><span class="sr">More options dropdown</span> &#9662</a>
         <ul class="dropdown-menu">
           <%block name="navigation_dropdown_menu_links" >
             <li><a href="${marketing_link('FAQ')}">Help</a></li>

lms/templates/problem.html

@@ -10,19 +10,19 @@
   ${ problem['html'] }
 
   <section class="action">
-    <input type="hidden" name="problem_id" value="${ problem['name'] }">
+    <input type="hidden" name="problem_id" value="${ problem['name'] }" />
 
     % if check_button:
-    <input class="check ${ check_button }" type="button" value="${ check_button }">
+    <input class="check ${ check_button }" type="button" value="${ check_button }" />
     % endif
     % if reset_button:
-    <input class="reset" type="button" value="Reset">
+    <input class="reset" type="button" value="Reset" />
     % endif
     % if save_button:
-    <input class="save" type="button" value="Save">
+    <input class="save" type="button" value="Save" />
     % endif
     % if answer_available:
-    <input class="show" type="button" value="Show Answer">
+    <button class="show"><span class="show-label">Show Answer(s)</span> <span class="sr">(for question(s) above - adjacent to each field)</span></button>
     % endif
     % if attempts_allowed :
     <section class="submission_feedback">

lms/templates/register.html

@@ -89,7 +89,7 @@
 
 <section class="register container">
   <section role="main" class="content">
-    <form role="form" id="register-form" method="post" data-remote="true" action="/create_account">
+    <form role="form" id="register-form" method="post" data-remote="true" action="/create_account" novalidate>
 
       <!-- status messages -->
       <div role="alert" class="status message">
@@ -115,20 +115,20 @@
         <ol class="list-input">
           <li class="field required text" id="field-email">
             <label for="email">E-mail</label>
-            <input class="" id="email" type="email" name="email" value="" placeholder="example: username@domain.com" />
+            <input class="" id="email" type="email" name="email" value="" placeholder="example: username@domain.com" required aria-required="true" />
           </li>
           <li class="field required password" id="field-password">
             <label for="password">Password</label>
-            <input id="password" type="password" name="password" value="" />
+            <input id="password" type="password" name="password" value="" required aria-required="true" />
           </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" />
+            <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>
           </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" />
+            <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>
           </li>
         </ol>
@@ -143,7 +143,7 @@
         <ol class="list-input">
           <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" />
+            <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>
           </li>
         </ol>
@@ -211,7 +211,7 @@
         <ol class="list-input">
           <li class="field-group">
             <div class="field required checkbox" id="field-tos">
-              <input id="tos-yes" type="checkbox" name="terms_of_service" value="true" />
+              <input id="tos-yes" type="checkbox" name="terms_of_service" value="true" required aria-required="true" />
               <label for="tos-yes">I agree to the <a href="${marketing_link('TOS')}" class="new-vp">Terms of Service</a></label>
             </div>
 

lms/templates/seq_module.html

 <div id="sequence_${element_id}" class="sequence" data-id="${item_id}" data-position="${position}" data-course_modx_root="/course/modx" >
   <nav aria-label="Section Navigation" class="sequence-nav">
+    <ul class="sequence-nav-buttons">
+      <li class="prev"><a href="#">Previous</a></li>
+    </ul>
+    
     <div class="sequence-list-wrapper">
       <ol id="sequence-list">
         % for idx, item in enumerate(items):
@@ -20,7 +24,6 @@
     </div>
 
     <ul class="sequence-nav-buttons">
-      <li class="prev"><a href="#">Previous</a></li>
       <li class="next"><a href="#">Next</a></li>
     </ul>
   </nav>