Overskrifter og etiketter
Overskrifter og formularetiketter skal beskrive emnet eller formålet med det indhold, de introducerer. De behøver ikke være unikke, men de skal være informative — en overskrift der lyder 'Information' eller en etiket der lyder 'Felt' er ikke tilstrækkelig.
Hvad det kræver
Når en sektion har en overskrift, eller en formularkontrol har en etiket, skal teksten faktisk beskrive, hvad der følger. Skærmlæserbrugere bruger overskrifter og etiketter som sidens indholdsfortegnelse — JAWS-brugere trykker H for at hoppe fra overskrift til overskrift, og formulartilstand læser etiketter højt, efterhånden som hvert felt modtager fokus. Vag tekst ødelægger hele denne navigationsmodel.
Succeskriteriet kræver ikke, at overskrifter eksisterer overalt, kun at dem, der eksisterer, er beskrivende. (For hvornår overskrifter kræves, se 2.4.10 på AAA-niveau.)
Sådan opfyldes det
- Skriv overskrifter, der navngiver sektionen, ikke designhensigten:
"Leveringsadresse", ikke"Sektion 2","Ofte stillede spørgsmål", ikke"Mere information". - Par hvert formularfelt med en synlig
<label>, hvis tekst beskriver inputtet. Undgå pladsholder-som-etiket, som forsvinder ved indtastning. - For visuelt skjulte etiketter (søgefelt, ikonknapper), brug
aria-labeleller en.visually-hidden-klasse, men gør etiketten specifik. - Når to overskrifter på en side dækker det samme emne (f.eks. to “Kommentarer”-sektioner på et forumindeks), tilføj disambiguerende kontekst:
"Kommentarer til 14. juli","Kommentarer til 15. juli". - Gennemgå alle overskrifter eller etiketter på tre ord eller færre — det er der, vaghed opstår.
Typiske fejl
- “Information,” “Detaljer,” “Mere,” “Sektion,” “Formular” brugt som overskrifter uden yderligere kontekst.
- Formularetiketter som “Felt 1,” “Input,” “Skriv her,” eller ingen etiket overhovedet (kun pladsholder).
- Kortgitteroverskrifter, der alle lyder “Lær mere,” fordi de blev konverteret fra CTA’er af en skabelonændring.
- Søgeresultatside, hvor hver resultatoverskrift er det bogstavelige ord “Resultat.”
- Tabeller, hvor kolonneoverskrifter er “Kol 1,” “Kol 2” i stedet for “Dato,” “Beløb,” “Status.”
Hvorfor det betyder noget
I WebAIMs skærmlæserbrugerundersøgelser er navigation via overskrifter konsekvent den mest almindelige strategi for at orientere sig på en ny side — mere almindelig end at læse fra øverst til nederst. Vage overskrifter ødelægger dette kort. Vage etiketter ødelægger formularer: en bruger lander på en kontrol, der blot siger “input,” og skal gå tilbage for at læse omgivende tekst, som formulartilstanden ofte skjuler.