10 things you can do todayto make your content more accessible
Jonathan WhitingWebAIM.org
Auditory Disabilities
From webaim.org/intro/
1. Provide Captions
Search for captioned videos
Speech Recognition
2. Make Links Meaningful
For more information on this topic, read Essentials of Online Course Design: A Standards-Based Guide http://www.amazon.com/Essentials-Online-Course-Design-Standards-Based/dp/0415873002/ref=sr_1_11?s=books&ie=UTF8&qid=1329661475&sr=1-11
3. Provide Plenty of Contrast
3. Provide Plenty of Contrast
Color Blindness
`
4. Don’t Rely on Color
Color Blindness
The green mushrooms listed here are okay to eat. The red mushrooms will kill you.
– Amanita– Chanterelle– Porcini– Shitake– Tylopilus
Color Blindness
The green mushrooms listed here are okay to eat. The red mushrooms will kill you.
– Amanita– Chanterelle– Porcini– Shitake– Tylopilus
Color combinations don’t matter(for accessibility)
…just contrast and color reliance
Blindness
Screen Reader User Surveys
5. Use Headings
Headings
The Wrong way to do headings:• HTML- <p class=“heading2”>Big text (usually) resized with
CSS</p>• PPT and MS Word- Plain text enlarged
The Right way to do headings:• HTML- <h2>Use true headings</h2>• PPT- Use slide templates• Word- Use styles panel
6. Add Alternative Text
Alternative Text• Read by screen readers• Alternative to images when images are
disabled or not supported• Provides semantic meaning and
description to images• Used by search engines
What is equivalent alternative text?
CONTENT and FUNCTION
VERY RARELY Description
If you couldn’t use a picture, what text would you put in its place?
7. Give documents unique titles
Page titles
• Often the first thing read
• Should be succinct and descriptive
• Should usually match or be similar to the main heading
Google is blind
...and deaf
...and can’t use a mouse
8. Don’t ‘Print’ to PDF
…‘Save’ to PDF
• Works in:– MS Office for Windows
(not Mac)– Adobe InDesign– OpenOffice.org
• Does not work in:– Google Docs– Apple iWork
• Can also create PDF in Adobe Acrobat
Preferred Formats for Web Content
HTML > PDF > Doc/PPT > Anything else
...except PPT slides, then PDF is usually better
9. Check your Web Pages
2 Easy Tools
1. WAVE tool - wave.webaim.org1. Red icons = accessibility problems2. ‘Styles’ and ‘No Styles’ view3. Contrast checker
2. Your keyboard – Tab, Shift + Tab (tweaking required on Mac)– Check forms– Open/close boxes
10. Become an Advocate
Become an Advocate
• Take responsibility for your content• Know your limits and seek help when needed• Ask others about accessibility• Congratulate others (and yourself) for making
a difference
Thank You!
http://webaim.org
• Web based forums
• E-mail discussion list
• Tutorials, articles, and resources
• Blog
• Accessibility Reference Guide