The Accessible Web: Improving the Universal Experience

24
The Accessible Web Improving the universal experience

description

Presentation on Web and document accessibility presented to the National Endowment for the Arts' LEAD conference, August 2014.

Transcript of The Accessible Web: Improving the Universal Experience

Page 1: The Accessible Web: Improving the Universal Experience

The Accessible WebImproving the universal experience

Page 2: The Accessible Web: Improving the Universal Experience

What is web accessibility?

None of these should be required on a website:● Keyboards● Mice● Monitors● Desktop computers

Page 3: The Accessible Web: Improving the Universal Experience

Interface Independence

The essence of web accessibility: content is not dependent on the tools used to access it.

Page 4: The Accessible Web: Improving the Universal Experience

Section 504: Equal Opportunities

If your web site:● Is part of your programs or services● Provides information on programs or

services● Shares documents required to register for or

get information about your programs● Then you’re subject to 504.

Page 5: The Accessible Web: Improving the Universal Experience

Section 504: Equal Opportunities

Under Section 504: you must provide alternate formats of information you share.

The ideal web site minimizes the need to create alternate formats: one web site with universal access.

Page 6: The Accessible Web: Improving the Universal Experience

Principles of Accessibility

Web Content Accessibility Guidelines 2.0http://www.w3.org/TR/WCAG20/

● Perceivable● Operable● Understandable● Robust

Page 7: The Accessible Web: Improving the Universal Experience

What does that mean?

Web accessibility is for everything on the web:

● Web sites● PDFs● .doc, .ppt, .xls, .everything else

Page 8: The Accessible Web: Improving the Universal Experience

Testing Web Sites for Accessibility

Keyboard Accessibility

● Unplug your mouse.● Hit the tab key

Can you navigate to every link? Can you tell where you are?

Page 9: The Accessible Web: Improving the Universal Experience

Testing Web Sites for Accessibility

Keyboard AccessibilityCompare these two sites:

● http://themes.joedolson.com/universal/● http://themes.joedolson.com/iatc/

Page 10: The Accessible Web: Improving the Universal Experience

Testing Web Sites for Accessibility

Form Labeling

● Has a profound impact on web site users● Is extremely easy to detect.

Page 11: The Accessible Web: Improving the Universal Experience

Testing Web Sites for Accessibility

Form Labeling Example:

Bad News

Page 12: The Accessible Web: Improving the Universal Experience

Testing Web Sites for Accessibility

Form Labeling Example:

Good News!

Page 13: The Accessible Web: Improving the Universal Experience

Testing Web Sites for Accessibility

Form LabelingCompare these two sites:

● http://dev.joedolson.com/form-bad.html● http://dev.joedolson.com/form-good.html

Page 14: The Accessible Web: Improving the Universal Experience

Testing Web Sites for Accessibility

Alternative Text

● Disable Images● Is any information missing?

What’s gone with images disabled? Is this an equal experience for the user?

Page 15: The Accessible Web: Improving the Universal Experience

Testing Web Sites for Accessibilityhttps://addons.mozilla.org/en-US/firefox/addon/image-block/

● http://www.girlandthegoat.com/

Joe Dolson
Example of web site with images enabled.
Joe Dolson
Example of web site with images disabled.
Page 16: The Accessible Web: Improving the Universal Experience

Testing Web Sites for Accessibility

Inclusive Content

It doesn’t matter how accessible your site is if you don’t have accessible content.

Page 17: The Accessible Web: Improving the Universal Experience

Testing Web Sites for Accessibility

Inclusive Content

● Accessible text content● Accessible PDFs● Accessible Audio and Video

Page 18: The Accessible Web: Improving the Universal Experience

Testing Web Sites for Accessibility

Accessible Text Content● Scannable: Use headings and bullet points.● Avoid directional text: where is “left” in a

screen reader?● Use meaningful link text: what does “Click

here” mean?

Page 19: The Accessible Web: Improving the Universal Experience

Testing Web Sites for Accessibility

Accessible PDFs● The source document must be accessible

o Alternative text for imageso Use heading structures - don’t just change fonts and

sizeso Export to PDF, don’t just print to PDF

http://webaim.org/techniques/acrobat/converting

Page 20: The Accessible Web: Improving the Universal Experience

Testing Web Sites for Accessibility

Accessible PDFs - what about scanning?

● Not accessible by default - just big images.● Use Optical Character Recognition● Edit the document to add structure

http://wac.osu.edu/pdf/scan/pdffromscan.html

Page 21: The Accessible Web: Improving the Universal Experience

Testing Web Sites for Accessibility

Inspect your PDFs:With Acrobat X

● Tools > Advanced > Accessibility > Full Check

● View > Zoom > Reflow● Tools sidebar > Action Wizard > Make

Accessible

Page 22: The Accessible Web: Improving the Universal Experience

Testing Web Sites for Accessibility

Accessible Audio & VideoTwo factors: the player and the content.● Player Accessibility● Text transcription● Closed Captioning● Audio Description

Page 23: The Accessible Web: Improving the Universal Experience

In Summary

Web accessibility is complex and subjective; but there’s still an objective difference between inaccessible and usable - you too can spot that difference.

Page 24: The Accessible Web: Improving the Universal Experience

Thank you!

Joseph Dolsonhttp://www.joedolson.com/

[email protected]://twitter.com/@joedolson