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

Web for all people

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

• hardware, software
• network infrastructure
• location, language, culture
• physical, cognitive 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)

ATAG

Authoring Tool Accessibility Guidelines (ATAG)

WCAG

Web Content Accessibility Guidelines (WCAG)

UAAG

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:

Disabilities

• 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

Text alternative Example 1

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

<img src="jonas.jpg" alt="Jonas pulling a face">

Text alternative Example 2

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

Time-based Media Example 1

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

<video src="video.mp4">
 <track srclang="en" src="en.vtt">
 <track srclang="de" src="de.vtt">
</video>
						

Time-based Media Example Screenshot

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

Adaptable Example 1

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

Adaptable Example 1 Screenshot Visual Browser

Adaptable Example 1 Visual Browser explanation

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

Adaptable Example 1 Text Browser

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

Distinguishable Example 1

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

Distinguishable Example 1 Red-Green Color Blindness

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

Distinguishable Example 1 - Conveying Information

Not only conveying information through color mitigates the problem.

Distinguishable Example 2

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 Example 1 - Screenshot 1

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

Keyboard Accessible Example 1 - Screenshot 2

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

Keyboard Accessible Example 1 - Screenshot 3

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

Giving Enough Time Example 1

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

Seizures and Physical Reactions Example 1

Animations in graphics, videos, ads, …

Seizures and Physical Reactions Example 2

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

Navigable Example 1

Visible/invisible link to skip navigation

<a class="skip-link" href="#content">Skip to content</a>

Navigable Example 2

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

Readable Example 1

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

<span lang="ja">こんにちは</span>

Readable Example 2

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

<abbr title="HyperText Markup Language">HTML</abbr>

Readable Example 2

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

<p>I like HyperText Markup Language (HTML).</p>

3.2. Predictable

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

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

Predictable Negative Example

Design consistant navigations (royal discipline).

3.3. Input Assistance

"Help users avoid and correct mistakes."

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

Input Assistance Example 1 - Screenshot 1

Incomplete email address, user not logged in.

Input Assistance Example 1 - Screenshot 2

Proceeds to payment, user unknowingly logged in.

Input Assistance Example 1 - Screenshot 3

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

Compatible Example 1

Future-proof? Validate your code!

Validation

The are many validation and linting tools:

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

Importance of Web Standards

Websites which are developed according to current specifications are robust.