All buttons have an ARIA role, name , and state

common/lib/xmodule/xmodule/js/src/video/04_video_control.js

@@ -63,10 +63,21 @@ function () {
             state.videoControl.el.addClass('html5');
             state.controlHideTimeout = setTimeout(state.videoControl.hideControls, state.videoControl.fadeOutTimeout);
         }
+
         // ARIA
-        // Let screen readers know these anchors behaves like a button.
+        // Let screen readers know that:
+
+        // these anchors behaves like buttons
         state.videoControl.playPauseEl.attr('role', gettext('button'));
         state.videoControl.fullScreenEl.attr('role', gettext('button'));
+
+        // what their names are: (title attribute are set in video.html template):
+        // Play, Pause
+        // Fill browser
+        
+        // what their states are:
+        state.videoControl.playPauseEl.attr('aria-disabled', 'false');
+        state.videoControl.fullScreenEl.attr('aria-disabled', 'false');
     }
 
     // function _bindHandlers(state)

common/lib/xmodule/xmodule/js/src/video/05_video_quality_control.js

@@ -43,9 +43,18 @@ function () {
 
         state.videoQualityControl.el.show();
         state.videoQualityControl.quality = null;
+
         // ARIA
-        // Let screen readers know this anchor behaves like a button.
+        // Let screen readers know that:
+
+        // this anchor behaves like a button
         state.videoQualityControl.el.attr('role', gettext('button'));
+
+        // what its name is: (title attribute is set in video.html template):
+        // HD
+        
+        // what its state is:
+        state.videoQualityControl.el.attr('aria-disabled', 'false');
     }
 
     // function _bindHandlers(state)

common/lib/xmodule/xmodule/js/src/video/07_video_volume_control.js

@@ -62,9 +62,18 @@ function () {
         });
 
         state.videoVolumeControl.el.toggleClass('muted', state.videoVolumeControl.currentVolume === 0);
+
         // ARIA
-        // Let screen readers know this anchor behaves like a button.
+        // Let screen readers know that:
+
+        // this anchor behaves like a button
         state.videoVolumeControl.buttonEl.attr('role', gettext('button'));
+
+        // what its name is: (title attribute is set in video.html template):
+        state.videoVolumeControl.buttonEl.attr('aria-label', gettext('Volume'));
+
+        // what its state is:
+        state.videoVolumeControl.buttonEl.attr('aria-disabled', 'false');
     }
 
     /**

common/lib/xmodule/xmodule/js/src/video/08_video_speed_control.js

@@ -79,9 +79,18 @@ function () {
         });
 
         state.videoSpeedControl.setSpeed(state.speed);
+
         // ARIA
-        // Let screen readers know this anchor behaves like a button.
+        // Let screen readers know that:
+
+        // this anchor behaves like a button
         state.videoSpeedControl.el.children('a').attr('role', gettext('button'));
+
+        // what its name is: (title attribute is set in video.html template):
+        state.videoSpeedControl.el.children('a').attr('aria-label', 'Speeds');
+        
+        // what its state is:
+        state.videoSpeedControl.el.children('a').attr('aria-disabled', 'false');
     }
 
     /**

common/lib/xmodule/xmodule/js/src/video/09_video_caption.js

@@ -105,9 +105,18 @@ function () {
             this.videoCaption.hideCaptions(true);
             this.videoCaption.hideSubtitlesEl.hide();
         }
+
         // ARIA
-        // Let screen readers know this anchor behaves like a button.
-        this.videoCaption.hideSubtitlesEl.attr('role', gettext('button'));
+        // Let screen readers know that:
+
+        // this anchor behaves like a button
+         this.videoCaption.hideSubtitlesEl.attr('role', gettext('button'));
+        // what its name is:
+        // what its name is: (title attribute is set in video.html template):
+        // Speeds
+        
+        // what its state is:
+        this.videoCaption.hideSubtitlesEl.attr('aria-disabled', 'false');
     }
 
     // function bindHandlers()

lms/templates/video.html

@@ -66,7 +66,7 @@
                         <a href="#" class="add-fullscreen" title="${_('Fill browser')}">${_('Fill browser')}</a>
                         <a href="#" class="quality_control" title="${_('HD')}">${_('HD')}</a>
 
-                        <a href="#" class="hide-subtitles" title="${_('Turn off captions')}">${_('Captions')}</a>
+                        <a href="#" class="hide-subtitles" title="${_('Turn off captions')}">${_('Turn off captions')}</a>
                     </div>
                 </div>
             </section>