Accessibility

in the Web

Merlin Bögershausen

@mboegie

DEVOXX Belgium 2023

@Devoxx

Java Software Engineer

Line of Business Public

DEVOXX Belgium 2023 / @Devoxx

Merlin Bögershausen / @mboegie

đŸ˜Ŗ

Disabilities

WCAG Disabilities

  • visual 👁

  • auditory đŸĻģ

  • physical đŸ’Ē

  • speech 🎤

  • cognitive & neurological 🧠

Colorblindness

farbsehen farbenblind

est. 68% have regular vision, based on calculation of Vision Australia

Low vision

amd puzzel

Age related Macular Degeneration 10-20% of western world, source Gesundheitsinformation.de

Others

  • Morbus Parkinson: 1%

  • Trisomie 21: 0.3-0.4%

  • Elderly: >90%

Twitter-User are 4% of the world

Tools

AInspector

aiinspector plugin

A Inspector checks WCAG rules for current page

Geenes

geenes app

Who can use

whocanuse app

Pa11y Stack

pa11y dashboard landing page.jpg
pa11y dashboard task.jpg

What to try @Home

Create Awareness

contrast checker action

Present with WCAG Contrast Checker activated

Eat your own Dog Food

nvda logo
ms narrator
voiceover logo

Test with Screen Reader

Make Problems Visible

whocanuse app

Check your colors with whocanuse.com

Demonstrate Changes

geenes app

Little tweaks with Geenes may do the trick

Use proper HTML

please use html

…​

Automated with Pa11y

pa11y - Toolkit to test accessibility

CI integration available as pa11y-ci

brew install node
npm install -g pa11y
pa11y https://www.adesso.de/de/news/blog/index.jsp
Results for URL: https://www.adesso.de/de/news/blog/index.jsp
 â€ĸ Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 2.1:1. Recommendation:  change text colour to #616161.
   ├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
   ├── #ppms_cm_footer__powered_by
   └── <span class="ppms_cm_footer__powered_by" data-disable-select="true" id="ppms_cm_footer__powered_by">Powered by</span>

Monitor with Pa11y

pa11y dashboard landing page.jpg
pa11y dashboard task.jpg

Appropriate Framework

kolibri logo

KoliBri - Public UI

  • Free Component Library 51 Components

  • Separate structure from design

  • React, Angular, Vue.js, Solid, Preact

  • Designersystem for global styling

â€ŧī¸

Contact

Me

@MBoegi // MBoegers

adesso

Infos // DevBlog

Approach direct

I'm here all day with cookies!

Jobs

qrcode adesso jobs

Image Credits

Image Credits 2