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.

Multi-Screen Design

Multi-Screen Design

Watch Mobile Desktop TV

Desktop/Mobile Market Share World Wide

Statistics Desktop vs. Mobile

Source: StatCounter Global Stats - Platform Comparison Market Share

Desktop/Mobile Market Share Africa

Statistics Desktop vs. Mobile Africa

Source: StatCounter Global Stats - Platform Comparison Market Share

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