Accessibility

in the Web

Java Software Engineer

Line of Business Public

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

Altersbedingte Makula-Degeneration 10-20% of western world, source Gesundheitsinformation.de

Abgrenzung der einzelnen Teile verschwimmen

Blindness

blindness stock

W3C: Web Content Accessibility Guidelines

Info and Relationships

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
— WCAG 2.1 1.3.1 Info and Relationships

Level: A

Exemplary Relationship

Social Security Number: * - -
<div role="group" aria-labelledby="ssn1">
    <span id="ssn1">Social Security Number:</span>
    <span style="color: #D90D0D;"> * </span>
    <input size="3" type="text" aria-required="true"
        title="First 3 digits" /> -
    <input size="2" type="text" aria-required="true"
        title="Next 2 digits" /> -
    <input size="4" type="text" aria-required="true"
        title="Last 4 digits" />
</div>

ARIA17 Using grouping roles to identify related form controls

Text Contrast

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except: large text has 3:1, Decoration, invisible parts or parts of pictures and Logos
— WCAG 2.1 1.4.3 Test Contrats

Level: AA

Example for bad contrast

W3C new Website Banner original colors
W3C new Website Banner with adesso link colors

WhoCanUse analysis for original and adesso Banner from W3.org

Labels

Labels or instructions are provided when content requires user input.
— WCAG 2.3 3.3.2 Labels or Instructions

Level: A

Labels 'n' Instruction

<form>
  <p>
    <span id="date-label" tabindex="-1">
    <label for="date">Extend date (yyyy-mm-dd)</label></span>
    <input type="text" size="10" id="date"
      value="2023-06-15" aria-labelledby="date-label date">
  </p>
  <p>
    <input type="submit" style="font-size: 30px" value="👍">
  </p>
</form>

HTML Content

implemented using markup languages, elements have complete start and end tags, are nested according to their specifications, don’t contain duplicate attributes and IDs are unique …​
— WCAG 1.2 4.1.1 Parsing

Example

spread

Tools

Check WCAG

aiinspector plugin
  • AInspector WCAG evaluates WCAG 2.0 against current page

  • Has false negatives and requires manual checking (MC)

  • Similar available for other browsers

Choose Colors

geenes app

Check Colors

whocanuse app

Take care of own affairs

Text contrast

devblog sourcecode
  • 3.59:1 - 100% 👎 instanceof

  • 4.45:1 - 72% 👎 return

  • 3.57:1 - 100% 👎 String

  • 18.78:1 - 100% 👍 o

Tinker the Colors

Genees color
  • 4.45:1 - 72% 👎 return

  • 6.16:1 - 7% 👎 return

Relationships

Article Heading are h1 😕

adesso devblog h1

Section Heading are h4 😖

adesso devblog h4
.h1, h1 { /* h1 -> h2 */ }
.h2, h2 { /* h2 -> h1 */ }
.h3, h3 { /* copy 'n' paste h4 */ }

What to try @Home

Create Awareness

contrast checker action

Present with WCAG Contrast Checker activated

Create Awareness

nvda logo
ms narrator
voiceover logo

Test with Screen Reader

Optimize

whocanuse app

Check your colors with whocanuse.com

Optimize

geenes app

Little tweaks with Geenes may do the trick

Optimize

please use html

…​

Enable analysis

accesslint pr

Use AccessLint GitHub App on PRs

Enable analysis

sonar logo

Sonar HTML rules with tag accessibility

eslint logo icon 170171

Appropriate Framework

kolibri logo
  • 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

See you!

jcon booth

Image Credits

Image Credits 2