Web Accessibility Standards - What, Why and How to Test ?

Web Accessibility Initiative (WAI) is an initiative by World Wide Web Consortium (W3C). The main responsibility of the WAI is to work with the global software community to develop and publish guidelines on web accessibility. In 1999 WAI published the first version of the guideline, named Web Content Accessibility Guideline ( WCAG 1.0 ).

In 2008, WAI published the WCAG 2.0, which is the latest version of the guideline. WCAG 2.0 have been widely accepted as the definitive guidelines on how to create accessible websites

WCAG 2.0

WCAG 2.0 organized under 04 main principles and 12 guidelines. Each of these guidelines has testable criteria. It basically covers a wide range of recommendations for making Web content more accessible. Following these guidelines will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these.

We need something like this because an estimated of one billion people in the world have some kind of disability. 39 million people are blind in the world and around 246 million people around the world have low vision. More importantly, it is not only for those with disabilities. A fully accessible website is designed to be flexible and responsive to all people.

WCAG 2.0 principles and guidelines

1. Website must be perceivable - Information and user interface components must be presentable to users in ways they can perceiveGuideline 1.1: 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
2. Guideline 1.2: Time-based media: Provide alternatives for time-based media.
3. Guideline 1.3: Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
4. Guideline 1.4: Make it easier for users to see and hear content including separating foreground from background.
5. Website must be operable  - User interface components and navigation must be operableGuideline 2.1: Make all functionality available from a keyboard.
6. Guideline 2.2: Provide users enough time to read and use the content.
7. Guideline 2.3: Do not design content in a way that is known to cause seizures
8. Guideline 2.4: Provide ways to help users navigate, find content, and determine where they are.
9. Website must be understandable - Information and the operation of user interface must be understandable.Guideline 3.1: Make text content readable and understandable.
10. Guideline 3.2: Make web pages appear and operate in predictable ways.
11. Guideline 3.3: Help users avoid and correct mistakes.
12. Website must be robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.Guideline 4.1 - Maximize compatibility with current and future user agents, including assistive technologies.

More details on the above guidelines can be found from official WCAG 2.0 - Documentation

Right, So What is for developers or testers? How to do the accessibility testing?

Let's talk about the important part of the accessibility topic. How can you develop/ or test a WCAG-friendly website, or in another word - How can you ensure your site is not violating the WCAG 2.0 guidelines? Let's look at a couple of tools which is available for the task.

NoCoffee

NoCoffee is an extension for Google Chrome, It acts as a visual emulator and helps you to understand how visually impaired users can view the web pages.

Nocoffee visual emulator in action: [This is how retinopathy patient view your web page]

Google Accessibility tools

Another handy/straightforward Chrome extension from Google. The extension will add an Audit section ( Accessibility Audit ) in the elements tab to the Chrome Developer tool. Audit result will appear as a list of rules which are violated by the respective p

Google Accessibility Tool - In action

Google Accessibility Tool - Results

aXE

aXe in action

aXe is again an extension for Google Chrome. It's pretty easy to use and analyze your web application. You need to go to the Chrome developer tools section once you installed the extension and there you can initiate your session. One of the advantage in aXe is that you can navigate to the exact point in your source code where it violated the WCAG standard and fix it from right there..

Wave

Wave has been there for a quite a long period of time. Wave can be used to test any public URL and not like the other tools, it gives the result on a side panel, which is easy to analyze. Wave also has an extension for Google Chrome and Firefox..

Wave in action

 Developers can use these tools to make sure the site they develop doesn't violate any WCAG rules. Testers can use these tools to find out the accessibility violations.

Advantages of following accessible guideline

Other than not involving in potential lawsuits, there are proven cases studies which indicated improving accessibility could increase sales. CNET received 30% off boost in their traffic after implementing a simple change in their videos. All they did was to add a transcript to their videos. More the people that have access to the website, more the reach.

Everyone should consider about the web accessibility, not because you had to follow the guidelines. Becuase it is the only way to ensure that disabled users have the same experience that other users have. Truth to be spoken, web accessibility is likely not something we've spend much time unless we had to. But now we have required tools/ ways to do, Let's make the web accessible for everyone.

[ Originally posted in https://chamalperera.com ]