Web Accessibility: Frequently Asked Questions and Resources

[vgarcia]

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.

Visual Impairments
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
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
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
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:
  

  <a href="park-trip.html" 
  title="A photo gallery of our trip to the park on June 24th, 2003">
  Park photos</a>

• 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:
  

  <div id="navigation">
  <ul>
  <li class="skip"><a href="#content">Skip navigation</a></li>
  <li><a href="/">Home</a></li>
  <li><a href="/about">About Us</a></li>
  <li><a href="/services">Services</a></li>
  <li><a href="/contact">Contact</a></li>
  </ul>
  <div id="content">
  <p>Content here</p>
  </div>
  </div>

• 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:
  

  <title>Featured Product: Ultra Blender 3000 - ABC Company, Inc.</title>

  Here's an example of a title that is less than helpful to users, commonly found on pages with server-side includes:
  

  <title>ABC Company, Inc.</title>

Hearing impairments
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
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:

• Do not rely on the mouse for basic functions. If you do need to capture mouse movements or clicks for some reason (such as Javascript functions that activate onclick or onmouseover/out), find a way to capture keyboard navigation as well (i.e. using onfocus and onblur to call Javascript functions as well as onmouseover and onmouseout). Example:
  

  <img src="myimage-off.gif" id="myImage"
  onmouseover="swapImages(this);"
  onfocus="swapImages(this);"
  onmouseout="restoreImages(this);"
  onblur="restoreImages(this);"
  width="200"
  height="150"
  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:
  

  a {
    color: red;
  }
  a:hover {
   color: purple;
  }
  a:focus {
    color: purple;
  }

Security and technical limitations
Sometimes people who benefit from accessible websites aren't disabled at all. They are everyday people with no disabilities themselves, but they may be using technology that precludes the use of certain bonus features on websites. For example, an employee at a security-conscious company may have access to ActiveX controls or Javascript in their browser blocked by a system administrator. A user on a dial-up connection may wish to disable images or CSS in their browser because of the increased download times. A user with an old computer may not be able to upgrade to the latest browsers because their system may not be capable of running them. Or the problem could be as simple as your mouse not working properly and relying on the keyboard for navigation until you get a new one. Here are some general guidelines to help cover those cases:

• Make sure your pages still function with CSS, Javascript, ActiveX, Java, Flash, and images disabled. The page doesn't have to be the exact same with all of those things disabled, but your users should still be able to access the content they want or perform their necessary tasks on your site.
• Provide good <noscript> alternatives if Javascript is unavailable. Example:
  

  <p><label for="theDate">Date:</label></p>
  <script type="text/javascript">
  <!--
  //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>");
  //-->
  </script>
  <noscript>
  <p><input type="text" name="date" id="theDate" /></p>
  </noscript>

• Provide alternate content for your Flash movies by adding the right markup inside of your <object></object> tags, like so:
  

  <object
  type="application/x-shockwave-flash" data="movie.swf" 
  width="400" height="300">
  <param name="movie" value="movie.swf" />
  <p>Alternate content that describes the movie for those with Flash disabled.</p>
  </object>	

• 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.

Resources
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.

Conclusion
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!

[vgarcia]

Any questions?

[1andyw]

Very well written. This is a needed resource.

Andy

[bradley317]

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.

So how can you ever be sure that your pages will work? This is what frustrates me, you could make a career out of accessibility alone, I don't see how it's possible to learn about and support the myriad of conditions that your website may encounter.

[AutisticCuckoo]

People with hearing impairments may not be affected as much by ordinary web pages, but those who are born completely deaf (or became deaf at a very early age) may need more consideration. Those people don't have English (or Swedish or whatever) as their first language; their first language is sign. Sign language differs a lot from spoken languages in grammar etc, and learning a spoken/written language can be very difficult when you cannot associate letters and syllables with sounds. Some deaf people experience similar problems on the web as those with certain types of cognitive disorders (e.g. dyslexia).

BTW, the NOSCRIPT element only takes block-level content, at least in the strict DTDs. That means you shouldn't have an INPUT as a direct child of a NOSCRIPT.

Also, since IE/Win doesn't support the :focus pseudo-class, it's not a good idea to combine it with :hover, because IE will ignore both. IE incorrectly applies :active when a link receives input focus, so you can do something like this:

