Accessibility & Multi-Screen Design: Getting Started

A presentation at #cos18 in June 2019 in by Eric Eggert

Slide 1

Slide 1

Accessibility & Multi-Screen Design: Getting Started

Eric Eggert — Accessibility & Multi-Screen Design – #cos18

Slide 2

Slide 2

Eric Eggert

  • Web Developer & Trainer

  • 2005–2010 Freelancer

  • 2011+ Co-Founder @ outline

  • 2013–2016 Web Accessibility Specialist @ W3C/WAI

  • 2016+ 50/50 Web Accessibility Expert @ Knowbility & W3C/WAI Fellow

Slide 3

Slide 3

Disclaimer

This course is not a W3C course. Views expressed are my own.

Dies ist kein W3C-Kurs. Alle Ansichten sind meine Eigenen.

Slide 4

Slide 4

Dates & Times

  • Thu | 2019-06-06 | Getting Started
  • Thu | 2019-06-13 | Images
  • Wed | 2019-06-19 | Checking
  • Thu | 2019-06-27 | Audio/Video/Animation
  • Async | 2019-06-29 | Responsive/Accessible Future

cos.accessibility.rocks

Slide 5

Slide 5

Who invented the Internet?

Slide 6

Kurzgesagt Video

Slide 7

Slide 7

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

Slide 8

Slide 8

Web Standards

Slide 9

Slide 9

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 10

Slide 10

Technologies

Slide 11

Slide 11

HTML5

<h1 class="fancy">This is a heading</h1>

  • HTML5 developed by WHATWG as an alternative to W3C’s XHTML2

  • Until Recently: Development in parallel in WHATWG („Living Standard”) and in the HTML Working Group of W3C („Snapshots”)

    • Discussion over the direction of the specification

    • Serious differences, including the addition of a Image Description Extension in the W3C version

  • Now: Working Together 🤞

Slide 12

Slide 12

CSS

.fancy { font-family: fantasy; }

W3C’s CSS Working group is working on a dozen modules.

Things we got recently: Grids, Flexbox, Masking, (Web)Fonts, Animations, Transforms, Transitions, …

Slide 13

Slide 13

ECMA Script^2

document.querySelector('body').style.backgroundColor =
    'rebeccapurple';

  • In the beginning just for client-side use cases

  • Now a universal programming language

  • Also on the server using node.js

^2: AKA JavaScript, ActionScript

Slide 14

Slide 14

W3C Process[^3]

  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

[^3]: World Wide Web Consortium Process Document – #6.1.1 Recommendations and Notes

Slide 15

Slide 15

Slide 16

Slide 16

Accessibility & Multi-Screen Design

Slide 17

Slide 17

Slide 18

Slide 18

Accessibility … ๏ In German: „Barrierefreiheit” ๏ People with Disabilities ๏ Access content ๏ Adapt the web to one’s needs ๏ Understand and interact with websites

Slide 19

Slide 19

… and Multi-Screen Design … ๏ Show contents optimized for all devices ๏ Everything needs to look good although you don’t know what device will access the content ๏ Performance ๏ Progressive Enhancement

Slide 20

Slide 20

… are very similar things. Just looked at in different ways.

Slide 21

Slide 21

Accessibility and MultiScreen Design are very similar things.

Slide 22

Slide 22

The Business Case for Digital Accessibility The Business Case for Digital Accessibility | Web Accessibility Initiative (WAI) | W3C

Slide 23

Slide 23

The Business Case for Digital Accessibility Accessibility can: ๏ Drive Innovation: Accessibility features in products and services often solve unanticipated problems. ๏ Enhance Your Brand: Diversity and inclusion efforts so important to business success are accelerated with a clear, well-integrated accessibility commitment. ๏ Extend Market Reach: The global market of people with disabilities is over 1 billion people with a spending power of more than $6 trillion. Accessibility often improves the online experience for all users. ๏ Minimize Legal Risk: Many countries have laws requiring digital accessibility, and the issue is of increased legal concern.

Slide 24

Slide 24

Percentage of People with Disabilities: 15.3%

Slide 25

Slide 25

1.1 billion people

Slide 26

Slide 26

People with Disabilities by Age Group Age % 16–24 6% 25–34 9% 35–44 11% 45–54 17% 55–64 23% 65–74 26% 75–84 31% 85+ 38%

Slide 27

Slide 27

Internet Use by Age Group Age 2009 2015 2018 14–19 97.5% 100.0% 100.0% 20–29 95.2% 97.7% 99.5% 30–39 89.4% 94.2% 98.8% 40–49 80.2% 91.9% 98.5% 50–59 67.4% 83.2% 96.6% 60–69 39.1% 67.2% 82.4% 70+ 15.9% 38.4% 64.7% Internetnutzer* in Deutschland 1997 bis 2018 in Prozent, “mindestens selten genutzt” | ARD/ZDF-Onlinestudie

Slide 28

Slide 28

Make the web accessible for your future selves.

Slide 29

Slide 29

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

Slide 30

Slide 30

Slide 31

Slide 31

CRPD & 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 32

Slide 32

W3C Accessibility Standards Standard Version Web Content Accessibility Guidelines (WCAG) 2.1 REC 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 (WAIARIA) 1.1 REC

Slide 33

Slide 33

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 34

Slide 34

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 35

Slide 35

EN 301 549 “Accessibility requirements suitable for public procurement of ICT products and services in Europe”

Slide 36

Slide 36

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

Slide 37

Slide 37

  1. Perceivable Information and user interface components must be presentable to users in ways they can perceive.

Slide 38

Slide 38

  1. Perceivable Text Alternatives Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

Slide 39

Slide 39

  1. Perceivable Time-based Media Provide alternatives for time-based media. (Captions, Transcripts, Audio Descriptions)

Slide 40

Slide 40

  1. Perceivable Adaptable Create content that can be presented in different ways (for example simpler layout) without losing information or structure.

Slide 41

Slide 41

  1. Perceivable Distinguishable Make it easier for users to see and hear content including separating foreground from background.

Slide 42

Slide 42

  1. Operable User interface components and navigation must be operable.

Slide 43

Slide 43

  1. Operable Keyboard Accessible Make all functionality available from a keyboard.

Slide 44

Slide 44

  1. Operable Enough Time Provide users enough time to read and use content.

Slide 45

Slide 45

  1. Operable Seizures and Physical Reactions Do not design content in a way that is known to cause seizures or physical reactions).

Slide 46

Slide 46

  1. Operable Navigable Provide ways to help users navigate, find content, and determine where they are.

Slide 47

Slide 47

  1. Operable Input Modalities Make it easier for users to operate functionality through various inputs beyond keyboard.

Slide 48

Slide 48

  1. Understandable Information and the operation of user interface must be understandable.

Slide 49

Slide 49

  1. Understandable Readable Make text content readable and understandable.

Slide 50

Slide 50

  1. Understandable Predictable Make Web pages appear and operate in predictable ways.

Slide 51

Slide 51

  1. Understandable Input Assistance Help users avoid and correct mistakes.

Slide 52

Slide 52

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

Slide 53

Slide 53

  1. Robust Compatible Maximize compatibility with current and future user agents, including assistive technologies.

Slide 54

Slide 54

Principles & Guidelines: The Spirit of the Law

Slide 55

Slide 55

Success Criteria: The Letter of the Law

Slide 56

Slide 56

3 Levels: A — AA — AAA

Slide 57

Slide 57

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

Slide 58

Slide 58

AA+

Slide 59

Slide 59

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

Slide 60

Slide 60

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

Slide 61

Slide 61

Multi-Screen Design

Slide 62

Slide 62

Slide 63

Slide 63

Desktop vs Mobile vs Tablet vs Console Market Share Worldwide | StatCounter Global Stats

Slide 64

Slide 64

Responsive Web Design Rather than tailoring disconnected designs to each of an everincreasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design. — Ethan Marcotte, Responsive Web Design, A List Apart, May 25, 2010

Slide 65

Slide 65

Source: Devices | Brad Frost | Flickr

Slide 66

Slide 66

Graphic courtesy of OpenSignal.com

Slide 67

Slide 67

Embrace the web medium The control which designers know in the print medium, and often desire in the web medium, is simply […] the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. — John Allsopp, A List Apart: A Dao of Web Design, April 07, 2000

Slide 68

Slide 68

