Selfish Accessibility: Presented at Google

Selfish Accessibility
Presented by Adrian Roselli for Google
Slides from this talk will be available at rosel.li/Googa11y

About Adrian Roselli
• Co-written four books.
• Technical editor
for two books.
• Written over fifty
articles, most recently
for .net Magazine and
Web 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
(aHealthTech.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
• Yay Statistics!
• Be Selfish
• Some Techniques
• Basic Tests
• Technical Bits
• Resources
Work with me, people.

Yay 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+.

Hearing Impairments
• 360 million people worldwide have disabling
hearing loss.
• 17% (36 million) of American adults report
some degree of hearing loss:
• 47% aged 75+ years old.
https://www.nidcd.nih.gov/health/statistics/Pages/quick.aspx

Mobility Impairments
• 5.5% aged 21-64 years old.
• 32.9% aged 75+.

Cognitive Impairments
• Dyslexia,
• Dyscalculia,
• Memory issues,
• Distractions (ADD, ADHD),
• 14.4% aged 75+.
http://www.disabilitystatistics.org/reports/2012/English/HTML/report2012.cfm?fips=2000000&html_year=2012&subButton=Get+HTML

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.

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
future you.
• Supporting accessibility now helps injured
you, encumbered you.
There is no try.

The Message
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.

Checklist
• Accessibility is not a checklist.

Stairamp
Dean Bouchard on Flickrhttp://incl.ca/the-problems-with-ramps-blended-into-stairs/

Checklist
• Accessibility is not a checklist.
• Accessibility is an ongoing process.

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.”

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.

• 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.

• 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.

• 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
• 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
• 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
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
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
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
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
• 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
• 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
Book Excerpt: A Web for Everyone, by Sarah Horton, Whitney Quesenbery

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.

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?

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?

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://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?

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

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/

https://www.youtube.com/watch?v=zCqN_cCLnnk

Hyperlinks!
• Is there any “click here,” “more,” “link to…”?
http://www.sitepoint.com/15-rules-making-accessible-links/

Hyperlinks!
• Are you using all-caps, URLs, emoticons?

Hyperlinks!
• Do you warn before opening new windows?

Hyperlinks!
• Do links to downloads provide helpful info?

Hyperlinks!
• Are you using pagination links?

Hyperlinks!
• Are your links underlined (or otherwise obvious)?

Hyperlinks!
• Is there alt text for image links?

Hyperlinks!
• Is there alt text for image links?
• Is the link text consistent?

Technical Bits
5 of 5 sections.

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/

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

2. Do not change native semantics. Unless you
really have to (no <h1> with a role="button",
for example).

3. All interactive ARIA controls must be usable
with the keyboard — keyboard users must be
able to perform equivalent actions.

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.

5. All interactive elements must have
an accessible name. This may come from a
visible (text on a button) or invisible (alt text
on an image) property.
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

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 type="submit">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 map to these ARIA landmark roles:
• <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-element
http://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
• Use alt.
• Longdesc links to more verbose alternative.
http://www.w3.org/blog/2014/03/wcag-techniques-for-image-text-alternatives/
http://www.4syllables.com.au/2010/12/text-alternatives-decision-tree/
http://dev.w3.org/html5/alt-techniques/#tree

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
PurelyDecorative
Sensory
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/Complex
Short/Simple

Resources
Unless you had questions, which you didn’t else you would have asked by now.

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

Resources
• a11yTips
http://dboudreau.tumblr.com/
• Designing For The Elderly: Ways Older People Use
Digital Technology Differently
http://www.smashingmagazine.com/2015/02/05/designing-
digital-technology-for-the-elderly/
• How to Write User Stories for Web Accessibility
http://www.interactiveaccessibility.com/blog/how-write-
user-stories-accessibility-requirements
• Book Excerpt: A Web for Everyone
http://uxmag.com/articles/book-excerpt-a-web-for-everyone

Presented by Adrian Roselli for Google
My thanks and apologies.
Slides from this talk will be available at rosel.li/Googa11y
Selfish Accessibility

Selfish Accessibility: Presented at Google

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (17)

Ähnlich wie Selfish Accessibility: Presented at Google

Ähnlich wie Selfish Accessibility: Presented at Google (20)

Mehr von Adrian Roselli

Mehr von Adrian Roselli (16)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Selfish Accessibility: Presented at Google