aria-describedby til ekstra kontekst
Tilknyt hints og hjælp, som læses efter navnet.
aria-describedby til ekstra kontekst er en gratis Web Accessibility Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Web Accessibility Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Web Accessibility Academy-kurset indeholder 4 lektioner i alt.
Ud over navnet
Nogle gange har en kontrol brug for mere end et navn. aria-describedby knytter ekstra kontekst til kontrollen, som en skærmlæser læser efter navnet.
Den refererer til id'er
Ligesom labelledby indeholder aria-describedby id'et på et andet element. Browseren indsætter teksten fra dette element som beskrivelsen.
<input aria-describedby="hint">
<p id="hint">Use 8+ characters</p>Navn først, derefter beskrivelse
En skærmlæser læser navnet først, holder derefter en kort pause og læser så beskrivelsen. Rækkefølgen hjælper brugerne med hurtigt at forstå kontrollen.
Perfekt til tip
Tip til felter, f.eks. regler for format, hører hjemme i aria-describedby, så vejledningen læses automatisk, når feltet får fokus.
<input aria-describedby="fmt">
<p id="fmt">Format: DD/MM/YYYY</p>Det erstatter ikke navnet
En beskrivelse er et supplement. Hvis et element kun har aria-describedby og ikke noget navn, er det stadig reelt uden etiket.
Kombiner flere id'er
Giv aria-describedby flere id'er adskilt af mellemrum, så samler browseren deres tekst. Det er praktisk til et tip sammen med en fejlmeddelelse.
<input aria-describedby="hint err">Fejl er også beskrivelser
Ret aria-describedby mod en valideringsmeddelelse, så fejlen læses højt sammen med feltet i stedet for at stå et andet sted på siden.
<input aria-describedby="err">
<p id="err">Email is required</p>Hold beskrivelser korte
En beskrivelse bør være en kort sætning. Lang tekst i aria-describedby læses helt op hver gang, hvilket hurtigt bliver trættende.
Det forbliver synligt
I modsætning til en skjult etiket forbliver det refererede tip normalt synligt på skærmen, så det samtidig hjælper seende brugere.
Understøttelsen kan variere
De fleste skærmlæsere respekterer aria-describedby, men nogle læser det kun op i bestemte tilstande, så test tippet med en rigtig skærmlæser.
describedby vs labelledby
Brug aria-labelledby til det, en kontrol kaldes, og aria-describedby til ekstra oplysninger om den. De har forskellige formål.
Hurtigt tjek
Du vil have en adgangskoderegel læst op efter feltets navn. Hvilken attribut passer?
Opsamling: Tilføj kontekst
Du har lært, at aria-describedby refererer til id'er, så tip og fejl læses op efter navnet. Det supplerer navnet uden nogensinde at erstatte det. 💬
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “aria-describedby til ekstra kontekst” gratis?
Ja — hele teksten til “aria-describedby til ekstra kontekst” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Web Accessibility Academy-kurset, skal du opgradere til CoddyKit PRO. Web Accessibility Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “aria-describedby til ekstra kontekst”?
Tilknyt hints og hjælp, som læses efter navnet. Du øver dig i Web Accessibility Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Web Accessibility Academy?
Der kræves ingen tidligere erfaring. Web Accessibility Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “aria-describedby til ekstra kontekst”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Web Accessibility Academy-lektion?
Ja. Alle Web Accessibility Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Beregning af det tilgængelige navn forklaret
- aria-label vs aria-labelledby
- aria-describedby til ekstra kontekst
- Almindelige navngivningsfejl, der gør kontroller tavse