Accessibility & Multi-Screen Design: Getting Started
A presentation at #cos18 by Eric Eggert
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
Who invented the Internet?
“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]](https://on.notist.cloud/slides/deck3034/large-13.png)
W3C Process[^3]
- Publication of the First Public Working Draft
- Publication of zero or more revised Working Drafts
- Publication of a Candidate Recommendation
- Publication of a Proposed Recommendation
- Publication as a W3C Recommendation
- 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
- Perceivable Information and user interface components must be presentable to users in ways they can perceive.
- 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.
- Perceivable Time-based Media Provide alternatives for time-based media. (Captions, Transcripts, Audio Descriptions)
- Perceivable Adaptable Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
- Perceivable Distinguishable Make it easier for users to see and hear content including separating foreground from background.
- Operable User interface components and navigation must be operable.
- Operable Keyboard Accessible Make all functionality available from a keyboard.
- Operable Enough Time Provide users enough time to read and use content.
- Operable Seizures and Physical Reactions Do not design content in a way that is known to cause seizures or physical reactions).
- Operable Navigable Provide ways to help users navigate, find content, and determine where they are.
- Operable Input Modalities Make it easier for users to operate functionality through various inputs beyond keyboard.
- Understandable Information and the operation of user interface must be understandable.
- Understandable Readable Make text content readable and understandable.
- Understandable Predictable Make Web pages appear and operate in predictable ways.
- Understandable Input Assistance Help users avoid and correct mistakes.
- Robust Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
- 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
Video
Resources
The following resources were mentioned during the presentation or are useful additional information.
