Accessibility (& Multi-Screen Design) #COS20 Crash Course

A presentation at #cos20 in February 2021 in by Eric Eggert

Slide 1

Accessibility Eric Eggert — Accessibility — #cos20

Slide 2

About Me ๏ Eric Eggert ๏ Pronouns: ๏ Web ๏ Web he/him/his Developer & Trainer Standards ๏ Lives in & Works from Essen/Germany ๏ Content Strategy Lecturer since 2015 ๏ 2005–2010: ๏ 2011+: Freelancer Co-Founder @ outline ๏ 2013–2016: Web Accessibility Specialist @ W3C/WAI ๏ 2016–2020: ๏ ½ Web Accessibility Expert @ Knowbility ๏ ½ W3C/WAI Fellow on behalf of Knowbility ๏ 2020+: Tech Team Lead @ Knowbility

Slide 3

Agenda Time (CET) Topic 09:30–09:50 Agenda & Introductions 09:50–10:30 Web Standards & Accessibility 10:30–10:45 Break 10:45–11:45 Group Work 11:45–12:30 Break 12:30–13:00 Images 13:00–13:30 Audio & Video

Slide 4

Some Ground Rules ๏ Be kind. ๏ Don’t interrupt your fellow students. (Feel free to interrupt me!) ๏ Video is optional. ๏ Audio is optional.

Slide 5

And who are you? Introduce yourself with: ๏ Your Name ๏ What ๏A you do when you’re not here fun fact about yourself or an object in the room you’re in

Slide 6

Web Standards

Slide 7

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” — Tim Berners-Lee, WWW Inventor

Slide 8

WWW Standards Bodies ๏ W3C: World Wide Web Consortium ๏ WHATWG: Web Hypertext Application Technology Working Group ๏ Ecma International (née European Computer Manufacturers Association) ๏ ISO: International Organization for Standardization

Slide 9

Technologies

Slide 10

HTML5 CSS by W3C/WHATWG by W3C

<h1 class=”fancy”> This is a heading </h1> .fancy { font-family: fantasy; }

Slide 11

JavaScript by Ecma International document.querySelector(‘body’). style.backgroundColor = ‘rebeccapurple’;

Slide 12

1 W3C Consensus Process 1. Publication of the First Public Working Draft 2. Publication of zero or more revised Working Drafts 3. Publication of a Candidate Recommendation 4. Publication of a Proposed Recommendation 5. Publication as a W3C Recommendation 6. Possibly, Publication as an Edited or Amended Recommendation 1 World Wide Web Consortium Process Document – #6.1.1 Recommendations and Notes

Slide 13

Slide 14

Accessibility

Slide 15

Slide 16

What is Accessibility? ๏ In German: „Barrierefreiheit“ ๏ People with Disabilities/Disabled People ๏ Access to content without obstacles ๏ Adapt the web to one’s needs ๏ Understand and interact with websites

Slide 17

Why Accessibility?

Slide 18

How many people with disabilities are on earth? Poll

Slide 19

How many people with disabilities are on earth? ๏ United Nations: 15% ๏ United States of America: 26%

Slide 20

1.18 to 2.00 billion people

Slide 21

“In countries with life expectancies over 70 years, individuals spend on average about 8 years, or 11.5 per cent of their life span, living with disabilities.” — Disabled World

Slide 22

Internet Use by Age Group Age 2009 2015 2018 2020 14–19 98% 100% 100% 100% 20–29 95% 98% 100% 100% 30–39 89% 94% 99% 100% 40–49 80% 92% 98% 100% 50–59 67% 83% 97% 96% 60–69 39% 67% 82% 93% 70+ 16% 38% 65% 75% Internetnutzer* in Deutschland 1997 bis 2018 in Prozent, “mindestens selten genutzt” | ARD/ZDF-Onlinestudie

Slide 23

Make the web accessible for your future selves.

Slide 24

Convention on the Rights of Persons with Disabilities or: “CRPD”

Slide 25

Slide 26

CRPD relating COS ๏ Equal opportunities and nondiscrimination, Article 5 ๏ Access to justice, Article 13 ๏ Inclusive education, Article 24 ๏ Participation in political and public life, Article 29 Convention on the Rights of Persons with Disabilities (CRPD)

