Accessibility & Multi-Screen Design: Getting Started

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

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

Disclaimer

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

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

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

Who invented the Internet?

Kurzgesagt Video

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

Web Standards

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

Technologies

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 🤞

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, …

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

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

Accessibility & Multi-Screen Design

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

… 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

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

Accessibility and MultiScreen Design are very similar things.

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

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.

Percentage of People with Disabilities: 15.3%

1.1 billion people

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%

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

Make the web accessible for your future selves.

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

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)

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

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)

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

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

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

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

  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.

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

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

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

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

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

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

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

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

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

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

  1. Understandable Readable Make text content readable and understandable.

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

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

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

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

Principles & Guidelines: The Spirit of the Law

Success Criteria: The Letter of the Law

3 Levels: A — AA — AAA

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

AA+

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

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

Multi-Screen Design

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

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

Source: Devices | Brad Frost | Flickr

Graphic courtesy of OpenSignal.com

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

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

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

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

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

.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 */

DEMO

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

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

Ubiquity

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

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

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

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

2MB Average weight of web page !

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

The Website Obesity Crisis Maciej Cegłowski, 2015

Performance is Invisible

Performance is Design

RWD ≠ one size fits all

Progressive Enhancement

@supports CSS Feature Queries

Can I use… CSS Grid Layout (Level 1)

Can I use… CSS Subgrid

Can I use… CSS Feature Queries

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

Brad Frost: Mobile-First Responsive Web Design

Embrace the unforseeable

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

Web Accessibility Getting Started

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

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

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

The End