Dariusz Winkler
darekkay.com

Accessible Web

Barrierefreiheit im digitalen Zeitalter

Company logos: Amazon, Nike, Doordash, Hasbro, Domino's Pizza, Burger King, Five Guys Burgers and Fries
Dariusz Winkler
darekkay.com

Accessible Web

Barrierefreiheit im digitalen Zeitalter

What?

Why?

How?

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

„Web Accessibility means that
anyone
can use the Web.”

Examples for impairements. Touch, Permanent: One arm. Touch, Temporary: Arm injury. Touch, Situational: New parent. See, Permanent: Blind. See, Temporary: Cataract. See, Situational: Distracted driver. Hear, Permanent: Deaf. Hear, Temporary: Ear infection. Hear, Situational: Bartender. Speak, Permanent: Non-verbal. Speak, Temporary: Laryngitis. Speak, Situational: Heavy accent.
Cognitive impairments, Neurodiversity, Ageing, ...
⇒ Microsoft Inclusive Design

Impairments are not an accessibility problem.
The barriers we create are.

A person in a wheelchair in front of big stairs A person with two trolleys in front of big stairs A person on a bicycle in front of big stairs A person with a baby stroller in front of big stairs

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

27% of adults in the European Union
experience some form of disability.

Ethics ❤️

Business 💰️

Legal ‍⚖️

EU Accessibility Act

Barrierefreiheitsstärkungsgesetz (BFSG)

28th of June 2025
  • Websites
  • Web, desktop and mobile apps
  • PDFs, emails
  • Terminals, ...

Fines up to 100.000 € for violations and/or ban from EU market.

How do I make my product accessible?


Organization

Implementation & Testing

Requirements

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

The costs

  • Knowledge
  • Implementation
  • Testing

Software lifecycle

Graph with a software lifecycle: requirements definition, UI/UX design, development, quality assurance, release.

Accessibility is "hard"

A pole blocking a wheelchair ramp.    A solid looking wheelchair ramp with a section removed to reach a door on the other side of the ramp.

Web Content Accessibility Guidelines

(WCAG 2.2)

  • Principles (4)
    • perceivable, operable, understandable, robust
  • Guidelines (13)
  • Success Criteria (87)
    • 3 levels of conformance: A < AA < AAA
  • Techniques (478)

Tool-based testing

  • Axe
    • CLI, browser extensions, Cypress, Selenium, ...
  • Lighthouse in Chrome
    Chrome Dev Tools, Lighthouse Tab. An 'accessibility' checkbox item is selected.
  • WAVE browser extension

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

Manual testing is always required.

No, AI won't solve accessibility for you.

Do not use accessibility overlays.

⇒ Overlay Fact Sheet

Visual testing

Color contrast

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

Contrast ratio rating example in Google Chrome ⇒ Chrome DevTools
Contrast ratio rating example in a web tool ⇒ Calculate Contrast Ratio

Do not depend on color

Showcase for red-green color blindness.

Keyboard-only testing

Keyboard navigation

  • Make all interactive elements focusable and operable
  • Ensure a logical tab order
  • Ensure an accessible focus ring
:focus {
  outline: none; /* DON'T DO THIS */
}
⇒ Implementing an accessible focus indicator

Screen reader testing

Screen reader

User interface for visually impaired people

A mockup of a website with a header, main section and a footer. Headings, text and an image within the main content.
  • Structure
  • Semantics
  • Non-text content
  • Dynamic changes

Structure

  • Use semantic landmark elements, e.g.:
    • <main> vs. <div id="main">
    • <header> vs. <div id="header">
    • <footer> vs. <div id="footer">
    • <nav> vs. <div id="nav">
  • Use h1-h6 semantically, not for styling

Semantics

Non-text content

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. — WCAG guideline 1.1.1
Time square in New York at night. Bright billboards on the buildings. A motion blur of people on the street. Video player screenshot

Alternative texts

<!-- alt missing - DON'T do this! -->
<img src="dog.jpg">
<!-- informative image -->
<img src="dog.jpg" alt="Dog playing in meadow.">
<!-- decorative image -->      
<img src="fb.png" alt="">

Icon-only buttons vs. text buttons with decorative icons

Time square in New York at night. Bright billboards on the buildings. A motion blur of people on the street.
⇒ Images & Visuals 
# Captions
Suspenseful music playing.
Door creaking.
Female voice: Hello?
# Audio descriptions
An old door opens.
A decayed room in an abandoned building.
Sunlight shines through a window.
⇒ Video subtitles, captions, audio descriptions and transcripts

Dynamic changes

Autocomplete input with several options
  • Announce dynamic changes via live regions
    • aria-live or role="alert"

⇒ Accessible notifications with ARIA Live Regions

Quick start

  1. Knowledge building
  2. Testing
    • tool-based
    • visual
    • keyboard
    • screen reader
  3. Conformance evaluation and certification

Resources

accessibility
↓
a11y

Accessibility is about equal treatment,
not special treatment.

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

Thank you!

darekkay.com / presentations
Dariusz Winkler