History

• 1968 - first workable prototype of ARPANET
• 1983 - adoption of TCP/IP - birth of the Internet.
• 1989 - Tim Berners-Lee developed the Mesh.
• 1990 - Mesh is renamed to World Wide Web.

World Wide Web (WWW), is called the Web herinafter.

Tim Berners-Lee

Tim Berners-Lee has developed the first website, the first browser and the first web server.

He wrote the first specifications for URLs, HTTP and HTML.

World Wide Web Consortium (W3C)

In 1994, Tim Berners-Lee founded the W3C, a standardization organization for the technologies of the Web.

Mission

The W3C mission is to lead the Web to its full potential by developing protocols and guidelines that ensure the long-term growth of the Web.

Standards

W3C develops hundreds of standards:

• HTML
• XML
• CSS
• SVG
• WOFF
• WCAG
• …

Members

More than 450 organizations are active in W3C.
Extract from the list of members:

• Arron Eicholz, Microsoft
• Alex Danilo, Google
• Edward O'Connor, Apple Inc.
• Jonathan Watt, Mozilla Corporation
• Erik Dahlström, Opera Software
• Anthony Grasso, Canon Inc.
• …

Assertive

• Broad social base
  Government representatives, academics, private companies, organizations, …
• Open processes
  (Mostly) transparent processes, participation / feedback is possible and required.
• Free use
  Standards are freely accessible, free use, wide distribution is sought.

W3C - Multilingual Web Workshop

Universal Design

"The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect."

The Web is fundamentally designed to work for all people, whatever their …

• hardware, software
• network infrastructure
• location, language, culture
• physical, mental abilities

Hardware and Software

Inclusion work regarding hardware and software is expressed i.a. through cooperation with manufacturers.

For example: Google, Mozilla, Microsoft, Canon, Siemens.

Network Infrastructure

Inclusion work regarding network infrastructure is expressed i.a. through cooperation with and compatibility with standards of other standardization organizations, e.g. the Internet Engineering Task Force (IETF).

Develops: TCP/IP, DNS, HTTP, etc.

Internet and Web

IETF develops the technologies of the Internet.
W3C develops the technologies of the Web.

Location, language, culture

Inclusion work in terms of geographic location, language and culture happens i.a. in the W3C Internationalization (i18n) Activity.

Develops: Guidelines and tutorials for multilingual and intercultural contents.

Physical, mental abilities

Inclusion work regarding physical and mental abilities happens in the W3C Web Accessibility Initiative (WAI).

Develops: ATAG, UAAG and WCAG.

W3C-ecosystem

Working Groups & Task Forces develop standards.

Accessibility Guidelines

• Authoring Tool Accessibility Guidelines (ATAG)
• Web Content Accessibility Guidelines (WCAG)
• User Agent Accessibility Guidelines (UAAG)

Authoring Tool Accessibility Guidelines (ATAG)

Web Content Accessibility Guidelines (WCAG)

User Agent Accessibility Guidelines (UAAG)

Web Accessibility Initiative (WAI)

Group of approximately 150 people from industry, disability organizations, government agencies and research institutions.

WCAG Working Group (WCAG WG)

Extract from the list of members:

• Steve Faulkner, The Paciello Group
• Joshue O Connor, InterAccess
• Loretta Guarino Reid, Google
• Chrystal Jones, Microsoft
• Andrew Kirkpatrick, Adobe
• Tom Babinszki, IBM
• Can Wang, Zhejiang University
• …

WCAG 2.1

Web Content Accessibility Guidelines cover a wide range of recommendations for making Web content more accessible:

• visual disabilities
  E.g.: color blindness, blindness
• auditory disabilities
  E.g.: hard-of-hearing, deafness
• cognitive, learning, and neurological disabilities
  E.g.: multiple sclerosis (MS), attention deficit hyperactivity disorder (ADHD)
• physical disabilities
  E.g.: rheumatism, arthritis
• speech disabilities
  E.g.: stuttering, mutism

Multiple disabilities

Some people have combinations of different kinds of disabilities.

How many are affected?

One billion people, or 15% of the world’s population, experience some form of disability.

At a Glance

The following pages contain a paraphrased summary of Web Content Accessibility Guidelines (WCAG) 2.1.

For the normative technical specification, see:
https://www.w3.org/TR/WCAG21/.

Accessibility Principles

Characteristics of accessible Web contents:

1. Perceivable
   (4 guidelines)
2. Operable
   (5 guidelines)
3. Understandable
   (3 guidelines)
4. Robust
   (1 guideline)

Principle 1: Perceivable

"Information and user interface components must be presentable to users in ways they can perceive."

Principle 1: Perceivable - Guidelines

