Dariusz Winkler
"Supreme Court hands victory to blind man who sued Domino’s over site accessibility"
Similar to: responsive design, performance, security, user experience, SEO, ...
tabindex
> 0:focus {
outline: none; /* DON'T DO THIS */
}
⇒ Implementing an accessible focus indicator
While grey on white is quite popular on the web, this text fails even AA level.
User interface for visually impaired people
<main>
vs. <div id="main">
<nav>
vs. <div id="nav">
H1
-H6
semantically, not for stylingrole
Separate tags from their styling
Screen Reader | ||
View | Visible | Hidden |
Visible | - | aria-hidden="true" |
Hidden | .sr-only |
display: none; visibility: hidden; |
.sr-only { /* From: Bootstrap 4 */
position:absolute; overflow: hidden;
width:1px; height:1px;
padding:0; border:0;
clip:rect(0,0,0,0); clip-path:inset(50%);
white-space:nowrap; }
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. — WCAG guideline 1.1.1
<label>Name</label>
<input id="html-label">
<!-- edit has auto complete blank -->
<label for="html-label">Name</label>
<input id="html-label">
<!-- Name edit has auto complete blank -->
<input placeholder="Name">
<!-- Name edit has auto complete blank -->
<img src="dog.jpg" alt="Dog playing in meadow.">
<img src="fb.png" alt=""> <!-- decorative image -->
<button>×</button>
<!-- × button -->
<button aria-label="Close">×</button>
<!-- Close button -->
<div id="close-id">Close</div>
<button aria-labelledby="close-id">×</button>
<!-- Close button -->
<div id="close-id">Close</div>
<button aria-describedby="close-id">×</button>
<!-- × button Close -->
aria-live="polite|assertive"
orrole="alert"
(assertive)<div id="live-region" aria-live="polite"></div>
document.querySelector("#live-region")
.innerText = "8 search results loaded"
$ npm install -g axe-cli
$ axe example.com
Extensions/plugins available for: Chrome/Firefox, Cypress, Selenium, Storybook, ...
Tools can detect only 20% to 50% of all accessibility issues.
Manual testing is always required.
Dariusz Winkler