A presentation given at a local event dedicated to JavaScript developers.

1. meet.JS
Accessible web applications
Wojtek Zajac
KRAKÓW, 31.07.2011

2. Why accessibility?
A little story
meet.JS

3. I got into web accessibility in 2005
meet.JS

4. I got into web accessibility in 2005
✦ The first (?) online course of the Polish Sign Language
✦ Tremendous feedback. Requests for help (we weren’t in position)
meet.JS

5. The awareness of web
accessibility is still very low.
Why is it overlooked
so often?
meet.JS

6. 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)
¹ http://www.niepelnosprawni.pl/files/www.niepelnosprawni.pl/public/rozne_pliki/fakty_i_mity_2009.pdf
meet.JS

7. Benefits of web accessibility
✦ Strong overlap with: mobile web
http://www.w3.org/TR/mwbp-wcag/
Progressive enhancement enhances mobile browsing
experience greatly.
✦ Strong overlap with: SEO
Accessible websites are more likely to rank high.
If you use proper headings, good titles, and accessible,
well-structured markup, search engines will treat you better.
meet.JS

8. Please spread
the word to your
company, colleagues,
client or school.
meet.JS

9. Types of disability

10. Visual Hearing Motor Cognitive
User groups:
✦ Blind
✦ Partial vision loss (tunnel vision, cataracts, haziness etc.)
✦ Color blindness (8% of males can’t differentiate green and red)
meet.JS

11. Visual Hearing Motor Cognitive
Don’t rely on subtle details, choose contrast or changed
appearance instead.
http://contrastrebellion.com/
meet.JS

12. Visual Hearing Motor Cognitive
Red–green colorblindness
Hard to differentiate:
Better version:
meet.JS

13. Visual Hearing Motor Cognitive
Video transcription (closed captioning) benefits not just those
with hearing impairments.
✦ Some users choose to disable sound (at the office, using a mobile device)
✦ Content becomes parsable by search robots
✦ Quoting abilities, in-video search etc.
meet.JS

14. 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”.
How to help:
✦ Provide focus states for links
(dangers of outline:
0)
✦ Make sure content and focus
order is logical.
✦ Avoid relying on mouse or
multitouch events.
meet.JS

15. Visual Hearing Motor Cognitive
Cognitive problems occur to older users and those with worse level of
document language used.
✦ Increase readability of the text
✦ Use large headlines and clear instructions
✦ Use descriptive link text
✦ Increase target area of navigation links
meet.JS

16. Good practices

17. Correct alternative content
More: http://webaim.org/techniques/alttext/
meet.JS

18. Proper link text
2.4.4 Link Purpose (In Context): The purpose of each link can be
determined from the link text alone or from the link text together with its
programmatically determined link context, except where the purpose of
the link would be ambiguous to users in general. (Level A)
~ WCAG 2.0 http://www.w3.org/TR/2008/REC-WCAG20-20081211/
#navigation-mechanisms-refs
meet.JS

19. Proper link text
H idde n us
p o si t io ni i ng
<dl> ng o f f-s c
<dt>Winnie the Pooh </dt> re e n
<dd><a href="winnie_the_pooh.html">
<span>Winnie the Pooh </span>HTML</a></dd>
<dd><a href="winnie_the_pooh.pdf">
<span>Winnie the Pooh </span>PDF</a></dd>
<dt>War and Peace</dt>
<dd><a href="war_and_peace.html">
<span>War and Peace </span>HTML</a></dd>
<dd><a href="war_and_peace.pdf">
<span>War and Peace </span>PDF</a></dd>
</dl>
meet.JS

20. Accessible forms
✦ Label your inputs ✦ Check the tab order
✦ Group form elements ✦ Make sure it’s JS independent
<fieldset>
<legend>Select
your
pizza
toppings:</legend>
<input
id="ham"
type="checkbox"
name="toppings"
value="ham"
/>
<label
for="ham">Ham</label><br
/>
<input
id="pepperoni"
type="checkbox"
name="toppings"
value="pepperoni"
/>
<label
for="pepperoni">Pepperoni</label><br
/>
<input
id="mushrooms"
type="checkbox"
name="toppings"
value="mushrooms"
/>
<label
for="mushrooms">Mushrooms</label><br
/>
<input
id="olives"
type="checkbox"
name="toppings"
value="olives"
/>
<label
for="olives">Olives</label>
</fieldset>
More: http://webaim.org/techniques/forms/
meet.JS

21. Using
WAI-ARIA

22. 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
meet.JS

23. 1. Start with POSH
meet.JS

24. 1. Start with POSH
POSH: Plain Old Semantic HTML
meet.JS

25. 1. Start with POSH
2. Order DOM content
logically
Viewing bbc.co.uk with CSS disabled
meet.JS

26. 1. Start with POSH
2. Order DOM content
logically
3. Make sure forms are
accessible
Firebug view of the grouped form fields
meet.JS

27. 1. Start with POSH
2. Order DOM content <!-­‐-­‐
Natural
tab
order
-­‐-­‐>
<div
onclick=""
tabindex="0">Clicky
1</div>
logically <!-­‐-­‐
Custom
tab
order
-­‐-­‐>
3. Make sure forms are <div
onclick=""
tabindex="7">Clicky
2</div>
accessible
<!-­‐-­‐
Focusable
but
not
in
tab
order
-­‐-­‐>
<div
onclick=""
tabindex="-­‐1">Clicky
3</div>
4. Manage focus Creating Accessible Interactive Web Apps using HTML5
meet.JS

28. 1. Start with POSH
2. Order DOM content
logically <li
role="menuitemcheckbox"
aria-­‐checked="true">
Sort
by
Last
Modified
</li>
3. Make sure forms are
accessible [aria-­‐checked="true"]
{
font-­‐weight:
bold;
}
[aria-­‐checked="true"]:before
{
background-­‐image:
url(checked.gif);
}
4. Manage focus
Using WAI-ARIA: 2.2 States and Properties
5. Add ARIA for screen
readers
meet.JS

29. ARIA Live Regions
✦ Assistive Technology users are notified when the content changes
✦ Mark up the parts that are likely to change with Live Regions
<span
class='saving'
aria-­‐live='polite'>Saving...</span>
meet.JS

30. Plugins, extensions

31. Check headings architecture
Disable images
Web Developer Toolbar http://goo.gl/J5afH meet.JS

32. Investigate problems:
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
Fangs http://goo.gl/hHOOB meet.JS

33. Links with no anchor text Recurring “Read more” links
Accessibility Evaluation Toolbar http://goo.gl/pgdDK meet.JS

34. Further reading
✦ http://webaxe.blogspot.com/2011/05/
accessibility-twitter-lists.html
✦ http://twitter.com/a11y
✦ http://webaim.org/
✦ http://www.rnib.org.uk/
✦ http://html5accessibility.com/
Web Accessibility: Web Standards
and Regulatory Compliance (2006)
meet.JS

35. Thanks!
slideshare.net/wojciechzajac
wojtekzajac.com
Wojtek Zajac (@theanxy) This work is licensed under
a Creative Commons
Attribution 3.0 Unported
License