Web Accessibility: 30 Tips in 45 Minutes

Web Accessibility: 30 Tips in 45 Minutes
Terrill Thompson, Technology Accessibility Specialist, University of Washington

Here are the tips:

1. Add ALT text to web pages and documents. Most people forget to describe the image effectively.

2. Use headings properly. Most people forget h1 tags form landing points for content and organization like an outline.

3. The same is true in documents too as semantic information as headings gets passed to PDF. You can retro fix inaccessible PDF in Adobe. Word for Windows automatically tags PDFs on export but word for Mac does not.

4. Know when to use a PDF, there are good security reasons to do so but most times html will work fine and be more accessible.

5.Use aria accessible rich internet applications. It communicates rules states and properties to assisting devices. There is some markup language that lets the devices know what to alert to the user.

Http://html5accessibility.com/tests/landmarks  offers good resources for this markup.

6. Add labels to form fields. The text describing the input element is not always easily associated with the box.

7. Group related form fields together. J using a legend on a group of radio buttons for example.

8. Markup tables appropriately if you are using them. The most important thing is to use “th” tag with a scope attribute. This helps assisting devices keep users aware of where they are in a table. Give IDs for each heading and the abbreviation attribute for abbreviated terms (to show our read full in assisting device.) You can’t do this in word tables.

9. Identify the language of the text using the Lang attribute inside the body tag. When the language changes inside the body of the page, tag it as such and the screen reader can kinda distinguish.

10. Use a color contrast checker to make sure text and background are distinguishable. The w3c has standards and checkers are available online.

11. Avoid using tiny fonts. Use don’t size 1em good min set in browser

12. Respect white space. This can help with folks who have dyslexia as well.

13. Provide visible indication for focus. Someone who can’t use a mouse but tabbing through need the change to be registered for orientation purposes.

14. Use text, not pictures of text. Screen readers can’t read those pictures.

15. Think about word choice and use phrases that are simple.

16. Make sure your video has captions. Universalsubtitles.org is a good resource.

17. Use description for video too. Sync the video description with a video file. Description as an audio file listening is learning DOT org

Description as text also works in html 5 as proof of concept.

18. Provide a transcript of your video too.

19. Choose a media player that is accessibility friendly. His blog mentions many.

20. Pay attention to you menus and how they are deployed in assisting devices.

21. Choose accessible widgets plug ins and modules

22. Test those before deployment

23. Make accessibility part of rfp when choosing cms or land

24. Test with a keyboard. Can you follow along?

25. Test with high contrast color scheme to make sure menus don’t get lost

26. Test with screen readers. Nvda is free.

27. On mobile devices test using voice over tool in ios

28. Ask you vendors to demonstrate user without a mouse and see usability data

29. Demand accessibility. Votes with feet based on accessibility.

30. Get involved. Contribute accessibility to open source. Follow #a11y on Twitter.