a:link {color:#00c}
a:visited {color:#909}
a:hover {color:#f60}
a:focus {background:#f60; color:#000}
a:active {color:#f00}
* html a:active {background:#f60; color:#000}

[vgarcia]

So how can you ever be sure that your pages will work? This is what frustrates me, you could make a career out of accessibility alone, I don't see how it's possible to learn about and support the myriad of conditions that your website may encounter.

You're not expected to know everything about accessibility unless you're some kind of consultant/expert. Think about it though: a validator like Bobby won't know what your stylesheet is like, or what your scripts do. If your stylesheet calls for a white background with #dddddd text, then it's a safe bet that you need to adjust the contrast on your site for those with vision problems. Common sense should rule out with any accessibility testing, though Bobby or Cynthia may help you catch any obvious errors in your markup that you may have overlooked.

BTW, the NOSCRIPT element only takes block-level content, at least in the strict DTDs. That means you shouldn't have an INPUT as a direct child of a NOSCRIPT.

Also, since IE/Win doesn't support the :focus pseudo-class, it's not a good idea to combine it with :hover, because IE will ignore both. IE incorrectly applies :active when a link receives input focus, so you can do something like this:

Fixed on both counts. Thanks

[Egor]

Good read. Thanks

[redux]

you could make a career out of accessibility alone

ka-ching...and some people already do.

[bradley317]

Nice. Maybe I should get involved. I must know more than most by now.

"Will validate for food"

[1andyw]

Which font-face is most user friendly.
If my paragraph font-size is set to 100 percent, what line spacing is best.
Is word spacing useful?
If I set color and background using contrasting colors with a color scheme generator will that cause viewers serious problems?
My intended audience is either totally blind, or very limited vision. All of whom use adaptive technology. Additionally, I need to look sufficiently interesting to the sighted community to attract their involvement and not chase them away.

I have looked at your recommended reference 'Dive into Accessibility' and intend to study it fully. Should be a great read. Thanks, Vinnie.

[vgarcia]

Which font-face is most user friendly.

Doesn't matter really. Every user will have different fonts installed on their PCs. The most common are Arial/Helvetica, Verdana, Georgia, and Times.

If my paragraph font-size is set to 100 percent, what line spacing is best.
Is word spacing useful?

I like a line-height of 150-180%, but it's personal preference. I believe the default in most browsers is 120-125% anyway, so anything above that makes for easier reading.

If I set color and background using contrasting colors with a color scheme generator will that cause viewers serious problems?

As long as you have sufficient contrast you're fine. A text color of #333333 on a white background is acceptable for example, but a text color of #cccccc on the same background probably won't be easy to read at all.

My intended audience is either totally blind, or very limited vision. All of whom use adaptive technology. Additionally, I need to look sufficiently interesting to the sighted community to attract their involvement and not chase them away.

That's not very hard to do. Just use common sense when designing and coding your site

I have looked at your recommended reference 'Dive into Accessibility' and intend to study it fully. Should be a great read. Thanks, Vinnie.

[tezza1980]

A succinct and well-written article. It took me 10,000 words to cover the same points in my dissertation!

To add a bit on fonts:

Which font-face is most user friendly?

Web typography books will state that serif fonts such as Times and Georgia are easier to read in large chunks of text. that is why you find them used a lot in paperbacks and other books.

I have no real evidence to support or deny this so you may need to check with a section of your audience, but its worth bearing in mind. Dont forget to specify a default font (Serif, Sans-Serif, Mono)at the end of your font-family declaration in case the user has none of your preferred fonts installed.

In the case of your current site, where most of your target audience will be using assistive technology such as screen readers, your choice of font is largely unimportant. More important are the special instructions you provide to these technologies on how to "speak" your site. These instructions can be set in CSS and include voice properties, spacial properties and voice characteristics. The reference at the end of Dan Shafer's book has more details on these.

[vigo]

web typography books will state that serif fonts such as Times and Georgia are easier to read in large chunks of text. that is why you find them used a lot in paperbacks and other books.

True, but the same books will mention sans serif fonts are easier to read on a screen.

[Egor]

Web typography books will state that serif fonts such as Times and Georgia are easier to read in large chunks of text. that is why you find them used a lot in paperbacks and other books.

Unless these book writers think everyone uses macs, they're dead wrong. With Windows' (crappy) anti-aliasing engine, serifs are a pain to read. Georgia is an exception, but still harder to read than Verdana, Arial, or Trebuchet.

On the Mac OSX, Times New Roman actually looks really good, yet still sans-serifs are easier to read.

Serifs are better in print, although a lot of magazines use Helvetica as it gives a slightly more modern feel.

[dc dalton]

I just happened to click on this forum while eating lunch and it turned into an amazingly informative meal! Great info, I love the focus info as it not only provides accessibility but a great visual effect for everyone!

Are there any screen reader programs that a developer can use to test their site? I looked at the JAWS site but thats just a touch expensive for me. I figured their might be some open source testing software I could use.

Your article also FINALLY got the skip link idea through my head, I had seen this on other sites & couldnt for the life of me figure out what they were doing! I had also seen this code on brothercakes site & wasnt 100% sure what he was doing:
<link rel="section" title="Portfolio" href="/site/portfolio/" />

can someone give me a hint here? I intend to spend my lunches this coming week reading the resources listed, this all just seems to make SO much sense for any web developer and honestly with a minimal amount of extra effort.

Thanks!

[Jordie]

Wonderful read. Thank you!

[Webnauts]

Vinnie, excellent work! Thanks.

[vgarcia]

Your article also FINALLY got the skip link idea through my head, I had seen this on other sites & couldnt for the life of me figure out what they were doing! I had also seen this code on brothercakes site & wasnt 100% sure what he was doing:
<link rel="section" title="Portfolio" href="/site/portfolio/" />

can someone give me a hint here? I intend to spend my lunches this coming week reading the resources listed, this all just seems to make SO much sense for any web developer and honestly with a minimal amount of extra effort.

Thanks!

The <link> tag can be used to link to other important sections of your site. For example, if you have a sequence of pages that can be read in order (i.e. a multi-page article) you can do something like this:

<!--imagine we're on page 2 of a multi-page article-->
<link rel="previous" type="text/html" href="/page1.html" title="Page 1" />
<link rel="next" type="text/html" href="/page3.html" title="Page 3" />

Brothercake's link tag links to another section of the site, in that particular example it's his portfolio. The <link> tags are exposed for quick navigation in some browsers, like Opera and Mozilla, to provide extra functionality. Currently only power users tend to know about these things, but hopefully things like this will become common knowledge and more apparent in browser UIs in the future.

[bravo27]

Awesome post!

[meshack]

It enjoyed reading your post.. It is agreat tool for those beginners especially for those indulge in writing for thh websites..

<snip></snip>

[Lira]

Seeing this thread has a bit of info on colourblindness, I thought I'd add this resourceful link:

http://www.vischeck.com/

I've tried this on colourblind people and it actually works.

[Emmadw]

Which font-face is most user friendly.
If my paragraph font-size is set to 100 percent, what line spacing is best.
Is word spacing useful?

The psychology department at Wichita University have done some work into fonts, and made a number of findings:
http://psychology.wichita.edu/surl/u...ws/3S/font.htm - among other things, that perceived legibility and actual legibility don't always coincide (e.g. Tahoma was the fastest to read, with Courier the next to slowest, but Courier was perceived as the most legible.
http://psychology.wichita.edu/surl/u.../3W/fontSR.htm showed that at 12 point, sans serif was faster to read, at 14 point, it was serif - though the preference was for the sans serif. (That was older adults)

They've had several other studies of fonts, most of which, like those two, end up with somewhat contradictory findings.

Very useful article by the way!
Are you planning to update it at any point with things like the IE accessibility toolbar & all the useful pointers from WebAim?

[Adam M]

Great Post, I believe that within the future accessibility is a must and anyone in the land of eCommerce really should be sinking their teeth into this stuff.

After reading the article I used the Bobby function to check accessibility of my up and coming site to find few errors. Although the errors are listed some of the symbols are not really explanatory. Maybe some knows the difference between Automatic Checkpoints and Manual Checkpoints. What is the difference between error and warning?

If anyone has a link or information regarding the W3C Web Content Accessibility Guidelines in what each of the levels are and what function of each needs to be abided by. At the moment it mentions conformance level "A”,” Double A" and "Triple A". The document outlines what each check point is satisfied but in the scheme of what is required it doesn’t say.

If anyone knows the answers that would be great, myself, I will continue to search the web for answers and post the as I find them, if anyone is having the same problems.

Cheers

[vgarcia]

Requirements on what accessibility level your site should be is really up to where you live and where your site's located. For example, the US doesn't require any accessibility on websites unless it's related to the federal government under Section 508, so private citizens and businesses are exempt. Even Section 508 itself is equivalent to an A under the WCAG. I don't know if there are any requirements in Australia, so check with your local government sites.

edit: It looks like Australia has some requirements for accessibility. That link should explain what's expected.

[Adam M]

Thanks Vgarcia, I will have a look. Great report by the way, and response to my post. Although the report was posted Nov 04 I think you find it will become of a more important issue as time goes by.