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.