Accessible Web

Barrierefreies Internet

Dariusz Krolikowski


@darek_kay darekkay.com

„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

  • Performance
  • Security
  • User Experience
  • SEO
  • ...
  • Accessibility

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

The World Bank

Accessibility is "hard"

A pole blocking a wheelchair ramp

Different Preconditions

Accessibility is about equal treatment, not special treatment.

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

accessibility

a11y

How do I make my site more accessible?

Disabilities

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

Keyboard Navigation

Keyboard Navigation

  • Ensure a logical tab order
  • Don't use tabindex > 0
  • Don't remove the default focus ring
:focus {
  outline: none; /* DON'T DO THIS */
}

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

Simplify navigation

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

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.

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
  • Use <label> for form elements
  • Use aria-label if the label is not visible
  • Use aria-labelledby if the label is visible
  • Use aria-describedby for additional descriptions

Alternative Texts

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

Contrast ratio rating

Live Regions

  • Announce changes at runtime
    • role="alert" or
    • aria-live="polite|assertive"
  • A live region has to be present before changing content

Tools

pa11y


$ npm install -g pa11y
$ pa11y example.com
      

$ npm install --save pa11y-ci
      

Funkify (Chrome)

→ Funkify

Resources

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

Thank you!

github.com / darekkay / presentations

Dariusz Krolikowski

@darek_kay darekkay.com