Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems
-
Upload
rodrigo-castilho -
Category
Technology
-
view
3.428 -
download
0
description
Transcript of Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems
![Page 1: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/1.jpg)
1 /
Using WAI-ARIA & HTML5: Techniques to solve accessibility problems It’s Accessibility and Usability working together Rodrigo Castilho aka RODCAST Senior Front End Engineer @rodcast 12/12/2013
![Page 2: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/2.jpg)
/ 2
A web without limits
![Page 3: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/3.jpg)
/ 3
Sad But True
![Page 4: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/4.jpg)
4 /
I feel your pain
Blind and visually impaired make up 285,000,000 people
according to the World Health Organization (June 2012)
with 39,000,000 categorized as legally blind and the
remaining 246,000,000 visually impaired. Deaf and
hearing impaired make up 275,000,000 (2004) in the
moderate-to-profound hearing impairment category.
![Page 5: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/5.jpg)
/ 5
Why is this important?
![Page 6: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/6.jpg)
6 /
You're being watched
"Companies that do not consider accessibility in their Web
site or product development will come to regret that
decision, because we intend to use every tool at our
disposal to ensure that people with disabilities have equal
access to technology."
Thomas E. Perez, current U.S. Secretary of Labor
![Page 7: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/7.jpg)
7 /
Come on
• Improve your job, your business, your life.
• To be a different company and prevent lawsuits.
• High accessibility is effective SEO.
• Stop making excuses for not doing it.
![Page 8: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/8.jpg)
8 /
Come on
• Improve your job, your business, your life.
• To be a different company and prevent lawsuits.
• High accessibility is effective SEO.
• Stop making excuses for not doing it.
![Page 9: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/9.jpg)
9 /
Come on
• Improve your job, your business, your life.
• To be a different company and prevent lawsuits.
• High accessibility is effective SEO.
• Stop making excuses for not doing it.
![Page 10: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/10.jpg)
10 /
Come on
• Improve your job, your business, your life
• To be a different company and prevent lawsuits.
• High accessibility is effective SEO.
• Stop making excuses for not doing it.
![Page 11: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/11.jpg)
/ 11
Checklist & Quick tips (Perceivable, Operable, Understandable and Robust) WCAG 2.0 & Section 508
![Page 12: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/12.jpg)
12 /
WCAG 2.0, Section 508 and the Laws
• WCAG 2.0 Success Criteria Levels: A, AA, AAA http://www.w3.org/WAI/intro/wcag.php
• Section 508 U.S. Department of Health & Human Services http://www.hhs.gov/web/508/accessiblefiles/checklists.html
• Americans with Disabilities Act http://www.dol.gov/dol/topic/disability/ada.htm
![Page 13: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/13.jpg)
/
/
13
01 Perceivable
![Page 14: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/14.jpg)
14 /
Perceivable
• Provide text alternatives for non-text content.
• Provide captions and other alternatives for multimedia.
• Create content that can be presented in different ways, including by assistive technologies, without losing meaning.
• Make it easier for users to see and hear content.
![Page 15: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/15.jpg)
15 /
Perceivable
• Provide text alternatives for non-text content.
• Provide captions and other alternatives for multimedia.
• Create content that can be presented in different ways, including by assistive technologies, without losing meaning.
• Make it easier for users to see and hear content.
![Page 16: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/16.jpg)
16 /
Perceivable
• Provide text alternatives for non-text content.
• Provide captions and other alternatives for multimedia.
• Create content that can be presented in different ways, including by assistive technologies, without losing meaning.
• Make it easier for users to see and hear content.
![Page 17: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/17.jpg)
17 /
Perceivable
• Provide text alternatives for non-text content.
• Provide captions and other alternatives for multimedia.
• Create content that can be presented in different ways, including by assistive technologies, without losing meaning.
• Make it easier for users to see and hear content.
![Page 18: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/18.jpg)
/
/
18
02 Operable
![Page 19: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/19.jpg)
19 /
Operable
• Make all functionality available from a keyboard.
• Give users enough time to read and use content.
• Do not use content that causes seizures.
• Help users navigate and find content.
![Page 20: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/20.jpg)
20 /
Operable
• Make all functionality available from a keyboard.
• Give users enough time to read and use content.
• Do not use content that causes seizures.
• Help users navigate and find content.
![Page 21: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/21.jpg)
21 /
Operable
• Make all functionality available from a keyboard.
• Give users enough time to read and use content.
• Do not use content that causes seizures.
• Help users navigate and find content.
![Page 22: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/22.jpg)
22 /
Operable
• Make all functionality available from a keyboard.
• Give users enough time to read and use content.
• Do not use content that causes seizures.
• Help users navigate and find content.
![Page 23: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/23.jpg)
/
/
23
03 Understandable
![Page 24: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/24.jpg)
24 /
Understandable
• Make text readable and understandable.
• Make content appear and operate in predictable ways.
• Help users avoid and correct mistakes.
![Page 25: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/25.jpg)
25 /
Understandable
• Make text readable and understandable.
• Make content appear and operate in predictable ways.
• Help users avoid and correct mistakes.
![Page 26: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/26.jpg)
26 /
Understandable
• Make text readable and understandable.
• Make content appear and operate in predictable ways.
• Help users avoid and correct mistakes.
![Page 27: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/27.jpg)
/
/
27
04 Robust
![Page 28: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/28.jpg)
28 /
Robust
• Maximize compatibility with current and future user tools.
![Page 29: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/29.jpg)
29 /
Stewie Griffin Accessibility with steroids…
![Page 30: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/30.jpg)
/ 30
WAI-ARIA
![Page 31: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/31.jpg)
31 /
What’s it?
• WAI = Web Accessibility Initiative
• ARIA = Accessible Rich Internet Applications
![Page 32: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/32.jpg)
32 /
How are divided?
• Roles
• Abstract
• Widgets
• Document Structure
• Landmark
• States and Properties
• Managing Focus
![Page 33: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/33.jpg)
33 /
How are divided?
• Roles
• Abstract (ex.: Abstract roles are used for the ontology!?!?) http://www.w3.org/TR/wai-aria/roles#abstract_roles
• Widgets
• Document Structure
• Landmark
![Page 34: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/34.jpg)
34 /
How are divided?
• Roles
• Abstract
• Widgets (ex.: alert, button, dialog, menuitem, progressbar, scrollbar, tab, tooltip) http://www.w3.org/TR/wai-aria/roles#widget_roles
• Document Structure
• Landmark
![Page 35: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/35.jpg)
35 /
How are divided?
• Roles
• Abstract
• Widgets
• Document Structure (ex.: article, directory, heading, list, math, presentation) http://www.w3.org/TR/wai-aria/roles#document_structure_roles
• Landmark
![Page 36: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/36.jpg)
36 /
How are divided?
• Roles
• Abstract
• Widgets
• Document Structure
• Landmark (ex.: application, complementary, main, navigation, search) http://www.w3.org/TR/wai-aria/roles#landmark_roles
![Page 37: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/37.jpg)
37 /
How are divided?
• States and Properties (ex.: aria-* / autocomplete, haspopup, valuemax) http://www.w3.org/TR/wai-aria/states_and_properties
• Managing Focus
![Page 38: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/38.jpg)
38 /
How are divided?
• States and Properties
• Managing Focus (ex.: combobox, menu, manubar, tree, treegrid, tablist) http://www.w3.org/TR/wai-aria/usage#managingfocus
![Page 39: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/39.jpg)
39 /
Screen Reader • NVDA (NonVisual Desktop Access)
• JAWS and Window Eyes (Windows)
• VoiceOver by Apple (iOS)
• ORCA (Linux)
• ChromeVox by Google (Chrome Browser)
See more: http://en.wikipedia.org/wiki/List_of_screen_readers
![Page 40: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/40.jpg)
40 /
Companies that has a dedicated Accessibility team
Google, Apple, Yahoo!,
Facebook, Twitter, Mozilla, Microsoft, Adobe,
Paypal, eBay, WordPress, Nokia, IBM, SAP
![Page 41: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/41.jpg)
41 /
Reference list: Books
Pro HTML5 Accessibility: Building an Inclusive Web By: Joshue O Connor
It’s available on Amazon: http://amzn.com/1430241942
![Page 42: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/42.jpg)
42 /
Reference list: Books
AccessAbility: A Practical Handbook on Accessible Graphic Design By: RGD Ontario
It’s free to anyone interested: http://goo.gl/TnWFaH
![Page 43: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/43.jpg)
43 /
Reference list: Links
http://www.w3.org/WAI/training/
http://training.section508.gov/
http://a11yproject.com/
http://www.accessiq.org/
http://oaa-accessibility.org/
https://webaccessibility.withgoogle.com/
http://yaccessibilityblog.com/library/
http://msdn.microsoft.com/en-us/windows/bb735024.aspx
https://developer.mozilla.org/en-US/docs/Web/Accessibility/
http://www.w3.org/WAI/WCAG20/glance/Overview.html
http://www.hhs.gov/web/508/accessiblefiles/checklists.html
https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb
![Page 44: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/44.jpg)
44 /
Don’t forget
If it’s important to you, you will find a way. If not,
you’ll find an excuse.
Author Unknown
![Page 45: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/45.jpg)
45 /
Homer Simpson WOOHOO!!! I hope I haven't forgotten anything.
![Page 46: Tech Headline - Using WAI-ARIA & HTML5: Techniques to solve accessibility problems](https://reader034.fdocuments.us/reader034/viewer/2022051412/54b756ba4a79596e388b4939/html5/thumbnails/46.jpg)
Thank You.