What are the best-practices for making a website accessibility-friendly?

Question

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?

Answer 1

There are many many resources depending on your goals.

Strongly suggest you start with:

• Section 508 (US legislation, obviously US centric though)

• W3C's Web Accessibility Initiative and Web Content Accessibility Guidelines

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!

Answer 2

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.