denise: Image: Me, facing away from camera, on top of the Castel Sant'Angelo in Rome (Default)
Denise ([staff profile] denise) wrote2013-01-31 11:07 pm
Entry tags:

[tutorial] The 31 Tips

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

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

  2. Use blank alt text for purely decorative images.

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

  4. Add skip links liberally

  5. In your source: Content first, chrome after

  6. Use CSS to hide screenreader-useful things from visual browsers

  7. Write link text descriptively

  8. Don't rely on tooltips or title text

  9. Don't rely on alt text, either

  10. Make your title text and alt text the same

  11. Explicitly label all form fields

  12. Use WAI-ARIA landmark roles

  13. Use existing JavaScript libraries

  14. Make sure everything has a tabindex

  15. Put important things earlier in the tabindex

  16. Don't hide any visible element from the keyboard

  17. Never use tables unless presenting tabular data

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

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

  20. Define all sizes in em, not px or pt

  21. Restrict large blocks of text to a narrower length

  22. Check your color contrast

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

  24. Provide light-on-dark and dark-on-light options

  25. Use at least two ways of highlighting information or errors

  26. Retain user input after errors

  27. Don't change the screen without user action

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

  29. Don't use Flash or PDFs: use plain text

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

  31. Consider alternatives to CAPTCHA

And, of course:

0. Test it yourself.