Selfish Accessibility: a11y Camp Toronto 2014
-
Upload
adrian-roselli -
Category
Internet
-
view
459 -
download
1
description
Transcript of Selfish Accessibility: a11y Camp Toronto 2014
![Page 1: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/1.jpg)
Selfish AccessibilityPresented by Adrian Roselli for Accessibility Camp Toronto 2014
#a11yTO
![Page 2: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/2.jpg)
About Adrian Roselli
• Co-written four books.• Technical editor
for two books.• Written over fifty
articles, most recentlyfor .net Magazine andWeb Standards Sherpa.
Great bedtime reading!
![Page 3: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/3.jpg)
About Adrian Roselli
• Member of W3C HTML Working Group, W3C Accessibility Task Force, five W3C Community Groups.
• Building for the web since 1994.• Founder, owner at Algonquin Studios (
AlgonquinStudios.com).• Learn more at AdrianRoselli.com.• Avoid on Twitter @aardrian.
I warned you.
![Page 4: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/4.jpg)
What is a11y?
• A numeronym for “accessibility”:• The first and last letter,• The number of characters omitted.
• Prominent on Twitter (character restrictions):• #a11y
• Examples:• l10n → localization• i18n → internationalization
Ain’t language funsies?
![Page 5: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/5.jpg)
Accessibility Gets No Respect
In fairness, Sherman Williams needs to come up with a lot of color names...
“Cyberspace” (gray)
“Online” (blue)
“Lime Rickey” (green)
![Page 6: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/6.jpg)
Accessibility Gets No Respect
…however I think the team could have done better than this.
![Page 7: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/7.jpg)
What We’ll Cover
• Boring Statistics• How to Be Selfish• Basic Tests• Some Techniques• Questions (ongoing!)
Work with me, people.
![Page 8: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/8.jpg)
Boring Statistics
1 of 4 sections.
![Page 9: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/9.jpg)
Any Disability
• In the United States:• 10.4% aged 21-64 years old,• 25% aged 65-74 years old,• 50% aged 75+.
• Includes:• Visual• Hearing• Mobility• Cognitive
http://www.who.int/mediacentre/factsheets/fs282/en/http://www.disabilitystatistics.org/reports/2012/English/HTML/report2012.cfm?fips=2000000&html_year=2012
![Page 10: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/10.jpg)
Vision Impairments
• 285 million worldwide:• 39 million are blind,• 246 million have low vision,• 82% of people living with blindness are aged 50
and above.• 1.8% of Americans aged 21-64.• 4.0% of Americans aged 65-74.• 9.8% of Americans aged 75+.
http://www.who.int/mediacentre/factsheets/fs282/en/http://www.disabilitystatistics.org/reports/2012/English/HTML/report2012.cfm?fips=2000000&html_year=2012
![Page 11: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/11.jpg)
Hearing Impairments
• 360 million people worldwide have disabling hearing loss.
• 17% (36 million) of American adults report some degree of hearing loss:• 18% aged 45-64 years old,• 30% aged 65-74 years old,• 47% aged 75+ years old.
http://www.who.int/mediacentre/factsheets/fs300/en/https://www.nidcd.nih.gov/health/statistics/Pages/quick.aspx
![Page 12: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/12.jpg)
Mobility Impairments
• In the United States:• 5.5% aged 21-64 years old.• 15.6% aged 65-74 years old.• 32.9% aged 75+.
http://www.disabilitystatistics.org/reports/2012/English/HTML/report2012.cfm?fips=2000000&html_year=2012
![Page 13: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/13.jpg)
Cognitive Impairments
• Dyslexia,• Dyscalculia,• Memory issues,• Distractions (ADD, ADHD),• In the United States:• 4.3% aged 21-64 years old.• 5.4% aged 65-74 years old.• 14.4% aged 75+.
http://www.disabilitystatistics.org/reports/2012/English/HTML/report2012.cfm?fips=2000000&html_year=2012&subButton=Get+HTML
![Page 14: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/14.jpg)
How to Be Selfish
2 of 4 sections.
![Page 15: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/15.jpg)
WebAIM’s Hierarchy for Motivating Accessibility Change
http://webaim.org/blog/motivating-accessibility-change/
![Page 16: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/16.jpg)
My Hierarchy for Motivating Accessibility Change
Is better, no?
![Page 17: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/17.jpg)
Getting Older
• Affects (nearly) everyone,• Carries risks and side effects,• Is not for the young.
I’m still experimenting with it.
![Page 20: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/20.jpg)
Accidents
• Broken limbs,• Eye injuries,• Hearing injuries,• Head trauma.
All of these have happened to me, multiple times.
![Page 25: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/25.jpg)
Paul Townsend on Flickr.
![Page 26: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/26.jpg)
But I’m Invincible!
• Multi-tasking,• Sunlight,• Eating at your desk,• No headphones handy,• Content is not in your native language.
The sun is trying to kill me.
![Page 27: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/27.jpg)
https://twitter.com/aardrian/statuses/388733408576159744
![Page 29: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/29.jpg)
Bitznbitez on Flickr.
![Page 30: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/30.jpg)
Mariëlle on Flickr.
![Page 31: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/31.jpg)
barockschloss on Flickr.
![Page 32: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/32.jpg)
Seb on Flickr.
![Page 33: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/33.jpg)
A.Davy on Flickr.
![Page 34: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/34.jpg)
Raul Lieberwirth on Flickr.
![Page 35: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/35.jpg)
Tim Norris on Flickr.
![Page 36: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/36.jpg)
Steve Rhodes on Flickr.
![Page 37: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/37.jpg)
SuperFantastic on Flickr.
![Page 38: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/38.jpg)
Jacob Enos on Flickr.
![Page 39: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/39.jpg)
World Bank Photo Collection on Flickr.
![Page 40: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/40.jpg)
Lars Kristian Flem on Flickr.
![Page 41: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/41.jpg)
Tech Support
• Think of your family!• Think of your time spent helping them!• Think of the wasted holidays!
This is why we hate the holidays.
![Page 43: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/43.jpg)
The Message
• Supporting accessibility now helps to serve future you.
There is no try.
![Page 44: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/44.jpg)
The Message
• Supporting accessibility now helps to serve future you.
• Supporting accessibility now helps injured you, encumbered you.
There is no try.
![Page 45: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/45.jpg)
The Message
• Supporting accessibility now helps to serve future you.
• Supporting accessibility now helps injured you, encumbered you.
• Getting younger developers to buy in helps future you – if you teach them well.
There is no try.
![Page 46: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/46.jpg)
Basic Tests
3 of 4 sections.
![Page 47: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/47.jpg)
Click on Field Labels
• When you click label text next to a text box, does the cursor appear in the field?
• When you click label text next to a radio / checkbox, does it get toggled?
• When you click label text next to a select menu, does it get focus?
http://www.karlgroves.com/2013/09/05/the-6-simplest-web-accessibility-tests-anyone-can-do/
![Page 48: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/48.jpg)
![Page 49: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/49.jpg)
Unplug Your Mouse
• Turn off your trackpad, stick, trackball, etc.• Can you interact with all controls (links,
menus, forms) with only the keyboard?• Can you tell which item has focus?• Does the tab order match your expectation?
http://www.karlgroves.com/2013/09/05/the-6-simplest-web-accessibility-tests-anyone-can-do/
![Page 50: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/50.jpg)
![Page 51: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/51.jpg)
Turn off Images
• Can you still make sense of the page?• Is content missing?• Can you still use the site?• Is your alt text useful?
http://www.karlgroves.com/2013/09/05/the-6-simplest-web-accessibility-tests-anyone-can-do/
![Page 52: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/52.jpg)
![Page 53: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/53.jpg)
![Page 54: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/54.jpg)
Turn on High Contrast Mode
• Windows only.• Background images and colors are replaced.• Text colors are replaced.• Does this make your site unusable?
http://www.karlgroves.com/2013/09/05/the-6-simplest-web-accessibility-tests-anyone-can-do/http://blog.adrianroselli.com/2012/08/css-background-images-high-contrast-mode.html
![Page 55: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/55.jpg)
![Page 56: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/56.jpg)
![Page 57: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/57.jpg)
Turn off CSS
• Does important content or functionality disappear?
• Do error messages or other items that rely on visual cues make sense?
• Is content still in a reasonable order?• Do any styles (colors, text effects, etc.)
remain?
http://www.karlgroves.com/2013/09/05/the-6-simplest-web-accessibility-tests-anyone-can-do/
![Page 58: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/58.jpg)
![Page 59: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/59.jpg)
Test for Colorblindness/Contrast
• Is there enough contrast?• Are hyperlinks, menus, etc. still visible?• Tools:• Chrome Color Contrast Analyzer• Lea Verou’s Contrast Ratio• WebAIM Color Contrast Checker• CheckMyColours.com
http://www.inpixelitrust.fr/blog/en/tips-create-accessible-color-palette/http://alistapart.com/blog/post/easy-color-contrast-testing
![Page 60: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/60.jpg)
Protanopia
![Page 61: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/61.jpg)
Deuteranopia
![Page 62: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/62.jpg)
Tritanopia
![Page 63: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/63.jpg)
Look for Captions & Transcripts
• Do video/audio clips have text alternatives?• Are links to closed-captions or transcripts built into
the player or separate text links?• Is there an audio description available?• Tools:• Media Access Australia YouTube captioning tutorial,
Vimeo captioning tutorial,• Tiffany Brown’s WebVTT tutorial,• DIY Resources for Closed Captioning and Transcription
from 3 Play Media.http://webaim.org/techniques/captions/
![Page 64: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/64.jpg)
https://www.youtube.com/watch?v=zCqN_cCLnnk
![Page 65: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/65.jpg)
Hyperlinks!
• Is there any “click here,” “more,” “link to…”?
http://www.sitepoint.com/15-rules-making-accessible-links/
![Page 66: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/66.jpg)
Hyperlinks!
• Is there any “click here,” “more,” “link to…”?• Are you using all-caps, URLs, emoticons?
http://www.sitepoint.com/15-rules-making-accessible-links/
![Page 67: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/67.jpg)
Hyperlinks!
• Is there any “click here,” “more,” “link to…”?• Are you using all-caps, URLs, emoticons?• Do you warn before opening new windows?
http://www.sitepoint.com/15-rules-making-accessible-links/
![Page 68: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/68.jpg)
Hyperlinks!
• Is there any “click here,” “more,” “link to…”?• Are you using all-caps, URLs, emoticons?• Do you warn before opening new windows?• Do links to downloads provide helpful info?
http://www.sitepoint.com/15-rules-making-accessible-links/
![Page 69: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/69.jpg)
Hyperlinks!
• Is there any “click here,” “more,” “link to…”?• Are you using all-caps, URLs, emoticons?• Do you warn before opening new windows?• Do links to downloads provide helpful info?• Are you using pagination links?
http://www.sitepoint.com/15-rules-making-accessible-links/
![Page 70: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/70.jpg)
Hyperlinks!
• Is there any “click here,” “more,” “link to…”?• Are you using all-caps, URLs, emoticons?• Do you warn before opening new windows?• Do links to downloads provide helpful info?• Are you using pagination links?• Are your links underlined (or otherwise obvious)?
http://www.sitepoint.com/15-rules-making-accessible-links/
![Page 71: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/71.jpg)
Hyperlinks!
• Is there any “click here,” “more,” “link to…”?• Are you using all-caps, URLs, emoticons?• Do you warn before opening new windows?• Do links to downloads provide helpful info?• Are you using pagination links?• Are your links underlined (or otherwise obvious)?• Is there alt text for image links?
http://www.sitepoint.com/15-rules-making-accessible-links/
![Page 72: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/72.jpg)
Hyperlinks!
• Is there any “click here,” “more,” “link to…”?• Are you using all-caps, URLs, emoticons?• Do you warn before opening new windows?• Do links to downloads provide helpful info?• Are you using pagination links?• Are your links underlined (or otherwise obvious)?• Is there alt text for image links?• Is the link text consistent?
http://www.sitepoint.com/15-rules-making-accessible-links/
![Page 73: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/73.jpg)
http://blog.adrianroselli.com/2014/03/i-dont-care-what-google-did-just-keep.html
![Page 74: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/74.jpg)
Some Techniques
4 of 4 sections.
![Page 75: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/75.jpg)
Checklist
• Accessibility is not a checklist.
http://accessibility.net.nz/blog/the-problems-with-ramps-blended-into-stairs/
![Page 76: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/76.jpg)
Checklist
• Accessibility is not a checklist.• Accessibility is an ongoing process.
http://accessibility.net.nz/blog/the-problems-with-ramps-blended-into-stairs/
![Page 77: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/77.jpg)
Stairamp
Dean Bouchard on Flickrhttp://accessibility.net.nz/blog/the-problems-with-ramps-blended-into-stairs/
![Page 78: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/78.jpg)
WAI-ARIA
• Web Accessibility Initiative – Accessible Rich Internet Applications.
• Adds accessibility information to HTML elements.
• Can be used with prior versions of HTML.• WAI-ARIA 1.0 published March 20, 2014.
http://www.w3.org/TR/wai-aria/
![Page 79: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/79.jpg)
Four Five Rules of ARIA Use
1. If you can use a native HTML5 element with semantics/behavior already built in, then do so, instead of repurposing another element.
RT this! https://twitter.com/aardrian/status/454249142387081219
![Page 80: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/80.jpg)
Four Five Rules of ARIA Use
2. Do not change native semantics. Unless you really have to (no <h1> with a role="button", for example).
RT this! https://twitter.com/aardrian/status/454249201564532737
![Page 81: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/81.jpg)
Four Five Rules of ARIA Use
3. All interactive ARIA controls must be usable with the keyboard — keyboard users must be able to perform equivalent actions.
RT this! https://twitter.com/aardrian/status/454249253284483072
![Page 82: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/82.jpg)
Four Five Rules of ARIA Use
4. Do not use role="presentation" or aria-hidden="true" on a focusable element. If you do so, some users will never be able to focus.
RT this! https://twitter.com/aardrian/status/454249297408585729
![Page 83: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/83.jpg)
Four Five Rules of ARIA Use
5. All interactive elements must have an accessible name (in progress). This may come from a visible (text on a button) or invisible (alt text on an image) property.
As of May 12: http://rawgit.com/w3c/aria-in-html/master/index.html#fifth-rule-of-aria-use Accessible name: http://www.w3.org/TR/wai-aria/terms#def_accessible_name
![Page 84: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/84.jpg)
Role Playing
Stolen from Heydon Pickering: https://twitter.com/heydonworks/status/420196676297424898/
![Page 85: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/85.jpg)
HTML/ARIA Don’t
• <div onclick="DoThing();">Do a thing.</div>
I see this all the time.
![Page 86: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/86.jpg)
HTML/ARIA Don’t
• <div onclick="DoThing();" tabindex="0">Do a thing.</div>
I see this a bunch, too.
![Page 87: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/87.jpg)
HTML/ARIA Don’t
• <div onclick="DoThing();" tabindex="0" onkeypress="DoThing();">Do a thing.</div>
Excluded bits like if(event.keyCode==32||event.keyCode==13)DoThing();
![Page 88: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/88.jpg)
HTML/ARIA Don’t
• <div onclick="DoThing();" tabindex="0" onkeypress="DoThing();" role="button">Do a thing.</div>
ARIA roles to the rescue! Er…
![Page 89: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/89.jpg)
HTML/ARIA Do
• <button onclick="DoThing();" onkeypress="DoThing();">Do a thing.</button>
Or just start with the right element. http://www.karlgroves.com/2013/05/14/links-are-not-buttons-neither-are-divs-and-spans/
![Page 90: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/90.jpg)
WAI-ARIA
• Accessibility Lipstick on a Usability Pig• By Jared Smith: http
://webaim.org/blog/accessibility-lipstick-on-a-usability-pig/
• What is WAI-ARIA, what does it do for me, and what not?• By Marco Zehe: http
://www.marcozehe.de/2014/03/27/what-is-wai-aria-what-does-it-do-for-me-and-what-not/ ARIA ALL THE THINGS!
![Page 91: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/91.jpg)
HTML5 Elements
• Sectioning elements already have accessibility built in. Use them.• <header>• <nav>• <main> (one per page)• <aside>• <footer>• <form> (a search form)
This stuff is baked in!
![Page 92: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/92.jpg)
HTML5/ARIA Landmarks
• They don’t always have support in assistive technologies (AT), so use roles as well.• <header role="banner"> (once per page)• <nav role="navigation">• <main role="main"> (one per page)• <aside role="complementary">• <footer role="contentinfo"> (once per page)• <form role="search">
http://www.w3.org/WAI/GL/wiki/Using_ARIA_landmarks_to_identify_regions_of_a_page
![Page 93: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/93.jpg)
Generic Desktop Layout
<header role="banner">
<nav role="navigation">
<aside role="complementary">
<form role="search">
<footer role="contentinfo">
<main role="main">
![Page 94: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/94.jpg)
Generic “Mobile”
Layout
<header role="banner">
<nav role="navigation">
<aside role="complementary">
<form role="search">
<footer role="contentinfo">
<main role="main">
“Mobile” really means narrow screen in RWD, as well as this context.
![Page 95: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/95.jpg)
HTML5 Headings
• Use normal heading ranks to convey document structure.
• Don’t skip; go in order.
<h1><h2>
<h3><h4>
<h5><h6>
Fun fact: NCSA Mosaic 1.0 had provisions for an <h7>: http://blog.adrianroselli.com/2013/04/ncsa-moscaic-turns-20.html
![Page 96: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/96.jpg)
HTML5 Headings
• Document Outline Algorithm…• Is a myth,• Isn’t implemented in any browsers,• Should not be relied upon.
• Don’t be fooled by articles claiming otherwise.• Spec being updated.• No SEO benefit for one over other.
http://blog.adrianroselli.com/2013/12/the-truth-about-truth-about-multiple-h1.html
![Page 97: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/97.jpg)
The New <div>itis
• <section>orrhea, <article> abuse.• These map to regions in page navigation order
(role="region").• Can overwhelm users of AT.• If it doesn’t get an <h#>, don’t use it.• If it shouldn’t be in the document outline,
don’t use it.
http://www.w3.org/TR/html5/sections.html#the-section-elementhttp://www.w3.org/TR/html5/sections.html#the-article-element
![Page 98: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/98.jpg)
Focus Styles
http://blog.adrianroselli.com/2014/06/keep-focus-outline.html
![Page 99: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/99.jpg)
Focus Styles
• Necessary for keyboard use,• Use in conjunction with :hover,• Check libraries for :focus styles.
It’s built in, just don’t mess with it.
![Page 100: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/100.jpg)
Focus Styles
https://twitter.com/aardrian/statuses/489837817129099266
![Page 101: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/101.jpg)
Alternative Text
• Which is correct?• <img src="fox.png" alt="Photo of a fox reading
aloud from a book.">
http://blog.adrianroselli.com/2013/11/image-alt-exception-change-re-re-re.html
![Page 102: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/102.jpg)
Alternative Text
• Which is correct?• <img src="fox.png" alt="Photo of a fox reading
aloud from a book.">• <img src="fox.png" title="Photo of a fox reading
aloud from a book.">
http://blog.adrianroselli.com/2013/11/image-alt-exception-change-re-re-re.html
![Page 103: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/103.jpg)
Alternative Text
• Which is correct?• <img src="fox.png" alt="Photo of a fox reading
aloud from a book.">• <img src="fox.png" title="Photo of a fox reading
aloud from a book.">• <img src="fox.png" aria-label="Photo of a fox
reading aloud from a book.">
http://blog.adrianroselli.com/2013/11/image-alt-exception-change-re-re-re.html
![Page 104: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/104.jpg)
Alternative Text
• Which is correct?• <img src="fox.png" alt="Photo of a fox reading
aloud from a book.">• <img src="fox.png" title="Photo of a fox reading
aloud from a book.">• <img src="fox.png" aria-label="Photo of a fox
reading aloud from a book.">• <img src="fox.png" aria-labelledby="FoxPic"> <p
id="FoxPic">Photo of a fox reading aloud from a book.</p>
http://blog.adrianroselli.com/2013/11/image-alt-exception-change-re-re-re.html
![Page 105: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/105.jpg)
Alternative Text
• Use alt.• Longdesc links to more verbose alternative.
http://www.w3.org/blog/2014/03/wcag-techniques-for-image-text-alternatives/
![Page 106: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/106.jpg)
Alternative Text Decision Tree
http://www.4syllables.com.au/2010/12/text-alternatives-decision-tree/http://dev.w3.org/html5/alt-techniques/#tree
1. What role does image
play?
2. Does it present new
info?
3. What type of info?
Informative Yes
alt=""or
<a href="foo"><img alt="">Link</a>alt=""or
Use CSS
alt="descriptive identification"or
alt="short label" + caption
Pure
ly D
ecor
ative Se
nsor
y
No alt="label for link"
alt=“short alternative"or
alt="short label" + caption
alt="short label + location of long alternative"or
long text alternative on same or linked page
Long
/ C
ompl
ex
Shor
t / S
impl
eLink
![Page 107: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/107.jpg)
Questions
This isn’t a section, you should have been asking all along.
![Page 108: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/108.jpg)
Resources
• Web Accessibility and Older People:Meeting the Needs of Ageing Web Usershttp://www.w3.org/WAI/older-users/Overview.php
• Easy Checks - A First Review of Web Accessibilityhttp://www.w3.org/WAI/eval/preliminary
• How People with Disabilities Use the Web: Overviewhttp://www.w3.org/WAI/intro/people-use-web/Overview.htmlIn addition to the gems I’ve sprinkled throughout.
![Page 109: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/109.jpg)
Resources
• 2.11 ARIA Role, State, and Property Quick Referencehttp://www.w3.org/TR/aria-in-html/#aria-role-state-and-property-quick-reference
• 2.12 Definitions of States and Properties (all aria-* attributes)http://www.w3.org/TR/aria-in-html/#definitions-of-states-and-properties-all-aria--attributes
In addition to the gems I’ve sprinkled throughout.
![Page 110: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/110.jpg)
Resources
• a11yTipshttp://dboudreau.tumblr.com/
• How to Write User Stories for Web Accessibilityhttp://www.interactiveaccessibility.com/blog/how-write-user-stories-accessibility-requirements
• Book Excerpt: A Web for Everyonehttp://uxmag.com/articles/book-excerpt-a-web-for-everyone
In addition to the gems I’ve sprinkled throughout.
![Page 111: Selfish Accessibility: a11y Camp Toronto 2014](https://reader033.fdocuments.in/reader033/viewer/2022061204/54706ac2af7959e4388b466a/html5/thumbnails/111.jpg)
Selfish AccessibilityPresented by Adrian Roselli for Accessibility Camp Toronto 2014
My thanks and apologies.
Slides from this talk will be available at rosel.li/a11yTO