Tillstånd Globalt tillstånd

`aria-hidden`

Tar bort ett element och alla dess ättlingar från tillgänglighetsträdet. Seende användare ser fortfarande elementet; hjälpmedelsteknik når det aldrig. Reservera för dekorativt innehåll; applicera aldrig på en fokusbar kontroll.

När ska det användas

På dekorativt innehåll som inte tillför något för skärmläsaranvändare — vanligtvis ikoner som redan sitter bredvid en textetikett, avdelare, bakgrundsgrafik eller duplicerad text som enbart finns av layoutskäl. Att markera dessa element med aria-hidden="true" håller tillgänglighetsträdet fokuserat på meningsfullt innehåll.

Jämfört med liknande mekanismer:

aria-hidden="true" — synligt för seende användare, osynligt för hjälpmedelsteknik. Elementet upptar fortfarande layoututrymme.
CSS display: none och HTML-attributet hidden — osynligt för alla (seende användare och hjälpmedelsteknik). Elementet renderas inte alls.
CSS visibility: hidden — osynligt för alla, men elementet upptar fortfarande layoututrymme.
Attributet inert — elementet och dess ättlingar är ofokuserbara, klickhändelser undertrycks, men de finns kvar i tillgänglighetsträdet (till skillnad från aria-hidden). Rätt verktyg för modala bakgrunder och bortdirigeringsskärmar.

Det är kritiskt att aldrig applicera aria-hidden="true" på ett element som är — eller innehåller — en fokusbar kontroll. Tangentbordsanvändare kan fortfarande tabba till det, men skärmläsaren meddelar det inte. De hamnar på en kontroll som är osynlig för dem. Det här är ett av de vanligaste felen som axe-core rapporterar.

Hur det hålls synkroniserat

Giltiga värden är "true", "false" och "undefined". Det användbara är "true"; "false" finns för att åsidosätta ett aria-hidden från ett förälderelement, vilket nästan aldrig behövs i praktiken.

Tillståndet kan vara statiskt (en ikon som alltid är dekorativ) eller dynamiskt. Om du växlar aria-hidden på en region — till exempel döljer huvudappen medan en modal är öppen — synkronisera det med det faktiska visuella tillståndet och kombinera med inert så att regionen också blir ofokuserbar.

Vanliga fel

aria-hidden="true" på ett fokusbart element — det mest rapporterade axe-core-felet.
Att använda aria-hidden för att dölja synlig text som du inte vill att skärmläsare ska läsa. Ta antingen bort texten eller flytta den ur DOM:en.
Att glömma aria-hidden="true" på en rent dekorativ ikon bredvid en etiketterad knapp — skärmläsaren meddelar ikonens tillgängliga namn utöver knapptexten.
Att sätta aria-hidden="true" på <body> eller <main> för att låsa bakgrundsinnehåll bakom en modal, utan att också använda inert — tangentbordsfokus kan fortfarande fly.
Att använda aria-hidden="false" för att “visa” något som är dolt av CSS. CSS döljer det ändå.

Exempel

<button type="button">
  <svg aria-hidden="true" focusable="false" width="16" height="16">…</svg>
  Save
</button>