Episode 10: Website Accessibility
What is website accessibility?
Put simply, website accessibility is the practice of making websites available to handicapped visitors. These handicap visitors will have disabilities that range from visual (people who are blind or color blind or have poor vision) to auditory (people who are deaf or are hearing impaired) to motor (people who don’t have muscle control) as well as people who suffer from seizures and intellectual or learning disabilities. Oftentimes when discussing website accessibility with someone the initial reaction is, “Well, that’s such a minority group why should I bother.” To that I counter that there are nearly 32 million people in the United States alone who are affected by one of these disabilities, which accounts for over 12 percent of the entire population. That’s an awfully big group to not be accommodating on your website.
Web Content Accessibility Guidelines (WCAG) have been established by the Web Accessibility Initiative (WAI), which is a part of World Wide Web Consortium (W3C), the organization that oversees the internet.
WCAG 1.0 / Section 508
WCAG 1.0 was the first effort to establish guidelines for website accessibility. WCAG 1.0 offers 14 guidelines that are broken into priority levels (Priority 1, Priority 2, Priority 3) with Priority 1 being items that must be addressed, Priority 2 being items that should be addressed and Priority 3 being items that may be addressed. Sound a bit technical? Well, it is and I’m not going to delve much further than this as I want to focus more on practical hands on advice. However, if you’d like to learn more go to the Web Content Accessibility Guidelines 1.0 website.
I would be remiss if I didn’t also mention Section 508 guidelines here. Section 508 guidelines were created by the federal government and are closely tied to the WCAG 1.0 guidelines. The United States government already enforces these guidelines on all government websites (meaning that they are already mandating website accessibility standards). For more on Section 508 you can also visit the Section 508 website.
In 2006 WCAG 2.0 was released and it shifted away from concrete guidelines to more nebulous concepts that websites should follow. If you think WCAG 1.0 sounded technical, well WCAG 2.0 is more so. Again, I’m not going to go into specific details so I can focus more on practical advice, but if you would like to learn more go to the Web Content Accessibility Guidelines 2.0 website.
One last point about website accessibility. While there are visual elements (how a website looks) that are considered with website accessibility, most all of the guidelines deal with how a website is built and that is hard to convey to people who don’t regularly work with websites and think of websites merely as something they look at online. I make that point because realistically you can have two identical looking websites and one may meet website accessibility guidelines and the other may fail badly. It’s all about how a website is coded and programmed that makes the difference when we talk about website accessibility.
Practical advice to make your website accessible
OK, enough about the history and guidelines ... What do I need to do to make my website accessible? I’m glad you asked. Here is a list of items to consider when building a website. I should also mention at this point that website accessibility should be considered right from the beginning of any website project. It’s not something that you can easily retro fit down the road. I will say that building a website with website standards will get you very close to meeting website accessibility guidelines as there is definite overlap between the two. In fact the first item on the list is taken right from web standards guidelines. Having said that here is the list:
- Validate HTML and use semantic markup - Disabled visitors take cues from HTML code. For example if something is a paragraph mark it with an HTML paragraphs tag. If something is a headline use an HTML headline tag. Not doing so disconnects disabled visitors from content and makes understanding your website difficult.
- Allow for increasing text size - Make sure your website text can be increased or decreased using the browser. Visually impaired visitors rely heavily on this functionality. Do not set font sizes in pixels (it will prevent resizing in some browsers) but rather use a relative measure such as ems or percentages.
- Consider color contrast and don’t rely on color to convey meaning - Black text on a gray background is difficult for anyone to read. Imagine how trying this will be for someone with vision difficulties. Make sure you provide sufficient color contrast between website elements.
- Use supplemental navigation - Adding access navigation at the top of every page that jumps directly to content or navigation will be greatly appreciated by a blind user as they will be able to easily navigate your website (as opposed to having a lot of text read to them before they hit the navigation or content).
- Use access keys for navigation - People with motor function issues cannot control a mouse. Adding access keys to your main navigation will give them an easy alternative (a push of a button) to navigate your website.
- Use labels, fieldsets, legends and tab indexes on forms - Forms are often a pitfall for impaired visitors to your website. Take care to ensure that these visitors will have a good user experience and be able to complete your website forms by utilizing these HTML elements.
- With tables use captions and summary - Both of these HTML elements provide additional data about the table’s content. While these HTML elements are not visible to non-impaired visitors they are elements that impaired visitors rely on.
- Add alt text and title tags on all images - Alt and title are two HTML elements that convey additional semantic meaning about an image used on your website. A blind person will not see an image an only these tags will tell them what it is.
- Provide alternate content to multimedia - Flash files and the like are similar to images in that a blind person cannot see them. Make sure you provide alternate content for these files so they can understand your message.
- Use subtitles for video - Video is becoming more popular on websites and by right readable subtitles should be used to accommodate hearing impaired visitors.
- Underline links - If someone is color blind the color of your link text may look no different from the rest of your text. Underlines help set your links apart.
This list should give you a good idea of the direction a website should move towards to be accessible. There are also other resources available online that offer similar lists. One that I like a lot is Aaron Cannon’s web accessibility checklist and I recommend you review his list as well.
Testing for website accessibility
So by now you may be asking yourself, “How the heck do I know if I did all of this right?” and that’s an excellent question. I will be the first to admit that website accessibility tends towards the technical side of website design, however you will be happy to know there are several excellent tools you can use to test if your website meets website accessibility guidelines.
Website accessibility validators
The following, free online tools will show you if your website meets website accessibility guidelines.
- Cynthia Says - This is the standard for testing for website accessibility. Cynthia Says has been around for years and will give you a detailed report on how well your website meets accessibility guidelines (and where it fails).
- Web Accessibility Evaluation Tool (WAVE) - This tool does much the same work as Cynthia Says but in a more visual way. Often I will use both tools when assessing website accessibility.
Other website accessibility related tools
These tools deal with specific elements of website accessibility but are no less useful.
- W3C HTML Validator - Validating your HTML code is a first step in making your website accessible. This tool will help show you any errors in your code so you can fix them.
- Color Oracle - Unlike all the tools mentioned this is a program you can download (for free) and it will emulate how a website will look to a color blind user. Very useful.
- Snook.ca Color Contrast Checker - Remember when I talked about making sure you provide sufficient color contrast on your website? Well, this tool will help take the guesswork out of it.
- Firefox Screen Reader Emulator - This tool is a plug-in for the Firefox browser and will show you how your website works for a blind person. Often this is very eye opening and pitfalls can quickly be seen and addressed.
Benefits of website accessibility and the future
Well, the obvious benefit of meeting website accessibility standards is that you are accommodating all visitors to your website. However, because there is significant overlap between website standards and website accessibility you also get some very nice benefits that all visitors (not just handicapped visitors) can benefit from including better search engine results and faster loading pages.
I predict website accessibility will become more important as time goes by. Already the government enforces website accessibility standards on their own websites and it may only be a matter of time before some level of enforcement may appear for all websites, particularly given the ever growing popularity of the internet. Even if no such law is ever passed I argue that it is simply a good practice to accommodate all users to your website and for that benefit alone website accessibility should be considered with your website.