Accessible Web

What?

Why?

How?

„Web Accessibility means that people with disabilities can use the Web.”

„... the site's content is available,
and its functionality can be operated,
by literally anyone .”

Impairments are not an accessibility problem.
It's the barriers we create.

Requirements

15% of the world’s population experience some form of disability.

Legal requirements

"Supreme Court hands victory to blind man who sued Domino’s over site accessibility"

Accessibility is "hard"

  

The cost of accessibility

• Knowledge
• Implementation
• Testing

Similar to: responsive design, performance, security, user experience, SEO, ...

How do I make my site more accessible?

Web Content Accessibility Guidelines
(WCAG 2.2)

• Principles
  • perceivable, operable, understandable, robust
• Guidelines
• Success Criteria
  • 3 levels of conformance: A < AA < AAA
• Techniques

Demo

Keyboard navigation

Keyboard navigation

:focus {
  outline: none; /* DON'T DO THIS */
}

Do not depend on color

Color contrast

While grey on white is quite popular on the web, this text fails even AA level.

⇒ Chrome 65+

⇒ Calculate Contrast Ratio

Screen reader

User interface for visually impaired people

• NVDA (Windows, Open Source)
• JAWS (Windows)
• VoiceOver (macOS)
• Orca (Linux)

Screen reader optimizations

• Use semantic elements, e.g.:
  • <main> vs. <div id="main">
  • <nav> vs. <div id="nav">
• Use H1-H6 semantically, not for styling
• Simplify navigation
  • Consider adding Skip links
• Provide page language in HTML

WAI-ARIA

• role
  • button, dialog, list, tooltip, ...
• State
  • aria-expanded, aria-disabled, ...
• Properties
  • aria-haspopup, aria-label, ...

Custom components

• Prefer native over custom components
• Follow WAI-ARIA Authoring Practices
• No ARIA is better than wrong ARIA

Links vs. Buttons

• <a> - Link one file to another
• <button> - Trigger actions

Separate tags from their styling

Hiding elements

.sr-only {    /* From: Bootstrap 4 */
  position:absolute;         overflow: hidden;
  width:1px;                 height:1px;
  padding:0;                 border:0;
  clip:rect(0,0,0,0);        clip-path:inset(50%);
  white-space:nowrap; }
          

Labels

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. — WCAG guideline 1.1.1

Placeholders

<input placeholder="Name">

<!-- Name  edit  has auto complete  blank -->

Alternative texts

<img src="dog.jpg" alt="Dog playing in meadow.">
<img src="fb.png" alt=""> <!-- decorative image -->

ARIA attributes

<button>×</button>
<!-- ×  button -->

<button aria-label="Close">×</button>
<!-- Close  button -->

<div id="close-id">Close</div>
<button aria-labelledby="close-id">×</button>
<!-- Close  button -->

<div id="close-id">Close</div>
<button aria-describedby="close-id">×</button>
<!-- ×  button  Close -->

Labels

• Use <label> for form elements
• Use alt for images
• Use aria-label if the label is not visible
• Use aria-labelledby if the label is visible
• Use aria-describedby for additional info

Live regions

• Announce dynamic/asynchronous changes
  • aria-live="polite|assertive" or
  • role="alert" (assertive)

<div id="live-region" aria-live="polite"></div>

document.querySelector("#live-region")
        .innerText = "8 search results loaded"

Videos

Distractions

• Avoid animations
• Make animations pausable
• Honor user settings
  

  
  @media (prefers-reduced-motion: reduce) { ... }
              

Tools

accessibility

axe-core

$ npm install -g axe-cli
$ axe example.com
      

Extensions/plugins available for: Chrome/Firefox, Cypress, Selenium, Storybook, ...

⇒ Evaluatory
(my own wrapper around axe-core)

• Lighthouse (Chrome DevTools → Audits)
  • Uses axe-core under the hood
• Browser DevTools:
  
  
• eslint-plugin-jsx-a11y

Tools can detect only 20% to 50% of all accessibility issues.

Manual testing is always required.

Accessibility Review

1. Tool-based testing
2. Visual and Content testing
3. Keyboard-only testing
4. Screen reader testing

Resources

• darekkay.com/a11y
• awesome-a11y
• Demo examples from this talk

Accessibility doesn't just happen,
you have to make it happen.

Accessibility is about equal treatment,
not special treatment.

Thank you!

darekkay.com / presentations

Dariusz Winkler