Accessibility & Multi-Screen Design: Audio, Video & Animation
A presentation at #cos18 by Eric Eggert
Accessibility & Multi-Screen Design Audio, Video & Animation Eric Eggert — Accessibility & Multi-Screen Design – #cos18
Disclaimer This course is not a W3C course. Views expressed are my own. Dies ist kein W3C-Kurs. Alle Ansichten sind meine Eigenen.
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
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, future)
H.265/HEVC (proprietary, future)
Media Queries <video> <source src=”lowres.mp4” media=”max-width: 500px”> <source src=”highres.mp4”> </video>
Interesting Attributes ๏ poster — displays an image when stopped ๏ controls – display start/stop/volume controls ๏ autoplay – starts the resource on load (don’t use!) ๏ loop – loops the media resource ๏ muted – starts muted
On Autoplay
1 Video Players SWS 1 “See what sucks” (videosws.praegnanz.de)
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.
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
Transcript Good examples: The Web Ahead, TED – A Magna Carta for the web
Captions Good example: TED – A Magna Carta for the web
2 Use <track> for captions <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
Animation in General
OS As in Operating System
OS Settings
prefers-reduced-motion Media Query
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
Support
On Windows …it’s complicated
Source: Patrick H. Lauke, Twitter, ThreadReader
Responsive Design for Motion
The End.
