From 2cad6fe261c0711e8559899a59f34f4a331ac32a Mon Sep 17 00:00:00 2001
From: Giulio Gratta <giulio@giuliogratta.com>
Date: Tue, 4 Jun 2013 16:35:13 -0700
Subject: [PATCH 01/24] user button and menu accessiblity hidden span addition

---
 lms/templates/navigation.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lms/templates/navigation.html b/lms/templates/navigation.html
index 104366c8c4..6d25c18af8 100644
--- a/lms/templates/navigation.html
+++ b/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="visuallyhidden">Dashboard for: </span> ${user.username}
         </a>
       </li>
       <li class="primary">
-        <a href="#" class="dropdown">&#9662</a>
+        <a href="#" class="dropdown"><span class="visuallyhidden">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>

From 70332f897b7850d722392d7c3845602eb5bb075b Mon Sep 17 00:00:00 2001
From: Giulio Gratta <giulio@giuliogratta.com>
Date: Tue, 4 Jun 2013 17:51:46 -0700
Subject: [PATCH 02/24] courseware active location, suppress browser form
 validation, and progress graph accessibilit changes

---
 lms/templates/courseware/course_navigation.html | 3 +++
 lms/templates/courseware/progress.html          | 9 +++++++--
 lms/templates/login.html                        | 2 +-
 lms/templates/register.html                     | 2 +-
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/lms/templates/courseware/course_navigation.html b/lms/templates/courseware/course_navigation.html
index ea367873e2..76868ebb99 100644
--- a/lms/templates/courseware/course_navigation.html
+++ b/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="visuallyhidden">, current location</span>
+                 %endif
                  % if tab.has_img == True:
                     <img src="${tab.img}"/>
                  %endif
diff --git a/lms/templates/courseware/progress.html b/lms/templates/courseware/progress.html
index fcd4348f96..f7021c9fd6 100644
--- a/lms/templates/courseware/progress.html
+++ b/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="visuallyhidden">
+                    ${"{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
diff --git a/lms/templates/login.html b/lms/templates/login.html
index d3c3384847..4107a463e1 100644
--- a/lms/templates/login.html
+++ b/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">
diff --git a/lms/templates/register.html b/lms/templates/register.html
index 5339a55cfc..694f94558d 100644
--- a/lms/templates/register.html
+++ b/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">

From 7390b517f09a56b0fb70b6838d113ee30d792880 Mon Sep 17 00:00:00 2001
From: Giulio Gratta <giulio@giuliogratta.com>
Date: Wed, 5 Jun 2013 17:03:27 -0700
Subject: [PATCH 03/24] required labels, active accordion item, move previous
 arrow to before unit sequence

---
 lms/templates/courseware/accordion.html |  9 ++++++---
 lms/templates/login.html                |  4 ++--
 lms/templates/register.html             | 12 ++++++------
 lms/templates/seq_module.html           |  5 ++++-
 4 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/lms/templates/courseware/accordion.html b/lms/templates/courseware/accordion.html
index 157e6e1bec..673543e8eb 100644
--- a/lms/templates/courseware/accordion.html
+++ b/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="visuallyhidden">, 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>
diff --git a/lms/templates/login.html b/lms/templates/login.html
index 4107a463e1..fbd2f6d07c 100644
--- a/lms/templates/login.html
+++ b/lms/templates/login.html
@@ -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>
diff --git a/lms/templates/register.html b/lms/templates/register.html
index 694f94558d..73a6df9319 100644
--- a/lms/templates/register.html
+++ b/lms/templates/register.html
@@ -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>
 
diff --git a/lms/templates/seq_module.html b/lms/templates/seq_module.html
index 304e7834f1..8b94ff5658 100644
--- a/lms/templates/seq_module.html
+++ b/lms/templates/seq_module.html
@@ -1,5 +1,9 @@
 <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>

From 8e30981f6fa2e8b50e30c1b3d2e54701ebf35d00 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Fri, 7 Jun 2013 10:27:42 -0400
Subject: [PATCH 04/24] revises the show/hide answer input to use an HTML
 button element for accessibility purposes

---
 .../lib/xmodule/xmodule/css/capa/display.scss | 17 +++++++--
 .../xmodule/js/fixtures/problem_content.html  |  2 +-
 .../xmodule/js/src/capa/display.coffee        | 38 +++++++++----------
 lms/templates/problem.html                    | 10 ++---
 4 files changed, 38 insertions(+), 29 deletions(-)

diff --git a/common/lib/xmodule/xmodule/css/capa/display.scss b/common/lib/xmodule/xmodule/css/capa/display.scss
index ab23bc1b48..bd131a9ff6 100644
--- a/common/lib/xmodule/xmodule/css/capa/display.scss
+++ b/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);
diff --git a/common/lib/xmodule/xmodule/js/fixtures/problem_content.html b/common/lib/xmodule/xmodule/js/fixtures/problem_content.html
index ffcb5e4682..3e580be722 100644
--- a/common/lib/xmodule/xmodule/js/fixtures/problem_content.html
+++ b/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>
diff --git a/common/lib/xmodule/xmodule/js/src/capa/display.coffee b/common/lib/xmodule/xmodule/js/src/capa/display.coffee
index 70704ab247..987d20b65a 100644
--- a/common/lib/xmodule/xmodule/js/src/capa/display.coffee
+++ b/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 '')
diff --git a/lms/templates/problem.html b/lms/templates/problem.html
index b91b324645..fc49ab7ce7 100644
--- a/lms/templates/problem.html
+++ b/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">

