Ledetekster er ikke koblet til inputfelt

Det er flertallet ledetekster til inputfelt som programmatisk ikke er satt riktig. Visuelt kan man se hvilken ledetekst som tilhør hvilket felt, men for en brukere som ikke ser, vil ikke dette være like tydelig dersom en koppling mellom de ikke gjøres i koden.

Et vanlig bruksmønstre ved bruk av opplesende hjelpemiddel, slik som skjermleser, er ofte at man navigerer ved bruk av TAB-tast når det er flere skjemaobjekter på siden. Det gjør at navigeringen raskere mellom de ulike inputfeltene. Dersom ledetekst ikke er koblet sammen med inputfelt, vil skjermleser ikke gjengi hva brukeren må fylle ut.

For at dette skal bli riktig må dere koble ledeteksten sammen med label elementet og ID:et på inputfeltet, se kodeeksempel nedenfor.

<label for="postnr-search" class="bd-search-service__label">Postnummer:</label>
<input type="search" value="" class="bd-search-service__input-field" pattern="^[0-9]{4}" maxlength="4" required="" id="postnr-search">

Per i dag er det brukt aria-labelledby som er koblet til et ID som ikke eksisterer.