Web Accessibility Gone Wild

We b A c c e s s i bi l i t y G o n e W i ld N o w eve n w i lde r ! Jared Smith & Jon Whiting http://webaim.org

Gone wild? Mistakes, misconceptions, over- indulgences, minutia, and generally silly aspects of modern web accessibility ... or “How to FAIL at web accessibility”

Disclaimers • There will be controversy and you may disagree. • We’ll attempt to be equal opportunity offenders • There’s little logic to the sequencing of topics

Survey of screen reader user preferences http://webaim.org/projects/screenreadersurvey/

Alt text blunders

• alt=”bullet”

alt=”bullet”

alt=”image of my cat”

Adding “image of...”, “graphic of...”, etc. to alt text

alt=”photo of the White House”

alt=”smiling lady”???

alt=”smiling lady”

alt=”Our business promises the best service you will find on the planet. Our team is professionally trained to offer excellent customer service throughout the contract negotiation process. Customer satisfaction is our top priority and is guaranteed.”

“Describing” images - particularly decorative images used to convey mood or feeling.

Apple iPhone alt=”iPhone web site” Images that have a function MUST have alt text

Images that have a function MUST have alt text alt=”iPhone web site”

Avoiding redundant text... <a href=”http://apple.com/iphone/”> <img src=”iphone.jpg” alt=””><br> Apple iPhone</a>

Logos that link to the home page

Logos that link to the home page There’s no real consensus

Overly long alt text... Using real text instead of images (when possible)...

alt=”Sales steadily increased from $5 million to $16 million between 1996 and 2004”

Focusing on equivalent CONTENT rather than describing an image

longdesc=”80 percent of this chart resembles Pac-man. 20 percent does not.”

Putting anything other than a URL in longdesc...

The most accessible site on Earth...

•Home •Products •Support •Sales •Forum •Contact Us Hey, I’m the content!!!

Can you have too much accessibility?

Which provides better accessibility?

Text-only alternatives • Not an excuse for a site that could otherwise be made accessible • Only beneﬁts a small number of users • Native accessibility = text alternative • Rarely used

Building one version of a web site that is fully accessible...

Using text only versions of inaccessible web sites...

We don’t need no stinkin’ badges

Accesskey and Tabindex

Tabindex • tabindex=”1+” Speciﬁes exact tab order. Ensure tabindex is complete, logical, and intuitive. • tabindex=”0” Place item in the default tab order • tabindex=”-1” Do not place in tab order, but allow the element to programmatically receive focus

Visually hiding content • display:none AND visibility:hidden hides from everyone • Position off-screen left with CSS for screen readers • Use judiciously

Skip to content • Think beyond “screen reader access” • One link is typically sufﬁcient • Are headings “a mechanism”? • Use ARIA landmark roles

Navigation Navigate through CNN.com using only the keyboard

Navigation • Ensure page is keyboard accessible • Do not remove outline • Provide clear focus indicators

Text resizing Increase the font size (not zoom) at MLB.com

Bullet-proof web design...

Fixing screen readers alt=”sea sun” vs. alt=”CSUN”

Until user agents... They do

You don’t need to provide... • default text in form ﬁelds • printable character between links • redundant text links for client-side image maps

Acronym and Abbreviation • Expand in text at ﬁrst instance OR use <acronym> or <abbr>. • It’s not necessary to expand all instances. • It’s not necessary to expand commonly known acronyms and abbreviations (for our web site - HTML, CSS, etc.)

Proper use of Acronym and Abbreviation

Headings Properly structured, one <h1>, never empty ... and other semantic structure.

Title attribute • Advisory information only • Ignored by screen readers, except... • form elements missing labels • <frame title=”navigation”> • <acronym>/<abbr>...usually.

Using title attribute properly...

Accessibility > Compliance The mythical “accessible” web site doesn’t exist! “Is your site WCAG 2.0 AAA compliant???”

Cognitive disabilities (not much happening here)

Cognitive load vs Functionality

Other • Accessibility statements. Who cares? • Site maps aren’t typically used • Design for optimal line length (Jello layouts) • Provide accurate, descriptive page titles • You don’t HAVE to check in screen readers • Don’t provide summary for layout tables • Use ﬁeldset for grouped radio buttons and checkboxes • Layout tables don’t (typically) affect accessibility

Questions? <plug shameless=”true”> read the articles check the blog join the list subscribe to newsletter get our training </plug>

http://www.slideshare.net	10
http://www.austincc.edu	8
https://online.cdu.edu.au	6
http://cdu.blackboard.com	1

Web Accessibility Gone Wild

by Jared Smith on Mar 17, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 25

Statistics

Web Accessibility Gone Wild — Presentation Transcript