Accessibility &
Multi-Screen Design
Introduction & Motivation
Eric Eggert
-
Web Developer & Trainer
-
2005–2010 Freelancer
-
2011+ Co-Founder @ outline
-
2013–2016 Web Accessibility Specialist @ W3C/WAI
-
2016+ 50/50 Web Accessibility Specialist @ 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
Basics
Who invented
the internet?!
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
-
HTML5 developed by WHATWG as an alternative to W3C’s XHTML2
-
Today: 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
<h1 class="fancy">This is a heading</h1>CSS
-
W3C’s CSS Working group is working on a dozen modules.
-
Things we got recently
-
Grids
-
Flexbox
-
Masking
-
(Web)Fonts
-
Animations
-
Transforms
-
Transitions
-
…
-
.fancy { font-family: fantasy; }ECMA Script
-
In the beginning just for client-side use cases
-
Now a universal programming language
-
Also on the server using node.js
document.querySelector('body').style.backgroundColor =
'rebeccapurple';AKA JavaScript, ActionScript
W3C Process
-
WD: Working Draft
-
CR: Candidate Recommendation
-
PR: Proposed Recommendation
-
REC: Recommendation
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 Multi-Screen Design are
very similar things.
Survey!
Who of you personally knows a person with a disability?
Who of you is regularly in contact with a person with a disability?
Who of you is regularly in contact with a person with a disability at the age of…
-
under 70?
-
under 50?
-
under 30?
Percentage of People with Disabilities:
15,3%
1.1 billion people
| Age | Percentage of People with Disabilities |
|---|---|
| 16–24 |
|
| 25–34 |
|
| 35–44 |
|
| 45–54 |
|
| 55–64 |
|
| 65–74 |
|
| 75–84 |
|
| 85+ |
|
| Age | Internet use 2009 | Internet use 2014 |
|---|---|---|
| 14–19 |
|
|
| 20–29 |
|
|
| 30–39 |
|
|
| 40–54 |
|
|
| 50–64 |
|
|
| 60+ |
|
|
Make the web accessible for your future selves.
Convention on the Rights of Persons with Disabilities
or: “CRPD”
COS related content in CRPD
-
Equal opportunities and nondiscrimination, Article 5
-
Access to justice, Article 13
-
Inclusive education, Article 24
-
Participation in political and public life, Article 29
W3C Accessibility Documents
W3C Web Content Accessibility Guidelines 2.1
WCAG 2.0 Supporting Docs
WCAG
Perceivable
Operable
Understandable
Robust
Perceivable
Information and user interface components must be presentable to users in ways they can perceive.
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.
Time-based Media
Provide alternatives for time-based media.
Captions, Transcripts, Audio Descriptions
Adaptable
Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
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.
Keyboard Accessible
Make all functionality available from a keyboard.
Keyboard Accessible
Make all functionality available from a keyboard interface.
Enough Time
Provide users enough time to read and use content.
Seizures (and Physical Reactions)
Do not design content in a way that is known to cause seizures (or physical reactions).
Navigable
Provide ways to help users navigate, find content, and determine where they are.
Input Modalities
Make it easier for users to operate functionality through various inputs beyond keyboard.
New
in 2.1
Understandable
Information and the operation of user interface must be understandable.
Readable
Make text content readable and understandable.
Predictable
Make Web pages appear and operate in predictable ways.
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.
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
30 SCs
20 SCs
28 SCs
25 SCs
13 SCs
23 SCs
WCAG 2.0
WCAG 2.1
61 SCs
78 SCs
AA+
Technically accessible does not necessarily mean usable by
people with disabilities.
Multi-Screen Design
Responsive Web Design
Rather than tailoring disconnected designs to each of an ever-increasing 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