Slide 27

W3C Accessibility Standards ๏ Web Content Accessibility Guidelines (WCAG) 2.1 REC, 2.2 WD, 3.0 FPWD ๏ Authoring Tools Accessibility Guidelines (ATAG) 2.0 REC ๏ User Agent Accessibility Guidelines (UAAG) 2.0 NOTE ๏ Website Accessibility Conformance Evaluation Methodology (WCAG-EM) 1.0 NOTE ๏ Accessible Rich Internet Applications (WAI-ARIA) 1.1 REC

Slide 28

Web Content Accessibility Guidelines 2.1 includes: ๏ Mobile Accessibility Task Force (Mobile A11Y TF) ๏ Cognitive and Learning Disabilities Accessibility Task Force (Cognitive A11Y TF) ๏ Low Vision Accessibility Task Force (LVTF)

Slide 29

WCAG 2.1 Supporting Docs ๏ How to Meet WCAG 2 ๏ Easy Checks ๏ Evaluation Tools List ๏ How People with Disabilities Use the Web ๏ Before and After Demo (BAD) ๏ Web Accessibility Tutorials

Slide 30

! EU Regulation ๏ Web and Mobile Accessibility Directive — For public sector websites. Enacted in 2016. ๏ European Accessibility Act — Products and services need to be accessible: computers and operating systems; ATMs, ticketing and check-in machines; smartphones; TV equipment related to digital television services; telephony services and related equipment; access to audio-visual media services such as television broadcast and related consumer equipment; services related to air, bus, rail and waterborne passenger transport; banking services; e-books; e-commerce. Enacted by 2025. ๏ Standard: EN 301 549 — “Accessibility requirements suitable for public procurement of ICT products and services in Europe”, adopts WCAG 2.1.

Slide 31

Principles from WCAG 2 1. Perceivable 2. Operable 3. Understandable 4. Robust

Slide 32

Perceivable Information and user interface components must be presentable to users in ways they can perceive. ๏ 1.1 Text Alternatives ๏ 1.2 Time-based Media ๏ 1.3 Adaptable ๏ 1.4 Distinguishable

Slide 33

Operable User interface components and navigation must be operable. ๏ 2.1 Keyboard Accessible ๏ 2.2 Enough Time ๏ 2.3 Seizures and Physical Reactions ๏ 2.4 Navigable ๏ 2.5 Input Modalities

Slide 34

Understandable Information and the operation of user interface must be understandable. ๏ 3.1 Readable ๏ 3.2 Predictable ๏ 3.3 Input Assistance

Slide 35

Robust Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. ๏ 4.1 Compatible

Slide 36

Principles & Guidelines: The Spirit of the Law

Slide 37

Success Criteria: The Letter of the Law

Slide 38

3 Levels: A — AA — AAA

Slide 39

SCs by Level in WCAG 2.0 and 2.1 WCAG A AA AAA Sum 2.0 25 SCs 13 SCs 23 SCs 61 SCs 2.1 30 SCs 20 SCs 28 SCs 78 SCs 2.2 35 SCs 23 SCs 29 SCs 87 SCs

Slide 40

AA+

Slide 41

Technically accessible does not necessarily mean usable by people with disabilities.

Slide 42

Building the most inaccessible site possible with a perfect Lighthouse score by Manuel Matuzovic, May 31, 2019

Slide 43

Break Back at 10:45!

Slide 44

Accessibility: Group Activity

Slide 45

Time (CET) Todo 10:30–10:45 Break 10:45–11:00 Activity Intro 11:00–11:20 Doing the Activity 11:20–11:45 Report Back 11:45–12:30 Break

Slide 46

Web Accessibility Perspectives Explore the Impact and Benefits for Everyone 10 Short Video Introductions

Slide 47

How People with Disabilities use the Web ๏ Stories of Web Users ๏ Diverse ๏ Tools Ability and Barriers and Techniques

Slide 48

Activity!

Slide 49

