Web Accessibility

Erik Aybar

What is Web Accessibility?

a11y

Why am I talking about a11y?

• It matters
• It's neglected
• Something I've been learning about recently
• To raise awareness and spark discussion

Disabilities Affecting Web

• Blindness and limited vision
• Deafness
• Color blindness
• Limited mobility
  • Unable to use mouse
  • Unable to use keyboard
• Cognitive and learning disabilities

Screen Readers

• Used by blind and low vision users
• Vast majority of users are NVDA / JAWS on Windows
• VoiceOver on Mac (Activate via CMD + F5)
• Also on mobile devices (VoiceOver iOS)
• 2-dimensional text-only navigation
  *everything is next/prev there is no up/down/left/right

Keyboard-only users

• Unable to use a mouse
• Also benefits keyboard preference users

Demo!

Source/Demo:

https://github.com/erikthedeveloper/react-calendar-components/pull/4
https://erikthedeveloper.github.io/react-calendar-components/

More complete example:

https://www.24a11y.com/2018/a-new-day-making-a-better-calendar/

Color Blindness

https://www.toptal.com/designers/colorfilter/

Color contrast matters

Other assistive technologies

• Screen magnification tools
• Switch inputs (limited mobility)
• Motion and eye tracking
• Braille display
• More...

Why should I care about a11y?

You are a decent human

• You care about other humans
  *Humans includes people with disabilities
• Your job is to create products that create value for users
  *Users includes people with disabilities
• As the creator of these products you have the power to make them accessible for your users

Legal reasons

• ADA (Americans with Disabilities Act) can apply to websites (details are fuzzy)
• International regulations vary (can be stricter)
• Wouldn't build a store without accessible entrance
• Number of lawsuits are growing every year

ADA Title III Accessibility Lawsuits

Number of ADA lawsuits nearly tripled from 2017 to 2018

ADA is fuzzy on the details for website compliance, but "reasonable accommodation" is expected.

https://www.adatitleiii.com/2019/01/number-of-federal-website-accessibility-lawsuits-nearly-triple-exceeding-2250-in-2018/

Source: Seyfarth Shaw law firm

2017: 814 ➡️ 2018: 2,258

Domino's Lawsuit

https://www.cnbc.com/2019/07/25/dominos-asks-supreme-court-to-say-disability-protections-dont-apply-online.html

Image source: iStock

You are a
Decent
Human!

Good Business Sense

• Competitive advantage
• Underserved market share
• Good PR
• Looks good. Feels good. Is good.

About 56.7 million people — 19 percent of the US population — had a disability in 2010, according to a broad definition of disability, with more than half of them reporting the disability was severe

U.S. Census Bureau report: Americans with Disabilities: 2010

About 8.1 million people had difficulty seeing, including 2.0 million who were blind or unable to see.

U.S. Census Bureau report: Americans with Disabilities: 2010

Improved UX for everyone!

Benefits machines too!

An active focus on accessibility can indirectly:

• Help with SEO
• Lead to more testable UIs
• Autofill, password managers, etc...

What can I do?

0) Educate yourself

• Invest a small amount of time exploring the topic
• Subscribe to related resources
• Install axe or Accessibility Insights browser extension
  • Audit sites you use (takes mere seconds)
  • Audit projects you've built
  • Audit current projects
• Get these conversations started. Nobody is an expert. We all have a lot of knowledge gaps here.
• Share your learnings. Educate your team/company.

Deque's
axe browser extension

https://www.deque.com/axe/

Microsoft's
Accessibility Insights

https://accessibilityinsights.io/

Find "your" resources

• https://a11yproject.com/ (quick reference)
  Great checklist and patterns sections
• https://developer.mozilla.org/en-US/docs/Web/Accessibility (recommended reference)
• https://www.a11ywithlindsey.com (blog)
• https://a11yrules.com/ (podcast, 100+ episodes)
• React Podcast #54 w/ Aaron Cannon
• Marcy Sutton's a11y egghead.io course
• A11ycasts YouTube series from Google
• https://reakit.io (accessibility first React components)
• Twitter #a11y

