Rubriker och etiketter
Rubriker och formuläretiketter måste beskriva ämnet eller syftet med det innehåll de introducerar. De behöver inte vara unika, men de måste vara informativa — en rubrik som lyder 'Information' eller en etikett som lyder 'Fält' uppfyller inte detta framgångskriterium.
Vad det kräver
När ett avsnitt har en rubrik eller en formulärkontroll har en etikett måste texten faktiskt beskriva vad som följer. Skärmläsaranvändare använder rubriker och etiketter som sidans innehållsförteckning — JAWS-användare trycker H för att hoppa rubrik till rubrik, och formulärläge läser etiketter högt när varje fält får fokus. Vaga texter bryter hela denna navigeringsmodell.
Framgångskriteriet kräver inte att rubriker ska finnas överallt, bara att de som finns är beskrivande. (För när rubriker krävs, se 2.4.10 på AAA-nivå.)
Hur man uppfyller det
- Skriv rubriker som namnger avsnittet, inte designavsikten:
"Leveransadress"inte"Avsnitt 2","Vanliga frågor"inte"Mer info". - Para ihop varje formulärkontroll med en synlig
<label>vars text beskriver inmatningen. Undvik platshållare-som-etikett, som försvinner vid inmatning. - För visuellt dolda etiketter (sökruta, ikonknappar), använd
aria-labeleller en.visually-hidden-klass, men gör etiketten specifik. - När två rubriker på en sida genuint täcker samma ämne (t.ex. två “Kommentarer”-avsnitt på ett forum-index), lägg till disambiguerande kontext:
"Kommentarer den 14 juli","Kommentarer den 15 juli". - Granska varje rubrik eller etikett som är tre ord eller kortare — det är där vaghet samlas.
Vanliga misslyckanden
- “Information,” “Detaljer,” “Mer,” “Avsnitt,” “Formulär,” används som rubriker utan ytterligare kontext.
- Formuläretiketter som “Fält 1,” “Inmatning,” “Skriv här,” eller ingen etikett alls (enbart platshållare).
- Kortrutnätsrubriker som alla lyder “Läs mer” för att de konverterades från uppmaningsknappar vid en malländring.
- Sökresultatsida där varje resultatrubrik bokstavligen är ordet “Resultat.”
- Tabeller där kolumnrubriker är “Kol 1,” “Kol 2” istället för “Datum,” “Belopp,” “Status.”
Varför det spelar roll
I WebAIM:s undersökningar av skärmläsaranvändare är navigering via rubriker konsekvent den vanligaste strategin för att orientera sig på en ny sida — vanligare än att läsa uppifrån och ned. Vaga rubriker förstör den kartan. Vaga etiketter förstör formulär: en användare hamnar på en kontroll som bara säger “inmatning” och måste backa för att läsa omgivande text, som formulärläge ofta döljer.