Stato Stato globale

`aria-hidden`

Rimuove un elemento e tutti i suoi discendenti dall'albero di accessibilità. Gli utenti vedenti continuano a visualizzare l'elemento; la tecnologia assistiva non vi accede mai. Da riservare ai contenuti decorativi; non va mai applicato a un controllo che può ricevere il focus.

Quando usarlo

Su contenuti decorativi che non aggiungono nulla per gli utenti di screen reader — solitamente icone già affiancate da un’etichetta testuale, separatori, elementi grafici di sfondo o testo duplicato presente esclusivamente per ragioni di layout. Contrassegnare questi elementi con aria-hidden="true" mantiene l’albero di accessibilità concentrato sui contenuti significativi.

Confronto con meccanismi analoghi:

aria-hidden="true" — visibile agli utenti vedenti, invisibile alla tecnologia assistiva. L’elemento continua a occupare spazio nel layout.
CSS display: none e l’attributo HTML hidden — invisibile a tutti (utenti vedenti e tecnologia assistiva). L’elemento non viene renderizzato.
CSS visibility: hidden — invisibile a tutti, ma l’elemento occupa comunque spazio nel layout.
L’attributo inert — l’elemento e i suoi discendenti non possono ricevere il focus, gli eventi click vengono soppressi, ma rimangono nell’albero di accessibilità (a differenza di aria-hidden). È lo strumento corretto per i fondali dei modal e le schermate non attive.

È fondamentale non applicare mai aria-hidden="true" a un elemento che è — o contiene — un controllo che può ricevere il focus. Gli utenti da tastiera possono comunque arrivarvi tramite Tab, ma il loro screen reader non lo annuncerà. Si ritrovano su un controllo a loro invisibile. Questo è uno dei problemi più comuni segnalati da axe-core.

Come mantenerlo sincronizzato

I valori validi sono "true", "false" e "undefined". Il valore utile è "true"; "false" esiste per sovrascrivere un aria-hidden ereditato da un antenato, il che è quasi mai necessario nella pratica.

Lo stato può essere statico (un’icona sempre decorativa) o dinamico. Se si attiva/disattiva aria-hidden su una regione — ad esempio, nascondendo l’applicazione principale mentre un modal è aperto — occorre sincronizzarlo con lo stato visivo effettivo e abbinarlo a inert affinché la regione non possa nemmeno ricevere il focus.

Errori frequenti

aria-hidden="true" su un elemento che può ricevere il focus — il problema più segnalato da axe-core.
Usare aria-hidden per nascondere testo visibile che si desidera non venga letto dagli screen reader. Occorre rimuovere il testo o spostarlo fuori dal DOM.
Dimenticare aria-hidden="true" su un’icona puramente decorativa accanto a un pulsante con etichetta — lo screen reader annuncia il nome accessibile dell’icona in aggiunta all’etichetta del pulsante.
Impostare aria-hidden="true" sull’elemento <body> o <main> per bloccare il contenuto di sfondo dietro un modal, senza usare anche inert — il focus da tastiera può comunque sfuggire.
Usare aria-hidden="false" per «mostrare» qualcosa nascosto tramite CSS. Il CSS continua a nasconderlo.

Esempio

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