Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I am trying to follow a very important standard that I must admit I have ignored up until recently. I want to make sure that my pages are accessible to a large portion of people that have disabilities. I focus mainly on tutorials that are text and image intensive, but no video / flash or any kind of animations.

What is a checklist that I can follow to ensure that many people with disabilities can have a good experience when using my web site, and what disabilities should I be most conscious of?

I know that I can't possibly please everyone. I have gone through the W3C guidelines, however I'm not entirely sure what standards apply to me. I'm not building web applications, I'm building mostly wiki like information exchanges, blogs and the occasional forum.

share|improve this question
    
uxexchange.com? –  Bobby Jack Aug 4 '10 at 17:12
    
I never heard calling "disabled" people with disabilities. –  Marco Demaio Sep 9 '10 at 19:38

9 Answers 9

up vote 18 down vote accepted
  • Ensure that every image has alt text.
  • Make sure that your colour scheme is suitable for those with colour blindness.
  • Offer a high contrast layout or large text layout for the visually impaired.
  • Make sure your links make sense when read out of context (i.e. don't just write "click here").
  • Ensure your site still offers full basic functionality if the user does not have JavaScript support.

The W3 offers some basic tips on accessibility via its website. Joe Clark has an online version of his "Building Accessible Websites" book available to view for free which contains a lot of useful information.

share|improve this answer
1  
There are several caveats for the 'alt text' rule. Unfortunately, I've worked with people who treat it as a hard-and-fast rule - i.e. EVERY image MUST have an alt attribute. Then they add things like "Our company's logo" to a logo image, and "a big blue 't'" to an image linked to a twitter account. –  Bobby Jack Aug 4 '10 at 17:14

Making your mark-up semantic is a massive step towards accessibility, if your site can be navigated without any CSS being applied to it and the content makes sense then everything else is just visual gravy!

share|improve this answer
1  
And much more fun on naked CSS day :) –  Tim Post Aug 4 '10 at 13:06
1  
Haha, naturally! Seriously though, a lot of people assume accessibility is all to do with design, it is the exact opposite, if you can make your content so that it works without any design then a machine (and therefore a human) will always be able to access it. –  Toby Aug 4 '10 at 13:10

Firstly the “the disabled” means nothings!

So let look at some groups of people you need to check can you’re your web site.

A poor person that only has a note-book with a small screen

You just need to check your website can be used when the browser window is small without too match pain.

A colour blind person

Can someone use your website without seeing the colour of icons etc, imaged you were accessing it on a B&W monitor.

A person with poor site.

When your changes the type size in the browser, does all text get bigger in your site, and is the layout still OK. Also can the site still be used on a small monitor?

Does your site use a high contrast layout, if not is it easy for the user to switch to a high contrast layout?

A person that can’t use the mouse

Can a person that has never used your website before, access all functions/information just be using the keyboard. (Does the tab key work in a useful way?)

Someone with poor reading skills

You are using simple English as much as possible?

Someone that is not good at learning new things.

Is the design of your site based on other site your users already know how to use?

A blind person.

This is the hard one and most of what you read is not of match use!!
Short out all our other access problems first, as there are a lot more people with poor sight, or who can’t use the mouse than there are bind people.

Next understand your aims, e.g if your site is a hotel booking site, it may be better to provide a fee phone number for making bookings and then just make the hotel information accessible.

Most blind people find it very hard to use any interactive website they have not used before, however well the website is designed.

So should you provide a none web option? (Phone? A person that visit them to help fill in the form etc?)

Firstly can your site be used without any images? (Alt text is one way of doing this)

Given the speech software reads the site top to bottom, can your site be understood in that way?

It is very hard to make a site with complex navigation easy for a bind person to use, also a bind person has no way of know that part of the page has been updated by JavaScript and need to be read again.

Changing the colour of items for changes of state is also not a good option.

The only way to learn how to make a website work well for bind people is to see how a bind person uses a screen reader on some websites. None of the standards are good enough, they just tell you what you should not do, but keeping to them are not enough (unless you are just provided static text like a news paper site).

share|improve this answer
1  
I love the first sentence in this answer! (and of course the other sentences too) –  Tim Post Aug 6 '10 at 15:41

You can use this site to get a quick overview of compliance: http://wave.webaim.org/

It performs a similar job to the old "Bobby" system that got shut down a couple of years ago.

share|improve this answer

The dutch government uses this site to test its sites on accessibility. take a look... you can also enter your site to test its current status on accessibility...

http://www.webrichtlijnen.nl/english/

share|improve this answer

I found Mark Pilgrim's freely downloadable book Dive into Accesibility to be a useful reference point on this theme. It's from 2002 but still very pertinent. Advice like "use graceful degradation" doesn't get old.

share|improve this answer

WAI-ARIA looks like it could now be an addition to our accessibility arsenal.

Some info on WAI-ARIA - http://www.alistapart.com/articles/waiaria

share|improve this answer

I think you have to use this site http://www.totalvalidator.com or the available firefox plugin. It has several disability validations and will flag anything that's missing.

share|improve this answer

The #1 answer is simple: write valid, semantically correct HTML/CSS!!! All of the suggestions above are good. Here is a checklist I wrote a couple years ago that shows you a few things you should be checking on all sites: https://forge.iowa.gov/wiki/index.php/Web_Checklist. It assumes you have the Web Developer toolbar on FF, but that is free and easily obtained.

A couple simple things I that I feel can make a real difference:

For forms, be sure to use the LABEL tag. It makes a larger clickable area for things like radio buttons and also ties things together for screen readers.

Another thing that I feel is commonly misused is the h1, h2, h3... tags. If used properly those can help someone navigate through your page easily. If we just style them and use them willy-nilly it is very misleading to screen readers and other mouse-less I/O devices.

It is also nice to allow someone who is navigating your page without all your beautiful CSS and images to skip past repetitive code to the content. This is commonly achieved using a SKIP link that is hidden in the CSS. For example, <a href="#skipnav" class="noshow">Skip past navigation to content.</a> to allow skiping past a lengthy navigation.

As stated by Tony, one of the best tests is to strip off all the bells and whistles of your page and see if it still makes sense.

share|improve this answer
    
On the subject of ALT tags... every image should an ALT tag. If the image is content it should have something descriptive in the ALT tag, if it is just decoration, use empty quotes alt="" to indicate that screen readers like JAWS can just pass them by. –  ph33nyx Sep 12 '11 at 14:20

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.