Feltnavne

Silktide tjekker, at hvert formularfelt og hver knap på dine sider har et navn, som software kan læse. Personer, der ikke kan se formularen, er afhængige af disse navne for at vide, hvad hvert felt beder om.

En seende besøgende finder ud af, hvad et felt betyder, ud fra teksten i nærheden. Denne visuelle forbindelse har ingen betydning i koden: navnet skal være knyttet til selve feltet, oftest med et <label>-element i .

<!-- Problem: Teksten ligner en etiket, men er ikke knyttet til feltet -->
<p>Fulde navn</p>
<input type="text">

Hvorfor det er vigtigt

En annoncerer hvert felt med dets , når den besøgende bevæger sig gennem en formular. Et felt uden navn annonceres blot som "rediger tekst" – den besøgende skal gætte, hvad der skal skrives, ud fra konteksten, og i en længere formular bliver det hurtigt umuligt. Felter uden navne er en af de mest almindelige årsager til, at en formular ikke kan udfyldes uden syn, hvilket betyder tabte tilmeldinger, ordrer og henvendelser.

Sådan løser du det

Knyt en <label> til hvert felt, enten ved at forbinde dem med et ID eller ved at lade den omslutte feltet:

<!-- Forbundet med ID -->
<label for="name">Fulde navn</label>
<input type="text" id="name">

<!-- Eller omsluttet af feltet -->
<label>Fulde navn <input type="text"></label>

Knapper navngiver sig selv via deres tekst eller value – der er ikke brug for et label-element:

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

Når en synlig label ikke er praktisk mulig, skal du bruge en -attribut som aria-label eller aria-labelledby. Bemærk, at dette kun hjælper – seende besøgende kan ikke se den.

Brug ikke placeholder-tekst som label: Den forsvinder, så snart den besøgende begynder at skrive, og behandles ikke konsekvent som et navn.

Sådan tester Silktide dette

Find formularkontrollerne på hver side: inputfelter, tekstområder, rullelister og knapper samt elementer, der har fået en formularrolle med ARIA (f.eks. role="button" eller role="checkbox").
Spring kontroller over, der ikke behøver et navn: skjulte inputfelter, felter indsat af kendte tredjepartswidgets (f.eks. -tjenester eller de skjulte formularer, som sporings- og oversættelsesscripts tilføjer til eget brug), samt elementer, hvis ARIA-rolle ikke kræver en label.
Find hver kontrols tilgængelige navn ud fra dens label, ARIA-attributter, knaptekst eller værdi.
Rapportér hver kontrol, hvis tilgængelige navn er tomt.

Fejlfinding

Feltet har tekst ved siden af sig

Tekst i nærheden navngiver ikke et felt, medmindre den er forbundet i koden – brug en <label> med en for-attribut, eller lad labelen omslutte feltet.

Feltet er dekorativt eller styres af et plugin

Felter, der indsættes af widgets, du ikke styrer, kan være svære at rette direkte. Tjek, om pluginnet tilbyder en tilgængelighedsindstilling eller en opdatering. Hvis feltet reelt ikke påvirker besøgende, kan du fundet.