a11y &
video controls
Chris Callahan
Software Engineer, Video
The New York Times
09.21.2017
Overview
The Problem
Videos are not accessible on nytimes.com
❌ semantic markup
❌ text descriptions
❌ keyboard controls
❌ focus styles
Demo
So what?
👋💰💰💰
Bad UX
Progress
Keyboard accessible controls
Semantic markup
<button
class=”...”
title=”Play”
aria-label=”Play”
>
</button>
<input
class=”...”
type=”range”
title=”Adjust Volume”
aria-label=”Adjust Volume”
min=”0”
max=”100”
step=”10”
value=”100”
aria-valuemin=”0”
aria-valuemax=”100”
aria-valuenow=”100”
/>
Keyboard accessible controls
Keyboard controls
Custom focus styles
Demo
Challenges
Technical challenges
Media playback and focus
Impacted elements
// event listener setup
element.addEventListener(‘focus’, () => {
this.focusedElement = element;
});
element.addEventListener(‘blur’, () => {
this.focusedElement = null;
});
// media playback hook
const lastFocusedElement = this.focusedElement;
if (lastFocusedElement) {
setTimeout(() => {
lastFocusedElement.focus();
}, 0);
}
Technical challenges
Focus styles
const onMousedown = (e) => {
e.preventDefault();
if (this.focusedElement) {
this.focusedElement.blur();
this.focusedElement = null;
}
};
elements.forEach((element) => {
element.addEventListener(
‘mousedown’, onMousedown);
});
Technical challenges
Bug with `input` events on <input type=”range”>
Temporary solution
<div
class=”...”
title=”Seek”
tabindex=”0”
role=”slider”
aria-label=”Seek”
aria-valuemin=”0”
aria-valuemax=”150”
aria-valuenow=”0”
aria-valuetext=”0:00 of 2:30”
>
</div>
Organizational challenges
Getting team buy-in
Next steps