Jonathan Whiting - Ten things you can start doing today that will make your website more accessible

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

Low Vision

NoCoffee Vision Simulator (Chrome)

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