Build teams of 3 people (and one team of 2). Go into a Zoom breakout room. 2. Open the Miro Board and pick the frame that is assigned to you by adding your names with sticks notes. 3. Watch the short video clip. 4. Discuss in the breakout room: ๏ Who is most impacted if the shown accessibility features are not available? ๏ In what situations would the barriers occur? ๏ What could be problematic content?
Copy and paste the yellow sticky notes which stand for disabilities on your frame. Write what content is impacting this into the free space on your frame.

Slide 50

Afterwards: One person per team reports back: ๏ What was the video about? ๏ What types of disabilities are impacted? ๏ What content could be problematic?

Slide 51

Activity away! Until 11:20.

Slide 52

Break Back at 12:30!

Slide 53

Images Accessibility & Multi-Screen Design Eric Eggert — Accessibility & Multi-Screen Design — #cos20

Slide 54

Overview ๏ The img element ๏ alt attribute ๏ srcset attribute for Display Density ๏ srcset attribute for Width Descriptions ๏ sizes attribute ๏ The ๏ picture element type attribute

Slide 55

Slide 56

Slide 57

5144×1698px ≧ 11 1024×768px monitors! 410kb

Slide 58

Samsung Galaxy J3 (2017) 720 x 1280 pixels (~294 ppi density) 9.5 phones needed to display the watch image at native resolution.

Slide 59

Two Main Use Cases for Responsive Images (More defined by RICG.)

Slide 60

Switch Resolution & Density

Slide 61

Slide 62

Art Direction

Slide 63

Slide 64

Slide 65

Slide 66

Source: Use Cases and Requirements for Standardizing Responsive Images

Slide 67

The img element

Slide 68

Slide 69

The alt attribute The alternative text (alt) describes an image in a way that the purpose or content of the image is clear without seeing the image.

Slide 70

WAI Images Tutorial

Slide 71

Image Types ๏ Informative Images add information to the content. ๏ Decorative Images are purely visual decoration. ๏ Functional Images fulfill a function and (usually) can be interacted with.

Slide 72

Informative Image <img src=”phone.png” alt=”Telephone:”> 0123 456 7890 <img src=”fax.png” alt=”Fax:”> 0123 456 7891 Source: https://www.w3.org/WAI/tutorials/images/informative/#images-used-to-label-other-information

Slide 73

Decorative Image <img src=”tropical.jpg” alt=”“> Source: https://www.w3.org/WAI/tutorials/images/decorative/#image-used-for-ambiance-eye-candy

Slide 74

Functional Image <a href=”https://www.w3.org/”> <img src=”w3c.png” alt=”W3C home”> </a> Source: https://www.w3.org/WAI/tutorials/images/functional/#image-used-alone-as-a-linked-logo

Slide 75

Functional Image <a href=”https://www.w3.org/”> <img src=”w3c.png” alt=”“> W3C Home </a> Source: https://www.w3.org/WAI/tutorials/images/functional/#logo-image-within-link-text

Slide 76

Responsive Images Everything starts with an img element

Slide 77

Slide 78

When is it just a simple img element? ๏A fixed width, single density web page ๏ Small differences in file size ๏ Using vector-based images like SVG

Slide 79

High Density Images Image Source: Pixel Density Explained

Slide 80

srcset

Slide 81

To supply multiple densities, we specify them like this: <img srcset=”watch.jpg, watch-2x.jpg watch-3x.jpg “> 2x, 3x

Slide 82

Best for fixed-width images * but insufficient for flexible images * Flexible images are a core principle of Responsive Web Design.

Slide 83

srcset width descriptors

Slide 84

Browser picks the best source?! The browser determines the width of the image on the page, calculates the needed image size and downloads that image.

Slide 85

Of course it is not that easy: Prefetching ๏ Browsers fetch images before they know how the website actually looks to make the web faster. ๏ They ๏ So fetch images before the CSS is loaded. initially, every image is as wide as the viewport.

Slide 86

Slide 87

Slide 88

What to do?!

Slide 89

sizes FTW! sizes: required when using width descriptors

Slide 90

sizes tells the browser… ๏ how wide the image is… ๏ in relationship to the viewport (i.e. 33% of the width). ๏ absolutely (i.e. 300px). ๏ when the relationship between viewport and image changes.

Slide 91

Slide 92

