Ryan S. Overdorf contact and professional info

Making Web Pages Accessible: a Pithy Guide to WCAG 2.0

Making Web Pages Accessible Pithy Guide Site Map

skip Table of Contents

Main Page Table of Contents

Introduction

Principle 1 Perceivable

Principle 2 Operable

Principle 3 Understandable

Principle 4 Robust

Introduction

Back to Table of Contents Introduction

The Making Web Pages Accessible: a Pithy Guide to WCAG 2.0 (Pithy Guide to WCAG 2.0) web site is maintained with the help of the the Computing Services Special Interest Section (CS-SIS) Adaptive Technologies Committee and the Digitization and Educational Technology Special Interest Section (DET-SIS) of the American Association of Law Libraries. This site introduces and summarizes the Web Content Accessibility Guidelines 2.0. Because it is only a summary it cannot be used to claim comformance with WCAG 2.0. Guidelines and the Success Criteria numbers, titles and levels are "Copyright © 2015 W3C® (MIT, ERCIM, Keio, Beihang). This software or document includes material copied from or derived from Web Content Accessibility Guidelines version 2.0." Consult the W3C document and software notice and license for more detailed licensing information.

The Pithy Guide to WCAG 2.0 has two features that distinguish it from other efforts to simplify WCAG 2.0 (e.g., the WebAIM WCAG 2.0 Checklist). First, it makes no effort to be comprehensive in its listing of exceptions to the Criteria. As such, it is not a replacement for the other resources. Instead, it includes only the Criteria exceptions most likely to be encountered by Pithy Guide readers. Second, the demos include fully marked up and scripted conformance failures rather than examples of HTML markup or JavaScript scripting. As a consequence, some of the demos are not fully accessible.

WCAG 2.0 is organized by Principles, Guidelines, and Success Criteria.  The principles are general objectives and each of the four principles can be summarized in a single word: perceivable, operable, understandable, and robust.  Each of the 12 guidelines is a one sentence statement of what needs to be achieved.  The 25 Success Criteria relevant to "A" level conformance and the 13 additional Success Criteria relevant to "AA" level conformance provide highly technical testable criteria by which to measure conformance. The Success Criteria are the focus of the summary. In a few cases where the Criteria are very short, the text is quoted rather than summarized. Most but not all summaries have examples of conformance failures. W3C links are provided for all Criteria. A few Criteria have additional useful links.

Principle 1 Perceivable

Back to Table of Contents Perceivable

Guideline 1.1 Text Alternatives

Back to Table of Contents Text Alternatives

Success Criterion 1.1.1 Non-text Content (Level A)

Summary:  Images need alternative text, subject to certain exceptions.  The most relevant exception to readers: mere decorations or logos need no textual equivalent.

Detection:  Missing or empty alt attributes can be detected by the free WAVE and AChecker accessibility checkers. Only manual review can determine whether alternative text is adequately descriptive.

Additional Notes:  Textual equivalents need only contain necessary information.  They do not have to contain details about the images that a reader with normal vision does not need to know. 

Consequence of Non-Conformance:  Images without alt attributes are effectively invisible to screen readers.  The screen reader user thus loses important information communicated by the image unless conformance is maintained.

Making Web Pages Accessible Example: conformance failure demo 1.1.1

Demo 1.1.1 as seen by AChecker: AChecker example for demo 1.1.1

Demo 1.1.1 as seen by WAVE: WAVE example for demo 1.1.1

Demo 1.1.1 manual review: manual review example for demo 1.1.1

Relevant W3C linkstext of 1.1.1, How to Meet 1.1.1, Understanding 1.1.1

Other Useful Links: WebAIM Alternative Text

Guideline 1.2 Time-Based Media

Back to Table of Contents Time-Based Media

Success Criterion 1.2.1: Audio-only and Video-only (Prerecorded) (Level A)

Summary:  Audio-only tracks need a transcript unless the track itself is an alternative for text.  Video-only tracks either need audio description or textual description unless the track itself is an alternative for text.

Detection:  The audio or video file requires manual review to verify the presence of a transcript or audio description track.

Additional Notes:  Use of speech recognition software (e.g., Windows Speech Recognition or Dragon Naturally Speaking) can reduce the time necessary to create a transcript if used simultaneously with audio-recording.

