This article talks about the Web Content Accessibility Guidelines version 2. This document, published by W3C, provides a list of criteria which we should be following to ensure that our websites are accessible to various user groups.
This article will get you thinking about how users interact with your website and how you can make it easier for them. This in turn allows you to gain a better understanding of what problems various user groups may encounter with your website.
Lets have a look at what the WCAG2 document contains and what it means for our websites.
WCAG2 is broken down into 4 sections.
- Perceivable - Information and user interface(UI) components must be presented in a way users can understand.
- Operable - Users must be able to operate your website
- Understandable - Content and the user interface must be understandable
- Robust - Content must be able to be interpreted by a wide range of user agents and assisted technologies.
Each section in WCAG 2 has a number of points. These are broken down below.
Perceivable
1) Provide text alternatives to non-text content
Ensure all non-text content has a proper textual description. User controls or input forms should have relevant names (i.e. name attributes). Captchas should have multiple ways to solve them to allow for various disabilities. (i.e. audio etc)
2) Providing alternatives for time based media
In a nutshell, audio should have a text alternative. Video with sound should have captions to allow the deaf to understand the content.
3) Create content that can be displayed in different ways without loss of meaning or structure.
Your content should able to be understood and interpreted by a variety of technologies. This in-turn allows assistive technologies to kick in and display your site differently. (i.e. a more basic layout, via audio etc)
4) Make it easier for users to see and hear content
Ensure your web site can be properly interpreted by visitors. Allow visitors to modify content. Ensure background audio doesn’t interfere with screen readers. This section should be broken down further.
- Color shouldn’t be used as a means to convey information. This to aid color blind visitors.
- There should be a means to disable background music which lasts for more than 3 seconds. Extended background audio can make it difficult for screen reader users.
- Provide enough contrast to allow visitors with ‘moderately low vision’ to be able to properly use your site.
- Allow text to be re-sized up to 200% without loss of content or functionality.
- If the same effect can be achieved with text, you should use text as opposed to images of text.
Operable
1) Make all functionality available from the keyboard
The key here is to allow your site to be properly navigated from the keyboard. You need to ensure that timings for specific keystrokes are not required. The second main part is to avoid keyboard traps. If you can tab or arrow into a component there should be a way to tab / arrow out of it. Failing this you should provide instruction on how to escape the trap with a keyboard.
2) Allow users enough time to read and assimilate content
Allow users proper time to read and use content. If there is a time limit set on some content then you should provide a method in which to extend, adjust or disable the time limit. You will fail this criteria if you have timed server redirects or scrolling text without a pause or restart function.
There should also be means to pause/stop/hide moving, blinking, scrolling, or auto-updating information. This is to avoid distracting users while on the web page.
3) Do not design content in ways known to cause seizures
Items shouldn’t flash more than 3 times a second and should be below the general flash and red flash thresholds.
4) Help users navigate, find content and determine where they are.
Page titles should properly describe the content. You should be able to skip directly to content where there are common blocks of text or images. I.e. if you have a large header or an application on every page. There should be a method to skip over it.
Another part of this section is to ensure that users navigate sequentially through your content. Ideally when tabbing through your page it should tab through to each element in turn. If you are using tabindex you may interrupt this flow, thus making it difficult for users to navigate through your content.
Finally, the purpose of a hyperlink should be able to be determined by the link text alone.
Understandable
1) Make text readable and understandable.
Language of page should be able to be programatically determined. To get a higher pass you can add further information such as a ‘lower secondary school’ reading level, add a way to expand abbreviations and define unusual words.
2) Make pages appear and operate in predictable ways.
Do not change the context of the page or create unpredictable responses to user interaction. Examples of this are pop ups when a page is loaded or a radio button is checked.
3) Help users avoid and correct error messages.
Error messages should be provided in text as opposed to other mediums. Labels or instructions should be used when a page requires user input. You can go further in this by providing relevant suggestions - if relevant - with an error. Furthermore you can add help text to relevant parts of the page, provide checking before submission as well as the ability to go back and make changes to multi-layered forms.
Robust
1) Parsing
In a word ‘validation’. Your pages should be properly formed, tags should be ended, their shouldn’t be duplicate attributes and ID’s should be unique (expect where specifications allow multiple identical ID’s).
2) The name and role of user interface components can be programatically identified
This means that assistive technologies should be able to work out the name and role of every link and UI component on your website.
Conformance and why it is important.
There are 3 levels of conformance. A, AA and AAA. If you are running a small site then should be aiming to hit an A ranking. If you are running a larger site or a site that targets disables users than going higher up the scale is very important.
The whole aim of the WCAG guidelines is to ensure that no matter what disability a person has, the person will be able to successfully access your websites content and use the website effectively. The advantage for you is that it opens up your web site to everyone. The advantage to the users is that they will be able to use your website faster and more productively.
Another advantage of implementing WCAG guidelines is that you will almost certainly improve the site for non-disabled users. Accessibility is for everyone. I am sure that everyone reading this has encountered a website with an impossible captcha, a bad navigation structure, a dead end or perhaps all three. Examining your website and comparing it to the guidelines can avoid this and can open you up to new markets you previously couldn’t reach.
I hope you have found this helpful.
Jason
Comment