• Press space or Arrow Down for next slide
  • Press shift + space or Arrow Up for previous slide
  • Use ±200% zoom for presentation mode
  • For reading after the talk use the

Accessibility should be easy

For Web Devs

By Paul Hempel lambdaschmiede GmbH

Speaker

html+css+js &
clojure

developer &
designer

company logo of lambdaschmiede gmbh logo of operaton bpmn logo of the JUG Mainz

photo of the speaker eating a baguette

↑ Paul

Why Accessibility Matters

Part 1

People who need accessible websites

  • 🦯 Blind, color-blind, contrast loss
  • 🤯 Audio-/visual over-stimulation
  • 🤔 Cognitive barriers
  • 👉 Motoric barriers
screenshot of heise.de of an inaccessible element with not enough contrast
screenshot of heise.de of an inaccessible element with no focus styling
screenshot of heise.de of an inaccessible element with no alt text

95.9% of home pages had detected WCAG 2 failures.

— WebAIM, The 2024 report on the accessibility of the top 1,000,000 home pages

15 % of all humans have a disability

— WHO, World report on disability 2011

The usual Suspects

  • 🌄 No ALT text on images
  • ⛓️‍💥 Empty Links
  • 🤍 Low contrast
  • 🏷️
  • 📖
    Skipped heading levels

The developer's side of things

Part 2

a11y is the abbreviation for accessibility

– Me, being confused the first time reading it

Oh, no! More work...

— Developers, getting more requirements

Let's play a game!

Who knows this tag?

<details>
  <summary>...</summary>
</details>

Details/Summary

I'm a native expandable widget Look at me!
I have some custom styling

Let's play a game!

Who knows this tag?

<dialog open>
</dialog>

Dialog

Greetings, c't webdev

Let's play a game!

Who knows this tag?

<samp>
</samp>

Sample Output (from a computer program)

My computer just told me:

I'm sorry Dave, I'm afraid I can't do that.

Golden Rules

  • Don't reimplement existing HTML elements
  • Use semantic HTML first, it is accessible
  • Custom elements (React and web components) are not accessible without additional work

Using semantic HTML makes your work and accessibility easier.

– Me

State of the Web

<div>
  <div>
    <div>
      <div>...</div>
    </div>
  </div>
</div>

Semantic Landmarks

<header>
  <nav>
    <menu>
      <li>...</li>
    </menu>
  </nav>
</header>

Semantic Landmarks

<main>
  <h1>...</h1>
  <section>
    <h2>...</h2>
  </section>
</main>

Semantic Landmarks & Forms

<search>
  <form>
    <label for="search-field">Find x</label>
    <input id="search-field" />
    <button type="submit"/>Search!</button>
  </form>
</search>

Semantic HTML: development and accessibility made easy

  • ⌨️ No additional aria labels necessary
  • 💡 Names explain themselves
  • 🔧 Code is easier to read and maintain #divHell
  • 🧑‍🦯 Screenreaders understand it

Mark up different regions of web pages and applications, so that they can be identified by web browsers* and assistive technologies.

– W3C WAI, Page Regions

* useful for reader mode

The power of CSS

@media (prefers-contrast: more) {
    body {
        color: black;
    }
}

(as known from prefers-color-scheme)

screenshot of accessibility options in MacOS with 'increase contrast' enabled

Let's automate it!

As an abled person, it can be hard to spot accessibility issues. But with the right tool this should be easy!

screenshot of firefox devtools with the accessibility tab open

WAVE by WebAIM

screenshot of the ctwebdev conference website with accessibility issues highlighted

🙀

Contrast Checker by WebAIM

screenshot of the contrast checker with failing contrast ratio

Contrast Checker by WebAIM

screenshot of the contrast checker with passing contrast ratio

Contrast Checker by WebAIM

screenshot of the contrast checker with passing contrast ratio but text is black instead of white

Does it look good?

  • Colors have different perceived luminance
  • The contrast checker ain't accessible itself 🤦
  • Large, bold text does not need as much contrast

Pa11y.org

  • Pa11y: local testing with command-line interface
  • Dashboard/Webservice: UI based testing
  • Pa11y CI: deployment pipeline testing

Pa11y.org

screenshot of a terminal with the pa11y-ci command run for mainz.de

We can't automate everything

  • Checking for complicated text
  • Complicated layouts
  • ... but ...

Manual testing

  • 👤 Expand your testing group
  • 👓 Use a screen-reader yourself for testing
  • 🕶️ Use browser features to limit your vision

Planning accessibility from the beginning keeps the workload small and makes it easy.

What's missing

The mentioned issues are not a complete list. There are many more things to consider, for which we need more time.

Don't forget to openly communicate with your design team. Accessibility often starts here.

When accessibility is (not) necessary

Part 3

The global market of people with disabilities is over 1 billion people with a spending power of more than $6 trillion. Accessibility often improves the online experience for all users.

- W3C WAI

Meme: accessibility – it's the law

Countries with a11y laws for websites

  • Canada
  • Japan
  • India
  • Australia
  • USA

European Accessibility Act

Mandatory from 2025-06-28

Only the EU laws include the private sector. Other countries only have laws for their public sector.

The Law

*ICT = Information and communication technology

WCAG Rules

screenshot of WCAG website with a rule, see previous link

Fake accessibility

screenshot of mainz.de which uses third party screen reader

When accessibility isn't necessary


"We don't have enough money to make every playground accessible, so we focus on finding those locations with the highest need."

- Department Head, Mainz

Benefits for everyone

  • 📖 Reader mode
  • 🧭 Heading outline navigation
  • ☀️ Easier to read in every situation (direct sunlight)
  • 🚀 Better websites in general

What's next?

Part 4

W3C / WAI

a screenshot of the linked website

MDN

a screenshot of the linked website

How to improve the situation

  • Educate yourself and others
  • Explain the problems to your colleagues
  • Actively look for feedback from affected people

Websites are one of the best media for accessible information, yet 95% of all websites are not accessible.

Let's create a better web to change that!

Thank you for listening!
Questions?

Talk, Handout & Contact

lambdaschmiede.com/talks

qr code for lambdaschmiede.com/talks