Accessible Web

Barrierefreies Internet

Dariusz Krolikowski


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


  • 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)
  • Principles
    • perceivable, operable, understandable, robust
  • Guidelines
  • Success Criteria
    • 3 levels of conformance: A < AA < AAA
  • Techniques



How do I make my site more accessible?


  • 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


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;                         }


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



$ npm install -g pa11y
$ pa11y

$ npm install --save pa11y-ci

Funkify (Chrome)

→ Funkify


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

Thank you! / darekkay / presentations

Dariusz Krolikowski