1. Common Barriers to Accessibility on the Web
7 Ways to Stop People

2. More than Skin Deep Presentation: What the document looks like
Perceived visually
Breaking a document apart into sections, etc.
Structure: Defines logical composition behind the scenes
Converting presentation into a language that other technology understands
Word Style
HTML mark-up
PDF tag

3. Make the Web POUR
Perceivable
Operable
Understandable
Robust

4. Your Top 7 for Today Headings Lists
Text equivalents for visual elements
Table structure
Color
Links

5. A Big One is Missing… Multimedia Transcripts for audio-only
Captions for video
Audio description for video

6. Headings Lists
Headings
Web or Word Styles
Lists
List formatting tools

7. Text Equivalents
Convey intended meaning of an image, graphic, chart, graph, etc.
Does not draw conclusions or provide extra information
Found in
Alternative text
Caption
Narrative

8. Text Equivalent Question
How would you describe the visual to someone on the telephone?

9. Alternative Text Concise and meaningful In context
No filenames, preferably no repeated captions

10. Context is Key

11. Tables Assign header attribute to table header cells
Specify header scope (column or row)
Specify header span (if it goes across more than one column or row)
Simplify complex table structure

12. Complex Table

13. Simplified Tables Table 1, Group A Experiment 1
Table 2, Group B Experiment 1
Week 1
Week 2
Item 1
1.1 11
Item 2
2.2 12
Week 1
Week 2
Item 1
1.1 11
Item 2
2.2 12
Simplified Tables

14. Complex Tables Need More Information
Table Alt Text or Summary
Describe structure
Need to associate cells with all related header cells
Usually through Header IDs
Need more support from authoring tool

15. Tables for Layout
There are more sophisticated and easier ways to lay content out
Use built-in Column formatting in Word to create columns, for example
Remember reading order…

16. Read This…
alright?
this Is

17. But…
alright?
this Is

18. Color Contrast
The quick brown fox jumps over the lazy dog.

19. Only Color Conveying Meaning
Color Use is critical. This chart has three lines on it, one red, one blue, and one green. They are labelled in the chart’s key to the right as Series 1, Series 2, and Series 3. 1 is blue, 2 is red, and 3 is green. But if I cannot distinguish between some or all of the colors, then the meaning is lost.

20. Color Only in Black and White
In greyscale, you can see that they all basically look the same. Especially 1 and 3.

21. Color and Shape Together
With markers added, there is something in addition to color that distinguishes one line from the others: a simple shape. Now 1 is blue with triangles on it, 2 is red with diamonds, and three is green with squares.

22. Color and Shape in Black and White
In greyscale, I can still tell which line is which because the shapes also help to distinguish one from the other. It’s not that we should not use color to convey meaning. It is that we need to use something in addition to color to convey meaning.

23. Confusing Link Text
This website address is incredibly long and it doesn’t do anything to tell someone what happens if they dare to click on the link.

24. Helpful Link Text Fill out our webinar evaluation form here.
This link takes the person to the same website as on the slide before, but I’ve used text to tell someone what will happen when they follow the link.

25. For Print: Both URL and Link Text
Fill out our webinar evaluation form here.

26. Language: Before
When the process of freeing a vehicle that has been stuck results in ruts or holes, the operator will fill the rut or hole created by such activity before removing the vehicle from the immediate area.

27. Plain Language: After
If you make a hole while freeing a stuck vehicle, you must fill the hole before you drive away.
From the government's Plain Language website.

28. Questions?
Rob Carr, Accessibility Coordinator on Twitter and Facebook