The presentation given at http://frontrowconf.com/.

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

2. 3
TYPES

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

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

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

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

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

8. Benefits of web accessibility
✦ Strong overlap with: mobile web
http://www.w3.org/TR/mwbp-wcag/

9. Benefits of web accessibility
✦ Strong overlap with: SEO

10. Types of disability

11. Visual Hearing Motor Cognitive
✦ Blind
✦ Partial vision loss
✦ Color blindness

12. Visual Hearing Motor Cognitive
Video transcription (closed captioning) benefits not just
those with hearing impairments.
✦ Disabling sound
✦ Content becomes searchable and quotable

13. 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”.

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

15. “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/

16. A brief guide
into frequent problems

17. Incorrect alternative text

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

19. fig. Image based navigation
with no alt text

20. 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”

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

22. Following the visual appearance

24. Semantics is the king
<h3> <ul>

25. Not changing defaults

27. 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)

28. Disabling mobile zoom

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

30. Failing in navigation

31. 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)

32. Keep the proper structure
of document headings.

33. Keep the proper structure
of document headings.

34. 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; }

35. QUICK FIX

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

37. Inaccessible forms

38. ✦ 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

39. Form validation
~ Derek Featherstone: Aria and Progressive Enhancement

40. Ambiguous links

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

43. Adding interaction

44. Manage focus order!

45. 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"

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

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

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