From 4706b83a2ba7ecea034881a7eae26e46a82ebd74 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Fri, 7 Jun 2013 10:38:34 -0400
Subject: [PATCH 05/24] adds in aria attributes and semantic status content for
 textline problems

---
 common/lib/capa/capa/templates/textline.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/common/lib/capa/capa/templates/textline.html b/common/lib/capa/capa/templates/textline.html
index ffc23cc90b..3709ad9033 100644
--- a/common/lib/capa/capa/templates/textline.html
+++ b/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':

From f4ef603d73c3b457dcd8b2d3c489c337f53880c6 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Fri, 7 Jun 2013 10:38:53 -0400
Subject: [PATCH 06/24] adds in aria attributes and semantic status content for
 annotation problems

---
 .../lib/capa/capa/templates/annotationinput.html   | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/common/lib/capa/capa/templates/annotationinput.html b/common/lib/capa/capa/templates/annotationinput.html
index e0172bb13b..145a7c2cad 100644
--- a/common/lib/capa/capa/templates/annotationinput.html
+++ b/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>

From 832e05341b36a1de82dea036fe2818d7ee31b749 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Fri, 7 Jun 2013 10:48:01 -0400
Subject: [PATCH 07/24] adds in aria attributes and semantic status content for
 chem eq problems

---
 common/lib/capa/capa/templates/chemicalequationinput.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/common/lib/capa/capa/templates/chemicalequationinput.html b/common/lib/capa/capa/templates/chemicalequationinput.html
index 17c84114e5..34709c3e5e 100644
--- a/common/lib/capa/capa/templates/chemicalequationinput.html
+++ b/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':

From a84dab0feb6a0e2c212c72ffa4c190f707a1f6dd Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Fri, 7 Jun 2013 11:23:50 -0400
Subject: [PATCH 08/24] adds in aria attributes and semantic status content for
 choicegroup  problems

---
 common/lib/capa/capa/templates/choicegroup.html | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/common/lib/capa/capa/templates/choicegroup.html b/common/lib/capa/capa/templates/choicegroup.html
index c9cc3fd28d..8c30910a9c 100644
--- a/common/lib/capa/capa/templates/choicegroup.html
+++ b/common/lib/capa/capa/templates/choicegroup.html
@@ -3,7 +3,7 @@
     % 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': 
+        % elif status == 'correct':
         <span class="correct" id="status_${id}"></span>
         % elif status == 'incorrect':
         <span class="incorrect" id="status_${id}"></span>
@@ -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':
@@ -28,12 +28,13 @@
             %>
             % if correctness and not show_correctness=='never':
             class="choicegroup_${correctness}"
+            <span class="sr" aria-describedby="input_${id}_${choice_id}">Status: ${correctness}</span>
             % 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