Consequence of Non-Conformance:  Deaf individuals lose all access to audio-only tracks and blind individuals lose all access to video-only tracks.

Making Web Pages Accessible Example: conformance failure demo 1.2.1

Relevant W3C links:  text of 1.2.1, How to Meet 1.2.1Understanding 1.2.1.

Success Criterion 1.2.2 Captions (Prerecorded) (Level A)

Summary:  A video needs captions unless the video itself is an alternative for text.

Detection: The video track requires manual review to verify the presence of an accurate caption file.

Additional Notes:  Google's auto-captioning for YouTube does not in and of itself meet this criterion.  It can, however, be useful.  If you uploaded your video to your YouTube account you can correct the auto-captions without downloading them and this saves a considerable amount of time over creating a caption file from scratch.  They also can be downloaded, corrected, and re-uploaded.

Consequence of Non-Conformance:  Deaf individuals lose access to any information that is present only in the audio and cannot be discerned from the visual elements.

Making Web Pages Accessible Example: conformance demos for 1.2.2, 1.2.3 and 1.2.5

Relevant W3C links:  Text of 1.2.2, How to Meet 1.2.2Understanding 1.2.2

Other Useful Links: YouTube Help for Caption Editing

Success Criterion 1.2.3 Audio Description or Media Alternative (Prerecorded) (Level A)

Summary:  Videos need either audio description or transcripts that describe the visual elements communicating information not otherwise present in the audio.  Audio description refers to describing the visual elements not present in the dialogue.

Detection: The video track requires manual review to verify the presence of an audio description track or transcript.

Additional Notes:  Commercially produced audio description tracks are available for some movies, as in this Frozen trailer. Audio description may be the most challenging task in webpage accessibility that doesn't involve live video.

Consequence of Non-Conformance:  Visual information not present in the audio and not described or presented in screen readable text will be completely lost to the blind or low vision user.

Making Web Pages Accessible Example: conformance demos for 1.2.2, 1.2.3 and 1.2.5

Relevant W3C linkstext of 1.2.3, How to Meet 1.2.3Understanding 1.2.3

Success Criterion 1.2.4 Captions (Live) (Level AA)

Summary: Live webcasts need to be captioned.

Consequence of Non-Conformance:  Audio information not present in captions will be completely lost to the deaf or low hearing user.

Relevant W3C links:  text of 1.2.4, How to Meet 1.2.4Understanding 1.2.4

Success Criterion 1.2.5 Audio Description (Prerecorded) (Level AA)

Summary:  All videos must have audio description tracks available.

Detection: Videos require manual review to verify the presence of an audio description track or transcript.

Additional Notes:  Audio description cannot be performed in a "talking head" video in the same sense as it can for a movie.  The presenter does not pause often enough to allow audio description during pauses. This Success Criteria is written with movies in mind, where there are often long pauses between dialogue.  Nevertheless, it is possible to perform a limited amount of audio description in a presentation as shown in an example below.

Consequence of Non-Conformance:  Visual information not present in the audio and not described will be completely lost to the blind or low vision user.

Making Web Pages Accessible Example: conformance demos for 1.2.2, 1.2.3 and 1.2.5

Relevant W3C linksText of 1.2.5, How to Meet 1.2.5Understanding 1.2.5

Guideline 1.3 Adaptable

Back to Table of Contents Adaptable

Success Criterion 1.3.1 Info and Relationships (Level A)

Summary:  Information cannot be solely conveyed through visual cues such as font size, placement of input boxes, or comparable presentation forms.  It must also be made available to assistive technologies such as screen readers (in technical terms, made "programmatically determinable").

Detection: Certain conformance failures regarding form or table elements can be detected by the free WAVE and AChecker accessibility checkers. Other conformance failures require manual review.

Consequence of Non-Conformance:  Information presented exclusively through visual cues is unavailable to screen readers.  For example, if there is an input box but the box is unlabeled, the screen reader cannot determine what input is required.  Therefore (especially if there are multiple input boxes), the screen reader user may not know what input is required.

Making Web Pages Accessible Example: conformance failure demo 1.3.1

Relevant W3C linkstext of 1.3.1, How to Meet 1.3.1Understanding 1.3.1

Other Useful Links: WebAIM Semantic Structure

Success Criterion 1.3.2 Meaningful Sequence (Level A)

Summary:  If there is one correct reading sequence, assistive technologies such as screen readers must be able to determine proper reading order (in technical terms, the reading order is "programmatically determinable").

Detection:   Requires manual review of markup language elements that can affect reading order or use of a free screen reader such as NVDA.

Consequence of Non-Conformance:  If a screen reader cannot discern the correct reading order, the result may be gibberish to a screen reader user (e.g., using white spaces rather than table markup to format a table).

Making Web Pages Accessible Example: conformance failure demo 1.3.2

Relevant W3C linkstext of 1.3.2, How to Meet 1.3.2Understanding 1.3.2

Success Criterion 1.3.3 Sensory Characteristics (Level A)

Summary:  Instructions must be programmatically determinable by a screen reader and similar assistive technologies. Therefore they cannot solely rely on shape, size, etc.

Detection:   Requires manual review for relevant characteristics.

Consequence of Non-Conformance:  If a screen reader cannot read all of the instructions, the screen reader user may not be able to read the instructions (e.g., if a graphical symbol alone is used to convey information).

Making Web Pages Accessible Example: conformance failure demo 1.3.3

Relevant W3C linkstext of 1.3.3, How to Meet 1.3.3Understanding 1.3.3

Guideline 1.4 Distinguishable

Back to Table of Contents Distinguishable

Success Criterion 1.4.1 Use of Color (Level A)

Summary:  Color cannot be the only means of presenting information.

Detection:  Requires manual review of color use

Consequence of Non-Conformance:  Screen readers cannot distinguish between different elements based on color alone. Any information presented exclusively through color is invisible to the screen reader user. It may be invisible to those suffer from color-blindness as well.

Making Web Pages Accessible Example: conformance failure demo 1.4.1

Relevant W3C linkstext of 1.4.1, How to Meet 1.4.1Understanding 1.4.1

Success Criterion 1.4.2 Audio Control (Level A)

Summary:  Any audio playing for more than three seconds must have a way of being paused or stopped.

Detection:  Requires manual review of any audio tracks

Consequence of Non-Conformance:  Very annoyed users, especially if the ongoing audio interferes with the user's ability to comprehend the information.  This is particularly true of a screen reader user.  Few users can follow two audio streams.

Making Web Pages Accessible Example: conformance failure demo 1.4.2

Relevant W3C linkstext of 1.4.2, How to Meet 1.4.2Understanding 1.4.2

Success Criterion 1.4.3 Contrast (Minimum) (Level AA)

Summary:  Subject to certain exceptions (logos, large text, and mere decorations), text and images of text must have a 4.5 to 1 contrast ratio.

Detection:   Contrast ratio can be measured using various online analysis tools, including the WAVE Color Contrast Checker. Images of text must be validated manually by matching the foreground and background colors of the images as closely as possible to hex or RGB color codes and inputting those codes into a color analysis tool such as the one above.

Consequence of Non-Conformance:  Insufficiently contrasting information is invisible to low vision users.

Making Web Pages Accessible Example: conformance failure demo 1.4.3

Relevant W3C linksText of 1.4.3, How to Meet 1.4.3Understanding 1.4.3

Success Criterion 1.4.4 Resize Text (Level AA)

Summary:  Subject to certain exceptions (e.g., images of text), text must be able to be re-sized without loss of content or functionality.  That is, the page design must not interfere with the re-sizing of text.

Detection:   Review can be accomplished using a browser's zoom function.

Consequence of Non-Conformance:  Affected text may be unreadable for low vision users.

Making Web Pages Accessible Example: conformance failure demo 1.4.4

Relevant W3C linksText of 1.4.4, How to Meet 1.4.4Understanding 1.4.4

Success Criterion 1.4.5 Images of Text (Level AA)

Summary:  Subject to certain exceptions (customizable images, essential uses such as logos), images of text should not be used if text can achieve the same effect.

Detection:  Manual review is required to determine whether images of text are the only means to achieve a particular visual presentation.

Consequence of Non-Conformance:  Images of text may be unreadable for low vision users.

Making Web Pages Accessible Example: conformance failure demo 1.4.5

Relevant W3C linksText of 1.4.5, How to Meet 1.4.5,  Understanding 1.4.5

Principle 2 Operable

Back to Table of Contents Operable

Guideline 2.1 Keyboard Accessible

Back to Table of Contents Keyboard Accessible

Success Criterion 2.1.1 Keyboard (Level A)

Summary:  Subject to certain exceptions, all functions must be available through a keyboard (i.e., every function that would normally be performed using a mouse).

Detection:   Mouse event handlers not paired with keyboard event handlers can be detected by the free WAVE and AChecker accessibility checkers. Other conformance failures require manual review.

Consequence of Non-Conformance:  Some users have sufficient difficulty using a mouse to render mouse-only functions unusable for those users.

Making Web Pages Accessible Example: conformance failure demo 2.1.1

Relevant W3C linksText of 2.1.1, How to Meet 2.1.1Understanding 2.1.1

Other Useful Links: WebAIM Keyboard Accessibility

Success Criterion 2.1.2 No Keyboard Trap (Level A)

Summary:  The page must not require a mouse to escape any page element.

Detection:   Requires manual review using the keyboard to verify the page can be navigated.

Consequence of Non-Conformance:  Users who cannot use a mouse may be unable to move past and/or out of a certain point on a page.

Making Web Pages Accessible Example: conformance failure demo 2.1.2

Relevant W3C linkstext of 2.1.2 How to Meet 2.1.2Understanding 2.1.2

Other Useful Links: WebAIM Keyboard Accessibility

Guideline 2.2 Enough Time

Back to Table of Contents Enough Time

Success Criterion 2.2.1 Timing Adjustable (Level A)

Summary:  Subject to certain exceptions, users must be able to adjust any time limits.

Detection:   The free WAVE and AChecker accessibility checkers can detect an automatic refresh. Other timing issues require manual review of relevant time limits.

Consequence of Non-Conformance: An unadjustable time limit can force unwanted changes in content or context.

Making Web Pages Accessible Example: conformance failure demo 2.2.1

Relevant W3C links: text of 2.2.1, How to Meet 2.2.1, Understanding 2.2.1

Success Criterion 2.2.2 Pause, Stop, Hide (Level A)

Summary: For certain information that moves, scrolls, or updates, users must be able to pause, stop, or hide the information.

Detection:  Requires manual review of relevant information.

Consequence of Non-Conformance:  Some users may find this information distracting and it may interfere with their ability to comprehend the other information on the page.

Making Web Pages Accessible Example: conformance failure demo 2.2.2

Relevant W3C linksText of 2.2.2, How to Meet 2.2.2Understanding 2.2.2

Guideline 2.3 No Seizures

Back to Table of Contents No Seizures

Success Criterion 2.3.1 Three Flashes or Below Threshold (Level A)

Quoted Text of 2.3.1: "Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds."

Detection:   Requires manual review of flashing content.

Consequence of Non-Conformance:  Can cause seizures.

Relevant W3C linksText of 2.3.1, How to Meet 2.3.1Understanding 2.3.1

Guideline 2.4 Navigable

Back to Table of Contents Navigable

Success Criterion 2.4.1 Bypass Blocks (Level A)

Summary: Users must be able to bypass content that repeats itself on multiple pages.

Detection:  Requires manual review of repeated content blocks. A common way to address these is to add a "skip to content" link.

Consequence of Non-Conformance:  Blind or low vision users using screen reading software have more difficulty skipping over repeated content.  Without shortcuts to skip such content they may become very frustrated.

Making Web Pages Accessible Example: conformance failure demo 2.4.1a, conformance failure demo 2.4.1b

Relevant W3C linksText of 2.4.1, How to Meet 2.4.1, Understanding 2.4.1

Success Criterion 2.4.2 Page Titled (Level A)

Summary: Page titles must be sufficiently descriptive.

Detection: Page titles need to be manually reviewed.

Consequence of Non-Conformance: Blind or low vision users using screen reading software are more dependant than users with normal vision on page titles to describe content because they cannot skip over irrelavent content as easily as users with normal vision. Improperly titled pages interfere with the evaluation process.

Making Web Pages Accessible Example: conformance failure demo 2.4.2

Relevant W3C linkstext of 2.4.2, How to Meet 2.4.2,Understanding 2.4.2

Success Criterion 2.4.3 Focus Order (Level A)

Summary: If navigation order affects meaning, the order of focusable objects must preserve proper meaning.

Detection:   Review requires use of free screen reading software such as NVDA or manual review using a keyboard.

Consequence of Non-Conformance:  Screen readers follow focus order. A garbled focus order garbles meaning.

Making Web Pages Accessible Example: conformance failure demo 2.4.3

Relevant W3C linkstext of 2.4.3, How to Meet 2.4.3, Understanding 2.4.3

Success Criterion 2.4.4 Link Purpose (In Context) (Level A)

Summary: A link or its context must be clear unless the link is ambiguous to everyone.

Detection:   Context requires manual review.

Consequence of Non-Conformance:  Blind or low vision users using screen reading software may not understand where an ambiguous link leads.

Making Web Pages Accessible Example: conformance failure demo 2.4.4

Relevant W3C linkstext of 2.4.4, How to Meet 2.4.4,  Understanding 2.4.4

Success Criterion 2.4.5 Multiple Ways (Level AA)

Summary: Subject to certain exceptions, there are multiple ways to locate any given web page within a web site.

Detection:   Ensuring multiple paths to webpages requires manual review.

Consequence of Non-Conformance:  If there is only one way to access a web page, some users may find access difficult.

Making Web Pages Accessible Example: One example of non-conformance would be a web site lacking a site map.

Relevant W3C linkstext of 2.4.5, How to Meet 2.4.5, Understanding 2.4.5

Success Criterion 2.4.6 Headings and Labels (Level AA)

Summary: Headings and/or labels should be sufficiently clear.

Detection :   While the free WAVE and AChecker accessibility checkers can detect improper heading markup language, headings and labels should be manually reviewed for clarity.

Consequence of Non-Conformance:  Bad labels or headings can obscure content.

Making Web Pages Accessible Example: conformance failure demo 2.4.6

Relevant W3C linkstext of 2.4.6, How to Meet 2.4.6, Understanding 2.4.6

Success Criterion 2.4.7 Focus Visible (Level AA)

Summary: The user must have a means of making the focus indicator visible.

Detection: Focus indicators must be manually reviewed with a keyboard.

Consequence of Non-Conformance:  Low vision users using a keyboard may have difficulty following the focus indicator if it is not visible

Making Web Pages Accessible Example: conformance failure demo 2.4.7

Relevant W3C linkstext of 2.4.7, How to Meet 2.4.7, Understanding 2.4.7

Principle 3 Understandable

Back to Table of Contents Understandable

Guideline 3.1 Readable

Back to Table of Contents Readable

Success Criterion 3.1.1 Language of Page (Level A)

Summary: The language of a web page must be specified in the markup language (i.e., be programmatically determinable).

Detection: The free WAVE and AChecker accessibility checkers can detect missing languages in markup language.

Consequence of Non-Conformance:  No consequences for an English language page if user's screen reader is reading in English.

Making Web Pages Accessible Example: conformance failure demo 3.1.1

Relevant W3C linkstext of 3.1.1, How to Meet 3.1.1, Understanding 3.1.1

Success Criterion 3.1.2 Language of Parts (Level AA)

Summary: With certain exceptions (e.g., technical terms), any change in the language of a web page must be specified in the markup language (i.e., be programmatically determinable).

Detection: Language changes require manual review.

Consequence of Non-Conformance:  Unidentified language changes can result in screen readers mispronouncing said phrases.

Making Web Pages Accessible Example: conformance failure demo 3.1.2

Relevant W3C linkstext of 3.1.2, How to Meet 3.1.2, Understanding 3.1.2

Guideline 3.2 Predictable

Back to Table of Contents Predictable

Success Criterion 3.2.1 On Focus (Level A)

Summary: Focus does not automatically initiate a context change.

Detection: Context changes require manual review.

Consequence of Non-Conformance:  Unexpected context changes can be confusing.

Making Web Pages Accessible Example: conformance failure demo 3.2.1

Relevant W3C linkstext of 3.2.1, How to Meet 3.2.1, Understanding 3.2.1

Success Criterion 3.2.2 On Input (Level A)

Summary: Inputs do not unexpectedly initiate a context change.

Detection: Context changes require manual review.

Consequence of Non-Conformance:  Unexpected context changes can be confusing.

Making Web Pages Accessible Example: conformance failure demo 3.2.2

Relevant W3C linkstext of 3.2.2, How to Meet 3.2.2, Understanding 3.2.2

Other Useful Links: WebAIM Creating Accessible Forms

Success Criterion 3.2.3 Consistent Navigation (Level AA)

Summary: Navigational aids should appear in the same relative order unless changed by the user.

Detection: Navigational aids require manual review.

Consequence of Non-Conformance:  Unexpected changes in navigational order can be confusing.

Making Web Pages Accessible Example: The menu at the top of the page conforms to this criterion because it always appears in the same relative order even though the specific choices available change.

Relevant W3C linkstext of 3.2.3, How to Meet 3.2.3, Understanding 3.2.3

Success Criterion 3.2.4 Consistent Identification (Level AA)

Text of 3.2.4: "Components that have the same functionality within a set of Web pages are identified consistently."

Detection: Ensuring consistent identification requires manual review.

Consequence of Non-Conformance:  Inconsistent identification can be confusing.

Making Web Pages Accessible Example: conformance failure demo 3.2.4

Relevant W3C linkstext of 3.2.4, How to Meet 3.2.4, Understanding 3.2.4

Guideline 3.3 Input Assistance

Back to Table of Contents Input Assistance

Success Criterion 3.3.1 Error Identification (Level A)

Text of 3.3.1: "If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text."

Detection: Error identification requires manual review.

Consequence of Non-Conformance:  If incorrect user inputs do not result in error messages, screen reader users may not realize input errors (as opposed to problems with the form) have occurred.

Making Web Pages Accessible Example: conformance failure demo 3.3.1

Relevant W3C linkstext of 3.3.1, How to Meet 3.3.1, Understanding 3.3.1

Other Useful Links: WebAIM Creating Accessible Forms

Success Criterion 3.3.2 Labels or Instructions (Level A)

Text of 3.3.2: "Labels or instructions are provided when content requires user input."

Detection: Labels and instructions require manual review.

Consequence of Non-Conformance:  Incorrect labels or instructions may result in neccessary form inputs not being correctly identified.

Making Web Pages Accessible Example: conformance failure demo 3.3.2

Relevant W3C linkstext of 3.3.2, How to Meet 3.3.2, Understanding 3.3.2

Other Useful Links: WebAIM Creating Accessible Forms

Success Criterion 3.3.3 Error Suggestion (Level AA)

Summary: Corrections are offered unless contrary to security or purpose (e.g., a test).

Detection: Corrections require manual review.

Consequence of Non-Conformance:  If no suugestions are offered for error correction, additional errors may be more likely than in the absence of suggestions.

Making Web Pages Accessible Example: conformance failure demo 3.3.3

Relevant W3C linkstext of 3.3.3, How to Meet 3.3.3, Understanding 3.3.3

Success Criterion 3.3.4 Error Prevention (Legal, Financial, Data) (Level AA)

Summary: Legal, financial or stored data needs to be reversable, checkable, or confirmable.

Detection: These forms require manual review.

Consequence of Non-Conformance:  Users with disabilities may find it more challeging to avoid mistakes.

Relevant W3C linkstext of 3.3.4, How to Meet 3.3.4, Understanding 3.3.4

Principle 4 Robust

Back to Table of Contents Robust

Guideline 4.1 Compatible

Back to Table of Contents Compatible

Success Criterion 4.1.1 Parsing (Level A)

Summary: Markup language must be properly structured.

Detection: While the W3C Validator can do some automated review, manual review is also necessary.

Consequence of Non-Conformance:  Screen reader users may encounter broken page elements.

Making Web Pages Accessible Example: conformance failure demo 4.1.1

Relevant W3C linkstext of 4.1.1, How to Meet 4.1.1, Understanding 4.1.1

Success Criterion 4.1.2 Name, Role, Value (Level A)

Summary: User agents can fully interact with properly structured user interface components.

Detection: While the W3C Validator can do some automated review, manual review is also necessary.

Consequence of Non-Conformance:  Using non-conforming custom controls can degrade the user experience.

Relevant W3C linkstext of 4.1.2, How to Meet 4.1.2, Understanding 4.1.2

Making Web Pages Accessible Pithy Guide Site Map