Frontend Academy · Lektion

ARIA-roller og attributter

Anvend landmark-roller, live regions og aria-*-attributter til at forbedre komponenter, hvor native HTML ikke er tilstrækkeligt.

Lektion 3 af 414 trin

ARIA-roller og attributter er en gratis Frontend 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 Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad er ARIA?

ARIA (Accessible Rich Internet Applications) er et sæt HTML-attributter, der beskriver elementers rolle, tilstand og egenskaber for hjælpemiddelteknologier. Det er forbindelsesleddet til brugerdefinerede widgets, som ikke kan udtrykkes med indbygget HTML.

ARIA's første regel: Brug ikke ARIA

Hvis et indbygget element gør det, du har brug for, skal du bruge det. <button> er bedre end <div role="button">. Misbrugt ARIA er værre end ingen ARIA — det får ting til at lyde tilgængelige, mens brugerne stadig lades i stikken.

Kategorier af ARIA-attributter

Der er tre kategorier: roller (hvad noget er), egenskaber (forholdsvis statiske — aria-label, aria-describedby) og tilstande (dynamiske — aria-expanded, aria-pressed, aria-checked).

Landmark-roller

Identificér sidens vigtigste områder. De fleste har tilsvarende HTML5-elementer, og du bør foretrække disse.

<!-- HTML5 (preferred): -->
<nav>...</nav>
<main>...</main>
<aside>...</aside>

<!-- ARIA equivalents (use only when HTML5 won't work): -->
<div role="navigation">...</div>
<div role="main">...</div>
<div role="complementary">...</div>

aria-label og aria-labelledby

aria-label: angiv et tilgængeligt navn med en tekststreng. aria-labelledby: henvis til et andet elements tekst som navn. Brug dem, når der ikke findes synlig tekst, eller når den ikke er tilstrækkelig.

<!-- Icon-only button needs a label: -->
<button aria-label="Close dialog">
  <svg>...</svg>
</button>

<!-- Section labelled by its heading: -->
<section aria-labelledby="settings-title">
  <h2 id="settings-title">Settings</h2>
  ...
</section>

aria-describedby til hjælpetekster

aria-describedby forbinder et element med en længere beskrivelse. Det er nyttigt til hjælpetekster i formularer, fejlmeddelelser og værktøjstip.

<label for="password">Password</label>
<input id="password" type="password" aria-describedby="pw-hint">
<p id="pw-hint">Must be at least 12 characters with a number and symbol.</p>

aria-expanded til visning og skjulning

Knapper, der viser eller skjuler et panel, skal angive aria-expanded = true/false.

<button aria-expanded="false" aria-controls="faq-1" onclick="toggle()">
  How do I cancel?
</button>
<div id="faq-1" hidden>
  Visit Settings &gt; Billing to cancel.
</div>

aria-pressed til til/fra-knapper

Knapper med en til/fra-tilstand, f.eks. lydløs eller fed tekst, skal bruge aria-pressed.

<button aria-pressed="true" onclick="toggleBold()">
  Bold
</button>

Liveområder: aria-live

Dynamisk opdateret indhold, f.eks. notifikationer, søgeresultater og fejloversigter, bør placeres i et liveområde, så skærmlæsere annoncerer ændringerne. polite venter på en pause; assertive afbryder.

<!-- Toast container -->
<div aria-live="polite" aria-atomic="true" id="toast-region"></div>

<!-- Critical alert -->
<div role="alert">Session expired. Please log in again.</div>

role="alert" som kortform

role="alert" er en kortform for et assertivt liveområde med aria-atomic. Brug det med måde — hver alarm afbryder brugeren.

aria-hidden til dekorativt indhold

aria-hidden="true" fjerner et element fra tilgængelighedstræet. Brug det på dekorative ikoner ved siden af tekstlabels — ellers annoncerer skærmlæsere dem overflødigt.

<button>
  <svg aria-hidden="true" focusable="false">...</svg>
  Save
</button>

Afprøv med en skærmlæser

Den eneste måde at vide, om ARIA virker, er at afprøve det. VoiceOver (macOS/iOS, gratis), NVDA (Windows, gratis) og TalkBack (Android, gratis). 10 minutter med VoiceOver afslører mere end noget tilgængelighedsværktøj.

Hurtigt tjek

Hvilken ARIA-attribut skal du angive på en knap, der kun består af et ikon og ikke har nogen synlig tekstlabel?

Besvar den i den interaktive lektion

Opsummering: ARIA

ARIA beskriver rolle, egenskaber og tilstand for hjælpemiddelteknologier. Foretræk indbygget HTML, før du tager ARIA i brug. aria-label/aria-labelledby giver tilgængelige navne. aria-describedby bruges til hjælpetekster. aria-expanded/aria-pressed bruges til til/fra-kontroller. aria-live bruges til dynamiske meddelelser. aria-hidden bruges til dekorativt indhold. Afprøv altid med en rigtig skærmlæser.

Gratis at komme i gang

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: 41
Lektioner: 163

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “ARIA-roller og attributter” gratis?

Ja — hele teksten til “ARIA-roller og attributter” 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 Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “ARIA-roller og attributter”?

Anvend landmark-roller, live regions og aria-*-attributter til at forbedre komponenter, hvor native HTML ikke er tilstrækkeligt. Du øver dig i Frontend 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å Frontend Academy?

Der kræves ingen tidligere erfaring. Frontend 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-roller og attributter”?

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 Frontend Academy-lektion?

Ja. Alle Frontend 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

← Tilbage til Frontend Academy