web accessibility gone wild

Web Access ib i l i tyGone Wi ld

Jared Smithhttp://webaim.org

Now even MORE

wi lder !

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.

• I’ll attempt to be an equal opportunity offender

• There’s little logic to the sequencing of topics

WebAIM surveys of screen reader user preferences

There is no typical user

Accessibility > Compliance

The mythical “accessible” web site doesn’t exist!

Use guidelines as tools to achieve accessibility.

Your site can be fully compliant, yet totally inaccessible.

Focusing on True Accessibility and Not Merely

Compliance

Knowing That Accessibility is a Continuum

Alt text should present CONTENT and FUNCTION

Very rarely a description

• alt=”bullet”

alt=”image of my cat”

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

alt=”Photo of the White House”

alt=”Photo of the White House”

Is “Photo of...” necessary? It doesn’t really matter.

alt=”smiling lady”???

S u r v e y s ay s . . .

“ P h o t o o f s m i l i n g l a d y ”

alt=”smiling lady”

Images that are the only thing within a link MUST have alt text

Image buttons and hot spots too

Logos that link to the home pagealt=”WebAIM”

alt=”WebAIM home”alt=”WebAIM logo”

alt=”WebAIM logo with link to home page”

There’s no real consensus

Overly long alt text...

Using real text instead of images(when it makes sense to)...

Providing a long description for EVERY complex image(focus on CONTENT and FUNCTION)

Avoiding redundant alternative text

longdesc=”1/2 of the content of a Beatles song is ‘Yeah’, 1/6th is ‘She’, 1/6th is

‘Loves’, and 1/6th is ‘You’”

SheLoves

You

Yeah

Contents of a Beatles Song

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?

Accessibility preferences are for sissies

Accessibility implemented part way or incorrectly can be worse than no accessibility at all

Which provides better accessibility?

Don’t make disability relevant

... but understand that the experiences of those with disabilities will be different

Building one version of a web site that is fully accessible

Accesskey and Tabindex

(unless you're sure you know what you're doing)

Learn the power of tabindex=”0” and tabindex=”-1”

Tabindex• tabindex=”1+”

Specifies exact tab order. Ensure tab order 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

• One link is typically sufficient

• Are headings “a mechanism”?

• Think beyond screen reader access

• Use ARIA landmark roles

Removing the focus indicators from links

Navigate through CNN.com to see this in action

a {outline:0;}

Enhancing focus indicatorsa:focus, a:hover {outline:1px;background-color:#ff0;text-decoration:underline;}

Non-underlined links must become underlined on hover and focus

Bullet-proof web design...

HeadingsProperly 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...

Cognitive disabilities

(not much happening here)

Cognitive load vs Functionality

Other• Site maps aren’t typically used

• Provide accurate, descriptive page titles

• Don’t provide summary for layout tables

• Don’t stress over screen reader pronunciation

• Expand first instance of acronyms and abbreviations. You don’t have to use <acronym>/<abbr> on all instances. Don’t worry if well known terms.

• Use fieldset for grouped radio buttons and checkboxes

• Layout tables don’t (typically) affect accessibility

Questions?

Jared SmithWebAIM.org

twitter: @jared_w_smithAHG hashtag: #ahg09