From 31a08bf42fb35441cd92c2177e1d44e0872aaf1b Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Fri, 7 Jun 2013 11:27:21 -0400
Subject: [PATCH 09/24] adds in aria attributes and semantic status content for
 code input problems

---
 common/lib/capa/capa/templates/codeinput.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/common/lib/capa/capa/templates/codeinput.html b/common/lib/capa/capa/templates/codeinput.html
index eb8cad0d70..08ad4ff062 100644
--- a/common/lib/capa/capa/templates/codeinput.html
+++ b/common/lib/capa/capa/templates/codeinput.html
@@ -1,5 +1,5 @@
 <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
 

From 2c91f933e99813b42edeced3d23c71e1c0030c0d Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Fri, 7 Jun 2013 12:33:22 -0400
Subject: [PATCH 10/24] adds in aria attributes and semantic status content for
 crystallography  problems

---
 common/lib/capa/capa/templates/crystallography.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/common/lib/capa/capa/templates/crystallography.html b/common/lib/capa/capa/templates/crystallography.html
index 8dcbff354b..97dbba4f0a 100644
--- a/common/lib/capa/capa/templates/crystallography.html
+++ b/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':

From 254436aad16c1bf94111ec2595f77d9c01acec2a Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Fri, 7 Jun 2013 12:33:45 -0400
Subject: [PATCH 11/24] adds in aria attributes and semantic status content for
 drag and drop problems

---
 common/lib/capa/capa/templates/drag_and_drop_input.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/common/lib/capa/capa/templates/drag_and_drop_input.html b/common/lib/capa/capa/templates/drag_and_drop_input.html
index c186281796..4c2fe50e86 100644
--- a/common/lib/capa/capa/templates/drag_and_drop_input.html
+++ b/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':

From 7ac75eae85080f0c3330e683bdd29d8b17136366 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Fri, 7 Jun 2013 12:34:27 -0400
Subject: [PATCH 12/24] adds in aria attributes and semantic status content for
 editagene problems

---
 common/lib/capa/capa/templates/editageneinput.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/common/lib/capa/capa/templates/editageneinput.html b/common/lib/capa/capa/templates/editageneinput.html
index 5da422ce12..dd389987d4 100644
--- a/common/lib/capa/capa/templates/editageneinput.html
+++ b/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':

From cb78863984b97425b146a5e71fb9a3ab8b7e9ee3 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Fri, 7 Jun 2013 12:34:55 -0400
Subject: [PATCH 13/24] adds in aria attributes and semantic status content for
 editamolecule problems

---
 common/lib/capa/capa/templates/editamolecule.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/common/lib/capa/capa/templates/editamolecule.html b/common/lib/capa/capa/templates/editamolecule.html
index 5658c26e22..235e30099e 100644
--- a/common/lib/capa/capa/templates/editamolecule.html
+++ b/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':

From d1ca8dc2bbef176b272f044f37128d5fd31d71ce Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Fri, 7 Jun 2013 12:35:20 -0400
Subject: [PATCH 14/24] adds in aria attributes and semantic status content for
 image input problems

---
 common/lib/capa/capa/templates/imageinput.html | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/common/lib/capa/capa/templates/imageinput.html b/common/lib/capa/capa/templates/imageinput.html
index 97279c1b8c..2c318370e7 100644
--- a/common/lib/capa/capa/templates/imageinput.html
+++ b/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>

From dba0eb78d3ebdaa377bdece934608f6ead183dba Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Fri, 7 Jun 2013 12:35:44 -0400
Subject: [PATCH 15/24] adds in aria attributes and semantic status content for
 js-text input problems

---
 common/lib/capa/capa/templates/jstextline.html | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/common/lib/capa/capa/templates/jstextline.html b/common/lib/capa/capa/templates/jstextline.html
index 7e5fd94a4b..4ad798bd11 100644
--- a/common/lib/capa/capa/templates/jstextline.html
+++ b/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/>

From 04acd8790f784576c931850d2b357cc4a5bc17cc Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Fri, 7 Jun 2013 12:36:09 -0400
Subject: [PATCH 16/24] adds in aria attributes and semantic status content for
 matlab problems

---
 common/lib/capa/capa/templates/matlabinput.html | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/common/lib/capa/capa/templates/matlabinput.html b/common/lib/capa/capa/templates/matlabinput.html
