selfish accessibility: html5 developer conference 2014
DESCRIPTION
We can all pretend that we're helping others by making web sites accessible, but we are really making the web better for our future selves. Learn some fundamentals of web accessibility and how it can benefit you (whether future you from aging or you after something else limits your abilities). We'll review simple testing techniques, basic features and enhancements, coming trends, and where to get help. This isn't intended to be a deep dive into ARIA, but more of an overall primer for those who aren't sure where to start nor how it helps them.TRANSCRIPT
![Page 1: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/1.jpg)
Selfish AccessibilityPresented by Adrian Roselli for HTML5 Developer Conference 2014
I suspect there’s a hashtag.
![Page 2: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/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: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/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: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/4.jpg)
What We’ll Cover
• Boring Statistics• How to Be Selfish• Basic Tests• Some Techniques• Questions (ongoing!)
Work with me, people.
![Page 5: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/5.jpg)
Boring Statistics
1 of 4 sections.
![Page 6: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/6.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&subButton=Get+HTML
![Page 7: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/7.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&subButton=Get+HTML
![Page 8: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/8.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 9: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/9.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&subButton=Get+HTML
![Page 10: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/10.jpg)
Cognitive Impairments
• Dyslexia• Dyscalculia• Memory issues• Distractions• 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 11: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/11.jpg)
How to Be Selfish
2 of 4 sections.
![Page 12: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/12.jpg)
WebAIM’s Hierarchy for Motivating Accessibility Change
http://webaim.org/blog/motivating-accessibility-change/
![Page 13: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/13.jpg)
My Hierarchy for Motivating Accessibility Change
Is better, no?
![Page 14: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/14.jpg)
Getting Older
• Affects (nearly) everyone,• Carries risks and side effects,• Is not for the young.
I’m still experimenting with it.
![Page 17: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/17.jpg)
Accidents
• Broken limbs,• Eye injuries,• Hearing injuries,• Head trauma.
All of these have happened to me, multiple times.
![Page 22: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/22.jpg)
Paul Townsend on Flickr.
![Page 23: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/23.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 25: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/25.jpg)
Bitznbitez on Flickr.
![Page 26: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/26.jpg)
Mariëlle on Flickr.
![Page 27: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/27.jpg)
barockschloss on Flickr.
![Page 28: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/28.jpg)
Seb on Flickr.
![Page 29: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/29.jpg)
A.Davy on Flickr.
![Page 30: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/30.jpg)
Raul Lieberwirth on Flickr.
![Page 31: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/31.jpg)
Tim Norris on Flickr.
![Page 32: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/32.jpg)
Lars Kristian Flem on Flickr.
![Page 33: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/33.jpg)
Steve Rhodes on Flickr.
![Page 34: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/34.jpg)
SuperFantastic on Flickr.
![Page 35: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/35.jpg)
Jacob Enos on Flickr.
![Page 36: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/36.jpg)
https://twitter.com/aardrian/statuses/388733408576159744
![Page 37: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/37.jpg)
Tech Support
• Think of your family!• Think of your time spent helping them!
This is why we hate the holidays.
![Page 39: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/39.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 40: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/40.jpg)
Basic Tests
3 of 4 sections.
![Page 41: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/41.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 42: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/42.jpg)
![Page 43: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/43.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 44: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/44.jpg)
![Page 45: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/45.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 46: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/46.jpg)
![Page 47: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/47.jpg)
![Page 48: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/48.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 49: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/49.jpg)
![Page 50: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/50.jpg)
![Page 51: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/51.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 52: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/52.jpg)
![Page 53: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/53.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 54: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/54.jpg)
Protanopia
![Page 55: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/55.jpg)
Deuteranopia
![Page 56: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/56.jpg)
Tritanopia
![Page 57: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/57.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
http://webaim.org/techniques/captions/
![Page 58: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/58.jpg)
https://www.youtube.com/watch?v=zCqN_cCLnnk
![Page 59: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/59.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 60: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/60.jpg)
http://blog.adrianroselli.com/2014/03/i-dont-care-what-google-did-just-keep.html
![Page 61: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/61.jpg)
Some Techniques
4 of 4 sections.
![Page 62: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/62.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 63: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/63.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 64: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/64.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 65: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/65.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 66: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/66.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 67: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/67.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 68: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/68.jpg)
Role Playing
Stolen from Heydon Pickering: https://twitter.com/heydonworks/status/420196676297424898/
![Page 69: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/69.jpg)
HTML/ARIA Don’t
• <div onclick="DoThing();">Do a thing.</div>
I see this all the time.
![Page 70: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/70.jpg)
HTML/ARIA Don’t
• <div onclick="DoThing();" tabindex="0">Do a thing.</div>
I see this a bunch, too.
![Page 71: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/71.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 72: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/72.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 73: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/73.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 74: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/74.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 75: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/75.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 76: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/76.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 77: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/77.jpg)
Generic Desktop Layout
<header role="banner">
<nav role="navigation">
<aside role="complementary">
<form role="search">
<footer role="contentinfo">
<main role="main">
![Page 78: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/78.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 79: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/79.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 80: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/80.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 81: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/81.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 82: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/82.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 83: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/83.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 84: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/84.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 85: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/85.jpg)
Questions
This isn’t a section, you should have been asking all along.
![Page 86: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/86.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.html
In addition to the gems I’ve sprinkled throughout.
![Page 87: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/87.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 88: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/88.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 89: Selfish Accessibility: HTML5 Developer Conference 2014](https://reader035.vdocument.in/reader035/viewer/2022062219/554bcb29b4c9058f6c8b467b/html5/thumbnails/89.jpg)
Selfish AccessibilityPresented by Adrian Roselli for HTML5 Developer Conference 2014
My thanks and apologies.
Slides from this talk will be available at http://rosel.li/HTML5DevConf2014