Egenskap Relation

`aria-label`

Tillhandahåller ett tillgängligt namn som en textsträng när ingen synlig text finns. Använd bara när det saknas en synlig etikett på skärmen — om synlig text finns, föredra aria-labelledby så att det upplästa namnet stämmer med det användaren ser.

När ska det användas

När en kontroll saknar synlig text — ikonknappar, sökfält med enbart ett förstoringsglasssymbol, stäng (×)-knappar, ikoner för sociala medier. Strängen i aria-label blir elementets tillgängliga namn, och skärmläsare meddelar det i stället för eventuell inre text.

Det inbyggda HTML-alternativet är <label>-elementet för formulärfält, eller synlig knapptext. Välj aria-label bara när inget av dessa är möjligt.

Hur det fungerar

Tar en enskild sträng. Vad du än sätter i aria-label åsidosätter synlig text inuti elementet — det tillgängliga namnet är vad AT-användare hör, men det är osynligt för seende användare. Den asymmetrin är källan till de flesta fel med detta attribut.

Strängen översätts inte automatiskt. Om din webbplats stöder flera språk måste aria-label-värdet lokaliseras som vilket annat gränssnittssträngar som helst. Skärmläsare behandlar också värdet som ren text — ingen HTML, inga radbrytningar, ingen uppmärkning.

Om elementet har synlig text, föredra aria-labelledby som pekar på den texten, så att den synliga etiketten och det tillgängliga namnet förblir synkroniserade.

Vanliga fel

Att sätta aria-label="Klicka här" på en knapp som redan säger “Skicka beställning” — den synliga texten är nu dold för AT, och användaren hör fel sak.
Att bryta mot WCAG 2.5.3 Label in Name: aria-label="Skicka" på en knapp vars synliga text säger “Skicka beställning” innebär att en röststyrningsanvändare inte kan säga “klicka Skicka beställning” för att aktivera den.
Att lägga till aria-label på ett icke-interaktivt element som <div> eller <span> — de flesta webbläsare ignorerar det eftersom elementet saknar en roll som stöder ett namn.
Att lämna värdet oöversatt när resten av sidan är på ett annat språk.
Att använda aria-label i stället för en riktig <label> på ett formulärfält, vilket förstör möjligheten att klicka på etiketten för att fokusera fältet.
Att stoppa instruktioner i aria-label i stället för aria-describedby. Namnet ska vara kort; hjälptext placeras i beskrivningen.

Exempel

<!-- Icon-only button: no visible text, aria-label is required -->
<button type="button" aria-label="Close dialog">
  <svg aria-hidden="true" focusable="false">…</svg>
</button>

<!-- Visible text + icon: do NOT use aria-label here -->
<button type="button">
  <svg aria-hidden="true" focusable="false">…</svg>
  Close dialog
</button>