Top Mistakesin Web Accessibility

KRAKÓW, 20.10.2011

F R O N T R OW CO N F E R E N C E

TYPES

3

1. Bored manager

his blackberry

“Disabled people are not in my target group”

FAVO R I T E TO O L

T H E Y SAY

FAVO R I T E T E C H N I Q U E

hashbangs

T H E Y SAY

“I’ll AJAX all over your CSS3”

2. A future lover

FAVO R I T E TO O L

JS text resizer

3. Over-exciter

“I created a text-only version of my church’s website”

T H E Y SAY

You’ll need to deal with different types of people.

Let’s getsome facts

straight

✦ About 15% (5 mln) of total population in Poland live with some kind of disability

✦ The average age of web users increases every year

✦ Good for not proficient language users

✦ Meets legal requirements

✦ Everyone benefits! (think slower connections)

Benefits of web accessibility

Benefits of web accessibility

✦ Strong overlap with: mobile webhttp://www.w3.org/TR/mwbp-wcag/

Benefits of web accessibility

✦ Strong overlap with: SEO

Types of disability

Visual Hearing Motor Cognitive

✦ Blind✦ Partial vision loss✦ Color blindness

Visual Hearing Motor Cognitive

Video transcription (closed captioning) benefits not just those with hearing impairments.

✦ Disabling sound✦ Content becomes searchable and quotable

Visual Hearing Motor Cognitive

Motor impaired can find using keyboard or mouse problematic. Alternative inputs can have different range of complexity, most frequent being different types “switches”.

Visual Hearing Motor Cognitive

✦ Increase readability✦ Large headlines✦ Descriptive link text✦ Increased target area of navigation links

Cognitive problems occur to older users and those with worse level of document language.

“For me being online is everything.It’s my hi-fi, my source of income, my supermarket, my telephone.

It’s my way in”TeLynn Holdsworth, screen reader user

http://www.flickr.com/photos/tjc/4084712050/

A brief guideinto frequent problems

Incorrect alternative text

Text provided as

the text alternative must present

the content and function.

fig. Image based navigationwith no alt text

B A D

alt=”Ferrari Daytona” alt=””

Ferrari Daytona

Ferrari is an Italian sports car manufacturer based in Maranello, Italy.

Ferrari is an Italian sports car manufacturer based in Maranello, Italy.

alt=”Buy Ferrari”

Ferrari Daytona

Ferrari is an Italian sports car manufacturer based in Maranello, Italy.

I <img src="" alt="Image of heart"> you.

G O O D

✦ Context is important✦ Short is better than long✦ Avoid redundancy

Some rules to remember…

✦ Skip “image of…” or “graphic of…”✦ Describe function✦ alt= "" for decorative images

Following the visual appearance

<h3> <ul>

Semantics is the king

Not changing defaults

2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)

Don’t doOUTLINE: 0;

(or at least provide with alternatives)

Disabling mobile zoom

<meta name="viewport"content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

Don’t copy & paste

without testing

Failing in navigation

2.4.1 A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)

Lengthy mega drop-down

Keep the proper structure

of document headings.

Keep the proper structure

of document headings.

.hide { display: none; visibility: hidden;}

.hidden { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;}

Hiding content

.hidden:focus { position: static; width: auto; height: auto; }

F R O M S C R E E N

F R O M S C R E E N R E A D E R S

D I S P L AY O N F O C U S

QUIC

K FIX

Landmark HTML 5 elementrole=”application” none

role=”banner” none

role=”complementary” <aside>

role=”contentinfo” <footer>

role=”main” none

role=”navigation” <nav>

role=”search” none

~ The Paciello Group

WAI-ARIA Landmark Roles

Inaccessible forms

Name: [radio button] Mr. [radio button] Mrs. [text input] [text input] [text input] eMail Address Retype eMail

W R O N G :

✦ Label your inputs✦ Group form elements

✦ Check the tab order✦ Make sure it’s JS independent

~ Derek Featherstone: Aria and Progressive Enhancement

Form validation

Ambiguous links

Read more Click here

Success Criterion 2.4.4 - Link Purpose (In Context)Failure 63: Failure of Success Criterion 2.4.4 due to providing link context only in content that is not related to the link

Success Criterion 2.4.9 - Link Purpose (Link Only)Failure 84: Failure of Success Criterion 2.4.9 due to using a non-specific link such as "click here" or "more" without a mechanism to change the link text to specific text.

Adding interaction

Manage focus order!

Use ARIA roles to add meaning

to your components and

provide with readable data.

aria-live="off"

aria-live="polite"

aria-live="assertive"

aria-live="rude"

L I V E R E G I O N S fo r A JAX

<li role="menuitemcheckbox" aria-checked="true"> Sort by Last Modified</li>

NVDAChromeVoxFireVoxVoiceOver

Browser extensionsFangsWeb Developer ToolbarAccessibility Evaluation Toolbar

Free screen readers

No headingsNo anchor text

No alt text

Submit not beingread out

Fangs

Q & A

Wojtek Zając (@theanxy)http://www.slideshare.net/wojciechzajac This work is licensed

under a Creative Commons Attribution 3.0 Unported License

Thanks!