denise | [tutorial] The 31 Tips (Reply)

These are the 31 points I covered in the talk, for ease of copy/pasting and not having to dig through and transcribe my slides! For those who haven't seen the talk, they'll probably be pretty understandable anyway, but you still need to see the talk to get the nuance. I am happy to come deliver this talk, or the longer version I cut this down from, to your local group ;)

31 Quick Techniques to Make Your Site More Accessible

Make sure all the images on your site have specified alt attributes, height, and width.

Use blank alt text for purely decorative images.

Use header tags (<h1>, <h2>, etc)

Add skip links liberally

In your source: Content first, chrome after

Use CSS to hide screenreader-useful things from visual browsers

Write link text descriptively

Don't rely on tooltips or title text

Don't rely on alt text, either

Make your title text and alt text the same

Explicitly label all form fields

Use WAI-ARIA landmark roles

Use existing JavaScript libraries

Make sure everything has a tabindex

Put important things earlier in the tabindex

Don't hide any visible element from the keyboard

Never use tables unless presenting tabular data

And if you need tables, use <th> headers (and ARIA roles)

Use <ul> or <ol> instead of image-based bullets

Define all sizes in em, not px or pt

Restrict large blocks of text to a narrower length

Check your color contrast

Avoid large blocks of pure white background (cream or grey is better)

Provide light-on-dark and dark-on-light options

Use at least two ways of highlighting information or errors

Retain user input after errors

Don't change the screen without user action

And if you do dynamic content, let people turn it off -- permanently

Don't use Flash or PDFs: use plain text

Caption all audio and video (by people, not machines)

Consider alternatives to CAPTCHA

And, of course:

0. Test it yourself.

[tutorial] The 31 Tips

31 Quick Techniques to Make Your Site More Accessible

Post a comment in response: