ARIA och tillgänglighet: label, role och aria-*
Koppla etiketter till kontroller, använd ARIA-roller där det behövs och använd aria-label och aria-describedby som stöd för skärmläsare.
ARIA och tillgänglighet: label, role och aria-* är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 2 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.
Varför ARIA?
ARIA (Accessible Rich Internet Applications) är en uppsättning HTML-attribut som kommunicerar UI-komponenters syfte, tillstånd och egenskaper till hjälpmedel som skärmläsare — särskilt för anpassade widgets som saknar motsvarighet i HTML.
ARIAs första regel
Använd inte ARIA om ett inbyggt HTML-element eller -attribut kan göra jobbet. <button> är alltid bättre än <div role="button">. Inbyggd HTML ger tillgänglighet utan extra arbete.
Landmark-roller
ARIA-landmarkroller låter användare av skärmläsare hoppa till delar av sidan. De flesta antyds av semantisk HTML: <main> → role=main, <nav> → role=navigation. Lägg bara till explicita roller när ett semantiskt element inte används.
<div role="main">...</div> <!-- prefer <main> -->
<div role="navigation">...</div> <!-- prefer <nav> -->
<div role="banner">...</div> <!-- prefer <header> at page level -->aria-label
aria-label tillhandahåller ett osynligt tillgängligt namn för ett element. Använd det när det saknas en synlig textetikett att hänvisa till. Det är vanligt för ikonknappar.
<button aria-label="Close dialog">×</button>
<a href="/rss.xml" aria-label="Subscribe to RSS feed">
<img src="rss-icon.svg" alt="">
</a>aria-labelledby
aria-labelledby använder texten i ett annat element som etikett genom en ID-referens. Det föredras framför aria-label när det redan finns en synlig etikett.
<h2 id="billing-title">Billing Information</h2>
<form aria-labelledby="billing-title">
...
</form>aria-describedby
aria-describedby hänvisar till ytterligare beskrivande text — till exempel ett felmeddelande eller en ledtext — som kompletterar etiketten. Skärmläsare läser först upp etiketten och sedan beskrivningen.
<input id="pass" type="password" aria-describedby="pass-hint">
<p id="pass-hint">Must be at least 12 characters with a symbol.</p>aria-expanded och aria-haspopup
Dynamiska widgets behöver tillståndsattribut. aria-expanded anger om en utfällningswidget (accordion, dropdown) är öppen eller stängd. Uppdatera det i JavaScript när tillståndet ändras.
<button aria-expanded="false" aria-controls="menu" id="menu-btn">Menu</button>
<ul id="menu" hidden>...</ul>
<!-- On toggle: -->
btn.setAttribute('aria-expanded', 'true');
menu.removeAttribute('hidden');aria-hidden
aria-hidden="true" tar bort ett element och alla dess underordnade element från tillgänglighetsträdet. Använd det för dekorativa element, till exempel SVG-ikoner som redan har en etikett via synlig text.
<button>
<svg aria-hidden="true" focusable="false">...</svg>
Save Draft
</button>Live-regioner: aria-live
aria-live talar om för skärmläsare att meddela ändringar i detta område. polite väntar tills användaren har avslutat sin pågående åtgärd. assertive avbryter omedelbart (använd sparsamt).
<div aria-live="polite" aria-atomic="true">
<!-- Status messages announced when updated -->
Form saved successfully.
</div>role="alert"
role="alert" innebär implicit aria-live=assertive. Infoga felmeddelanden eller viktiga aviseringar i ett element med denna roll, så meddelar skärmläsare dem omedelbart.
const errorEl = document.querySelector('[role="alert"]');
errorEl.textContent = 'Email is required.'; // announced immediatelyTillgängliga formulärfel
När ett fält innehåller ett fel: använd aria-invalid="true", länka felmeddelandet med aria-describedby och uppdatera innehållet i role="alert". Denna metod i tre delar säkerställer att skärmläsare förmedlar all nödvändig information.
<input id="email" type="email" aria-invalid="true" aria-describedby="email-error">
<p id="email-error" role="alert">Please enter a valid email address.</p>Snabb kontroll
Vilket ARIA-attribut tillhandahåller det tillgängliga namnet för ett element när det saknas en synlig textetikett?
Sammanfattning: ARIA-grunderna
Föredra inbyggd HTML framför ARIA. aria-label för ikonknappar. aria-labelledby för att hänvisa till synliga etiketter. aria-describedby för ledtexter och fel. aria-expanded för utfällningswidgets. aria-hidden för dekorativt innehåll. aria-live för dynamiska statusuppdateringar. aria-invalid + role=alert för formulärfel.
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 och tillgänglighet: label, role och aria-*” gratis?
Ja – hela texten till ”ARIA och tillgänglighet: label, role och aria-*” 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 och tillgänglighet: label, role och aria-*”?
Koppla etiketter till kontroller, använd ARIA-roller där det behövs och använd aria-label och aria-describedby som stöd för skärmläsare. 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 2 av 4.
Hur lång tid tar lektionen ”ARIA och tillgänglighet: label, role och aria-*”?
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
- Formulärkontroller: input-typer, select och textarea
- ARIA och tillgänglighet: label, role och aria-*
- Semantisk HTML5: semantik kontra div-soppa
- Attribut för formulärvalidering