a11yTO - Web Accessibility for Developers
-
Upload
monika-piotrowicz -
Category
Technology
-
view
618 -
download
2
description
Transcript of a11yTO - Web Accessibility for Developers
![Page 1: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/1.jpg)
Web Accessibility for Developersa11yTO April 2014 Monika Piotrowicz (@monsika)
![Page 2: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/2.jpg)
Monika PiotrowiczFront End Web Developer Shopify !
@monsika @shopify
![Page 3: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/3.jpg)
I’m just...A regular Front End Developer... !
!
!
![Page 4: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/4.jpg)
So how’d I get here? A short story, starring WCAG 2.0 AA !
!
!
![Page 5: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/5.jpg)
Today• Introduction to accessibility • Techniques you can implement today • Introduction to screen readers & ARIA • Testing tips
![Page 6: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/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: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/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: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/8.jpg)
Me last year...
![Page 9: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/9.jpg)
Go!
![Page 10: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/10.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 11: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/11.jpg)
Accessibility
just a checklist
!=
![Page 12: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/12.jpg)
Starting outEarly accessibility considerations
![Page 13: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/13.jpg)
First Steps• functional keyboard-only
• fallbacks for visual information
• well-functioning forms
![Page 14: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/14.jpg)
![Page 15: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/15.jpg)
Keyboard Strategy• obvious focus states (keep those outlines!)
![Page 16: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/16.jpg)
a, a:focus { outline: none; outline: 0; }
![Page 17: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/17.jpg)
Keyboard Strategy✓ obvious focus states (keep those outlines!)
• keypress equivalents for :hover & click()
↳ :focus & keydown()
![Page 18: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/18.jpg)
Keyboard Strategy✓ obvious focus states (keep those outlines!)
✓ keypress equivalents for :hover & click()
↳ :focus & keydown()
• add tabIndex=0 & key events to non-focusable elements
![Page 19: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/19.jpg)
Keyboard Strategy✓ obvious focus states (keep those outlines!)
✓ keypress equivalents for :hover & click()
↳ :focus & keydown()
✓ add tabIndex=0 & key events to non-focusable elements
• avoid keyboard traps & wasting time
![Page 20: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/20.jpg)
Keyboard Strategy✓ obvious focus states (keep those outlines!)
✓ keypress equivalents for :hover & click()
↳ :focus & keydown()
✓ 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
![Page 21: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/21.jpg)
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
![Page 22: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/22.jpg)
![Page 23: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/23.jpg)
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
![Page 24: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/24.jpg)
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
• don’t rely on colour alone
• add legends and texture or symbols
![Page 25: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/25.jpg)
Red-Green Colorblind (Deuteranopia)
![Page 26: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/26.jpg)
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
✓ 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 27: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/27.jpg)
![Page 28: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/28.jpg)
• Every form field includes a real label <label for="[INPUT ID]"> !!
Forms
![Page 29: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/29.jpg)
✓ Every form field includes a real label <label for="[INPUT ID]">
• Labels can include help, required, error text
!!!
Forms
![Page 30: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/30.jpg)
✓ Every form field includes a real label <label for="[INPUT ID]">
✓ 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
![Page 31: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/31.jpg)
![Page 32: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/32.jpg)
boldly go...The SCREEN READER
![Page 33: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/33.jpg)
TRY ONE!! How else can you expect to build for one?
NVDA
VoiceOver TalkBack
JAWS
![Page 34: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/34.jpg)
How do they work?• announce generated HTML in source
order
![Page 35: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/35.jpg)
How do they work?• announce generated HTML in source
order
![Page 36: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/36.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 37: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/37.jpg)
HTML COUNTS!• Shortcuts drill down to headings,
landmarks, lists, links, etc
![Page 38: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/38.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 39: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/39.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!
![Page 40: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/40.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 41: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/41.jpg)
Beyond the basicsThere’s gotta be more to screen readers than just that, right?
![Page 42: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/42.jpg)
![Page 43: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/43.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 44: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/44.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 45: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/45.jpg)
Landmark RolesDefine 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
![Page 46: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/46.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
![Page 47: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/47.jpg)
Include all content in a landmark
wrapper elements with role="landmark"
![Page 48: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/48.jpg)
Widget RolesSemantic meaning to your custom components
• tooltip
• slider
• dialog
• tab
• progressbar
• combobox
• menu
• alert
.. and many more!
![Page 49: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/49.jpg)
???
<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"> <div class="tab-contents"> <p>Tab Contents</p> </div> </div> <div class="tab-panel" id="third-tab"> <div class="tab-contents"> <p>Tab Contents</p> </div> </div> </div>
![Page 50: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/50.jpg)
???
<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"> <div class="tab-contents"> <p>Tab Contents</p> </div> </div> <div class="tab-panel" id="third-tab"> <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">
![Page 51: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/51.jpg)
• Describe relationships - between content & between user interactions
• updated via JS on UI changes
• attribute starts with “aria-” prefix
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" >
![Page 52: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/52.jpg)
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
![Page 53: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/53.jpg)
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>
![Page 54: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/54.jpg)
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
![Page 55: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/55.jpg)
![Page 56: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/56.jpg)
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
![Page 57: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/57.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 58: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/58.jpg)
ARIA ResourcesW3C 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
![Page 59: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/59.jpg)
Testing
![Page 60: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/60.jpg)
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
![Page 61: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/61.jpg)
![Page 62: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/62.jpg)
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 ?
![Page 63: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/63.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 64: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/64.jpg)
Final Thoughts
![Page 65: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/65.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 66: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/66.jpg)
Behind all these checklists, rules, and regulations, there are people just trying
to use your site.
So make it useable, for everybody.
![Page 67: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/67.jpg)
Thanks!@monsika
![Page 68: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/68.jpg)
More Resources
![Page 69: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/69.jpg)
More ResourcesGeneral 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
![Page 70: a11yTO - Web Accessibility for Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/558ec2641a28ab54778b47ba/html5/thumbnails/70.jpg)
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