index 69e412f43e..b63e551ae4 100644
--- a/common/lib/capa/capa/templates/matlabinput.html
+++ b/common/lib/capa/capa/templates/matlabinput.html
@@ -1,5 +1,5 @@
 <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 {

From 2b08db57f04b30f1c6610b0e0754eb777b71be42 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Fri, 7 Jun 2013 12:36:41 -0400
Subject: [PATCH 17/24] adds in aria attributes and semantic status content for
 designprotein2d problems

---
 common/lib/capa/capa/templates/designprotein2dinput.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/common/lib/capa/capa/templates/designprotein2dinput.html b/common/lib/capa/capa/templates/designprotein2dinput.html
index 6733566ab9..d44d853661 100644
--- a/common/lib/capa/capa/templates/designprotein2dinput.html
+++ b/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':

From 9552be6f19b72edaf9e8ec865c8cbfce5170ca53 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Fri, 7 Jun 2013 12:37:04 -0400
Subject: [PATCH 18/24] adds in aria attributes and semantic status content for
 option input problems

---
 .../lib/capa/capa/templates/optioninput.html  | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/common/lib/capa/capa/templates/optioninput.html b/common/lib/capa/capa/templates/optioninput.html
index ac62c0c9cb..9205fe7f3f 100644
--- a/common/lib/capa/capa/templates/optioninput.html
+++ b/common/lib/capa/capa/templates/optioninput.html
@@ -1,5 +1,5 @@
 <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>

From 628b741742ca0359356f15b7b50ecca8c8973024 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Fri, 7 Jun 2013 12:37:59 -0400
Subject: [PATCH 19/24] adds in aria attributes and semantic status content for
 schematic input problems

---
 .../capa/capa/templates/schematicinput.html   | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/common/lib/capa/capa/templates/schematicinput.html b/common/lib/capa/capa/templates/schematicinput.html
index ff8cc64073..d18786d557 100644
--- a/common/lib/capa/capa/templates/schematicinput.html
+++ b/common/lib/capa/capa/templates/schematicinput.html
@@ -1,5 +1,5 @@
 <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>
 

From a377f86095fc84e31129f02bc3909696fc8e15be Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Fri, 7 Jun 2013 12:38:26 -0400
Subject: [PATCH 20/24] adds in aria attributes and semantic status content for
 vsepr input problems

---
 common/lib/capa/capa/templates/vsepr_input.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/common/lib/capa/capa/templates/vsepr_input.html b/common/lib/capa/capa/templates/vsepr_input.html
index 1bac2fd6e2..ab0fafe430 100644
--- a/common/lib/capa/capa/templates/vsepr_input.html
+++ b/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':

From d778f2e9b972264b5ca6c6e5804a89a17c00eeac Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Fri, 7 Jun 2013 14:55:02 -0400
Subject: [PATCH 21/24] updates jasmine tests to correspond to new capa
 template HTML

---
 .../xmodule/js/spec/capa/display_spec.coffee  | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/spec/capa/display_spec.coffee b/common/lib/xmodule/xmodule/js/spec/capa/display_spec.coffee
index 9e2aab0c25..1efaa6c852 100644
--- a/common/lib/xmodule/xmodule/js/spec/capa/display_spec.coffee
+++ b/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

From d74f952b3716810bbfd56afb99cfb0a0e676d53c Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Fri, 7 Jun 2013 15:26:30 -0400
Subject: [PATCH 22/24] updates masquerade unit test to account for new show
 answer button with problems

---
 lms/djangoapps/courseware/tests/test_masquerade.py | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/lms/djangoapps/courseware/tests/test_masquerade.py b/lms/djangoapps/courseware/tests/test_masquerade.py
index 11cdc4c1f9..f9ddf88b5f 100644
--- a/lms/djangoapps/courseware/tests/test_masquerade.py
+++ b/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)

From 47f91e79c42102446cba3dee41518cd072225aa2 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Fri, 7 Jun 2013 15:29:21 -0400
Subject: [PATCH 23/24] adds in status for overall problem status indicator and
 replicates needed correctness django logic to show individual choice status

