Accessibility & Multi-Screen Design

Eric Eggert, outline

Accessibility &
Multi-Screen Design

Eric Eggert

Dates & Times


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

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

Who invented the internet?!

End Detour:
Who invented the internet?!

Web Standards

Standards Bodies that play a role in the World Wide Web


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


.fancy { font-family: fantasy; }

ECMA Script

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

W3C Process


End Detour:
Web Standards

Accessibility &
Multi-Screen Design

Accessibility …

… and Multi-Screen Design …

… are very similar things.

Just looked at in different ways.

Accessibility and Multi-Screen Design are very similar things.


Who knows People with Disabilities?

Who is in contact with People with Disabilities regularly?

Who is so with People with Disabilities at the age of
— under 70?
— under 50?
— under 30?

Percentage of people with disabilities:


1.1 billion people

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%

Make the web accessible for
your future selves.

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

Contents of the CRPD related to COS

Convention on the Rights of Persons with Disabilities

W3C Accessibility Documents

Web Content Accessibility Guidelines (WCAG) 2.0 Extensions

WCAG 2.0 Supporting Documents


4 Principles

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.)

  1. 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.)

  1. 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.
  2. 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:

Accessibility &
Multi-Screen Design

Multi-Screen Design

Watch Mobile Desktop TV

Further contents: