Understanding WCAG

View slides

Overview

Web Content Accessibility Guidelines are widely accepted standards for web accessibility across the geographies. Web Content Accessibility Guidelines (WCAG 2.0) has become W3C’s recommendation on 11 December, 2008. WCAG 2.0 covers recommendation to make web accessible to all users including people with disabilities. WCAG 2.0 has developed through W3C process and in cooperation of several individuals and organizations with an objective to provide a shared standard that works for all across the world.

Layers of Guidance

WCAG 2.0 has developed with several layers of guidance for easy reference. Layers of guidelines includes:

Principals Guidelines Success Criteria
  • At the top
  • Four
  • Perceivable
  • Operable
  • Understandable
  • Robust
  • 12 Guidelines
  • Provides basic goals to authors
  • Not testable
  • Help authors understand Success Criterion and better impliment techniques
  • 63 Success Critarions
  • 3 Levels A, AA and AAA
  • Testable Success Critarion

What’s Level A, AA and AAA?

Level A – Minimum requirement; without complying to this level of conformance, users with disabilities would not be able to use application / website
Level AA – This is recommended level of conformance and shall provide reasonable user experience to all users including those with disabilities
Level AAA – Maximum level of Conformance

1. Perceivable

This principle illustrates guidance on making user interfaces in such a way that user should be able to perceive information regardless of the way it is presented. This section explains about:

Level Guideline Description Interpretation Exception
A 1.1.1 Text alternatives All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed. Any content that is not “text” must provide information in alternate way. Non-text content includes images, controls, input elements, sensory, CAPTCHA etc., A test, decorative images and CAPTCHA; but still they need to have alt=”” and CAPTCHA needs to have an alternative such as audio CAPTCHA etc.,
A 1.2.1 Audio only and video only prerecorded For prerecorded audio-only and prerecorded video-only media, the following are true, except when the audio or video is a media alternative for text and is clearly labeled. For prerecorded audio only, a document may be created with same story including dialogues, etc.,
For prerecorded video, alternatively, an audio track needs to be provided		 Not applicable
A 1.2.2 Captions Prerecorded Captions are provided for all prerecorded audio content in synchronized media This is to ensure audio content is available to all users including those with hard of hearing When audio itself is provided as an alternative to text and clearly labeled as such
A 1.2.3 Audio Description or media alternative An alternative for time-based media or audio description of the prerecorded video content is provided for syncronized media, except when the media is a media alternative for text and is clearly labeled as such. Audio description helps users with vision impairment to understand media including visual scenes, actions etc., When media itself is a media alternative for text and labeled as such
AA 1.2.4 Captions Live Captions are provided for all live audio content in synchronized media. To accommodate users with hard of hearing, all live videos should have synchronized text No exceptions
AA 1.2.5 Audio Descriptions (prerecorded) Audio description is provided for all prerecorded video content in synchronized media. To benefit users with vision impairment, it’s essential to provide audio description for audio content No exceptions
AAA 1.2.6 Sign language (prerecorded) Sign language interpretation is provided for all prerecorded audio content in synchronized media. To benefit users with hard of hearing who may prefer sign language, it’s good to provide synchronized sign language with audio content
AAA 1.2.7 Extended Audio description (prerecorded) Where pauses in foreground audio are insufficient to allow audio descriptions to convey the sense of the video, extended audio description is provided for all prerecorded video content in synchronised media. Sometimes when there is too much dialogue in visual presentation, audio description will be insufficient. In such situation, extended audio description should be provided to help blind, low vision and cognitive users to benefit from the visuals. NA
AAA 1.2.8 Media alternative (prerecorded) An alternative for time-based media is provided for all prerecorded synchronized media and for all prerecorded video-only media. This would benefit those who cannot see and hear well or at all. Media alternative can be something like all of the visual and auditory content be made avilable in text NA
AAA 1.2.9 Audio-only (Live) An alternative for time-based media that presents equivalent information for live audio-only content is provided. Objective of this success criterion is to make live audio events such as video conference, speeches, web casts etc., are made accessible to people who are hard of hearing, people who may not understand the language or accent. NA
A 1.3.1 Info & Relationships Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
  • Headings are currectly marked up and with right levels
  • Lists are correctly marked up
  • Form input elements are associated with implicit or explicit labels
  • Radio buttons / check boxes are associated with group level labels
  • Data tables are correctly marked up; data cells are correctly associated with row / column headers
  • Table mark up is not used to control the layout
  • Semantic markup is used
 NA
A 1.3.2 Meaningful sequence When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined Order of page contents must be meaningful in sequence. Even when styles are turned off and page is linear, stll user should be able to understand the content. Meaningful sequence is required only when it gets affected. For instance, a magazine with multi call-out side bars does not get affected.
A 1.3.3 Sensory characteristics Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound. Do not convey information via the sole means of shape, position, location, visual or audio cues. NA
A 1.4.1 Use of Color Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. Do not provide information only by the means of color; this causes difficulty to some users who cannot differentiate between colors. E.g. Required fields are in red, Q1 sales are in blue etc., NA
A Audio Control If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level.
  • Do not have an audio played automatically
  • If audio has to be played automatically and length is more than 3 seconds, provide options for users to pause, stop or reduce volume to 0.
    • Playing audio automatically causes interference to screen reader usersNA
A 1.4.3 Contrast minimum The visual presentation of text and images of text has a contrast ratio of at least 4.5:1. Ensure contrast between foreground and background has minimum ratio of 4.5:1. This will help users with low vision, elderly and cognitive disabilities. Of course good color combinations work for everyone.
  • Large text have contrast ratio of 3:1
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement
  • Logo type: Text that is part of logo or brand name does not have a minimum contrast requirement
AA 1.4.4 Resize text Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. User should be able to resize text by just using browser zoom options (e.g. CTRL+ on FF) but still functionality and content should remain same Captions, images of text
AA 1.4.5 Images of text If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text It’s advisable to use natural text where possible and avoid embedding text on to image Logo types, where a specific style is essential and cannot be achieved with text
AAA 1.4.6 Contrast (Enhanced) The visual presentation of text and images of text has a contrast ratio of at least 7:1, This will be helpful for users with moderately low vision Same as 1.4.3
AAA 1.4.7 Low or No background audio For prerecorded audio-only content that (1) contains primarily speech in the foreground, (2) is not an audio CAPTCHA or audio logo, and (3) is not vocalization intended to be primarily musical expression such as singing or rapping, at least one of the following is true:

  • No Background: The audio does not contain background sounds.
  • Turn Off: The background sounds can be turned off.
  • 20 dB: The background sounds are at least 20 decibels lower than the foreground speech content, with the exception of occasional sounds that last for only one or two seconds
 If there is a background audio for a multimedia content, ensure that user should be able to turn off or background audio is lower than foreground audio NA
AAA 1.4.8 Visual Presentation For the visual presentation of blocks of text, a mechanism is available to achieve the following:

  1. Foreground and background colors can be selected by the user.
  2. Width is no more than 80 characters or glyphs (40 if CJK).
  3. Text is not justified (aligned to both the left and the right margins).
  4. Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.
  5. Text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window.
 This will provide enhanced flexibility to users for customizing interface as per their needs NA
AAA 1.4.9 Images of text (No exception) Images of text are only used for pure decoration or where a particular presentation of text is essential to the information being conveyed.

Note 1: Logotypes (text that is part of a logo or brand name) are considered essential.

 Except where it’s essential to use images of text, it’s not recommended to use images of text Logo types, pure decoration purpose

2. Operable