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

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

Make the Web POUR Perceivable Operable Understandable Robust

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

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

Headings Lists Headings Web or Word Styles Lists List formatting tools

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

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

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

Context is Key

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

Complex Table

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

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

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…

Read This… alright? this Is

But… alright? this Is

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

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.

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

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.

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.

Confusing Link Text https://www.ok.gov/triton/modules/formbuilder/form.php?form_id=88917525eae4a02e75030112715662529cebda3f143efe72167c49cd55ced323 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.

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.

For Print: Both URL and Link Text Fill out our webinar evaluation form here. https://www.ok.gov/triton/modules/formbuilder/form.php?form_id=88917525eae4a02e75030112715662529cebda3f143efe72167c49cd55ced323

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.

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.

Questions? Rob Carr, Accessibility Coordinator rgcarr@okstate.edu 1-800-257-1705 @okabletech on Twitter and Facebook