We can pretend that we’re helping others by making websites and software accessible, but we are really making them better for our future selves. Learn some fundamentals of accessibility and how it can benefit you (whether future you from ageing 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 is an overall primer for those who aren’t sure where to start nor how it helps them.
3. • I’ve written some stuff,
• Member of W3C,
• Building for the web
since 1993,
• Learn more at
AdrianRoselli.com,
• Avoid on Twitter
@aardrian.
About Adrian Roselli
5. 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
6. Disability is not just a health
problem. It is a complex
phenomenon, reflecting the
interaction between features of a
person’s body and features of the
society in which he or she lives.
— World Health Organization
9. 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
10. 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+.
11. 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.
12. Mobility Impairments
• In the United States:
• 5.5% aged 21-64 years old.
• 15.6% aged 65-74 years old.
• 32.9% aged 75+.
13. 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+.
25. 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.
39. Selfish Persona
• Reflect the client / stakeholder:
• Travels on a train,
• Keeps office very bright,
• Inept with smart phone,
• Asks you to speak up,
• Keeps losing mouse,
• Etc.
40. 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
41. 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.
42. 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.
43. 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.
44. 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.
46. Text Alternatives for Images
• Can you still make sense of the page?
• Is content missing?
• Can you still use the site?
• Is your alt text useful?
• Do you account for CSS background images?
• What about SVGs?
• Or CSS-generated symbols / icons?
http://www.4syllables.com.au/2010/12/text-alternatives-decision-tree/
http://dev.w3.org/html5/alt-techniques/#tree
49. 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://adrianroselli.com/2014/03/i-dont-care-what-google-did-just-keep.html
50. Hyperlinks!
• You are not Google:
• Users know Google’s layout,
• Users probably don’t visit your site daily.
• Relying on color alone will not suffice (WCAG 1.4.1
[A], 1.4.3 [AA]),
• Necessary contrast values:
• 4.5:1 between text and its background for copy,
• 3:1 between text and its background for larger text,
• 3:1 between surrounding text and a hyperlink, plus an
additional visual cue (G183).
http://adrianroselli.com/2014/03/i-dont-care-what-google-did-just-keep.html
52. Color Contrast
• Is there enough contrast?
• Are hyperlinks, menus, etc. still visible?
• WCAG 2.0:
• 4.5:1 for normal text
• 3:1 for large text (14+pt & bold, or 18+pt)
• WCAG 2.1:
• 3:1 for UI components, graphical objects
53. Color Contrast
• WCAG 2.1 has broadened it,
• Typography,
• Icons and glyphs,
• Form elements, error messages,
placeholders,
• Hover, focus, selected states.
54. Label Your Fields
• Provide instructions for the entire form,
• Provide a programmatic indication of required fields,
• Provide formatting advice,
• Use ARIA to associate formatting advice,
• Avoid placeholder text,
• Associate error messages with fields.
55. Label Your Fields
• Match the for attribute to the corresponding field’s id
attribute.
• Label text provides a larger hit area for mouse / touch,
• Label text should appear above or the left of text inputs or
menus (for LTR languages),
• Label text should appear after checkboxes / radio buttons (for
LTR languages).
• Label grouped fields (<fieldset> / <legend>)
57. Structure Your Document
• 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!
61. <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.
Structure Your
Document
62. Structure Your Document
• Use only one <h1> per page,
• Don’t skip heading levels,
• Use appropriate nesting,
• There is no Document Outline Algorithm:
• Don’t use <h1> within every new <section> nor <article>,
• This will not affect your SEO.
http://adrianroselli.com/2013/12/the-truth-about-truth-about-multiple-h1.html
64. Be Keyboard Friendly
• Do you have scrolling content boxes?
• Keyboard users cannot access it.
• Do you have content that displays on hover?
• Keyboard users probably cannot access it.
• A technique:
• <div role="region" aria-label="[if appropriate]"
tabindex="0">
http://adrianroselli.com/2016/02/keyboard-and-overflow.html
66. Be Keyboard Friendly
• Do not use a <div> nor <span> as a control.
• Does the control take me to another URL?
• Use an <a href>.
• Note: does not fire on space-bar.
• Does the control change something on the current page?
• Use a <button type="button">.
• Does the control submit form fields?
• Use <input type="submit"> or <button type="submit">.
http://adrianroselli.com/2016/01/links-buttons-submits-and-divs-oh-hell.html
68. Be Keyboard Friendly
• Define :focus styles,
• Particularly if you removed link underlines,
• Everywhere you have :hover, add :focus,
• Look for :focus{outline:none;} in libraries:
• If you find it, remove it.
• Do not rely on browser defaults,
• Easy to test with the tab key.
http://adrianroselli.com/2014/06/keep-focus-outline.html
73. The Message
• Supporting accessibility now helps to serve future
you.
• Supporting accessibility now helps injured you,
encumbered you.
There is no try.
74. 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.
75. Stairamp
Dean Bouchard on Flickrhttp://accessibility.net.nz/blog/the-problems-with-ramps-blended-into-stairs/
80. 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
81. 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
82. Resources
• 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
1980 definition:
“In the context of health experience, a disability is any restriction or lack of ability (resulting from an impairment) to perform an activity in the manner or within the range considered normal for a human being.”
As evidenced by how few young people are old
As evidenced by how few young people are old
If you need a wheelchair from a broken leg, you may not know which one to get.
Cooper's Hill Cheese-Rolling and Wake
You probably have some comfort level with technology
Our inclusive design principles
Recognize exclusion
Exclusion happens when we solve problems using our own biases. As Microsoft designers, we seek out those exclusions, and use them as opportunities to create new ideas and inclusive designs.
Learn from diversity
Human beings are the real experts in adapting to diversity. Inclusive design puts people in the center from the very start of the process, and those fresh, diverse perspectives are the key to true insight.
Solve for one, extend to many
Everyone has abilities, and limits to those abilities. Designing for people with permanent disabilities actually results in designs that benefit people universally. Constraints are a beautiful thing.
Aeron Chair: The symbol of the 1990s dot-com riches was designed for the elderly.
Mesh instead of foam because bed sores
Dissipated heat
Two-part reclining to support different positions
Create a persona that resonates with the stakeholder; where they see themselves.
(Museum of Illusion)
HALFWAY THROUGH
Fly through this section.
The missing images either do not matter to understand the page or have alt text.
At a glance, users should know what can be clicked. What here? Image? Title? Abstract? Ellipsis? All of them?
A good style guide can tell you what not to pair.
Using the right heading structure helps screen reader users in particular
Your heading structure should look like a nested table of contents.
LAST TECHNICAL BIT, wrap-up is after this
Power users, blind, mobility impaired
Content areas that are hidden need to allow keyboard-only users to get to the text.
One is a link, one is a button, one an input type submit. They can each look how you want but have different keyboard interactions. Space bar, Enter key, mousedown, mouseup, keypress.
Focus styles!
Screen shot of a link with the blue Chrome focus ring on the blue background of the Chrome help page.
LAST TECH SLIDE
An award-winning site, now thankfully gone because it was impossible to use with a keyboard.