Accessibility & Multi-Screen Design
Introduction

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

Dates & Times

see cos.accessibility.rocks

Standards Bodies that play a role in the World Wide Web

• 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

HTML5

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

• 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

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

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

• AKA JavaScript, AKA ActionScript
• In the beginning just for client-side use cases
• Now a universal programming language
• Also on the server using node.js

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.

Age	Percentage of People with Disabilities
16–24	06%
25–34	09%
35–44	11%
45–54	17%
55–64	23%
65–74	26%
75–84	31%
85+	38%

Age	Internet use
	2009	2014
14–19	97,5%	100%
20–29	95,2%	99,4%
30–39	89,4%	97.4%
40–54	80,2%	93.9%
50–64	67,4%	82.1%
60+	27,1%	45,4%

Contents of the CRPD related to 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

W3C Accessibility Documents

• Web Content Accessibility Guidelines (WCAG) 2.0 — 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 (WAI-ARIA) 1.0 — REC

Web Content Accessibility Guidelines (WCAG) 2.0 Extensions

• Mobile Accessibility Task Force (Mobile A11Y TF)
  • Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile
• Cognitive and Learning Disabilities Accessibility Task Force (Cognitive A11Y TF)
• Low Vision Accessibility Task Force (LVTF)

WCAG 2.0 Supporting Documents

• How to Meet WCAG 2.0
• Easy Checks
• Evaluation Tools List
• How People with disabilities use the web
• Before and After Demo (BAD)
• Web Accessibility Tutorials

4 Principles

1. Perceivable
2. Operable
3. Understandable
4. Robust

12 Guidelines

1. Principle 1: Perceivable
   1. 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.
   2. Time-based Media: Provide alternatives for time-based media.
   3. Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
   4. Distinguishable: Make it easier for users to see and hear content including separating foreground from background.

12 Guidelines (cont.)

2. Principle 2: Operable
   1. Keyboard Accessible: Make all functionality available from a keyboard.
   2. Enough Time: Provide users enough time to read and use content.
   3. Seizures: Do not design content in a way that is known to cause seizures.
   4. Navigable: Provide ways to help users navigate, find content, and determine where they are.

12 Guidelines (cont.)

3. Principle 3: Understandable
   1. Readable: Make text content readable and understandable.
   2. Predictable: Make Web pages appear and operate in predictable ways.
   3. Input Assistance: Help users avoid and correct mistakes.
4. Principle 4: Robust
   1. Compatible: Maximize compatibility with current and future user agents, including assistive technologies.

3 Levels

1. A — Basic
2. AA — Best Practices
3. AAA — Advanced

AA is considered to be the minimally accepted standard today.

1.1.1 Non-text Content (Level A)

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose […].

1.2.2 Captions (Prerecorded) (Level A)

Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.

1.2.3 Audio Description or Media Alternative (Prerecorded) (Level A)

An alternative for time-based media or audio description of the prerecorded video content is provided for synchronized media, except when the media is a media alternative for text and is clearly labeled as such.

1.3.2 Meaningful Sequence (Level A)

When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.

1.4.1 Use of Color (Level A)

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

1.4.3 Contrast (Minimum) (Level AA)

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

• Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
• Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
• Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

Multi-Screen Design

Further contents:

• Structure and Labels
• Images and Graphics
• Audio and Video
• Navigation
• Forms