Top Mistakes
in Web Accessibility
F R O N T R OW CO N F E R E N C E
KRAKÓW, 20.10.2011

3
TYPES

1. Bored manager
T H E Y S AY
“Disabled people are not
in my target group”
FAV O R I T E T O O L
his blackberry

2. A future lover
T H E Y S AY
“I’ll AJAX all over your
CSS3”
FAV O R I T E T E C H N I Q U E
hashbangs

3. Over-exciter
T H E Y S AY
“I created a text-
only version of my
church’s website”
FAV O R I T E T O O L
JS text resizer

You’ll need to deal with different types of people.
Let’s get
some facts
straight

Benefits of web accessibility
✦ 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
✦ Strong overlap with: mobile web
http://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
Cognitive problems occur to older users and those
with worse level of document language.
✦ Increase readability
✦ Large headlines
✦ Descriptive link text
✦ Increased target area of navigation links

“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 guide
into frequent problems

Incorrect alternative text

Text provided as
the text alternative must present
the content and function.

fig. Image based navigation
with no alt text

BAD
I <img src="" alt="Image of heart"> you.
GOOD
Ferrari Daytona Ferrari Daytona
Ferrari is an Italian sports Ferrari is an Italian sports Ferrari is an Italian sports
car manufacturer based in car manufacturer based in car manufacturer based in
Maranello, Italy. Maranello, Italy. Maranello, Italy.
alt=”Ferrari Daytona” alt=”” alt=”Buy Ferrari”

Some rules to remember…
✦ Context is important
✦ Short is better than long
✦ Avoid redundancy
✦ Skip “image of…” or “graphic of…”
✦ Describe function
✦ alt= "" for decorative images

Following the visual appearance

Semantics is the king
<h3> <ul>

Not changing defaults

Don’t do
OUTLINE: 0;
(or at least provide
with alternatives)
2.4.7 Focus Visible: Any keyboard operable user interface has a mode of
operation where the keyboard focus indicator is visible. (Level AA)

Disabling mobile zoom

Don’t copy & paste
<meta name="viewport"
content="width=device-width; initial-scale=1.0;
maximum-scale=1.0; user-scalable=0;" />
without testing

Failing in navigation

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

Keep the proper structure
of document headings.

Keep the proper structure
of document headings.

Hiding content
FROM SCREEN
FROM SCREEN READERS
.hidden {
position: absolute;
left: -10000px; .hide {
top: auto; display: none;
width: 1px; visibility: hidden;
height: 1px; }
overflow: hidden;
}
D I S P L AY O N F O C U S
.hidden:focus { position: static; width: auto; height: auto; }

QUICK FIX

WAI-ARIA Landmark Roles
Landmark HTML 5 element
role=”application” none
role=”banner” none
role=”complementary” <aside>
role=”contentinfo” <footer>
role=”main” none
role=”navigation” <nav>
role=”search” none
~ The Paciello Group

Inaccessible forms

✦ Label your inputs ✦ Check the tab order
✦ Group form elements ✦ Make sure it’s JS independent
WRONG:
Name: [radio button] Mr. [radio button] Mrs. [text input] [text input]
[text input] eMail Address Retype eMail

Form validation
~ Derek Featherstone: Aria and Progressive Enhancement

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.
<li role="menuitemcheckbox" aria-checked="true">
Sort by Last Modified
</li>
LIVE REGIONS for AJAX
aria-live="off" aria-live="assertive"
aria-live="polite" aria-live="rude"

Browser extensions
Fangs
Web Developer Toolbar
Accessibility Evaluation Toolbar
Free screen readers
NVDA
ChromeVox
FireVox
VoiceOver

Fangs
No anchor text
No h e ading s No a l t te x
t
S ubm i t n o t
be i ng
re ad o u t

Thanks!
Q&A
Wojtek Zając (@theanxy)
This work is licensed
http://www.slideshare.net/wojciechzajac under a Creative
Commons Attribution
3.0 Unported License