Web Accessibility: Frequently Asked Questions and Resources
What is Web Accessibility?
Creating accessible websites is about much more than Internet Explorer and Netscape. Websites can be displayed on devices that connect in many different ways and display information to very different people. Many people on the Web today have disabilities that may prevent them from using websites in a way that an average Internet Explorer or Netscape user would. Accounting for these disabilities and making your website useful to them is a big part of Web accessibility.
What type of disabilities are we talking about here?
When I mean "disability", I am referring to not only mental or physical conditions that make the Web a little harder for somebody to naviagate, but also technological conditions that may affect the way that even a person without a disability would browse the Web. This includes, but is not limited to:
- Visual impairments such as colorblindness, low vision, or blindness,
- Hearing impairments,
- Cognitive and learning disabilities,
- Impairment of motor functions, such as the loss of movement caused by a stroke,
- or even increased security settings or malfunctioning equipment on your own computer that causes webpages to display or act differently.
Read on for more information on each disability and what you can do about it when creating websites.
When most people think of visual impairments, they only think of blindness, which is those who cannot see at all. There is also colorblindness (the inability to see a particular color or groups of colors), and low vision (a decrease of vision which usually requires a person to wear corrective lenses).
Blindness is the most obvious visual impairment to most people. It is when a person's vision is so low as to make most objects indistinguishable, or the utter inability to see. Most blind people using the Web today use either specialized screen reader software such as JAWS, which will read aloud text from a browser to allow them to hear what is on the page. Other blind people may use Braille displays, which will translate a webpage's content to Braille for easier reading with a person's hands. The specialized software, while helpful, still needs help from website authors to make the experience easier for blind users.
Colorblindness is a very common condition, especially among men. Contrary to common belief, most colorblind people do not see only in shades of grey. Most colorblind people may not be able to see only one or two colors, such as reds or greens. In all other aspects of life they may appear perfectly normal.
Low vision is perhaps the most common visual impairment. When vision degrades below a certain level, most people with low vision take to wearing corrective lenses. However, some very simple fixes to your website may make their browsing even easier.
What can you do?
There are various things you can do on your website to help those with vision impairments. Here is just a short list:
- Provide meaningful alt and title attributes on your images and links. Avoid using link text such as "click here" or alt text such as "image" where possible, since this offers no information to users about the meaning of an image or the destination of a link. Example:
title="A photo gallery of our trip to the park on June 24th, 2003">
- Provide adequate contrast between backgrounds and text for users with low vision or colorblindness. This will make for easier reading of content for everyone, even those without vision impairments.
- Provide "skip" links to content if your navigation appears before your content in your HTML code. Reading standard navigation on every single page view of your site is cumbersome and frustrating to users of screen reader software. Use CSS to hide your skip links if need be. Example:
<li class="skip"><a href="#content">Skip navigation</a></li>
<li><a href="/about">About Us</a></li>
- Provide meaningful headings to your content (via the h1-h6 elements). Users of screen readers can skip headings they don't want to read through when the page is structured properly.
- Provide a meaningful page title for all of your pages. This will allow users to quickly decide if they are on the page they want to be on. Here's an example of a good title:
Here's an example of a title that is less than helpful to users, commonly found on pages with server-side includes:
<title>Featured Product: Ultra Blender 3000 - ABC Company, Inc.</title>
<title>ABC Company, Inc.</title>
Hearing impairments affect a great portion of the population to some degree. For most websites, this is not an issue until you decide to add multimedia to your page such as music or video. If you decide to use music or video in your pages, provide a good alternative for those who cannot hear the content, such as transcripts for videos or audio conversations, or lyric sheets for songs.
Cognitive and learning disabilities
Cognitive and learning disabilities also affect a great portion of the population. Cognitive disabilities have a wide range, from dyslexia to autism and many other possibilities. Cognitive/learning disabilities are perhaps the hardest disabilities to cater to because it may require you to change your actual page content. Here are a few things you can do to help:
- Provide alternate ways for users to understand your content. If you have a table listing financial figures for example, accompany it with a graph or chart of some sort.
- Keep your content to the point. Try to avoid jargon and speak in terms that almost anybody can understand.
- Avoid flashing or blinking elements. This may confuse some users and distract them from reading and understanding other page content.
Motor impairments are any conditions that reduce use of a person's arms or legs. This comes in many forms, such as a person being born without arms (in which case they have no limb to move), or conditions such as strokes which reduce movement in one side of a person's body. As far as computers are concerned, people with motor impairments usually rely on the keyboard far more than the mouse for navigation. Here are a few tips that you can incorporate into your pages to make their lives easier:
<img src="myimage-off.gif" id="myImage"
alt="An illustration of me" />
- Use accesskeys on commonly used elements in your page. Example:
<a href="/" title="Return home" accesskey="1">Home</a>
- Provide feedback for focus/blur events in visual form, such as using a:focus as well as a:hover in your CSS for link activation. Example:
Security and technical limitations
//write a form field with the date as the value
var d = new Date();
document.write("<p><input type=\"text\" name=\"date\" id=\"theDate\" value=\"" + d.getMonth() + 1 + "/" + d.getDate() + "/" + d.getFullYear() + "\" /></p>");
<p><input type="text" name="date" id="theDate" /></p>
- Provide alternate content for your Flash movies by adding the right markup inside of your <object></object> tags, like so:
<param name="movie" value="movie.swf" />
<p>Alternate content that describes the movie for those with Flash disabled.</p>
- Try and test your site with a text-only browser if possible. Usually this will alert you to problems you may not otherwise know about.
- Use meaningful alternate content for any multimedia you use (video, audio, images).
Why write accessible websites?
Right now you might be asking yourself, "Why should I bother with all this? Isn't the old way of writing websites just fine?" While you may believe it is extra work that your budget won't allow for, you may be doing more harm than good. Here are a list of reasons to build accessible websites:
It makes business sense
Let's say 100 customers walk into your store. Would you shoo two or three of them away just because they may not see your products the same way as everyone else? No, because that would be bad business. Those two or three people might have money and lots of friends, and odds are if you send them out of your store they and their friends won't be coming back. Accessibility is about including as many customers as possible, which can lead to more sales for your business's website.
It might be the law
In the United States, all government-run websites must comply with Section 508 (for more information on Section 508, see the "Resources" section). The Disability Discrimination Act (see the "Resources" section for more information) in the UK calls for all UK-based websites not to discriminate against anybody or cause undue hardship when a disabled visitor is on your website. Other countries and municipalities may have similar laws; check with your respective government's offices to see if there are any that apply to you if you do not live in the US or the UK.
It's the right thing to do
You should never impose undue difficulty on somebody just because they are not just like you. Disabilities should be no different. Life with a disability is hard enough; others should not make it even harder.
Accessible coding does not take extra time
If a website is built to accessible standards from the start, it only takes a few seconds more than normal to develop the site. Most of that time comes from adding certain attributes on HTML elements like accesskeys or tabindex, and thinking about how to do a particular function in the best manner. Extra testing may be necessary, but for basic accessibility testing you should not have to add more than a few hours to your development time. After enough experience, it becomes a regular part of your workflow and there will be no difference in development time.
This accessibility guide does not and cannot cover everything there is to know about accessibility. The following online resources should help you learn more about accessibility issues that I have and have not covered in this guide.
- Dive into Accessibility - A straightforward look into how you can make your site accessible for various disabilities. This website is also available as a book. Highly recommended.
- Section 508 - If you work for the US government you have to follow the Section 508 guidelines. There's no better place to learn about it than straight from the source.
- WGBH National Center for Accessible Media - WGBH is a public-access television station in Boston. They are leaders in accessible media and offer a lot of information on captioning, transcripts, and other methods to make nearly any type of media accessible.
- Joe Clark - A leader in accessible media and the author of the great book Building Accessible Websites, Joe Clark has been an advocate of accessibility for a very long time. His writings are definitely worth a look.
- RNIB - The Royal National Institute for the Blind in the United Kingdom. A great place to learn about the issues surrounding the blind in the UK.
- The UK DDA - The Disability Discrimination Act of 1995 sets rules for businesses in the UK to follow regarding accessibility. This is the text of the Act.
- Disability - This is the UK government's disability website. Learn more about issues and laws relating to disabilities and accessibility in the UK.
- The W3C Web Content Accessibility Guidelines (WCAG) - a set of guidelines that help authors build accessible pages. This is version 1.0; version 2.0 of WCAG is expected to be released in the near future.
- Bobby - an online validator to help you check your pages for accessibility issues. NOTE: automated validators will NOT catch every problem on your pages. You will have to do some thinking and use your judgment to ensure that your pages are accessible as possible.
- Cynthia Says - another online validator to help check your pages for accessibility issues. NOTE: automated validators will NOT catch every problem on your pages. You will have to do some thinking and use your judgment to ensure that your pages are accessible as possible.
Making your website accessible for disabled visitors is not hard. It just requires a new way of thinking about your pages. With time and effort, it will become a natural part of your workflow and you won't even notice it. This guide is not a complete overview of all accessibility issues, but the resources listed above should give you plenty of material for further reading and research. Enjoy!