Mobile web stats ๏ 655 million people used Facebook exclusively on their mobile phones fbsrc – almost 50% fbsrc2 (June 2012: 102m/July 2014: 399m ) ๏ 34.7% of „Black Friday” traffic 2014, 14.6% on tablets (Mobile: 2012: 24%, 2011: 14,3%, 2010: 5,5%) fbsrc Nearly half of Facebook’s users only access the service on mobile | VentureBeat fbsrc2 Facebook’s new stats: 1.32 billion users, 30 percent only use it on their phone - The Verge

Slide 69

Slide 69

Facets of the same experience Rather than tailoring disconnected designs to each of an everincreasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. — Ethan Marcotte A List Apart: Responsive Web Design, May 25, 2010

Slide 70

Slide 70

Basic Concepts of RWD ๏ Flexible Grid ๏ Flexible Media ๏ CSS3 MediaQueries

Slide 71

Slide 71

Media Queries @media screen and (max-device-width: 480px) { .column { float: none; } }

Slide 72

Slide 72

.figure { float: left; margin: 0 3.317535545023696682% 1.5em 0; width: 31.121642969984202211%; } li#f-mycroft, li#f-winter { margin-right: 0; } @media screen and (max-width: 400px) { .figure, li#f-mycroft { margin-right: 3.317535545023696682%; width: 48.341232227488151658%; } li#f-watson, li#f-moriarty { margin-right: 0; } } @media screen and (min-width: 1300px) { .figure, li#f-mycroft { margin-right: 3.317535545023696682%; width: 13.902053712480252764%; } } /* 21px / 633px / / 197px / 633px / / 21px / 633px / / 306px / 633px / / 21px / 633px / / 88px / 633px */

Slide 73

Slide 73

DEMO

Slide 74

Slide 74

Examples ๏ Stripe ๏ Tatiana Mac ๏ The Guardian ๏ A List Apart ๏ Slate Magazine

Slide 75

Slide 75

Slide 76

Slide 76

Slide 77

Slide 77

Additional Principles ๏ Ubiquity ๏ Flexibility ๏ Performance ๏ Progressive Enhancement ๏ Sustainability

Slide 78

Slide 78

Ubiquity

Slide 79

Slide 79

Slide 80

Slide 80

The One Web ๏ Thematic consistency ๏ Same URL, same content

Slide 81

Slide 81

Give the user what they want, when they want it.

Slide 82

Slide 82

71% of mobile users expect that websites load at least as fast as on the loadingstats desktop loadingstats New Study Reveals the Mobile Web Disappoints Global Consumers | Compuware Corporation

Slide 83

Slide 83

5s is the maximum time 74% of mobile users are willing wait for a website to load. After that they walk away.

Slide 84

Slide 84

2MB Average weight of web page !

Slide 85

Slide 85

86% of responsive websites weight as much in their mobile view as they do in the desktop view

Slide 86

Slide 86

The Website Obesity Crisis Maciej Cegłowski, 2015

Slide 87

Slide 87

Performance is Invisible

Slide 88

Slide 88

Performance is Design

Slide 89

Slide 89

RWD ≠ one size fits all

Slide 90

Slide 90

Progressive Enhancement

Slide 91

Slide 91

@supports CSS Feature Queries

Slide 92

Slide 92

Can I use… CSS Grid Layout (Level 1)

Slide 93

Slide 93

Can I use… CSS Subgrid

Slide 94

Slide 94

Can I use… CSS Feature Queries

Slide 95

Slide 95

.main { width: 45% ; } .div1 { float: left ; } .div2 { float: right; } @supports (display: grid;) { .main { display: grid; grid-columns-template: 1fr 1fr; } }

Slide 96

Slide 96

Brad Frost: Mobile-First Responsive Web Design

Slide 97

Slide 97

Embrace the unforseeable

Slide 98

Slide 98

Slide 99

Slide 99

Summary 1. We don’t know what the next trend is. 2. We don’t have any control. 3. Base Principles: Flexible Grid and Media, CSS3 MediaQueries 4. Basic Principles: Ubiquity, Flexibility, Performance, Progressive Enhancement, Sustainability

Slide 100

Slide 100

Web Accessibility Getting Started

Slide 101

Slide 101

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

Slide 102

Slide 102

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

Slide 103

Slide 103

Tips for Getting Started ๏ Designing ๏ Writing ๏ Developing ๏ (more in development)

Slide 104

Slide 104

The End