views:

380

answers:

14

I'm looking for best-practices for designing a site that with accessibility in mind. The site is going to have a lot of older and less-abled individuals visiting it, and I want to make it as friendly for them as possible. Is there a resource that describes all the right tags, and attributes to use?

Thanks!

+1  A: 

The government provides a standard called section 508 that lays out what makes a site compatible.

Jekke
What governement? which country? also the link doesn't work.
Pim Jager
American imperialism ftw! lol :P
annakata
+2  A: 

Among other things.. provide "alt" and "title" attributes for every "img" tag.

Kip
+1  A: 

A good resource is found at W3C site: Web Content Accessibility Guidelines.

mouviciel
+7  A: 

There are many many resources depending on your goals.

Strongly suggest you start with:

edit:

Forgot to mention that WCAG has come in for some considerable criticism which makes this guy's efforts very helpful.

Also wanted to add, from personal experience, to remember that WA doesn't mean "blind people with screen readers". There are all manner of access limitations which you have to think of as well: e.g. dexterity issues related to e.g. muscle control, unusual input devices, and simple screen magnification.

Good luck!

annakata
+3  A: 

Try looking at Wikipedia's article on Web Accessibility. It contains lots of links to various sources of information for different countries, which may be useful depending on your target audience. The W3C was one of the original standards, but has plenty of critics.

Miles D
+1  A: 

A few things to keep in mind:

  • have a CSS link on each page that easily allows the font size to be changed.

  • Visually try to have appropriate presentation that is easy to read in a backwards S fashion.. left to right, back down.. etc..

  • ensuring that all the alt tags, etc, as mentioned in the other responses is vital.

  • see if there are some disability websites out there that specialize in testing your site. no harm in seeing what they list as being important to do.

  • make sure things are easy to read and find. this alone will make the job much easier.

Jas Panesar
+2  A: 

Get a text-only browser like lynx. If your site works in lynx, it's likely to work for people who need screen readers or have other handicaps. It's no substitute for looking up the regulations, but it's a quick and easy check.

David Thornley
I haven't loaded up Lynx in a long time... does it interpret javascript? Obviously jquery animations are SoL but what about basic DOM manipulation?
Birk
+1  A: 

There are many many resources on this topic. In fact, the danger is of information overload, rather than not enough information.

But an alternative approach is to think about your HTML page in generic terms, rather than the visual output you see in the web browser. If you wrote a piece of software that interpreted the website what would be helpful? This is a round-about way of saying use good semantics. My top tips would be to use standard XHTML for content and CSS for design. Also look up topics such as "progressive enhancement" and "behavioral Javascript".

But for resources:

  • The W3C's Web Accessibility Initiative: www.w3.org/wai
  • www.WebAIM.org
  • www.Accessify.com
  • www.CSSZenGarden.com for inspiration on how semantic markup can be styled to look very different.
Saqib
A: 

A must read is Jeffery Zeldman's "Designing with Web Standards"

Not sure if you are using Dreamweaver, but he has also just realeased a toolkit to validate your site for accessiblity.

Todd Friedlich
+2  A: 

For another perspective, see the Dutch Government Web Guidelines.

Peter Hilton
which is an extension on the W3C's WCAG 1.0, and indeed a nice guideline.
Davy Landman
A: 

It hasn't been mentioned yet so I figure I would mention it. If you want blind users to be able to use your site avoid flash. At the most 1% of flash I find on the internet is accessible.

Jared
A: 

A good list of resources about accessibility (colourblind screen-reader,typography etc) is here in design way. For validation of web site and general documentation I use the W3C.

alepuzio
+4  A: 

Here's a quick list I tend to follow

  • Ensure it uses clean XHTML markup ideally to AAA standards,
  • Try where possible to spilt HTML, CSS, Javascript into respective files,
  • Create different style sheets for print, screen, etc.,
  • Ensure you take into consideration colours and fonts for the hard of sight and colour blindness,
  • Try to only place the main navigation at the top of the code so that the actual content appears near the top of the code, this way people do not have to scroll to far to see the content especially if they are using a screen reader / low res,
  • If you do have a lot of navigation before the content then place a link near the top allowing users to skip to the content,
  • Ensure the very first link on the page is to a text-only / low graphics version of the site,
  • Ensure ALL pages and all Essential functionality will work without JavaScript turned on,
  • There are lots of plugins for firefox to assist with development including:
    • Web Developer
    • No Script
    • HTML Validator
    • Firebug
  • Ensure the page renders across all browsers including old ones even if that means it works though does not match design exactly.
  • Ensure HTML, CSS, JavaScript is kept to the minimum file size to aid downloading times e.g. Remove white space and blank lines,
  • Always use LABELS in forms and alt, title tags in links and images,
  • Only use Tables for tabular data and ensure data appropriately labelled,
  • Where possible do not use JavaScript to write content to a page but use CSS to hide it, that way is JavaScript is disabled or does not work properly then content will still appear,
  • Always ensure you use onkeypress as well as onclick events in JavaScript encase the user can not / is not using a mouse.

Finally if you have to use blank images on a page for tracking etc. then don't give them Alt tags. This is my own view and is one which is hotly debated on-line especially when 1x1px images used to be used for spacing. However as far as I see it, if you are using a screen reader then you don't what it reading out stupid comments for images it does not need to see.

Toby Mills
A: 

If you're developing in asp.net the opensource NAAK tool might be useful.