WCAG 2.0 - WEB CONTENT ACCESSIBILITY GUIDELINES

Day 5# 30 days of Accessibility testing

Day#5 Read the 12 guidelines of Web Content Accessibility Guidelines (WCAG 2.0.) Write a short post on one of them 

 

The Web Content Accessibility Guidelines (known as WCAG 2.1) are an internationally recognized set of recommendations for improving web accessibility.

They explain how to make digital services, websites, and apps accessible to everyone, including users with impairments to their:

• vision - like severely sight impaired (blind), sight impaired (partially sighted) or color blind people

• hearing - like people who are deaf or hard of hearing

• mobility - like those who find it difficult to use a mouse or keyboard

• thinking and understanding - like people with dyslexia, autism, or learning difficulties

WCAG 2.0 is based on 4 design principles:

• Perceivable - Information and user interface components must be presentable to users in ways they can perceive.

• This means that users must be able to perceive the information being presented (it can't be invisible to all of their senses)

• Operable - User interface components and navigation must be operable.

• This means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform)

• Understandable - Information and the operation of user interface must be understandable.

• This means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding)

• Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

• This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible)

Text Alternatives: Provide text alternatives for any non-text content

• Images, form image buttons, and image map hot spots have appropriate, equivalent alternative text.

• Images that do not convey content, are decorative, or contain content that is already conveyed in the text are given null alt text (alt="") or implemented as CSS backgrounds. All linked images have descriptive alternative text.

• Equivalent alternatives to complex images are provided in context or on a separate linked page.

• Form buttons have a descriptive value.

• Form inputs have associated text labels.

• Embedded multimedia is identified via accessible text.

• Frames and iframes are appropriately titled.

Example :

1. An audio recording of a speech

The link to an audio clip says, "Chairman's speech to the assembly." A link to a text transcript is provided immediately after the link to the audio clip.

2. An animation that illustrates how a car engine works

An animation shows how a car engine works. There is no audio and the animation is part of a tutorial that describes how an engine works. Since the text of the tutorial already provides a full explanation, the image is an alternative for text and the text alternative includes only a brief description of the animation and refers to the tutorial text for more information.