Selfish Accessibility: WordCamp Toronto 2014

Selfish Accessibility
Presented by Adrian Roselli for WordCamp Toronto 2014
#WCTO

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 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,
• The number of characters omitted.
• Prominent on Twitter (character restrictions):
• #a11y
• Examples:
• l10n → localization
• i18n → internationalization
Ain’t language funsies?

Accessibility Gets No Respect
“Cyberspace” (gray)
“Lime Rickey” (green)
“Online” (blue)
In fairness, Sherwin Williams needs to come up with a lot of color names...

Accessibility Gets No Respect
…however I think the team could have done better than this.

What We’ll Cover
• Boring Statistics
• How to Be Selfish
• Basic Tests
• Some Techniques
• Accessibility and WordPress
• 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+.

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

How to 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

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.
There is no try.

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.
There is no try.

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

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

Some Techniques
4 of 5 sections.

Checklist
• Accessibility is not a checklist.
http://accessibility.net.nz/blog/the-problems-with-ramps-blended-into-stairs/

Checklist
• Accessibility is not a checklist.
• Accessibility is an ongoing process.
http://accessibility.net.nz/blog/the-problems-with-ramps-blended-into-stairs/

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

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

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 (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

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

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">
<main role="main">
<footer role="contentinfo">

Generic
“Mobile”
Layout
<header role="banner">
<nav role="navigation">
<form role="search">
<main role="main">
<aside role="complementary">
<footer role="contentinfo">
“Mobile” really 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 being 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
• 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
• <img src="fox.png" title="Photo of a fox reading

Alternative Text
• <img src="fox.png" aria-label="Photo of a fox
reading aloud from a book.">

Alternative Text
• <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>

Alternative Text
• Use alt attribute.
• Longdesc links to more verbose alternative.
http://www.w3.org/blog/2014/03/wcag-techniques-for-image-text-alternatives/

Alternative Text Decision Tree
1. What role
does image
play?
2. Does it
present
new info?
http://www.4syllables.com.au/2010/12/text-alternatives-decision-tree/
http://dev.w3.org/html5/alt-techniques/#tree
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
Purely Decorative
Sensory
No
alt="label for link"
alt=“short alternative"
or
alt="short label" + caption
Long / Complex
Short / Simple
alt="short label + location of long alternative"
or
long text alternative on same or linked page

Accessibility and WordPress
5 of 5 sections

WP Accessibility Plug-in
http://wordpress.org/plugins/wp-accessibility/

• Simplest, quickest first step,
• Has many configuration options,
• Requires WordPress 3.4.2,
• Compatible up to WordPress 4.0,
• Install/configuration tutorial:
Make Your WordPress Site More Accessible
By the same guy who put together “Prioritization: Accessibility Tickets for WP 4.0”

• Enable skip links
• Add skip links with user-defined targets
• Add language and text direction attributes to HTML element
• Add outline to keyboard focus state
• Add toolbar toggling between high contrast, large print, desaturated views of your
theme
• Add long description to images
• Remove target attribute from links
• Force search page error when search is made with empty text string
• Remove tabindex from elements that are focusable
• Strip title attributes from images inserted into content
• Remove redundant title attributes from page lists, category lists, archive menus
• Add post titles to standard “read more” links
• Address some accessibility issues in WordPress admin styles
• Show color contrast between two provided hex values
• Enable diagnostic CSS
This is a copy-paste job, you can see the list for yourself at the plug-in page.

Accessible Themes
• Look for “accessibility-ready,”
• Use the tag filter to find them, not the theme
search:
http://wordpress.org/themes/tag-filter/
• Themes must be verified, validated against
WP accessibility guidelines:
https://make.wordpress.org/themes/guidelines/gui
delines-accessibility/
Themes claiming to be accessible may not be, so start here.

Accessible Themes
Just toggle the “accessibility-ready” checkbox, making sure to select “Match ALL of the checkboxes.”

Accessible Themes
15 options so far, including at least a couple that should be familiar.

Cities Project
• Increase number of free, accessible themes,
• Themes in development:
• Los Angeles, Copenhagen, Sydney, Boston,
Toronto, New York, Mumbai, D.C., Canberra,
Montreal, São Paulo, Rio de Janeiro, Nashville,
Ottawa, Twin Cities, Augusta Georgia
• http://accessiblejoe.com/cities/
Remember, they must pass validation by the WordPress Accessibility team.

Accessible Forms
• Gravity Forms
• http://cynng.wordpress.com/2014/02/26/tips-on-making-
your-gravity-forms-as-accessible-as-possible/
• Add HTML5 inputs,
• Avoid presets,
• Add fieldset/label,
• Disable tabindex,
• Still needs ARIA.
Remember to test the form.

Accessible Forms
• Contact Form 7
• http://blog.rrwd.nl/2014/03/01/how-to-set-up-an-
accessible-form-using-contact-form-7-in-wordpress/
• Change the default form,
• Add shortcode for error messages,
• Add labels,
• Edit wp_config.php to disable CSS, JS, <p> with
each new line.
Remember to test the form.

Remove Problematic Formatting
Options From tinyMCE Plug-in
https://wordpress.org/plugins/remove-problematic-formatting-options-from-tinymce/

Remove Problematic Formatting
Options From tinyMCE Plug-in
• Removes some buttons from tinyMCE:
• Font color,
• Underline,
• Alignment.
• Removes <h1> from role menu.
• Helps keep authors from overriding site styles,
• Added benefit of limiting risk to accessibility.
Sometimes you stumble across a plug-in that may be useful in more than one way.

Resources
• WordPress Themes Suck at Accessibility: It’s Time
to Fix It (June 18, 2014)
http://wptavern.com/wordpress-themes-suck-at-accessibility-
its-time-to-fix-it
• WordPress admin accessibility report (March 30,
2014)
http://discuss.wpuk.org/2014/03/30/wordpress-admin-accessibility-
report/
• Tickets with a focus on accessibility
https://core.trac.wordpress.org/focus/accessibility
These are mostly additional reading, context, and where to start.

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
• Detecting Screen Readers – No
http://www.webaxe.org/detecting-screen-readers-no/

Resources
• a11yTips
http://dboudreau.tumblr.com/
• 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

Selfish Accessibility
Presented by Adrian Roselli for WordCamp Toronto 2014
Slides from this talk will be available at rosel.li/WCTO
My thanks and apologies.

Selfish Accessibility: WordCamp Toronto 2014

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (11)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Selfish Accessibility: WordCamp Toronto 2014

Ähnlich wie Selfish Accessibility: WordCamp Toronto 2014 (20)

Mehr von Adrian Roselli

Mehr von Adrian Roselli (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Selfish Accessibility: WordCamp Toronto 2014