Media Conditions Subset of media queries: (max-width: 480px) or (min-width: 480px)

Slide 93

Size ๏ Often ๏ 1vw is 1% of the width of the viewport (browser window width) ๏ 33vw ๏ Can expressed in viewport width (vw) unit = 33% of the viewport also be px, em, % ๏ calc() can be used (for example for calculating margins)

Slide 94

Slide 95

Slide 96

<picture> <source media=”(min-width: 900px)” srcset=”cat-vertical.jpg”> <source media=”(min-width: 750px)” srcset=”cat-horizontal.jpg”> <img src=”cat.jpg” alt=”cat”> </picture> ๏ Picture Container Element ๏ Multiple Sources with media queries ๏ Srcset support ๏ Fallback <img> element (required)

Slide 97

media attribute = real media query media attribute is a directive, not a suggestion

Slide 98

Slide 99

<picture> <source srcset=”homepage-person@desktop.png, homepage-person@desktop-2x.png 2x” media=”(min-width: 990px)”> <source srcset=”homepage-person@tablet.png, homepage-person@tablet-2x.png 2x” media=”(min-width: 750px)”> <img srcset=”homepage-person@mobile.png, homepage-person@mobile-2x.png 2x” alt=”Shopify Merchant, Corrine Anestopoulos”> </picture> When the image was variable width instead of fixed width, width descriptors and sizes could have been used as well.

Slide 100

type attribute This attribute lets you assign different image formats. <picture> <source type=”image/svg+xml” srcset=”logo.svg”> <source type=”image/webp” srcset=”logo.webp”> <img src=”logo.png” alt=”ACME Corp”> </picture>

Slide 101

Summary

Slide 102

For most responsive images: Don’t use picture.

Slide 103

Always use <img src=”…” alt=”…”> for basic support.

Slide 104

Use srcset & sizes to provide resolution and width dependent images.

Slide 105

Remember that picture locks in the choice, the media queries are not negotiable.

Slide 106

<picture> is for art direction or for using niche image formats

Slide 107

More Info: Source: Jason Grigsby – Responsive Images 101

Slide 108

Audio, Video & † Animation Accessibility & Multi-Screen Design ! † If there’s enough time. Eric Eggert — Accessibility & Multi-Screen Design — #cos20

Slide 109

Audio

Slide 110

Audio Player Example

Slide 111

Some principles: ๏ User needs to be in control ๏ Never autostart audio

Slide 112

Use the audio element

Slide 113

Video

Slide 114

Video Player Example

Slide 115

Going beyond technical accessibility

Slide 116

Slide 117

Four UX Principles ๏ Give ๏ Put users choice. users in control. ๏ Design with familiarity in mind. ๏ Prioritize features that add value.

Slide 118

Slide 119

Slide 120

Slide 121

Slide 122

Accessibility Originates With UX: A BBC iPlayer Case Study by Henny Swan

Slide 123

Use the video element

Slide 124

How do audio and video elements work?

Slide 125

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 126

Media Queries <video> <source src=”lowres.mp4” media=”max-width: 500px”> <source src=”highres.mp4”> </video>

Slide 127

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 128

On Autoplay

Slide 129

Audio works the same way ๏ OGG (open, free) ๏ MP3 (proprietary)

Slide 130

Slide 131

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 132

MP3 is supported by everything, everywhere, and is now patent-free.

Slide 133

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 134

How to make Audio and Video accessible

Slide 135

Transcripts ๏ The ๏ TED Web Ahead – A Magna Carta for the web

Slide 136

Captions ๏ TED – A Magna Carta for the web

Slide 137

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 138

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 139

Audio Descriptions

Slide 140

Slide 141

Additional Features in Media Players W3C/WAI Perspective Videos

Slide 142

Making Audio and Video Media Accessible

Slide 143

Animation in General

Slide 144

Operating System

Slide 145

OS Settings

Slide 146

prefers-reduced-motion Media Query

Slide 147

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

Slide 148

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 149

Support Source: Can I Use

Slide 150

On Windows …it’s complicated Short note on prefers-reduced-motion and puzzled (Windows) users by Patrick H. Lauke @ TPG

Slide 151

Responsive Design for Motion

Slide 152

The End.