Accessibility review

rate/rate.py

@@ -117,7 +117,9 @@ class RateXBlock(XBlock):
         # Now, we render the RateXBlock. This may be redundant, since we
         # don't always show it.
         html = self.resource_string("static/html/rate.html")
-        scale_item = u'<input id="radio_{i}" type="radio" name="rate_scale" class="rate_radio" title="{level}" {active}><label for="radio_{i}" title="{level}">{icon}<span class="rate_sr_text">{level}</span></label></input>'
+        # The replace allows us to format the HTML nicely without getting
+        # extra whitespace
+        scale_item = self.resource_string("static/html/scale_item.html").replace('\n','')
         indexes = range(len(prompt['icons']))
         active_vote = ["checked" if i == self.user_vote else "" for i in indexes]
         scale = u"".join(scale_item.format(level=level, icon=icon, i=i, active=active) for (level,icon,i,active) in zip(prompt['mouseovers'], prompt['icons'], indexes, active_vote))

rate/static/css/rate.css

@@ -24,6 +24,10 @@
     border-radius:5px;
 }
 
+.rate_block .rate_likert_header {
+    
+}
+
 .rate_block .rate_freeform_input {
     margin-bottom: 1em;
 }
@@ -40,7 +44,7 @@
 
 .rate_block .rate_radio {
     opacity:0;
-    width:0;
+    width:1px;
     padding:0;
     margin:0;
 }
@@ -61,11 +65,21 @@
     display:inline;
 }
 
-.rate_block input[type="radio"]:checked + label{
+.rate_block .rate_likert_field {
+    border-style:none;
+}
+
+.rate_block input[type="radio"]:checked + span{
    background-color:yellow;
    font-weight:bold;
 }
 
+.rate_block input[type="radio"]:focus + span{
+   border-style:solid;
+   border-width: 1px;
+   border-color: #999999;
+}
+
 .rate_block .rate_submit_feedback {
     width:100%;
 }

rate/static/html/rate.html

 <div class="rate_block">
-<div class="rate_header">{freeform_prompt}</div>
+<label class="rate_header" for="rate_freeform_textarea">{freeform_prompt}</label>
 <div class="rate_freeform_input">
-  <textarea class="rate_freeform_area" rows="4" cols="30">{self.user_freeform}</textarea>
+  <textarea id="rate_freeform_textarea" class="rate_freeform_area" rows="4" cols="30">{self.user_freeform}</textarea>
   <div class="rate_thank_you">Thank you!</div>
 </div>
-<div class="rate_likert_header">{likert_prompt}</div>
+<fieldset class="rate_likert_field">
+<legend class="rate_likert_header">{likert_prompt}</legend>
 <div class="rate_likert_scale">  <form action="">{scale}</form></div>
+</fieldset>
 <button type="submit" class="rate_submit_feedback"> Submit Feedback </button>
 </div>

rate/static/html/scale_item.html

+<label title="{level}">
+<input id="radio_{i}" name="rate_scale" class="rate_radio" type="radio" {active}>
+<span aria-hidden="true">{icon}</span>
+<span class="rate_sr_text">{level}</span>
+</label>