Forms&A11y

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

https://www.w3.org/WAI/standards-guidelines/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