est. 68% have regular vision, based on calculation of Vision Australia
Merlin Bögershausen / @mboegie
visual 👁
auditory 🦻
physical 💪
speech 🎤
cognitive & neurological 🧠
est. 68% have regular vision, based on calculation of Vision Australia
Altersbedingte Makula-Degeneration 10-20% of western world, source Gesundheitsinformation.de
Abgrenzung der einzelnen Teile verschwimmen
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
Level: A
<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
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
Level: AA
Labels or instructions are provided when content requires user input.
Level: A
<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>
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 …
AInspector WCAG evaluates WCAG 2.0 against current page
Has false negatives and requires manual checking (MC)
Similar available for other browsers
<label id="adesso-search-label" for="adesso-search">Suche</label>
<!--..-->
<button type="submit" aria-label="Suche starten" class="adesso-round">
<a class="logo page-scroll" href="/de/index.jsp"
title="to adesso Landingpage">
<svg aria-label="Logo adesso" class="adesso-logo" role="img"/>
</a>
3.59:1 - 100% 👎 instanceof
4.45:1 - 72% 👎 return
3.57:1 - 100% 👎 String
18.78:1 - 100% 👍 o
4.45:1 - 72% 👎 return
6.16:1 - 7% 👎 return
Article Heading are h1 😕
Section Heading are h4 😖
.h1, h1 { /* h1 -> h2 */ }
.h2, h2 { /* h2 -> h1 */ }
.h3, h3 { /* copy 'n' paste h4 */ }
Present with WCAG Contrast Checker activated
Check your colors with whocanuse.com
Little tweaks with Geenes may do the trick
…
Use AccessLint GitHub App on PRs
Sonar HTML rules with tag accessibility
ESLint Plugin eslint-plugin-jsx-a11y
Free Component Library 51 Components
Separate structure from design
React, Angular, Vue.js, Solid, Preact
Designersystem for global styling
WCAG Logo from www.w3.org
Meme from imageflip.com
Toolbox from Racool_studio at Freepik
NVDA logo from BHVD Website
Microsoft Narrator Logo from tenforums.com
Apple VoiceOver Logo from Apple.com
ESLint logo from icon-icons.com
Sonar Qube logo from Sonarsource
KoliBri Logo from Public-UI.github.io
Farbenblindheits Example inbinfarbenblind.de
Disablilities backgroud from macrovector on freepik