Accessibility improvements.

activetable/static/css/activetable.css

@@ -81,15 +81,24 @@
     padding: 6px 10px 0;
     color: #009fe6;
     cursor: pointer;
+    line-height: 2em;
+    box-shadow: none;
+    text-shadow: none;
+    background: none;
+    border: none;
+    outline: none;
 }
 .activetable_block #activetable-help-button:hover {
     color: #bd9730;
 }
 .activetable_block .status {
-    margin: 1.5em 0 0.5em;
     display: inline-block;
+    margin: 1.5em 0 0.5em !important;
     width: 20px;
     height: 20px;
+    text-indent: 100%;
+    white-space: nowrap;
+    overflow: hidden;
     background: url("/static/images/unanswered-icon.png") center no-repeat;
 }
 .activetable_block .status.correct {

activetable/static/js/src/activetable.js

@@ -8,9 +8,11 @@ function ActiveTableXBlock(runtime, element, init_args) {
         var $status_message = $('.status-message', element);
         if (num_total == num_correct) {
             $status.removeClass('incorrect').addClass('correct');
+            $status.text('correct');
             $status_message.text('Great job!');
         } else {
             $status.removeClass('correct').addClass('incorrect');
+            $status.text('incorrect');
             $status_message.text(
                 'You have ' + num_correct + ' out of ' + num_total + ' cells correct.'
             );
@@ -22,8 +24,13 @@ function ActiveTableXBlock(runtime, element, init_args) {
         $.each(correct_dict, function(cell_id, correct) {
             var $cell = $('#' + cell_id, element);
             $cell.removeClass('right-answer wrong-answer unchecked');
-            if (correct) $cell.addClass('right-answer')
-            else $cell.addClass('wrong-answer');
+            if (correct) {
+                $cell.addClass('right-answer');
+                $cell.prop('title', 'correct');
+            } else {
+                $cell.addClass('wrong-answer');
+                $cell.prop('title', 'incorrect');
+            }
             num_total += 1;
             num_correct += correct;
         });

activetable/templates/html/activetable.html

 <div class="activetable_block">
   {% if help_text %}
   <div class="activetable-help" style="width: {{ total_width }}px;">
-    <a id="activetable-help-button">+help</a>
+    <button id="activetable-help-button">+help</button>
     <p id="activetable-help-text">{{ help_text }}</p>
   </div>
   {% endif %}
@@ -35,7 +35,7 @@
   {% else %}
   <p>This component isn't configured properly and can't be displayed.</p>
   {% endif %}
-  <div class="status"></div>
+  <p class="status">unanswered</p>
   <div class="status-message"></div>
   <div class="action">
     <button class="check"><span class="check-label">Check</span><span class="sr"> your answer</span></button>