aria-label kontra aria-labelledby
Velg mellom et innebygd navn og et navn det refereres til.
aria-label kontra aria-labelledby er en gratis leksjon i Web Accessibility Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Web Accessibility Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Web Accessibility Academy inneholder totalt 4 leksjoner.
To måter å navngi på
Når innebygd navngivning ikke er nok, har du to ARIA-verktøy: aria-label for en innebygd streng, og aria-labelledby for å peke på eksisterende tekst.
aria-label inneholder en streng
Bruk aria-label når det ikke finnes synlig tekst å hente navnet fra. Du skriver navnet som skal leses opp, direkte på selve elementet.
<button aria-label="Search">🔍</button>aria-labelledby inneholder en ID
Bruk aria-labelledby når synlig tekst på siden kan fungere som navnet. Verdien er id-en til dette elementet, ikke en streng.
<h2 id="sec">Billing</h2>
<section aria-labelledby="sec">...</section>Foretrekk synlig tekst
Bruk aria-labelledby først. Når du gjenbruker tekst på skjermen, holdes det oppleste navnet og det synlige navnet automatisk synkronisert.
labelledby kan kombinere ID-er
Angi flere ID-er atskilt med mellomrom i aria-labelledby, så setter nettleseren sammen teksten deres i denne rekkefølgen til ett navn.
<span aria-labelledby="verb noun">Go</span>
<span id="verb">Delete</span> <span id="noun">file</span>labelledby slår label
Hvis begge finnes, vinner aria-labelledby. Nettleseren ignorerer aria-label fullstendig, så ikke forvent at de slås sammen.
Et element kan navngi seg selv
Med aria-labelledby kan et element referere til sin egen id. Dette er nyttig når et område skal navngis med teksten i den synlige overskriften.
label er usynlig
En aria-label vises aldri på skjermen. Den endrer bare det hjelpemiddelteknologi kunngjør, så seende brukere ser ingen forskjell.
Vær oppmerksom på oversettelsesfellen
En aria-label er ren tekst som sideoversettere ofte hopper over, mens labelledby gjenbruker synlig innhold som faktisk blir oversatt.
ID-er må stemme nøyaktig
En aria-labelledby-id må stemme med en faktisk element-id. En skrivefeil gjør i stillhet at elementet ikke får noe beregnet navn i det hele tatt.
Velg ut fra kilden til sannheten
Spør hvor navnet finnes. Hvis det allerede er synlig på skjermen, bruker du aria-labelledby; hvis det bare finnes for hjelpemiddelteknologi, bruker du aria-label.
Hurtigsjekk
En seksjon viser allerede en h2-overskrift. Hvordan bør du navngi seksjonen?
Oppsummering: label eller labelledby
Du har lært å bruke aria-labelledby for eksisterende synlig tekst og aria-label for usynlige innebygde navn, uten å forvente at de kombineres. 🎯
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 30
- Leksjoner
- 120
Ofte stilte spørsmål
Er leksjonen «aria-label kontra aria-labelledby» gratis?
Ja – hele teksten i «aria-label kontra aria-labelledby» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Web Accessibility Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Web Accessibility Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «aria-label kontra aria-labelledby»?
Velg mellom et innebygd navn og et navn det refereres til. Du øver på Web Accessibility Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Web Accessibility Academy?
Ingen tidligere erfaring er nødvendig. Web Accessibility Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «aria-label kontra aria-labelledby»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Web Accessibility Academy-leksjonen?
Ja. Alle Web Accessibility Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Beregning av tilgjengelig navn, forklart
- aria-label kontra aria-labelledby
- aria-describedby for ekstra kontekst
- Vanlige navnefeil som gjør kontroller stumme