Web Content Accessibility Guidelines
Author: Jonas Jared Jacek · License: CC BY-NC-ND 4.0 · Bookmark: Permalinkduration: ~30 min
History of the World Wide Web and the work of W3C.
1968 -
first workable prototype of ARPANET1983 -
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 has developed the first website, the first browser and the first web server.
He wrote the first specifications for URLs, HTTP and HTML.
In 1994, Tim Berners-Lee founded the W3C, a standardization organization for the technologies of the Web.
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.
W3C develops hundreds of standards:
More than 450 organizations are active in W3C.
Extract from the list of members:
Work of W3C for accessibility on the World Wide Web.
Tim Berners-Lee"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 …
Inclusion work regarding hardware and software is expressed i.a. through cooperation with manufacturers.
For example: Google, Mozilla, Microsoft, Canon, Siemens.
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.
IETF develops the technologies of the Internet.
W3C develops the technologies of the Web.
Internet
(IETF)
World Wide Web
(W3C)
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.
Inclusion work regarding physical and mental abilities happens in the W3C Web Accessibility Initiative (WAI).
Develops: ATAG, UAAG and WCAG.
Working Groups & Task Forces develop standards.
W3C
HTML
Working Group
HTML
...
WAI
WCAG WG
Working Group
WCAG
Authoring Tool Accessibility Guidelines (ATAG)
Web Content Accessibility Guidelines (WCAG)
User Agent Accessibility Guidelines (UAAG)
Group of approximately 150 people from industry, disability organizations, government agencies and research institutions.
Extract from the list of members:
Glimpse at the Web Content Accessibility Guidelines.
Web Content Accessibility Guidelines cover a wide range of recommendations for making Web content more accessible:
Some people have combinations of different kinds of disabilities.
E.g. Deaf-blindness, age-related impairmentsOne billion people, or 15% of the world’s population, experience some form of disability.Worldbank
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/.
Characteristics of accessible Web contents:
"Information and user interface components must be presentable to users in ways they can perceive."
"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."
The alt
attribute on the HTML <img>
element is a text alternative.
<img src="jonas.jpg" alt="Jonas pulling a face">
The audio alternative on captchas ensures content can be perceived, where text is not an option.
"Provide alternatives for time-based media like audio and video."
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>
"Create content that can be presented in different ways (for example simpler layout) without losing information or structure."
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.
"Make it easier for users to see and hear content including separating foreground from background."
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.
Characteristics of accessible Web contents:
"User interface components and navigation must be operable."
"Make all functionality available from a keyboard."
Keyboard accessible (e.g. using the Tab key)
Keyboard accessible (e.g. using the Tab key)
Keyboard accessible (e.g. using the Tab key)
"Provide users enough time to read and use content."
Allow to pause, stop, hide e.g. carousel animations.
"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.
"Provide ways to help users navigate, find content, and determine where they are."
Visible/invisible link to skip navigation
<a class="skip-link" href="#content">Skip to content</a>
Breadcrumb navigation
Characteristics of accessible Web contents:
"User interface components and navigation must be operable."
"Make text content readable and understandable."
Define the language of contents of an HTML element with the lang
attribute.
<span lang="ja">こんにちは</span>
Provide the expanded form or meaning of abbreviations (e.g. HTML).
<abbr title="HyperText Markup Language">HTML</abbr>
Provide the expanded form or meaning of abbreviations (e.g. HTML).
<p>I like HyperText Markup Language (HTML).</p>
"Make Web pages appear and operate in predictable ways."
Design consistant navigations (royal discipline).
"Help users avoid and correct mistakes."
Incomplete email address, user not logged in.
Proceeds to payment, user unknowingly logged in.
Going back, does not allow changes, still logged in.
Characteristics of accessible Web contents:
Allgemeine Anforderung:
"Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies."
"Maximize compatibility with current and future user agents, including assistive technologies."
Future-proof? Validate your code!
The are many validation and linting tools:
Websites which are developed according to current specifications are robust.
Sources, references and further reading.