Download - Top Mistakes in Web Accessibility
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!