a11yTO - Web Accessibility for Developers

Web Accessibility for
Developers
a11yTO April 2014
Monika Piotrowicz (@monsika)

Monika
Piotrowicz
Front End Web Developer
Shopify
!
@monsika
@shopify

I’m just...
A regular Front End Developer...
!
!
!

So how’d I get here?
A short story, starring WCAG 2.0 AA
!
!
!

Today
• Introduction to accessibility
• Techniques you can implement today
• Introduction to screen readers & ARIA
• Testing tips

Web Accessibility
• “When sites are correctly designed,
developed and edited, all users can have
equal access to information and
functionality” - Wikipedia
• “Able to be easily obtained or used; easily
understood or appreciated” - Oxford Dictionary
• Accessibility ~ Usability
• All people can use an application, and it
should be easy to use for all people;

Accessibility by the #’s
rough
1 - CDC Summary Health Statistics for U.S. Adults: National Health Interview Survey, 2011
http://1.usa.gov/M6tObC (under 65/over 65)

2 - Range worldwide prevalence of red-green color deficiency among men, 2012
http://1.usa.gov/M6tKsz
Group Population
Vision Problems 3-10%
Colorblindness 4-8%
Physical Functioning 8%
Cognitive Difficulty 6%
Hearing Difficulty 3-11%
Assistive Tools
• screen readers
• screen magnifiers
• keyboard-only
• braille display
• bumped font size

WCAG
The standard
http://www.w3.org/TR/WCAG20/
Understanding WCAG
http://www.w3.org/TR/UNDERSTANDING-WCAG20/
Techniques
http://www.w3.org/TR/WCAG20-TECHS/
Quick Reference
http://www.w3.org/WAI/WCAG20/quickref/
FAQ
http://www.w3.org/WAI/WCAG20/wcag2faq.html

Accessibility
just a checklist
!=

Starting out
Early accessibility considerations

First Steps
• functional keyboard-only
• fallbacks for visual information
• well-functioning forms

a11yTO - Web Accessibility for Developers

Keyboard Strategy
• obvious focus states (keep those outlines!)

a,
a:focus {
outline: none;
outline: 0;
}

Keyboard Strategy
✓ obvious focus states (keep those outlines!)
• keypress equivalents for :hover & click()
↳ :focus & keydown()

Keyboard Strategy
✓ keypress equivalents for :hover & click()
• add tabIndex=0 & key events to non-focusable
elements

Keyboard Strategy
✓ add tabIndex=0 & key events to non-focusable
elements
• avoid keyboard traps & wasting time

Keyboard Strategy
✓ add tabIndex=0 & key events to non-focusable
elements
✓ avoid keyboard traps & wasting time
• HTML can get you there, FREE!
WebAIM http://bit.ly/M24Da2
Keyboard Events http://bit.ly/M241Br

Wanted: Free Events!
<span class="btn-style toggle-trigger">Click to Toggle</span>
!
<a href="#" class="btn-style toggle-trigger">Click to Toggle</a>
!
<button type="button" class="toggle-trigger">Click to Toggle</
button>
Use the button element http://bit.ly/1efaOO1
Links aren’t buttons http://bit.ly/1efaT4o

Visual Considerations
• start with a good font size & high contrast
• Contrast Checker Tool - http://bit.ly/1eeYZYh (by a fellow Shopify-er)
• Chrome Plugin - http://bit.ly/1ljQvFF
• Accessible colour palette how-to http://bit.ly/1fnbmJp

✓start with a good font size & high contrast
• don’t rely on colour alone
• add legends and texture or symbols

Red-Green Colorblind
(Deuteranopia)

✓start with a good font size & high contrast
✓don’t rely on colour alone
• add legends and texture or symbols
• all images have a meaningful alt attribute
• W3C How to write Alt Text http://bit.ly/1aKwIOg
• More from A List Apart http://bit.ly/1aKwRkI

• Every form ﬁeld includes a real label
<label for="[INPUT ID]">
!
!
Forms

✓ Every form ﬁeld includes a real label
• Labels can include help, required, error text
!
!
!
Forms

✓ Every form ﬁeld includes a real label
✓ Labels can include help, required, error text
• Provide meaningful message on form error
!
!
WebAIM Forms http://bit.ly/1aKw2bM
WebAIM Validation http://bit.ly/1aKw6bB
Accessible Form Labeling http://bit.ly/1aKw83b
Forms

boldly go...
The SCREEN READER

TRY ONE!!
How else can you expect to build for one?
NVDA
VoiceOver TalkBack
JAWS

How do they work?
• announce generated HTML in source
order

