L'attributo inerte

Emma Twersky

L'attributo inert è un attributo HTML globale che semplifica la rimozione e il ripristino degli eventi di input utente per un elemento, inclusi gli eventi di messa a fuoco e quelli delle tecnologie per la disabilità.

Inert è un comportamento predefinito negli elementi dialog, ad esempio quando utilizzi showModal per aprire una finestra di dialogo in cui gli utenti possono effettuare una selezione e poi chiuderla dalla schermata. Dopo aver aperto un <dialog>, il resto della pagina diventa inerte, ad esempio non puoi più fare clic sui link o passare da un link all'altro con Tab.

Puoi utilizzare l'attributo inert per ottenere lo stesso comportamento in altri elementi.

Inerte significa privo della capacità di muoversi, quindi quando contrassegni qualcosa come inerte,rimuovi il movimento o l'interazione da questi elementi DOM.

<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>

In questo caso, inert è stato dichiarato nel secondo elemento <div> contenente button2, quindi tutti i contenuti contenuti in questo <div>, inclusi il pulsante e l'etichetta, non possono ricevere lo stato attivo o essere selezionati.

L'attributo inert è particolarmente utile per l'accessibilità, in particolare per evitare il blocco dell'attenzione.

Migliore accessibilità

Le Linee guida per l'accessibilità dei contenuti web richiedono la gestione dell'attenzione e un ordine di attivazione sensato e utilizzabile. Sono incluse sia la visibilità sia l'interattività. In precedenza, la visibilità poteva essere soppressa con aria-hidden="true", ma l'interattività è più difficile.

inert consente agli sviluppatori di rimuovere un elemento dall'ordine delle schede e dall'albero di accessibilità. In questo modo puoi controllare sia la rilevabilità che l'interattività e creare pattern più utilizzabili e accessibili.

Esistono due casi d'uso principali per l'applicazione di inert a un elemento per migliorare l'accessibilità:

• Quando un elemento fa parte della struttura DOM, ma è fuori schermo o nascosto.
• Quando un elemento fa parte della struttura DOM, ma non deve essere interattivo.

Elementi DOM fuori dallo schermo o nascosti

Un problema di accessibilità comune è quello di elementi come un riquadro a scomparsa, che aggiungono elementi al DOM non sempre visibili all'utente. Con inert puoi fare in modo che l'utente della tastiera non possa interagire accidentalmente con gli elementi secondari del riquadro a scomparsa fuori schermo.

Elementi DOM non interattivi

Un altro problema comune di accessibilità riguarda la progettazione di un'interfaccia utente visibile o parzialmente visibile, ma chiaramente non interattiva. ad esempio durante il caricamento della pagina, durante l'invio di un modulo o se, ad esempio, è aperto un overlay di dialogo.

Per offrire la migliore esperienza agli utenti, indica lo stato dell'interfaccia utente e "intrappola" lo stato attivo nella parte della pagina interattiva.

Trapping della messa a fuoco

La prigionia dello stato attivo è un concetto fondamentale per una buona accessibilità dell'interfaccia utente. Devi assicurarti che la messa a fuoco dello screen reader sia sugli elementi dell'interfaccia utente interattivi e che sia consapevole quando un elemento blocca l'interattività. In questo modo, inoltre, gli screen reader non autorizzati non possono accedere dietro un overlay della pagina o inviare accidentalmente un modulo mentre è ancora in corso l'elaborazione del primo invio.

Se utilizzi inert, puoi assicurarti che siano raggiungibili solo i contenuti rilevabili. Questa opzione è utile per:

• Elementi di blocco come una finestra di dialogo modale, un menu che acquisisce il focus o una barra di navigazione laterale.
• Un carosello con elementi non attivi.
• Contenuti del modulo non applicabili (ad esempio, attenuazione e disattivazione dei campi "Indirizzo di spedizione" quando è selezionata la casella di controllo "Uguale all'indirizzo di fatturazione").
• Disattivazione dell'intera UI in uno stato incoerente.

Indicare visivamente gli elementi inert

Per impostazione predefinita, non è presente alcuna indicazione visiva dell'inerzia di un sottoalbero. È consigliabile contrassegnare chiaramente quali parti del DOM sono attive e quali inerte.

[inert], [inert] * {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
  user-select: none;
}

Non tutti gli utenti possono vedere tutte le parti di una pagina contemporaneamente. Ad esempio, gli utenti di screen reader, di dispositivi di piccole dimensioni o con l'ingrandimento e persino gli utenti che utilizzano solo finestre particolarmente piccole potrebbero non essere in grado di vedere la parte attiva di una pagina e potrebbero sentirsi frustrati se le sezioni inattive non sono chiaramente inattive. Per i singoli controlli, l'attributo disabled è probabilmente più appropriato.

Quali interazioni e movimenti sono bloccati?

Per impostazione predefinita, inert blocca gli eventi di messa a fuoco e clic. Per le tecnologie per la disabilità, vengono bloccati anche i tabulatori e la rilevabilità. Il browser potrebbe anche ignorare la ricerca nella pagina e la selezione del testo nell'elemento.

Il valore predefinito di inert è false.