1. Provide text alternatives for non-text content.
2. Provide alternatives for time-based media.
3. Content must be adaptable.
4. Content must be distinguishable.

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

https://www.w3.org/WAI/WCAG21/quickref/#text-alternatives

The alt attribute on the HTML <img> element is a text alternative.

The audio alternative on captchas ensures content can be perceived, where text is not an option.

1.2. Time-based Media

"Provide alternatives for time-based media like audio and video."

https://www.w3.org/WAI/WCAG21/quickref/#time-based-media

The Web Video Text Track (.vtt) provides timed text tracks (captions / subtitles) for prerecorded video contents.

1.3. Adaptable

"Create content that can be presented in different ways (for example simpler layout) without losing information or structure."

https://www.w3.org/WAI/WCAG21/quickref/#adaptable

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

In a visual browser, you do not see a colon.

In a plain text browser you can see the colon.

1.4. Distinguishable

"Make it easier for users to see and hear content including separating foreground from background."

https://www.w3.org/WAI/WCAG21/quickref/#distinguishable

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

This form is inaccessible for people who are e.g. red-green color blind.

Not only conveying information through color mitigates the problem.

Fonts, font sizes and contrasts play an important role in making contents distinguishable.

Accessibility Principles

Characteristics of accessible Web contents:

1. Perceivable
   (4 guidelines)
2. Operable
   (5 guidelines)
3. Understandable
   (3 guidelines)
4. Robust
   (1 guideline)

Principle 2: Operable

"User interface components and navigation must be operable."

Principle 2: Operable - Guidelines

1. Make all functionality available from a keyboard.
2. Provide users enough time to read and use content.
3. Do not design content in a way that is known to cause seizures or physical reactions.
4. Provide ways to help users navigate, find content, and determine where they are.

2.1. Keyboard Accessible

"Make all functionality available from a keyboard."

https://www.w3.org/WAI/WCAG21/quickref/#keyboard-accessible

Keyboard accessible (e.g. using the Tab key)

Keyboard accessible (e.g. using the Tab key)

Keyboard accessible (e.g. using the Tab key)

2.2. Enough Time

"Provide users enough time to read and use content."

https://www.w3.org/WAI/WCAG21/quickref/#enough-time

Allow to pause, stop, hide e.g. carousel animations.

2.3. Seizures and Physical Reactions

"Do not design content in a way that is known to cause seizures or physical reactions."

https://www.w3.org/WAI/WCAG21/quickref/#seizures-and-physical-reactions

Animations in graphics, videos, ads, …

Assault on epilepsy patients in 2008.

2.4. Navigable

"Provide ways to help users navigate, find content, and determine where they are."

https://www.w3.org/WAI/WCAG21/quickref/#navigable

Visible/invisible link to skip navigation

Skip to content
						

Breadcrumb navigation

Accessibility Principles

Characteristics of accessible Web contents:

1. Perceivable
   (4 guidelines)
2. Operable
   (5 guidelines)
3. Understandable
   (3 guidelines)
4. Robust
   (1 guideline)

Principle 3: Understandable

"User interface components and navigation must be operable."

Principle 3: Understandable - Guidelines

1. Readable
2. Predictable
3. Input Assistance

3.1. Readable

"Make text content readable and understandable."

https://www.w3.org/WAI/WCAG21/quickref/#readable

Define the language of contents of an HTML element with the lang attribute.

こんにちは
						

Provide the expanded form or meaning of abbreviations (e.g. HTML).

HTML
						

Provide the expanded form or meaning of abbreviations (e.g. HTML).

I like HyperText Markup Language (HTML).
						

3.2. Predictable

"Make Web pages appear and operate in predictable ways."

https://www.w3.org/WAI/WCAG21/quickref/#predictable

Design consistant navigations (royal discipline).

3.3. Input Assistance

"Help users avoid and correct mistakes."

https://www.w3.org/WAI/WCAG21/quickref/#input-assistance

Incomplete email address, user not logged in.

Proceeds to payment, user unknowingly logged in.

Going back, does not allow changes, still logged in.

Accessibility Principles

Characteristics of accessible Web contents:

1. Perceivable
   (4 guidelines)
2. Operable
   (5 guidelines)
3. Understandable
   (3 guidelines)
4. Robust
   (1 guideline)

4. Robust

Allgemeine Anforderung:

"Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies."

Principle 4: Robust - Guideline

1. Compatible

4.1. Compatible

"Maximize compatibility with current and future user agents, including assistive technologies."

https://www.w3.org/WAI/WCAG21/quickref/#compatible

Future-proof? Validate your code!

The are many validation and linting tools:

• https://www.w3.org/WAI/ER/tools/
• https://a11yproject.com/resources

Websites which are developed according to current specifications are robust.