• Use keyboard to navigate and ﬁnd content
• Highly customizable
Screen reader 101
!
• 97.6% of screen reader users have JS
enabled!1
1 - WebAIM Survey http://bit.ly/1nqd4fp

HTML COUNTS!
• Shortcuts drill down to headings,
landmarks, lists, links, etc

• Do your main content areas have headings?
• Are they descriptive?
• Do they follow a hierarchy? (h1 >> h6)
Headings
Document Outline http://bit.ly/1ef9ScA The Section Element http://bit.ly/1ef9TNN
Accessible Headings http://bit.ly/1ef9QBr Using Sections http://bit.ly/1ef9Ykx
H1 Blog
H2 Recent Articles
H3 Article Title
H3 Article Title
H3 Article Title
H2 About Me
H3 Contact Me
H3 Footer Title
• Main way screen reader users navigate

• img with empty alt attribute alt=""
SR’s ignore...
• :before content, :after content* (sort of)
• display: none;
• visibility: hidden;
* in most cases, so assume it won’t be announced
Accessible Icon Fonts http://bit.ly/1efabUP
.icon-star:before {
content: “★”;
}
• keep in mind for icons and icon fonts!

• content “hidden” with opacity, z-index, height
• oﬀ-screen positioning (text-indent, top, left)
.sr-only,
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
* as seen in HTML5 BP, Twitter Bootstrap, etc.
WebAIM Invisible Content http://bit.ly/1efaij8
• CSS clipping*
SR’s won’t ignore

Beyond the basics
There’s gotta be more to screen readers than just
that, right?

• Applied directly to HTML
!
• Does not aﬀect styles or
non-SR behaviour
• Roles, states & properties
• Semantic information and better
interactions for screen readers
ARIA
• Part of HTML5 spec
HTML5 Spec (W3C) http://bit.ly/1aKxXx5
ARIA Spec (W3C) http://bit.ly/1aKya3f

Roles
• Create new semantic meaning for
elements via “role-” attribute
• Once set, they don’t change
<nav role="navigation">
!
<article role="article">
!
<div role="tablist">
!
<div role="combobox">

Landmark Roles
Deﬁne top-level page sections for easy navigation
!
•main
•banner
•navigation
•search
•complimentary
•contentinfo
•form
Using Landmarks http://bit.ly/1aKyuyQ
WebAIM Landmarks http://bit.ly/1aKytem
Role

Landmark Roles
Deﬁne top-level page sections for easy navigation
!
•main ........ <main>
•banner ........ <header>
•navigation ........ <nav>
•search ........ <form> (search form)
•complimentary ........ <aside>
•contentinfo ........ <footer>
•form
Role HTML 5
Using Landmarks http://bit.ly/1aKyuyQ
WebAIM Landmarks http://bit.ly/1aKytem

Include all content
in a landmark
wrapper elements with
role="landmark"

Widget Roles
Semantic meaning to your custom components
•tooltip
•slider
•dialog
•tab
•progressbar
•combobox
•menu
•alert
.. and many more!

???
<ul class="tab-controls">
<li>
<a href="#first-tab" class="current-item">Panel 1</a>
</li>
<li>
<a href="#second-tab" class="current-item">Panel 2</a>
</li>
<li>
<a href="#third-tab" class="current-item">Panel 3</a>
</li>
</ul>
<div id="tab-container">
<div class="tab-panel" id="first-tab">
<div class="tab-contents">
<p>Tab Contents</p>
</div>
</div>
<div class="tab-panel" id="second-tab">
<p>Tab Contents</p>
</div>
</div>
<div class="tab-panel" id="third-tab">
<p>Tab Contents</p>
</div>
</div>
</div>

???
<ul class="tab-controls">
<li>
<a href="#first-tab" class="current-item">Panel 1</a>
</li>
<li>
<a href="#second-tab" class="current-item">Panel 2</a>
</li>
<li>
<a href="#third-tab" class="current-item">Panel 3</a>
</li>
</ul>
<div class="tab-panel" id="first-tab">
<p>Tab Contents</p>
</div>
</div>
<div class="tab-panel" id="second-tab">
<p>Tab Contents</p>
</div>
</div>
<div class="tab-panel" id="third-tab">
<p>Tab Contents</p>
</div>
</div>
</div>
<ul class="tab-controls" role="tablist">
<li>
<a href="#first-tab" class="current-
item" role="tab">Panel 1</a>
!
<div class="tab-panel" id="first-tab"
role="tab-panel">

• Describe relationships - between content
& between user interactions
• updated via JS on UI changes
• attribute starts with “aria-” preﬁx
States & Properties
<section aria-labelledby="MainHeading">
!
<input aria-label="first 3 digits" aria-
describedby="PhoneHelpText">
!
<button aria-expanded="true" class="accordion-
toggle" aria-controls="Accordion">
!
<div id=“Accordion" aria-hidden="false" >

