Accessibility & Multi-Screen Design: Audio, Video & Animation
A presentation at #cos19 by Eric Eggert
Audio, Video & Animation Accessibility & Multi-Screen Design Eric Eggert — Accessibility & Multi-Screen Design – #cos19
Audio
Audio Player Example
User needs to be in control
Never autostart audio
audio element
Video
Video Player Example
Going beyond technical accessibility
Four UX Principles → Give users choice. → Put users in control. → Design with familiarity in mind. → Prioritize features that add value.
Accessibility Originates With UX: A BBC iPlayer Case Study by Henny Swan
video element
How do audio and video elements work?
Support
Audio
Video
Multiple Formats <video width=”320” height=”240” controls> <source src=”video-file.mp4” type=”video/mp4”> <source src=”video-file.webm” type=”video/webm”> </video>
webM (open, free, current)
H.264 (proprietary)
AV1 (open, free, next-gen)
H.265/HEVC (proprietary, future)
Media Queries <video> <source src=”lowres.mp4” media=”max-width: 500px”> <source src=”highres.mp4”> </video>
Interesting Attributes → poster → controls – display start/stop/volume controls → autoplay – starts the resource on load (don’t → loop → muted use!) — displays an image when stopped – loops the media resource – starts muted
On Autoplay
Video Players SWS 1 “See what sucks” (videosws.praegnanz.de) 1
Audio works the same way → OGG (open, free) → MP3 (proprietary)
If the longest-running patent mentioned in the aforementioned references is taken as a measure, then the MP3 technology became patent-free in the United States on 16 April 2017 when U.S. Patent 6,009,399, held by and administered by Technicolor, expired. — Marco Arment
MP3 is supported by everything, everywhere, and is now patent-free.
Both elements are completely scriptable. var video = document.getElementById(‘video’); var playpause = document.getElementById(‘playpause’); video.onpause = function(e) { playpause.value = ‘Play’; playpause.onclick = function(e) { video.play(); } } video.onplay = funtion(e) { playpause.value = ‘Pause’; playpause.onclick = function(e) { video.pause(); } }
How to make Audio and Video accessible
Transcripts → The Web Ahead → TED – A Magna Carta for the web
Captions → TED – A Magna Carta for the web
Use <track> for captions 2 <video src=”foo.ogv”> <track kind=”captions” label=”English captions” src=”subtitles_en.vtt” srclang=”en” default> </track> <track kind=”captions” label=”Deutsche Untertitel” src=”subtitles_de.vtt” srclang=”de”> </track> </video> 2 More information @ HTML5Rocks.com
WebVTT WEBVTT FILE railroad 00:00:10.000 —> 00:00:12.500 Left uninspired by the crust of railroad earth manuscript 00:00:13.200 —> 00:00:16.900 that touched the lead to the pages of your manuscript.
Audio Descriptions
Additional Features in Media Players W3C/WAI Perspective Videos
Making Audio and Video Media Accessible
Animation in General
Operating System
OS Settings
prefers-reduced-motion Media Query
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
Or, better, progressively enhance: @media (prefers-reduced-motion: no-preference) { /* All animation code */ } see “Defensive use of prefers-reduce-motion” à la Patrick H. Lauke
Support Source: Can I Use
On Windows …it’s complicated Short note on prefers-reduced-motion and puzzled (Windows) users by Patrick H. Lauke @ TPG
Responsive Design for Motion
prefers-color-scheme Media Query
:root { —color: #333; —bgcolor: #eee; } @media (prefers-color-scheme: dark) { :root { —color: #eee; —bgcolor: #333; } } html { color: var(—color); background-color: var(—bgcolor); }
Other, upcoming MQs → inverted-colors3 → none → inverted → prefers-reduced-transparency → no-preference → reduce 3 Support in Safari macOS & iOS → prefers-contrast → no-preference → high → low → forced-colors → none → active
The End.
