Embed Size (px)
Citation preview
Selfish AccessibilityPresented by Adrian Roselli for Avega Group
About Adrian Roselli
• Co-written four books.
• Technical editorfor two books.
• Written over fifty articles, most recentlyfor .net Magazine andWeb Standards Sherpa.
Great bedtime reading!
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.
What is a11y?
• A numeronym for “accessibility”:
• The first and last letter (accessibility),
• The number of characters omitted (a11y).
• Prominent on Twitter (character restrictions):
• #a11y
• Examples:
• l10n → localization
• i18n → internationalization
Ain’t language funsies?
Accessibility Gets No Respect
In fairness, Sherwin Williams needs to come up with a lot of color names...
“Cyberspace” (gray)
“Online” (blue)
“Lime Rickey” (green)
Accessibility Gets No Respect
…however I think the team could have done better than this.
What We’ll Cover
• Boring Statistics
• Be Selfish
• Some Techniques
• Basic Tests
• Technical Bits
• Questions (ongoing!)
Work with me, people.
Boring Statistics
1 of 5 sections.
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
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
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
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
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
Be Selfish
2 of 5 sections.
WebAIM’s Hierarchy for Motivating Accessibility Change
http://webaim.org/blog/motivating-accessibility-change/
My Hierarchy for Motivating Accessibility Change
Is better, no?
Getting Older
• Affects (nearly) everyone,
• Carries risks and side effects,
• Is not for the young.
I’m still experimenting with it.
Accidents
• Broken limbs,
• Eye injuries,
• Hearing injuries,
• Head trauma.
All of these have happened to me, multiple times.
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.
https://twitter.com/aardrian/statuses/388733408576159744
SuperFantastic on Flickr.
World Bank Photo Collection on Flickr.
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.
The Message
• Supporting accessibility now helps to serve future you.
Do or do not.
The Message
• Supporting accessibility now helps to serve future you.
• Supporting accessibility now helps injured you, encumbered you.
There is no try.
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.
Always pass on what you have learned.
Some Techniques
3 of 5 sections.
User Stories
• Components:
• User,
• Outcome,
• Value.
• Writing:
• As user, I want outcome.
• As user, I want outcome so that value.
• In order to get value as user, I want outcome.
How to Write User Stories for Web Accessibility
Selfish User Stories
• As a user on a sun-lit patio, I want to be able to read the content and see the controls.
Add beer and as a user I may have trouble focusing.
Selfish User Stories
• As a user in bed with a sleeping spouse, I want to watch a training video in silence so that I can get caught up at work.
As a user who doesn’t want to get punched for having slacked off at work.
Selfish User Stories
• In order to click links as a user with no elbow room in coach class with a tiny trackpad, I want click areas to be large enough and adequately spaced.
As a user in coach class who also paid too much for the drink he’s spilling on his keyboard.
Selfish User Stories
• As a user distracted by the TV, I want clear headings and labels so that I don’t lose my place.
As a user who really should be finishing his work in the office.
User Stories
• Physical Impairment
• As a keyboard-only user, I want to be able to use the entire application.
This includes seeing what has focus and not getting lost in off-screen elements.
User Stories
• Physical Impairment
• As a keyboard-only user, I want to be able to use the entire application.
• As a keyboard-only user, I want to navigate a product list with the tab key so that I can find the right option.
Arrow keys are acceptable as well, making sure that it is clear to the user.
User Stories
• Physical Impairment
• As a keyboard-only user, I want to be able to use the entire application.
• As a keyboard-only user, I want to navigate a product list with the tab key so that I can find the right option.
• In order to click links as a limited-mobility user, I want click areas to be large enough and adequately spaced.
Else I may click the wrong item and have to hit the back button, which can be time consuming.
User Stories
• Visual Impairment
• As a color blind user, I want to be able to see links in page content.
Underlines are important, but users also like to know what they clicked already.
User Stories
• Visual Impairment
• As a color blind user, I want to be able to see links in page content.
• As a low-vision user, I want to zoom the page so that I can read the content.
Without the text overlapping itself or every other item on the page.
User Stories
• Visual Impairment
• As a color blind user, I want to be able to see links in page content.
• As a low-vision user, I want to zoom the page so that I can read the content.
• In order to use the site as a blind user, I want to use a screen reader to navigate.
Good headings, clear structure, landmark roles to jump around the page.
User Stories
• Hearing Impairment
• As a low-hearing user, I want to be able to access transcripts.
From a clear link, not through some acrobatics to find them.
User Stories
• Hearing Impairment
• As a low-hearing user, I want to be able to access transcripts.
• As a low-hearing user, I want access to closed captions so that I can use training videos.
Timed to match the video is important.
User Stories
• Hearing Impairment
• As a low-hearing user, I want to be able to access transcripts.
• As a low-hearing user, I want access to closed captions so that I can use training videos.
• In order to participate in a webinar as a deaf user, I want real-time captioning or transcripts.
This can be tricky, since you’ll need to have a resource typing in real-time.
User Stories
• Cognitive Impairment
• As a user with a vestibular disorder, I want to be able to disable parallax scrolling.
But you don’t just use it for no reason, right?
User Stories
• Cognitive Impairment
• As a user with a vestibular disorder, I want to be able to disable parallax scrolling.
• As a user with dyscalculia, I want distinct number fields for each block of digits in a credit card number so that I can purchase a product.
You can auto-detect card type. Do the same for expiration date.
User Stories
• Cognitive Impairment
• As a user with a vestibular disorder, I want to be able to disable parallax scrolling.
• As a user with dyscalculia, I want distinct number fields for each block of digits in a credit card number so that I can purchase a product.
• In order to not get confused on pages with long text passages as a user with dyslexia, I want control over text size, spacing, and/or alignment.
At the very least, turn of justified text.
Personas
Adrian
• Works when he should be relaxing, relaxes when he should be working.
• Lives between motorcycles.
• Works late at night with the TV on.
• Uses sub-titles in Netflix.
• Keeps all screens as dark as possible.
That photo is from official ID.
Personas
Book Excerpt: A Web for Everyone, by Sarah Horton, Whitney Quesenbery
Manifesto for Accessible UX
• Coming Soon! (The Paciello Group)
• Looking to these examples:
• Lean UX Manifesto
• Manifesto for Agile Software Development
• UK Gov. Data Services Design Principles
Watch this space: http://www.paciellogroup.com/blog/2014/08/developing-a-manifesto-for-accessible-ux/
Accessible Design Maturity Continuum
• Coming Soon! (The Paciello Group)
• Variation on Jess McMullin’s Rough Design Maturity Continuum:
1. No Conscious Design,
2. Style,
3. Function and Form,
4. Problem Solving,
5. Framing.
Watch this space: http://www.paciellogroup.com/blog/2014/06/accessibility-maturity-continuum/
Basic Tests
4 of 5 sections.
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/
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/
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/
Turn on High Contrast Mode
• Windows only.
• Left ALT + left SHIFT + PRINT SCREEN
• 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
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/
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
Protanopia
Deuteranopia
Tritanopia
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/
Hyperlinks!
• Is there any “click here,” “more,” “link to…”?
http://www.sitepoint.com/15-rules-making-accessible-links/
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/
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/
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/
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/
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/
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/
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/
http://blog.adrianroselli.com/2014/03/i-dont-care-what-google-did-just-keep.html
Technical Bits
5 of 5 sections.
Checklist
• Accessibility is not a checklist.
http://accessibility.net.nz/blog/the-problems-with-ramps-blended-into-stairs/
Stairamp
Dean Bouchard on Flickrhttp://accessibility.net.nz/blog/the-problems-with-ramps-blended-into-stairs/
Checklist
• Accessibility is not a checklist.
• Accessibility is an ongoing process.
https://twitter.com/vavroom/status/571092086365261824
Maintenance
Nicolas Steenhouthttps://twitter.com/vavroom/status/571092086365261824
“Wheelchair ramp at pharmacy not only hasn’t been cleared of snow but has 2 potted trees to ensure nobody can pass.”
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/
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
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
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
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
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-useAccessible name: http://www.w3.org/TR/wai-aria/terms#def_accessible_name
HTML/ARIA Don’t
• <div onclick="DoThing();">Do a thing.</div>
I see this all the time.
HTML/ARIA Don’t
• <div onclick="DoThing();" tabindex="0">Do a thing.</div>
I see this a bunch, too.
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();
HTML/ARIA Don’t
• <div onclick="DoThing();" tabindex="0" onkeypress="DoThing();" role="button">Do a thing.</div>
ARIA roles to the rescue! Er…
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/
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!
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!
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
Generic Desktop Layout
<header role="banner">
<nav role="navigation">
<aside role="complementary">
<form role="search">
<footer role="contentinfo">
<main role="main">
Generic “Mobile”
Layout
<header role="banner">
<nav role="navigation">
<aside role="complementary">
<form role="search">
<footer role="contentinfo">
<main role="main">
“Mobile” often means narrow screen in RWD, as well as this context.
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
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 has been updated.
• No SEO benefit for one over other.
http://blog.adrianroselli.com/2013/12/the-truth-about-truth-about-multiple-h1.html
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
Focus Styles
http://blog.adrianroselli.com/2014/06/keep-focus-outline.html
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.
Focus Styles
https://twitter.com/aardrian/statuses/489837817129099266
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
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
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
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
Alternative Text
• Use alt.
• Longdesc links to more verbose alternative.
http://www.w3.org/blog/2014/03/wcag-techniques-for-image-text-alternatives/
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=""
orUse CSS
alt="descriptive identification"or
alt="short label" + caption
Pu
rely
Dec
ora
tive Se
nso
ry
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
Lon
g /
Co
mp
lex
Sho
rt /
Sim
ple
Questions
This isn’t a section, you should have been asking all along.
Resources
• Web Accessibility and Older People:Meeting the Needs of Ageing Web Users
http://www.w3.org/WAI/older-users/Overview.php
• Easy Checks - A First Review of Web Accessibility
http://www.w3.org/WAI/eval/preliminary
• How People with Disabilities Use the Web: Overview
http://www.w3.org/WAI/intro/people-use-web/Overview.html
In addition to the gems I’ve sprinkled throughout.
Resources
• 2.11 ARIA Role, State, and Property Quick Reference
http://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.
Resources
• a11yTipshttp://dboudreau.tumblr.com/
• Designing For The Elderly: Ways Older People Use Digital Technology Differentlyhttp://www.smashingmagazine.com/2015/02/05/designing-digital-technology-for-the-elderly/
• 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.
Selfish AccessibilityPresented by Adrian Roselli for Avega Group
My thanks and apologies.
Slides from this talk will be available at rosel.li/AvegaGroup
