Feltetiketter

Silktide kontrollerer at hvert skjemafelt og hver knapp på sidene dine har et navn som programvare kan lese. Personer som ikke kan se skjemaet, er avhengige av disse navnene for å vite hva hvert felt ber om.

En seende besøkende forstår hva et felt betyr ut fra teksten i nærheten. Denne visuelle sammenhengen har ingen betydning i koden: navnet må være knyttet til selve feltet, oftest med et <label>-element i .

<!-- Problem: teksten ser ut som en etikett, men er ikke knyttet til feltet -->
<p>Fullt navn</p>
<input type="text">

Hvorfor dette er viktig

En kunngjør hvert felt med sitt når den besøkende beveger seg gjennom et skjema. Et felt uten navn blir kunngjort som bare «rediger tekst» – den besøkende må gjette hva som skal skrives ut fra sammenhengen, og i et lengre skjema blir dette raskt umulig. Felt uten etiketter er en av de vanligste grunnene til at et skjema ikke kan fullføres uten syn, noe som fører til tapte påmeldinger, bestillinger og henvendelser.

Slik løser du det

Knytt en <label> til hvert felt, enten koblet sammen med ID eller pakket rundt feltet:

<!-- Koblet sammen med ID -->
<label for="name">Fullt navn</label>
<input type="text" id="name">

<!-- Eller pakket rundt feltet -->
<label>Fullt navn <input type="text"></label>

Knapper får navn gjennom teksten eller value-verdien sin – det trengs ikke noe etikettelement:

<button>Send melding</button>
<input type="submit" value="Send melding">

Der en synlig etikett er upraktisk, kan du bruke et -attributt som aria-label eller aria-labelledby. Merk at dette bare hjelper – seende besøkende vil ikke se det.

Ikke bruk placeholder-tekst som etikett: den forsvinner så snart den besøkende begynner å skrive, og behandles ikke konsekvent som et navn.

Slik tester Silktide dette

Finn skjemakontrollene på hver side: inndatafelt, tekstområder, nedtrekkslister og knapper, samt elementer som har fått en skjemakontrollrolle med ARIA (for eksempel role="button" eller role="checkbox").
Hopp over kontroller som ikke trenger et navn: skjulte inndatafelt, felt lagt til av kjente tredjepartsmoduler (for eksempel -tjenester eller de skjulte skjemaene som sporings- og oversettelsesskript legger til for egen bruk), og elementer der ARIA-rollen ikke krever en etikett.
Finn hver kontrolls tilgjengelige navn ut fra etiketten, ARIA-attributter, knappetekst eller verdi.
Rapporter hver kontroll der det tilgjengelige navnet er tomt.

Feilsøking

Feltet har tekst ved siden av seg

Tekst i nærheten gir ikke et felt navn med mindre den er koblet til i koden – bruk en <label> med et for-attributt, eller pakk feltet inn i etiketten.

Feltet er dekorativt eller styres av en utvidelse

Felt som legges til av moduler du ikke kontrollerer, kan være vanskelige å rette direkte. Kontroller om utvidelsen tilbyr en innstilling for tilgjengelighet eller en oppdatering. Hvis feltet faktisk ikke påvirker besøkende, kan du funnet.