ARIA-labels: När, var och hur (utan att förstöra din UX)

Det finns en gyllene regel inom digital tillgänglighet: 'No ARIA is better than bad ARIA.' Felaktigt implementerade ARIA-attribut kan göra upplevelsen värre för skärmläsaranvändare, inte bättre.

Många utvecklare strösslar aria-label på element i tron att det gör sajten mer tillgänglig. I själva verket introducerar detta ofta problem – som att skriva över befintlig tillgänglig text eller skapa motstridiga meddelanden.

I denna guide reder vi ut skillnaden mellan de vanligaste ARIA-attributen och visar exakt när du ska använda dem. Vi går igenom verkliga kodexempel och de vanligaste misstagen vi ser på svenska sajter.

De tre viktigaste ARIA-attributen

Det finns massor av ARIA-attribut, men dessa tre är de du kommer använda oftast:

aria-label – Definierar en textetikett direkt på elementet. Ersätter helt elementets synliga text för skärmläsare.

aria-labelledby – Pekar på ID:t av ett annat element vars text ska användas som etikett. Refererar till synlig text på sidan.

aria-describedby – Lägger till en extra beskrivning utöver etiketten. Läses upp efter etiketten som kompletterande information.

Den viktigaste skillnaden: aria-label ersätter synlig text, medan aria-labelledby refererar till synlig text.

aria-label: För element utan synlig text

Använd aria-label när ett element saknar synlig textetikett. Det vanligaste fallet är ikonknappar:

<button aria-label="Stäng"><svg>...</svg></button>

Utan aria-label skulle skärmläsaren bara säga 'knapp' – användaren har ingen aning om vad knappen gör. Med attributet läses 'Stäng, knapp' upp.

Andra bra användningsfall:

Kom ihåg: Om knappen redan har synlig text, behövs INTE aria-label. Det ersätter den synliga texten, vilket kan skapa förvirring om de inte matchar.

Tumregel: Använd aria-label endast när elementet saknar synlig textetikett. Annars, lita på den synliga texten.

aria-labelledby: Referera till befintlig text

Använd aria-labelledby när etiketten redan finns på sidan som synlig text. Detta är oftast bättre än aria-label eftersom:

Vanligt exempel – modal/dialog:

<div role="dialog" aria-labelledby="modal-title">

  <h2 id="modal-title">Bekräfta beställning</h2>

  ...

</div>

Skärmläsaren annonserar: 'Bekräfta beställning, dialogruta'

Annat exempel – formulärsektion:

<fieldset aria-labelledby="shipping-heading">

  <h3 id="shipping-heading">Leveransadress</h3>

  ...

</fieldset>

Du kan också kombinera flera ID:n separerade med mellanslag för att bygga en sammansatt etikett.

aria-describedby: Kompletterande information

Medan aria-label och aria-labelledby definierar vad elementet är, ger aria-describedby extra information om det.

Vanligaste användningen – formulärinstruktioner:

<label for="password">Lösenord</label>

<input type="password" id="password" aria-describedby="pwd-help">

<p id="pwd-help">Minst 8 tecken, en siffra och ett specialtecken</p>

Skärmläsaren säger: 'Lösenord, textruta, Minst 8 tecken, en siffra och ett specialtecken'

Felmeddelanden:

<input type="email" aria-describedby="email-error" aria-invalid="true">

<p id="email-error" class="error">Ange en giltig e-postadress</p>

Skillnaden mot aria-labelledby är att beskrivningen läses upp som tilläggsinformation, inte som elementets primära namn.

Vanliga misstag att undvika

1. Dubbel etikettering

<button aria-label="Skicka">Skicka formulär</button> ❌

Här skriver aria-label över den synliga texten 'Skicka formulär'. Skärmläsaren säger bara 'Skicka'. Ta bort aria-label.

2. Tomma länkar/knappar med bara aria-label

Även om skärmläsare läser aria-label, förblir elementet visuellt tomt. Användare med kognitiva funktionsnedsättningar eller de som zoomar ser ingenting.

3. Felstavade ID:n

aria-labelledby="moddal-title" när ID:t är modal-title ❌

Inget felmeddelande visas – attributet ignoreras tyst och skärmläsaren får ingen etikett.

4. aria-label på element som inte stöder det

aria-label fungerar på interaktiva element och landmarker. På en vanlig <div> eller <span> ignoreras det. Lägg till en role eller byt till semantiskt element.

5. Överse med native HTML

Innan du når efter ARIA, fråga: Kan native HTML lösa problemet? En <label> kopplad till en <input> är alltid bättre än aria-labelledby.

Prioritetsordningen för accessible name

När ett element har flera källor för sitt tillgängliga namn, använder webbläsaren följande prioritet:

Det betyder att aria-labelledby alltid vinner, även om elementet har synlig text. Detta kan orsaka oväntade resultat om du inte är medveten om det.

Verktyg för att testa: Använd Chrome DevTools Accessibility-panelen för att se exakt vad 'accessible name' beräknas till för varje element.

Best practices sammanfattat

✅ Använd semantisk HTML först – <label>, <button>, <nav>, <main> etc. ger tillgänglighet utan ARIA.

✅ Använd aria-label för ikonknappar – När det inte finns synlig text.

✅ Använd aria-labelledby för dialoger, regioner och formulärsektioner – Referera till synliga rubriker.

✅ Använd aria-describedby för instruktioner och felmeddelanden – Kompletterande information som inte är namnet.

❌ Använd INTE aria-label när synlig text finns – Det ersätter, inte kompletterar.

❌ Lita INTE på title-attribut – Många skärmläsare ignorerar det, och det visas bara vid hover (otillgängligt för tangentbord).