Audio, Video & Animation Accessibility & Multi-Screen Design Eric Eggert — Accessibility & Multi-Screen Design – #cos19
Slide 1
Slide 2
Audio
Slide 3
Audio Player Example
Slide 4
User needs to be in control
Slide 5
Never autostart audio
Slide 6
audio element
Slide 7
Video
Slide 8
Video Player Example
Slide 9
Going beyond technical accessibility
Slide 10
Slide 11
Slide 12
Four UX Principles → Give users choice. → Put users in control. → Design with familiarity in mind. → Prioritize features that add value.
Slide 13
Slide 14
Slide 15
Slide 16
Slide 17
Accessibility Originates With UX: A BBC iPlayer Case Study by Henny Swan
Slide 18
video element
Slide 19
How do audio and video elements work?
Slide 20
Support
Slide 21
Audio
Slide 22
Video
Slide 23
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>
Slide 24
webM (open, free, current)
Slide 25
H.264 (proprietary)
Slide 26
AV1 (open, free, next-gen)
Slide 27
H.265/HEVC (proprietary, future)
Slide 28
Media Queries <video> <source src=”lowres.mp4” media=”max-width: 500px”> <source src=”highres.mp4”> </video>
Slide 29
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
Slide 30
On Autoplay
Slide 31
Video Players SWS 1 “See what sucks” (videosws.praegnanz.de) 1
Slide 32
Audio works the same way → OGG (open, free) → MP3 (proprietary)
Slide 33
Slide 34
Slide 35
Slide 36
Slide 37
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
Slide 38
MP3 is supported by everything, everywhere, and is now patent-free.
Slide 39
Slide 40
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(); } }
Slide 41
How to make Audio and Video accessible
Slide 42
Transcripts → The Web Ahead → TED – A Magna Carta for the web
Slide 43
Captions → TED – A Magna Carta for the web
Slide 44
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
Slide 45
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.
Slide 46
Audio Descriptions
Slide 47
Slide 48
Additional Features in Media Players W3C/WAI Perspective Videos
Slide 49
Making Audio and Video Media Accessible
Slide 50
Animation in General
Slide 51
Operating System
Slide 52
OS Settings
Slide 53
prefers-reduced-motion Media Query
Slide 54
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
Slide 55
Or, better, progressively enhance: @media (prefers-reduced-motion: no-preference) { /* All animation code */ } see “Defensive use of prefers-reduce-motion” à la Patrick H. Lauke
Slide 56
Support Source: Can I Use
Slide 57
On Windows …it’s complicated Short note on prefers-reduced-motion and puzzled (Windows) users by Patrick H. Lauke @ TPG
Slide 58
Responsive Design for Motion
Slide 59
prefers-color-scheme Media Query
Slide 60
:root { —color: #333; —bgcolor: #eee; } @media (prefers-color-scheme: dark) { :root { —color: #eee; —bgcolor: #333; } } html { color: var(—color); background-color: var(—bgcolor); }
Slide 61
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
Slide 62
The End.