Content Relationships
• Semantically link labels to content or add
them when missing
• aria-labelledby, aria-label
<section aria-labelledby="HeadingAbout">
<h1 id="HeadingAbout">About Potato Chips</h1>
<p>....
Make the most of landmarks http://bit.ly/M1TFSb

Content Relationships
• Semantically link labels to content or add
them when missing
• aria-labelledby, aria-label
<nav role="navigation" aria-label="Chip Section Navigation">
<ul>
<li>
<a href="/types">Flavors</a>
</li>

It's just HTML!
.elem[aria-hidden = "false"] {
display: block;
}
!
.elem[aria-invalid ="false"] {
background: #999;
}
!
.elem[aria-expanded = "true"] {
height: 100%;
}
The more you know

Putting it all together
• jQueryUI https://jqueryui.com/
• Practical ARIA Examples http://bit.ly/1bhMqBg
• HTML5 & ARIA Design Patterns http://bit.ly/1bhMlNZ
• Accessible Forms with ARIA http://bit.ly/1bhMv7M
• Bootstrap Accessibility Plugin (PayPal) http://bit.ly/1bhM8dy

Using ARIA Wisely
• ARIA is a bridge, not a replacement.
• USE plain HTML if you can
• Not magic and makes no promises
• Events, focus management, keyboard support, and
meaningful structure is still up to you
• Only way to know for sure... TEST

ARIA Resources
W3C Intro
http://www.w3.org/TR/wai-aria-primer/
W3C How-to with design patterns
http://www.w3.org/TR/wai-aria-practices/
W3C Supporting Info for developers
http://www.w3.org/TR/aria-in-html/
WEBAIM Introduction
http://webaim.org/techniques/aria/
Warnings and Perspectives
http://alistapart.com/article/the-accessibility-of-wai-aria
General Information
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
ARIA Validation
http://validator.nu

Automated Tools
• WebAIM WAVE (FF) http://wave.webaim.org/toolbar/
• Accessibility Developer Tools (Chrome) http://bit.ly/1fW0W0A
• Web Developer Toolbar (Chrome & FF) http://bit.ly/1dA2JmY
• Quail Project quailjs.org

Manual Testing
• disable all images
• test with just a keyboard
• load it in a screen reader
• load it in another screen reader
10 Tips anyone can use http://bit.ly/1efaA9N
6 Tests anyone can do http://bit.ly/1efaC1c
Does your page make sense?
Is it usable ?

Unsolicited Advice
• Start small, there’s still a big impact
• Prioritize areas/pages
• main navigation?
• contact us form?
• homepage?
• Document as you go

What I’ve learned
• Bake it in, don’t tack it on
• Awesome and helpful community
• You may ﬁnd it hard to stop

Behind all these checklists, rules, and
regulations, there are people just trying
to use your site.
So make it useable, for everybody.

More Resources
General
HTML5 Accessibility http://bit.ly/LVR8YX
Accessibility Evaluation Quick Reference http://bit.ly/M6tgCF
Mozilla Dev Network ARIA http://mzl.la/M6u9ez
Apple Accessibility Resources http://bit.ly/M6tkSL
Screen Readers
WebAIM Screen Reader Testing http://bit.ly/M6sLIH
Videos of Screen Readers In Use http://bit.ly/M6sR39
How browsers interact with screen readers http://bit.ly/M6sUfi
NVDA resources
WebAIM NVDA http://bit.ly/M6sZj5
WebAIM NVDA Shortcuts http://bit.ly/M6t0n2
Using NVDA and FF to test pages http://bit.ly/M6t6Lu
Installing NVDA in a VM http://bit.ly/M6t8D4
VoiceOver resources
WebAIM VoiceOver http://bit.ly/M6tbyS
Apple VoiceOver User Guide http://bit.ly/M6tolE
Apple Developer Accessibility Guide http://bit.ly/M6ttpe
JAWS resources
WebAIM JAWS http://bit.ly/M6tw4D
WebAIM JAWS Shortcuts http://bit.ly/M6sBRM

Community & Blogs
@webaim
@paciellogroup
@stevefaulkner
@dequesystems
!
www.webaim.org
www.a11yproject.com
www.accessibleculture.org
www.webaxe.org
www.simplyaccessible.com/archives
!
an `a11y` meetup near you! http://bit.ly/1bhN3dW

a11yTO - Web Accessibility for Developers

More Related Content

What's hot (20)

Similar to a11yTO - Web Accessibility for Developers (20)

Recently uploaded (20)

a11yTO - Web Accessibility for Developers