---
 .../lib/capa/capa/templates/choicegroup.html  | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/common/lib/capa/capa/templates/choicegroup.html b/common/lib/capa/capa/templates/choicegroup.html
index 8c30910a9c..17f7efcec4 100644
--- a/common/lib/capa/capa/templates/choicegroup.html
+++ b/common/lib/capa/capa/templates/choicegroup.html
@@ -4,11 +4,11 @@
         % 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>
+        <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>
@@ -28,7 +28,6 @@
             %>
             % if correctness and not show_correctness=='never':
             class="choicegroup_${correctness}"
-            <span class="sr" aria-describedby="input_${id}_${choice_id}">Status: ${correctness}</span>
             % endif
             % endif
             >
@@ -39,7 +38,22 @@
             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>

From 443a50845aed5839affb8a215632426299a3f8a2 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Mon, 10 Jun 2013 17:21:20 -0400
Subject: [PATCH 24/24] lms - adds back in missing/previously added .sr screen
 reader-focused styling and references in place of the .visuallyhidden
 application

---
 lms/static/sass/base/_base.scss               |  2 +-
 lms/static/sass/base/_mixins.scss             | 28 ++++++++++---------
 lms/templates/courseware/accordion.html       |  2 +-
 .../courseware/course_navigation.html         |  2 +-
 lms/templates/courseware/progress.html        |  2 +-
 lms/templates/navigation.html                 |  4 +--
 6 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/lms/static/sass/base/_base.scss b/lms/static/sass/base/_base.scss
index 6f43a02df7..9314877249 100644
--- a/lms/static/sass/base/_base.scss
+++ b/lms/static/sass/base/_base.scss
@@ -209,7 +209,7 @@ mark {
 }
 
 .sr {
-  @include text-sr();
+  @extend .text-sr;
 }
 
 .help-tab {
diff --git a/lms/static/sass/base/_mixins.scss b/lms/static/sass/base/_mixins.scss
index 0b2b82dad8..4060c36f5f 100644
--- a/lms/static/sass/base/_mixins.scss
+++ b/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 {}
\ No newline at end of file
+@mixin footer_references_style {}
+
+// ====================
+
+// 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;
+}
diff --git a/lms/templates/courseware/accordion.html b/lms/templates/courseware/accordion.html
index 673543e8eb..5b9c6f7450 100644
--- a/lms/templates/courseware/accordion.html
+++ b/lms/templates/courseware/accordion.html
@@ -13,7 +13,7 @@
       % 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']} ${'<span class="visuallyhidden">, current section</span>' if 'active' in section and section['active'] else ''}</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>
diff --git a/lms/templates/courseware/course_navigation.html b/lms/templates/courseware/course_navigation.html
index 76868ebb99..98329b9836 100644
--- a/lms/templates/courseware/course_navigation.html
+++ b/lms/templates/courseware/course_navigation.html
@@ -21,7 +21,7 @@ def url_class(is_active):
              <a href="${tab.link | h}" class="${url_class(tab.is_active)}">
                  ${tab.name | h}
                  % if tab.is_active == True:
-                  <span class="visuallyhidden">, current location</span>
+                  <span class="sr">, current location</span>
                  %endif
                  % if tab.has_img == True:
                     <img src="${tab.img}"/>
diff --git a/lms/templates/courseware/progress.html b/lms/templates/courseware/progress.html
index f7021c9fd6..bf1414cc07 100644
--- a/lms/templates/courseware/progress.html
+++ b/lms/templates/courseware/progress.html
@@ -56,7 +56,7 @@ ${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'] }
                 %if total > 0 or earned > 0:
-                  <span class="visuallyhidden">
+                  <span class="sr">
                     ${"{0:.3n} of {1:.3n} possible points".format( float(earned), float(total) )}
                   </span></a>
                 %endif
diff --git a/lms/templates/navigation.html b/lms/templates/navigation.html
index 6d25c18af8..190a58f691 100644
--- a/lms/templates/navigation.html
+++ b/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>
-          <span class="visuallyhidden">Dashboard for: </span> ${user.username}
+          <span class="sr">Dashboard for: </span> ${user.username}
         </a>
       </li>
       <li class="primary">
-        <a href="#" class="dropdown"><span class="visuallyhidden">More options dropdown</span> &#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>