Accessible Web

Barrierefreies Internet

Dariusz Krolikowski

@darek_kay darekkay.com

What?

Why?

How?

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

⇒ w3.org

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

⇒ google.com

Requirements

  • Responsiveness
  • Performance
  • Security
  • User experience
  • SEO
  • ...
  • Accessibility

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

⇒ The World Bank

Legal requirements

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

Accessibility is "hard"

A pole blocking a wheelchair ramp

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

⇒ w3.org/TR/WCAG21/
  • Principles
    • perceivable, operable, understandable, robust
  • Guidelines
  • Success Criteria
    • 3 levels of conformance: A < AA < AAA
  • Techniques

Different preconditions

  • Motor disabilities
  • Blindness / Low vision
  • Deafness
  • Cognitive disabilities

Keyboard navigation

Keyboard navigation

  • Ensure a logical tab order
  • Don't use tabindex > 0
  • Make all interactive elements focusable
  • Don't remove the default focus ring
:focus {
  outline: none; /* DON'T DO THIS */
}
⇒ Implementing an accessible focus indicator

Do not depend on color

Showcase for red-green color blindness.

Color contrast

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

Contrast ratio rating ⇒ Chrome 65+

Contrast ratio rating ⇒ Calculate Contrast Ratio

Screen reader

User interface for visually impaired people

Screen reader optimizations

WAI-ARIA

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

Custom components

Links vs. Buttons

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

Example for using links vs buttons.

Separate tags from their styling

Hiding elements

Screen Reader
View Visible Hidden
Visible - aria-hidden="true"
Hidden .sr-only display: none;
visibility: hidden;

.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

Missing or unassigned label

<label>Name</label>
<input id="html-label">

<!-- edit  has auto complete  blank -->
Input with a label

Assigned label

<label for="html-label">Name</label>
<input id="html-label">

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

Placeholders

<input placeholder="Name">

<!-- Name  edit  has auto complete  blank -->
Input with a placeholder
⇒ Bad user experience

Alternative texts

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

Contrast ratio rating

ARIA attributes

Modal with a close button
<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

Accessibility Dev Tools

Live regions

Autocomplete input
  • 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"

Tools

accessibility

a11y

axe-core


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

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

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

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

Accessibility is about equal treatment, not special treatment.

Thank you!

github.com / darekkay / presentations

Dariusz Krolikowski

@darek_kay darekkay.com