We all have different resources that "stick" with us. Here are some of mine:

WAI-ARIA Authoring Practices 1.1

https://www.w3.org/TR/wai-aria-practices-1.1/#read_me_first

WCAG

(Web Content Accessibility Guidelines)

https://www.w3.org/WAI/standards-guidelines/wcag/

1) Use semantic HTML

• Low effort. High impact.
• Highly neglected.
• Saves you time/effort. Gives functionality for free!
• Take some time and give yourself a refresher.

<div onClick>

<a href>

• Use when "navigating"
• Should update URL
• Never with empty href
• Support CMD + click

<button onClick>

• Use when "interacting"
• Typically should not update URL
• type="button" vs.
  type="submit" (default)
• Will clicking affect content on page? Should likely use a button

<details>

The Details disclosure element

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

<h1>A heading</h1>

<h2>A heading</h2>

<h3>A heading</h3>

<h4>A heading</h4>

<h5>A heading</h5>

<h6>A heading</h6>

Low hanging fruit

• Add appropriate alt tags to all images
• Use h1, h2, etc... appropriately
• Add name attributes and labels to all form inputs
• Add lang attribute <html lang="en">
• Never remove focus styling
• Avoid tabindex (really)
  *maybe -1 or 0, never > 0

2) Ensure forms are accessible

3) Develop responsibly and reinvent the wheel with care

• Consider a11y when selecting 3rd party libraries
• Consider a11y when building custom components
• Acknowledge that if a11y is not considered up front it very likely will not be "revisited" and improved later
• Leverage browser native elements and behaviors whenever possible

4) Automate and enforce

• Proper abstractions provide baked in a11y
• Enforce with ESLint
• cypress-axe
• Set up reporting on your CI
• Much more...

Reduce friction to baking accessibility in up-front and automate enforcement to nudge more accessible development by default

5) Audit yourself during development

• Keyboard-navigate through features
• Run axe audit (takes seconds)
• Fire up VoiceOver (takes only seconds)
• Push back on inaccessible designs (color, UI)

ARIA

No ARIA is better than bad ARIA

https://www.w3.org/TR/wai-aria-practices-1.1/#no_aria_better_bad_aria

ARIA role is a promise

Adding a role to an element is a promise that you have also incorporated JavaScript that provides the keyboard interactions expected for a button. Unlike HTML input elements, ARIA roles do not cause browsers to provide keyboard behaviors or styling.

Using a role without fulfilling the promise of that role is similar to making a "Place Order" button that abandons an order and empties the shopping cart.

https://www.w3.org/TR/wai-aria-practices-1.1/#no_aria_better_bad_aria

Learn from Lindsey!

1. Beginning to Demystify ARIA
2. An Introduction to ARIA States
3. An Introduction to Accessible Labeling
4. Her egghead.io playlist: Accessibility tips and tricks

Lindsey Kopacz is a frontend developer who specializes in accessibility. She has a pretty great blog! Especially on the topic of ARIA in a way that doesn't make your eyes glaze over.

https://www.a11ywithlindsey.com/

There are a lot of great resources and accessibility champions out there

• Marcy Sutton
• Jen Luker
• Lindsey Kopacz
• Ryan Florence
• Nic Steenhout
• Many more...

Common Patterns
and Challenges

• Modals
• Custom form elements:
  Dropdowns, radio, inputs, etc...
• Date Pickers
• Calendars
• Tooltip
• Charts
• More...

Bookmark these!

• https://a11yproject.com/patterns/
• https://reakit.io/docs/accessibility/
• WAI-ARIA Authoring Patterns and Widgets

Reakit - https://reakit.io/

Resources

• https://a11yproject.com/
• ARIA https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
• https://w3c.github.io/using-aria/
• WCAG https://www.w3.org/WAI/standards-guidelines/wcag/
• Deque's Accessibility Guideline PDF
• https://marcysutton.com/
• https://www.a11ywithlindsey.com/
• https://webaim.org/
• https://reakit.io/

Discussion!