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

First WD WD CR PR REC

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 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 Internet use 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”

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

The End

#cos17 Introduction and Motivation – Accessibility & Multi-Screen Design

By Eric Eggert

#cos17 Introduction and Motivation – Accessibility & Multi-Screen Design

  • 438
Loading comments...

More from Eric Eggert