Prototyping Accessibility - WordCamp Europe 2018

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Prototyping Accessibility
Presented by Adrian Roselli for WordCamp Europe 2018
Slides from this workshop will be available...

PLEASE BREAK INTO GROUPS OF FIVE (5)
Stragglers may be assigned a group.

Introductions

• I’ve written some stuff,
• Member of W3C,
• Building for the web
since 1993,
• Learn more at
AdrianRoselli.com,
• Avoid ...

• This trip paid for by The Paciello Group.
About Adrian Roselli

Group Exercise!

Group Exercise!
• Decide on a user interface element. Examples:
• Login form,
• Disclosure widget,
• Data grid,
• Search,
...

Primer

What is a11y?
• A numeronym for “accessibility”:
• The first and last letter (accessibility),
• The number of characters o...

Disability is not just a health problem. It is
a complex phenomenon, reflecting the
interaction between features of a pers...

Agenda
• Exercise: UI Component
• Primer
• Disability Types
• Who Else?
• Exercise: Overlapping Needs
• User Experience Mo...

Disability Types

Disability Types
• Physical
• Epilepsy
• Mobility
• Fine motor skills
• Hearing
• Deaf
• Hard of Hearing
• Vision
• Color ...

Disability Types
• Blindness
• Low Vision (including color blindness)
• Deaf and Hard of Hearing
• Speech
• Physical
• Int...

Blindness
• Screen reader user
• Keyboard-only user
• Relies on:
• Headings
• Form Elements
• Links
• Landmarks

Low Vision
• May use high contrast modes
• May not be able to differentiate colors
• May scale fonts
• May use a screen ma...

Deaf and Hard of Hearing
• Cannot hear audio cues
• Will struggle if captions are not synchronized
• First language may be...

Speech
• May speak less clearly
• May be non-verbal
• Can be stymied by voice interfaces
• Phone interaction may not be po...

Physical
• Temporary to permanent
• Slight to severe
• Can change throughout a day
• May use specialized hardware
• May us...

Intellectual & Cognitive
• May use a screen reader
• May use dictation software
• May benefit from any/all considerations ...

Who Else?

Everyone Else!

Getting Older
• Affects (nearly) everyone,
• Carries risks and side effects,
• Is not for the young.

Rising Damp on Flickr.

Darren Baldwin on Flickr.

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

Rev Stan on Flickr.

Let Ideas Compete on Flickr.

Paul Townsend on Flickr.

But I’m Invincible!
• Multi-tasking,
• Sunlight,
• Eating at your desk,
• No headphones handy,
• Content is not in your na...

Mariëlle on Flickr.

Seb on Flickr.

Steve Rhodes on Flickr.

SuperFantastic on Flickr.

Lars Kristian Flem on Flickr.

Tech Support
• Think of your family!
• Think of your time spent helping them!
• Think of the wasted holidays!

Robert Simmons on Flickr.

Group Exercise!

Group Exercise!
• Each person in your group must pick a disability type:
1. Low vision
2. Blindness
3. Hearing and Speech
...

User Experience Models

User Stories
• Components:
• User,
• Outcome,
• Value.
• Writing:
• As user, I want outcome.
• As user, I want outcome so ...

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

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

Selfish User Stories
• In order to click links as a user with no elbow room in coach
class with a tiny trackpad, I want cl...

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

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

Group Exercise!

Group Exercise!
• Develop a (proto-) persona.
• Develop user stories for your persona.
• As user, I want outcome.
• As use...

Technical Bits

Text Alternatives for Images
• Can you still make sense of the page?
• Is content missing?
• Can you still use the site?
•...

Text Alternatives for Images

Text Alternatives for Images

Typography Matters
• Leading / line height at least 1.5× font size (WCAG 2.1),
• Space after paragraphs at least 2× font s...

Typography Matters

Hyperlinks!
• Is there any “click here,” “more,” “link to…”?

Hyperlinks!
• Is there any “click here,” “more,” “link to…”?
• Are you using all-caps, URLs, emoticons?

Hyperlinks!
• Is there any “click here,” “more,” “link to…”?
• Are you using all-caps, URLs, emoticons?
• Do you warn befo...

Hyperlinks!
• Is there any “click here,” “more,” “link to…”?
• Are you using all-caps, URLs, emoticons?
• Do you warn befo...

Hyperlinks!
• Is there any “click here,” “more,” “link to…”?
• Are you using all-caps, URLs, emoticons?
• Do you warn befo...

Hyperlinks!
• Is there any “click here,” “more,” “link to…”?
• Are you using all-caps, URLs, emoticons?
• Do you warn befo...

Hyperlinks!
• Is there any “click here,” “more,” “link to…”?
• Are you using all-caps, URLs, emoticons?
• Do you warn befo...

Hyperlinks!
• Is there any “click here,” “more,” “link to…”?
• Are you using all-caps, URLs, emoticons?
• Do you warn befo...

Hyperlinks!
• You are not Google:
• Users know Google’s layout,
• Users probably don’t visit your site daily.
• Relying on...

Hyperlinks!
http://www.sitepoint.com/15-rules-making-accessible-links/

