ARIA-roller och attribut
Använd landmark-roller, live regions och aria-*-attribut för att förbättra komponenter där inbyggd HTML inte räcker till.
ARIA-roller och attribut är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Vad är ARIA?
ARIA (Accessible Rich Internet Applications) är en uppsättning HTML-attribut som beskriver elementens roll, tillstånd och egenskaper för hjälpmedel. Det är en brygga för anpassade komponenter som inte kan uttryckas med inbyggd HTML.
Första regeln för ARIA: använd inte ARIA
Om ett inbyggt element gör det du behöver ska du använda det. <button> är bättre än <div role="button">. Felaktigt använd ARIA är värre än ingen ARIA alls — det får saker att låta tillgängliga samtidigt som användarna lämnas utan hjälp.
Kategorier av ARIA-attribut
Tre kategorier: roller (vad något är), egenskaper (relativt statiska — aria-label, aria-describedby) och tillstånd (dynamiska — aria-expanded, aria-pressed, aria-checked).
Landmärkesroller
Identifiera sidans viktigaste områden. De flesta har motsvarande HTML5-element, och du bör föredra dessa.
<!-- 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 och aria-labelledby
aria-label: ange ett tillgängligt namn med en sträng. aria-labelledby: hänvisa till ett annat elements text som namn. Använd detta när synlig text saknas eller inte räcker till.
<!-- 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 för ledtrådar
aria-describedby kopplar ett element till en längre beskrivning. Det är användbart för ledtexter i formulär, felmeddelanden och verktygstips.
<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 för utfällbart innehåll
Knappar som visar eller döljer en panel ska ange 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 > Billing to cancel.
</div>aria-pressed för växlingsknappar
Knappar med på/av-tillstånd (mute, fetstil) använder aria-pressed.
<button aria-pressed="true" onclick="toggleBold()">
Bold
</button>Live-regioner: aria-live
Dynamiskt uppdaterat innehåll (notiser, sökresultat, felsammanfattningar) bör finnas i en live-region så att skärmläsare meddelar ändringarna. polite väntar på en paus, medan assertive avbryter.
<!-- 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>Kortform för role="alert"
role="alert" är en kortform för en assertiv live-region med aria-atomic. Använd den sparsamt — varje avisering avbryter användaren.
aria-hidden för dekorativt innehåll
aria-hidden="true" tar bort ett element från tillgänglighetsträdet. Använd det på dekorativa ikoner bredvid textetiketter — annars meddelar skärmläsare dem flera gånger.
<button>
<svg aria-hidden="true" focusable="false">...</svg>
Save
</button>Testa med en skärmläsare
Det enda sättet att veta om ARIA fungerar är att testa. VoiceOver (macOS/iOS, kostnadsfritt), NVDA (Windows, kostnadsfritt), TalkBack (Android, kostnadsfritt). Tio minuter med VoiceOver avslöjar mer än vilket granskningsverktyg som helst.
Snabb kontroll
Vilket ARIA-attribut ska du ange för en ikonknapp som saknar en synlig textetikett?
Sammanfattning: ARIA
ARIA beskriver roller, egenskaper och tillstånd för hjälpmedel. Föredra inbyggd HTML innan du använder ARIA. aria-label/aria-labelledby ger tillgängliga namn. aria-describedby används för ledtrådar. aria-expanded/aria-pressed används för växlingsknappar. aria-live används för dynamiska meddelanden. aria-hidden används för dekorativt innehåll. Testa alltid med en riktig skärmläsare.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”ARIA-roller och attribut” gratis?
Ja – hela texten till ”ARIA-roller och attribut” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”ARIA-roller och attribut”?
Använd landmark-roller, live regions och aria-*-attribut för att förbättra komponenter där inbyggd HTML inte räcker till. Ni övar på Frontend Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Frontend Academy?
Du behöver inga förkunskaper. Utbildningen i Frontend Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”ARIA-roller och attribut”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Frontend Academy-lektionen?
Ja. Varje Frontend Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- WCAG-nivåerna A AA AAA
- Semantisk HTML som grund
- ARIA-roller och attribut
- Tangentbordsnavigering och fokushantering