How to build accessibility into your next digital project Oct 2013
Web Accessibility - A feature you can build
-
Upload
monika-piotrowicz -
Category
Technology
-
view
636 -
download
0
description
Transcript of Web Accessibility - A feature you can build
![Page 1: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/1.jpg)
Web Accessibility (a11y) A feature you can build2014 Monika Piotrowicz (@monsika)
![Page 3: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/3.jpg)
I’m just...A regular Front End Developer... !
!
!
![Page 4: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/4.jpg)
So how’d I get here? A short story, starring WCAG 2.0 AA !
!
!
![Page 5: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/5.jpg)
Today• Introduction to accessibility • Techniques you can implement today • Introduction to screen readers & ARIA • Testing tips
![Page 6: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/6.jpg)
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;
![Page 7: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/7.jpg)
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
![Page 8: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/8.jpg)
WCAGThe 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
![Page 9: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/9.jpg)
Accessibility
just a checklist
!=
![Page 10: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/10.jpg)
Starting outEarly accessibility considerations
![Page 11: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/11.jpg)
First Steps• clear visuals with fallbacks for imagery
• well-functioning forms
• keyboard interactions
![Page 12: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/12.jpg)
![Page 13: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/13.jpg)
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
![Page 14: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/14.jpg)
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
![Page 15: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/15.jpg)
Red-Green Colorblind (Deuteranopia)
![Page 16: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/16.jpg)
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
![Page 17: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/17.jpg)
![Page 18: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/18.jpg)
• 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
![Page 19: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/19.jpg)
<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
![Page 20: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/20.jpg)
![Page 21: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/21.jpg)
a, a:focus { outline: none; outline: 0; }
![Page 22: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/22.jpg)
Keyboard Strategy✓ obvious focus states (keep those outlines!)
• add tabindex=0 to non-focusable, clickable elements
![Page 23: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/23.jpg)
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();
![Page 24: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/24.jpg)
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
![Page 25: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/25.jpg)
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
![Page 26: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/26.jpg)
!
• opened modal window?
onModalOpen = function($modalWrapper) { $modalWrapper.attr('tabindex', '-1').focus(); };
Focus Management• Focus follows the user…
focus()
![Page 27: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/27.jpg)
• Focus follows the user…
• opened modal window?
• scrolled viewport?
• transitioned to new view? focus()
Focus Management
focus()
focus()
![Page 28: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/28.jpg)
• Focus follows the user…
• opened modal window?
• scrolled viewport?
• transitioned to new view?
• closed modal window? freakOut()
Focus Management
![Page 29: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/29.jpg)
!$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/
![Page 30: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/30.jpg)
Have an exit strategy
mousetrap
Photograph by Sheba_Also licensed under Creative Commons
![Page 31: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/31.jpg)
boldly go...The SCREEN READER
![Page 32: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/32.jpg)
TRY ONE!! How else can you expect to build for one?
NVDA
VoiceOver TalkBack
JAWS
![Page 33: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/33.jpg)
How do they work?• announce generated HTML in source
order
![Page 34: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/34.jpg)
• 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
![Page 35: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/35.jpg)
HTML COUNTS!• Shortcuts drill down to headings,
landmarks, lists, links, etc
![Page 36: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/36.jpg)
• 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
![Page 37: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/37.jpg)
• 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
![Page 38: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/38.jpg)
• 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
![Page 39: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/39.jpg)
Beyond the basicsThere’s gotta be more to screen readers than just that, right?
![Page 40: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/40.jpg)
![Page 41: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/41.jpg)
• 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
![Page 42: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/42.jpg)
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">
![Page 43: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/43.jpg)
Landmark RolesDefine top-level page sections for easy navigation
!
•main
•banner
•navigation
•search
•complimentary
•contentinfo
•form
Role
![Page 44: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/44.jpg)
Landmark RolesDefine 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
![Page 45: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/45.jpg)
Include all content in a landmark
Elements using landmark roles
role="banner"
role="navigation"
role="main"
![Page 46: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/46.jpg)
Widget RolesSemantic 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
![Page 47: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/47.jpg)
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/
![Page 48: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/48.jpg)
• Describe relationships between content & between user interactions
• updated via JS on UI changes
• attributes start with “aria-” prefix
States & Properties
![Page 49: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/49.jpg)
<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/
![Page 50: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/50.jpg)
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
![Page 51: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/51.jpg)
Content Relationships
<section aria-labelledby="HeadingAbout"> <h1 id="HeadingAbout">About Potato Chips</h1> <p>....
Make the most of landmarks http://bit.ly/M1TFSb
![Page 52: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/52.jpg)
Content Relationships
<nav role="navigation" aria-label="Chip Section Navigation"> <ul> <li> <a href="/types">Flavors</a> </li>
![Page 53: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/53.jpg)
<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
![Page 54: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/54.jpg)
<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
![Page 55: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/55.jpg)
<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
![Page 56: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/56.jpg)
<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
![Page 57: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/57.jpg)
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
![Page 58: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/58.jpg)
![Page 59: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/59.jpg)
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
![Page 60: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/60.jpg)
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
![Page 61: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/61.jpg)
ARIA ResourcesGetting 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/
![Page 62: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/62.jpg)
Testing
![Page 63: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/63.jpg)
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/
![Page 64: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/64.jpg)
![Page 65: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/65.jpg)
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 ?
![Page 66: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/66.jpg)
Unsolicited Advice• Start small, there’s still a big impact
• Prioritize areas/pages
• main navigation? • contact us form? • homepage?
• Document as you go
![Page 67: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/67.jpg)
Final Thoughts
![Page 68: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/68.jpg)
What I’ve learned• Bake it in, don’t tack it on
• Awesome and helpful community
• You may find it hard to stop
![Page 69: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/69.jpg)
Behind all these checklists, rules, and regulations, there are people just trying
to use your site.
So make it useable, for everybody.
![Page 71: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/71.jpg)
More Resources
![Page 72: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/72.jpg)
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
![Page 73: Web Accessibility - A feature you can build](https://reader033.fdocuments.us/reader033/viewer/2022042816/559b0d6b1a28aba2638b471a/html5/thumbnails/73.jpg)
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