Accessibility & Multi-Screen Design Audio, Video & Animation Eric Eggert — Accessibility & Multi-Screen Design – #cos18
Slide 1
Slide 2
Disclaimer This course is not a W3C course. Views expressed are my own. Dies ist kein W3C-Kurs. Alle Ansichten sind meine Eigenen.
Slide 3
Audio
Slide 4
Audio Player Example
Slide 5
User needs to be in control
Slide 6
Never autostart audio
Slide 7
audio element
Slide 8
Video
Slide 9
Video Player Example
Slide 10
Going beyond technical accessibility
Slide 11
Slide 12
Slide 13
Four UX Principles ๏ Give users choice. ๏ Put users in control. ๏ Design with familiarity in mind. ๏ Prioritize features that add value.
Slide 14
Slide 15
Slide 16
Slide 17
Slide 18
Accessibility Originates With UX: A BBC iPlayer Case Study by Henny Swan
Slide 19
video element
Slide 20
How do audio and video elements work?
Slide 21
Support
Slide 22
Slide 23
Slide 24
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 25
webM (open, free, current)
Slide 26
H.264 (proprietary)
Slide 27
AV1 (open, free, future)
Slide 28
H.265/HEVC (proprietary, future)
Slide 29
Media Queries <video> <source src=”lowres.mp4” media=”max-width: 500px”> <source src=”highres.mp4”> </video>
Slide 30
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
Slide 31
On Autoplay
Slide 32
1 Video Players SWS 1 “See what sucks” (videosws.praegnanz.de)
Slide 33
Audio works the same way ๏ OGG (open, free) ๏ MP3 (proprietary)
Slide 34
Slide 35
Slide 36
Slide 37
Slide 38
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.
Slide 39
MP3 is supported by everything, everywhere, and is now patent-free.
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
Transcript Good examples: The Web Ahead, TED – A Magna Carta for the web
Slide 43
Captions Good example: TED – A Magna Carta for the web
Slide 44
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
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
Animation in General
Slide 49
OS As in Operating System
Slide 50
OS Settings
Slide 51
prefers-reduced-motion Media Query
Slide 52
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
Slide 53
Support
Slide 54
On Windows …it’s complicated
Slide 55
Source: Patrick H. Lauke, Twitter, ThreadReader
Slide 56
Responsive Design for Motion
Slide 57
The End.