Hit Areas
• Make areas large enough to tap,
• Leave space between hit areas to avoid mis-taps/clicks,
• Fitts’ Law (time t...

Hit Areas

Hit Areas

Hit Areas

Hit Areas

Color Contrast
• Is there enough contrast?
• Are hyperlinks, menus, etc. still visible?
• WCAG 2.0:
• 4.5:1 for normal tex...

Color Contrast
• WCAG 2.1 has broadened it,
• Typography,
• Icons and glyphs,
• Form elements, error messages,
placeholder...

Label Your Fields
• Provide instructions for the entire form,
• Provide a programmatic indication of required fields,
• Pr...

Label Your Fields
• Match the for attribute to the corresponding field’s id
attribute.
• Label text provides a larger hit ...

Label Your Fields

Structure Your Document
• Sectioning elements already have accessibility built in. Use
them.
• <header>
• <nav>
• <main> (...

Structure Your Document

Structure Your Document
<header role="banner">
<nav role="navigation">
<aside role="complementary">
<form role="search">
<...

Structure
Your
Document
“Mobile” often means narrow screen
in RWD, as well as this context.

Structure
Your
Document
<header role="banner">
<nav role="navigation">
<aside role="complementary">
<form role="search">
<...

Structure Your Document
• Use only one <h1> per page,
• Don’t skip heading levels,
• Use appropriate nesting,
• There is n...

Structure Your Document

Structure Your Document
1. Ordered lists
2. …
3. …
Description lists
As statement and
their description
Key
Value
• Unorde...

Structure Your Document
1. Boil water
2. Add pasta
3. Drain water
Pasta
1 pound
Water
4 quarts
Olive oil
Not 4 quarts
• Pa...

Be Keyboard Friendly
• tabindex="-1"
• Use to set focus with script,
• Does not put it in tab order of page.
• tabindex="0...

Be Keyboard Friendly
https://www.digitalgov.gov/2014/11/17/user-experience-impossible-the-line-between-accessibility-and-u...

Be Keyboard Friendly
• Do you have scrolling content boxes?
• Keyboard users cannot access it.
• Do you have content that ...

Be Keyboard Friendly
http://adrianroselli.com/2016/02/keyboard-and-overflow.html

Be Keyboard Friendly
http://adrianroselli.com/2016/12/accessible-emoji-tweaked.html

Be Keyboard Friendly
• Do not use a <div> nor <span> as a control.
• Does the control take me to another URL?
• Use an <a ...

Be Keyboard Friendly
http://adrianroselli.com/2016/01/links-buttons-submits-and-divs-oh-hell.html

Be Keyboard Friendly
• Define :focus styles,
• Particularly if you removed link underlines,
• Everywhere you have :hover, ...

Be Keyboard Friendly

Be Keyboard Friendly
https://www.virginamerica.com/

Display vs Source Order
• CSS techniques allow visual order to break from DOM order:
• Floats,
• Absolute positioning,
• F...

Display vs Source Order
http://codepen.io/aardrian/full/MavVeb/
Firefox
Chrome

Use Captions, Subtitles, Transcripts
• Everybody uses them:
• Working in public, in bed, at home,
• Surfing in public, in ...

Use Captions, Subtitles, Transcripts
• Do video/audio clips have text alternatives?
• Are links to closed-captions or tran...

Use Captions, Subtitles, Transcripts
https://www.youtube.com/watch?v=V592VMJeXc8

WAI-ARIA
• Web Accessibility Initiative – Accessible Rich Internet
Applications.
• Helps make complex components accessibl...

Five Rules of ARIA Use
1. If you can use a native HTML5 element with
semantics/behavior already built in, then do so, inst...

Five Rules of ARIA Use
2. Do not change native semantics. Unless you really have to (no
<h1> with a role="button", for exa...

Five Rules of ARIA Use
3. All interactive ARIA controls must be usable with the keyboard
— keyboard users must be able to ...

Five Rules of ARIA Use
4. Do not use role="presentation" or aria-
hidden="true" on a focusable element. If you do so, some...

Five Rules of ARIA Use
5. All interactive elements must have an accessible name. This
may come from a visible (text on a b...

Pattern Libraries
• Document all this for your custom widgets,
• Use this to build a larger pattern library,
• For many cu...

Tab order indicated via numbers above
Accessibility requirements
See 3.1 Accordion in the WAI ARIA Authoring
Practices for...

Group Exercise!

Group Exercise!
• Take your user interface element and discuss how you might
build/code it.
• Represent the disability cat...

Wrap-up

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

≠ Checklist
• Accessibility is not a checklist.

Maintenance
Nicolas Steenhouthttps://twitter.com/vavroom/status/571092086365261824
“Wheelchair ramp at
pharmacy not only
h...

= Process
• Accessibility is not a checklist.
• Accessibility is an ongoing process.

Prototyping Accessibility
Presented by Adrian Roselli for WordCamp Europe 2018
Slides from this workshop will be available...

Share SlideShare

Facebook
Twitter
LinkedIn

Embed

Size (px)

Show related SlideShares at end

WordPress Shortcode

Link

Share
Email

2024 Trend Updates: What Really Wor... by Search Engine Jou... 363565 views
Storytelling For The Web: Integrate... by Chiara Aliotta 297683 views
Artificial Intelligence, Data and C... by OECD Directorate ... 210131 views
How to Leverage AI to Boost Employe... by SocialHRCamp 90991 views
2024 State of Marketing Report – by... by Marius Sescu 99832 views
Everything You Need To Know About C... by Expeed Software 134412 views

Top clipped slide

View on SlideShare

1 of 117 Ad

1 of 117 Ad