WCAG

Web Content Accessibility Guidelines

Author: · License: CC BY-NC-ND 4.0 · Bookmark: Permalink

duration: ~30 min

Contents

  • Setting
    History of the World Wide Web and the work of W3C.
  • Web Accessibility
    Work of W3C for accessibility on the World Wide Web.
  • WCAG 2.1
    Glimpse at the Web Content Accessibility Guidelines.

Teil 1

Setting

History of the World Wide Web and the work of W3C.

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 at his desk in CERN, 1994

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)

W3C Logo

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
People at the W3C Multilingual Web Workshop Impression from the workshop at the European Commission, Luxembourg - 2012

Teil 2

Web Accessibility

Work of W3C for accessibility on the World Wide Web.

Universal Design

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

Tim Berners-Lee

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

Browser Icon

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

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

Network Infrastructure

IETF Logo

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.

Internet
(IETF)

World Wide Web
(W3C)

Location, language, culture

W3C Multilingual Web (MLW) Activity Logo

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

W3C Web Accessibility Initiative (WAI) Logo

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.

W3C

HTML
Working Group

HTML

...

WAI

WCAG WG
Working Group

WCAG

Accessibility Guidelines

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

Authoring Tool Accessibility Guidelines (ATAG)

Web Accessibility Komponenten

Web Content Accessibility Guidelines (WCAG)

Web Accessibility Komponenten

User Agent Accessibility Guidelines (UAAG)

Web Accessibility Komponenten

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

Teil 3

WCAG 2.1

Glimpse at the Web Content Accessibility Guidelines.

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.

E.g. Deaf-blindness, age-related impairments

How many are affected?

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

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

Example 1:

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

Jonas pulling a face
Jonas pulling a face
Example 2:

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

Google captcha with audio 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

Example:

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



						
Screenshot of HTML5 video player with controls and Web Video Text Track.
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

Example:

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

Adaptable presentation - visual browser

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

Adaptable presentation - markup

In a plain text browser you can see the colon.

Adaptable presentation - text browser view
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

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.

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

Examples of an inaccessible form

Not only conveying information through color mitigates the problem.

Example of an accessible form.
Example 2:

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

Beispielbild: Nicht barrierefreies Formular

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

Example:

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

Google search engine is all accessible with keyboard.
Example:

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

Google search engine is all accessible with keyboard.
Example:

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

Google search engine is all accessible with keyboard.
2.2. Enough Time

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

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

Example:

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

Animated carousel with a pause button on the website of Angela Merkel.
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

Example 1:

Animations in graphics, videos, ads, …

Screenshot of The Million Dollar Homepage
Example 2:

Assault on epilepsy patients in 2008.

Screenshot of CBS news articles on 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

Example 1:

Visible/invisible link to skip navigation

Screenshot of w3.org homepage, displaying a skip link.


						
Example 2:

Breadcrumb navigation

Screenshot of w3.org website 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

Example 1:

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


こんにちは
						
Example 2:

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


HTML
						
Example 2:

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

(Negative) Example:

Design consistant navigations (royal discipline).

Screenshot of ibm.com navigation
3.3. Input Assistance

"Help users avoid and correct mistakes."

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

Example:

Incomplete email address, user not logged in.

Screenshot of netflix.com sign up form, not warning that the email address is incomplete.
Example:

Proceeds to payment, user unknowingly logged in.

Screenshot of netflix.com sign up form, not warning that the email address is incomplete.
Example:

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

Screenshot of netflix.com sign up form, not warning that the email address is incomplete.

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

Example:

Future-proof? Validate your code!

Screenshot of W3C HTML Validator

The are many validation and linting tools:

Websites which are developed according to current specifications are robust.

Teil 4

References

Sources, references and further reading.

References - Web
  1. WCAG Overview
    https://www.w3.org/WAI/standards-guidelines/wcag/
  2. WCAG 2.1 at a Glance
    https://www.w3.org/WAI/standards-guidelines/wcag/glance/
  3. WCAG 2.1
    https://www.w3.org/TR/WCAG21/
  4. Understanding WCAG 2.1
    https://www.w3.org/WAI/WCAG21/Understanding/
  5. How to Meet WCAG 2.1
    https://www.w3.org/WAI/WCAG21/quickref/
  6. The A11Y Project
    https://a11yproject.com/

Thank you!

Author: · License: CC BY-NC-ND 4.0 · Bookmark: Permalink