Accessibility & Multi-Screen Design: Audio, Video & Animation

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.

Accessibility & Multi-Screen Design Audio, Video & Animation Eric Eggert — Accessibility & Multi-Screen Design – #cos18