selfish accessibility: a11y camp toronto 2014

111
Selfish Accessibility Presented by Adrian Roselli for Accessibility Camp Toronto 2014 #a11yTO

Upload: adrian-roselli

Post on 22-Nov-2014

463 views

Category:

Internet


1 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Selfish Accessibility: a11y Camp Toronto 2014

Selfish AccessibilityPresented by Adrian Roselli for Accessibility Camp Toronto 2014

#a11yTO

Page 2: Selfish Accessibility: a11y Camp Toronto 2014

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

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

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

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

Accessibility Gets No Respect

…however I think the team could have done better than this.

Page 7: Selfish Accessibility: a11y Camp Toronto 2014

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

Boring Statistics

1 of 4 sections.

Page 9: Selfish Accessibility: a11y Camp Toronto 2014

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

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

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

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

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

How to Be Selfish

2 of 4 sections.

Page 15: Selfish Accessibility: a11y Camp Toronto 2014

WebAIM’s Hierarchy for Motivating Accessibility Change

http://webaim.org/blog/motivating-accessibility-change/

Page 16: Selfish Accessibility: a11y Camp Toronto 2014

My Hierarchy for Motivating Accessibility Change

Is better, no?

Page 17: Selfish Accessibility: a11y Camp Toronto 2014

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

Accidents

• Broken limbs,• Eye injuries,• Hearing injuries,• Head trauma.

All of these have happened to me, multiple times.

Page 26: Selfish Accessibility: a11y Camp Toronto 2014

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://twitter.com/aardrian/statuses/388733408576159744

Page 41: Selfish Accessibility: a11y Camp Toronto 2014

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

The Message

• Supporting accessibility now helps to serve future you.

There is no try.

Page 44: Selfish Accessibility: a11y Camp Toronto 2014

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

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

Basic Tests

3 of 4 sections.

Page 47: Selfish Accessibility: a11y Camp Toronto 2014

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
Page 49: Selfish Accessibility: a11y Camp Toronto 2014

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
Page 51: Selfish Accessibility: a11y Camp Toronto 2014

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
Page 53: Selfish Accessibility: a11y Camp Toronto 2014
Page 54: Selfish Accessibility: a11y Camp Toronto 2014

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
Page 56: Selfish Accessibility: a11y Camp Toronto 2014
Page 57: Selfish Accessibility: a11y Camp Toronto 2014

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
Page 59: Selfish Accessibility: a11y Camp Toronto 2014

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

Protanopia

Page 61: Selfish Accessibility: a11y Camp Toronto 2014

Deuteranopia

Page 62: Selfish Accessibility: a11y Camp Toronto 2014

Tritanopia

Page 63: Selfish Accessibility: a11y Camp Toronto 2014

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 65: Selfish Accessibility: a11y Camp Toronto 2014

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

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

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

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

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

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

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

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

http://blog.adrianroselli.com/2014/03/i-dont-care-what-google-did-just-keep.html

Page 74: Selfish Accessibility: a11y Camp Toronto 2014

Some Techniques

4 of 4 sections.

Page 75: Selfish Accessibility: a11y Camp Toronto 2014

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

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

Stairamp

Dean Bouchard on Flickrhttp://accessibility.net.nz/blog/the-problems-with-ramps-blended-into-stairs/

Page 78: Selfish Accessibility: a11y Camp Toronto 2014

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

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

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

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

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

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

Role Playing

Stolen from Heydon Pickering: https://twitter.com/heydonworks/status/420196676297424898/

Page 85: Selfish Accessibility: a11y Camp Toronto 2014

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

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

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

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

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 91: Selfish Accessibility: a11y Camp Toronto 2014

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

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

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

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

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

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

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

Focus Styles

http://blog.adrianroselli.com/2014/06/keep-focus-outline.html

Page 99: Selfish Accessibility: a11y Camp Toronto 2014

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

Focus Styles

https://twitter.com/aardrian/statuses/489837817129099266

Page 101: Selfish Accessibility: a11y Camp Toronto 2014

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

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

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

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

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

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

Questions

This isn’t a section, you should have been asking all along.

Page 108: Selfish Accessibility: a11y Camp Toronto 2014

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

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

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

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