diff --git a/common/lib/xmodule/xmodule/js/src/video/04_video_control.js b/common/lib/xmodule/xmodule/js/src/video/04_video_control.js index 1e1450dc54..f31ed1caee 100644 --- a/common/lib/xmodule/xmodule/js/src/video/04_video_control.js +++ b/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) diff --git a/common/lib/xmodule/xmodule/js/src/video/05_video_quality_control.js b/common/lib/xmodule/xmodule/js/src/video/05_video_quality_control.js index e996ce5213..5788cd6291 100644 --- a/common/lib/xmodule/xmodule/js/src/video/05_video_quality_control.js +++ b/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) diff --git a/common/lib/xmodule/xmodule/js/src/video/07_video_volume_control.js b/common/lib/xmodule/xmodule/js/src/video/07_video_volume_control.js index 3f31ddc75e..9eda8eade7 100644 --- a/common/lib/xmodule/xmodule/js/src/video/07_video_volume_control.js +++ b/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'); } /** diff --git a/common/lib/xmodule/xmodule/js/src/video/08_video_speed_control.js b/common/lib/xmodule/xmodule/js/src/video/08_video_speed_control.js index 4b9f532e43..0ec9a5a96f 100644 --- a/common/lib/xmodule/xmodule/js/src/video/08_video_speed_control.js +++ b/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'); } /** diff --git a/common/lib/xmodule/xmodule/js/src/video/09_video_caption.js b/common/lib/xmodule/xmodule/js/src/video/09_video_caption.js index 57bb2a38d1..d606245420 100644 --- a/common/lib/xmodule/xmodule/js/src/video/09_video_caption.js +++ b/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() diff --git a/lms/templates/video.html b/lms/templates/video.html index 3d0b9bd936..1974a08e6e 100644 --- a/lms/templates/video.html +++ b/lms/templates/video.html @@ -66,7 +66,7 @@ ${_('Fill browser')} ${_('HD')} - ${_('Captions')} + ${_('Turn off captions')}