The document discusses web accessibility (a11y) and emphasizes the importance of designing websites to be usable for all individuals, including those with disabilities. It covers techniques to implement accessibility features, such as proper form labeling, color contrast, and the use of ARIA roles to enhance user experience with screen readers. The guide provides resources and tools for both automated and manual testing to ensure compliance with accessibility standards like WCAG 2.0 AA.

1. Web Accessibility (a11y)
A feature you can build
2014
Monika Piotrowicz (@monsika)

2. Monika
Piotrowicz
Front End Web Dev Lead
Shopify
!
@monsika
@shopify

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

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

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

6. 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;

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

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

9. Accessibility
just a checklist
!=

10. Starting out
Early accessibility considerations

11. First Steps
• clear visuals with fallbacks for imagery
• well-functioning forms
• keyboard interactions

13. Visual Considerations
• start with a good font size & high contrast
• Contrast Checker Tool - contrast-finder.tanaguru.com
• Chrome Plugin - http://bit.ly/1ljQvFF
• Accessible colour palette how-to http://bit.ly/1fnbmJp

14. Visual Considerations
✓start with a good font size & high contrast
• Contrast Checker Tool - contrast-finder.tanaguru.com
• Chrome Plugin - http://bit.ly/1ljQvFF
• Accessible colour palette how-to http://bit.ly/1fnbmJp
• don’t rely on colour alone
• add legends and texture or symbols

15. Red-Green Colorblind
(Deuteranopia)

16. Visual Considerations
✓start with a good font size & high contrast
• Contrast Checker Tool - contrast-finder.tanaguru.com
• Chrome Plugin - http://bit.ly/1ljQvFF
• Accessible colour palette how-to http://bit.ly/1fnbmJp
✓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

18. • Every form field includes a real label
<label for="[INPUT ID]">
• Placeholders don’t count
• Labels can include help, required, error text
• Provide meaningful message and action on form
error
WebAIM Forms http://bit.ly/1aKw2bM
Harmful Placeholders http://bit.ly/1qNUTOM
WebAIM Validation http://bit.ly/1aKw6bB
Accessible Form Labeling http://bit.ly/1aKw83b
Forms

19. <label for="InputFirstName">
<span class="txt-label">First Name *</span>
<span class="txt-error">Required, please provide your first name</span>
</label>
<input type="text" id=“InputFirstName" required />
WebAIM Forms http://bit.ly/1aKw2bM
Harmful Placeholders http://bit.ly/1qNUTOM
WebAIM Validation http://bit.ly/1aKw6bB
Accessible Form Labeling http://bit.ly/1aKw83b

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

22. Keyboard Strategy
✓ obvious focus states (keep those outlines!)
• add tabindex=0 to non-focusable, clickable
elements

23. Keyboard Strategy
✓ obvious focus states (keep those outlines!)
✓ add tabindex=0 to non-focusable, clickable
elements
• add equivalents for :hover, hover() & click()
↳ :focus, focusin() & keydown()
$modalTrigger.attr('tabindex', '0');
$modalTrigger.on({
'click': handleTrigger,
'keydown': function (evt) {
var keyPressed = evt.keyCode;
if (keyPressed === app.keyCodes.ENTER || keyPressed === app.keyCodes.SPACE) {
handleTrigger();

24. Keyboard Strategy
✓ obvious focus states (keep those outlines!)
✓ add tabindex=0 to non-focusable, clickable
elements
✓ add equivalents for :hover, hover() & click()
↳ :focus, focusin() & keydown()
• HTML can get you there, FREE!
WebAIM http://bit.ly/M24Da2
Tabindex bit.ly/1xY7eCL
Keyboard Events http://bit.ly/M241Br

25. Wanted: Free Events!
<span class="btn toggle-trigger" tabindex="0">Click to Toggle</span>
!
<a href="#" class="btn 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

26. !
• opened modal window?
onModalOpen = function($modalWrapper) {
$modalWrapper.attr('tabindex', '-1').focus();
};
Focus Management
• Focus follows the user…
focus()

27. • Focus follows the user…
• opened modal window?
• scrolled viewport?
• transitioned to new view? focus()
Focus Management
focus()
focus()

28. • Focus follows the user…
• opened modal window?
• scrolled viewport?
• transitioned to new view?
• closed modal window? freakOut()
Focus Management

29. !
$modalTrigger.on('click', function(e){
var $modal,
modalTrigger = e.currentTarget;
!
// modal logic here
!
// save trigger elem so on modalClose it gets focus
$modal.data('trigger', modalTrigger);
});
!
handleModalClose = function() {
var newFocusElem = $modal.data('trigger');
!
// focus returns to the element that triggered the modal
$(newFocusElem).focus();
!
// remove the trigger, might be different next time
$modal.removeData('trigger');
};
http://codepen.io/mpiotrowicz/full/Juocl/

30. Have an exit strategy
mousetrap
Photograph by Sheba_Also licensed under Creative Commons

31. boldly go...
The SCREEN READER

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

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

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

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

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

37. • 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!
• or just use SVG

38. • content “hidden” with opacity, z-index, height
• off-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

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

41. • Applied directly to HTML
!
• Does not affect 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

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

43. Landmark Roles
Define top-level page sections for easy navigation
!
•main
•banner
•navigation
•search
•complimentary
•contentinfo
•form
Role

44. Landmark Roles
Define 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
Support for HTML5 as landmarks http://bit.ly/LVR8YX

45. Include all content
in a landmark
Elements using
landmark roles
role="banner"
role="navigation"
role="main"

46. Widget Roles
Semantic meaning to your custom components
•tooltip
•slider
•dialog
•tab
•progressbar
•combobox
•menu
•alert
.. and many more!
http://www.w3.org/TR/wai-aria/roles#widget_roles

47. ul class="tab-controls">
<li>
<a href="#Tab1">Panel 1</a>
</li>
<li>
<a href="#Tab2" class="current-item">Panel 2</a>
</li>
<li>
<a href="#Tab3">Panel 3</a>
</li>
</ul>
<div id="TabContainer">
<div class="tab-panel" id="Tab1">
<div class="tab-contents">
<p>Tab Contents</p>
</div>
</div>
<div class="tab-panel" id="Tab2">
<div class="tab-contents">
<p>Tab Contents</p>
</div>
</div>
<div class="tab-panel" id="Tab3">
<div class="tab-contents">
<p>Tab Contents</p>
</div>
</div>
</div>
???
<ul class="tab-controls" role="tablist">
<li>
<a href="#Tab1" class="current-item"
role="tab">Panel 1</a>
!
<div id="tab-container">
<div class="tab-panel" id="Tab1"
role="tab-panel">
http://codepen.io/mpiotrowicz/full/gocmu/

48. • Describe relationships between content &
between user interactions
• updated via JS on UI changes
• attributes start with “aria-” prefix
States & Properties

49. <ul class="tab-controls">
<li>
<a href="#Tab1">Panel 1</a>
</li>
<li>
<a href="#Tab2" class="current-item">Panel 2</a>
</li>
<li>
<a href="#Tab3">Panel 3</a>
</li>
</ul>
<div id="TabContainer">
<div class="tab-panel" id="Tab1">
<div class="tab-contents">
<p>Tab Contents</p>
</div>
</div>
<div class="tab-panel" id="Tab2">
<div class="tab-contents">
<p>Tab Contents</p>
</div>
</div>
<div class="tab-panel" id="Tab3">
<div class="tab-contents">
<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 id="tab-container">
<div class="tab-panel" id="first-tab"
role="tab-panel">
<ul class="tab-controls" role="tablist">
<li>
<a href=“#Tab1" class="current-item" role="tab" aria-
selected="true" aria-expanded="true" aria-controls="Tab1" >Panel
1</a>
!
<div id="tab-container">
<div class="tab-panel" id=“Tab1" aria-hidden=“false" role=“tab-
panel">
http://codepen.io/mpiotrowicz/full/gocmu/

50. Content Relationships
• Semantically link labels to content or add
them when missing
• aria-labelledby
• aria-describedby
• aria-label
} text-element ID’s, comma-separated
string of label text

51. Content Relationships
<section aria-labelledby="HeadingAbout">
<h1 id="HeadingAbout">About Potato Chips</h1>
<p>....
Make the most of landmarks http://bit.ly/M1TFSb

52. Content Relationships
<nav role="navigation" aria-label="Chip Section Navigation">
<ul>
<li>
<a href="/types">Flavors</a>
</li>

53. <label for="InputPhoneNumber">Phone Number</label>
<input aria-describedby="PhoneHelpText" id="InputPhoneNumber">
<span id="PhoneHelpText">
eg. 555-555-5555. We will use this number only in
case of emergency
</span>
Content Relationships

54. <label for="InputPhoneNumber">Phone Number</label>
<input aria-describedby="PhoneHelpText" aria-required="true"
id="InputPhoneNumber">
<span id="PhoneHelpText">
eg. 555-555-5555. We will use this number only in
case of emergency
</span>
Descriptions

55. <label for="InputPhoneNumber">Phone Number</label>
<input aria-describedby="PhoneHelpText" aria-required="true"
aria-invalid="true" id="InputPhoneNumber">
<span id="PhoneHelpText">
eg. 555-555-5555. We will use this number only in
case of emergency
</span>
Descriptions

56. <label for="InputPhoneNumber">Phone Number</label>
<input aria-describedby="PhoneHelpText" aria-required="true"
aria-invalid="true" id="InputPhoneNumber">
<span id="PhoneHelpText">
eg. 555-555-5555. We will use this number only in
case of emergency
</span>
Descriptions
aria-pressed
aria-selected
aria-checked
aria-disabled
aria-expanded
aria-controls
aria-haspopup
aria-valuemax
aria-valuemin
aria-multiselectable
aria-owns
aria-live
http://www.w3.org/TR/wai-aria/states_and_properties

57. It's just HTML!
.elem[aria-hidden = "false"] {
display: block;
}
!
.elem[aria-invalid ="true"] {
background: red;
}
!
.elem[aria-selected = "true"] {
border: green;
}
The more you know

59. Putting it all together
• A11y Project Patterns http://a11yproject.com/patterns/
• Tab Example - http://codepen.io/mpiotrowicz/full/gocmu/
• Practical ARIA Examples http://bit.ly/1bhMqBg
• HTML5 & ARIA Design Patterns http://bit.ly/1bhMlNZ
• jQueryUI https://jqueryui.com/
• Angular JS & Accessibility http://bit.ly/1sPwCax
• Bootstrap Accessibility Plugin (PayPal) http://bit.ly/1bhM8dy
• Accessible Web Components http://bit.ly/1iMwBiG

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

61. ARIA Resources
Getting Started with ARIA
http://a11yproject.com/posts/getting-started-aria/
The WAI forward
http://www.smashingmagazine.com/2014/07/09/the-wai-forward/
W3C Intro
http://www.w3.org/TR/wai-aria-primer/
W3C 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/

62. Testing

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

65. Manual Testing
• disable all images
• test with just a keyboard
• load it in a screen reader
• load it in another screen reader
Testing for Web Accessibility in 60 seconds http://bit.ly/1tSju4E
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 ?

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

67. Final Thoughts

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

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

70. Thanks!
!
Questions?
@monsika

71. More Resources

72. General
Accessibility Evaluation Quick Reference http://bit.ly/M6tgCF
The Accessibility Tree - http://bit.ly/1kzPmO6
Mozilla Dev Network ARIA http://mzl.la/M6u9ez
How Not To Misuse ARIA States, Properties and Roles http://bit.ly/1vzXfI1
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

73. Community & Blogs
#a11y
@webaim
@a11yproject
@paciellogroup
!
Weekly Mailer - http://bit.ly/1zO7aIC
www.a11yproject.com
www.webaim.org
www.webaxe.org
!
an a11y Meetup near you! http://bit.ly/1bhN3dW