Webtilgængelighed
Til alles fordel
Skærmlæser
Vi bør hjælpe brugerne med usynlige krav
Hjælp brugeren med eksempler og tydelige krav til input
<div>
<label>Password</label>
<p>Password must be at least 8 characters</p>
<input />
<p>Please enter a value</p>
</div>Vi bør også hjælpe skærmlæserbrugere
[en teknisk specifikation, der] definerer en måde at gøre webindhold og webapplikationer mere tilgængelige...
WAI-ARIA
(Web Accessibility Initiative – Accessible Rich Internet Applications)
😅
Først og fremmest...
Vi bør navngive vores formular, så skærmlæsere kan finde den på siden
<form aria-label="EK signup form">
<!-- resten af koden -->
</form>ved brug af aria-attributter
Kobling af fejlbeskeder
Ligesom med label/input, så skal fejlbeskeden og input-feltet kobles sammen via aria-describedby + unikt id
<div>
<label>Password</label>
<p>Password must be at least 8 characters</p>
<input aria-describedby="password-error" />
<p id="password-error">Please enter a value</p>
</div>Kobling af instruktioner
Det gælder også instruktioner, der er
knyttet til input-feltet
<div>
<label>Password</label>
<p id="password-instruction">Password must be at least 8 characters</p>
<input aria-describedby="password-instruction password-error" />
<p id="password-error">Please enter a value</p>
</div>Bemærk: aria-describedby kan henvise til flere id'er
Mange attributter
Vores input-felter kommer ca. til at se således ud 🤯
<input type="password"
id="password"
name="password"
aria-describedby="password-instructions password-error"
minlength="8"
required />... og der er faktisk mange flere
(som vi ikke kommer til at beskæftige os med)
Kan vi huske hvorfor..?
øvelse 9
Forbind inputs og beskeder
Navngiv din formular med aria-label og brug aria-describedby og id til at forbinde de respektive input-felter og instruktioner/meddelelser
instruktionstekst
aria-describedby
aria-describedby
aria-describedby
aria-describedby
aria-describedby
Forms&A11y
By Dannie Vinther
Forms&A11y
Forms: A11y
