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 principali e quelli delle tecnologie per la disabilità.

Inerte è un comportamento predefinito negli elementi della finestra di dialogo, ad esempio quando utilizzi showModal per aprire una finestra di dialogo in cui gli utenti possono effettuare una selezione e poi ignorarla dallo schermo. Dopo aver aperto un <dialog>, il resto della pagina diventa inerte, Ad esempio, non puoi più fare clic o passare da un tasto Tab ai link.

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

Inert significa mancanza di capacità di movimento, quindi quando contrassegni qualcosa di inerte, rimuovi il movimento o l'interazione da quegli 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 per il secondo elemento <div> contenente button2, in modo che tutti i contenuti all'interno di questo <div>, inclusi il pulsante e l'etichetta, non possano essere attivati o selezionati.

L'attributo inert è particolarmente utile per l'accessibilità, in particolare per evitare il "blocco della messa a fuoco".

Migliore accessibilità

Le linee guida per l'accessibilità dei contenuti web richiedono una gestione degli elementi in evidenza e un ordine di messa a fuoco ragionevole e utilizzabile. Sono incluse sia la rilevabilità che l'interattività. In precedenza, la rilevabilità poteva essere eliminata con aria-hidden="true", ma l'interattività è più difficile.

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

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

• Quando un elemento fa parte dell'albero DOM, ma fuori schermo o nascosto.
• Quando un elemento fa parte dell'albero DOM, ma non deve essere interattivo.

Elementi DOM fuori schermo o nascosti

Un problema comune di accessibilità riguarda elementi come un cassetto, che aggiungono al DOM elementi che non sono 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 "trap" l'elemento attivo sulla parte della pagina interattiva.

Intrappolamento della messa a fuoco

Il rilevamento della messa a fuoco è un concetto centrale di una buona accessibilità dell'interfaccia utente. Devi assicurarti che lo stato attivo dello screen reader sia sugli elementi dell'interfaccia utente interattivi e che sappia quando un elemento blocca l'interattività. In questo modo, inoltre, puoi evitare che gli screen reader non autorizzati si coprano dietro un overlay di pagina o che inviino accidentalmente un modulo mentre è ancora in corso l'elaborazione del primo invio.

Utilizzando inert, puoi assicurarti che gli unici contenuti rilevabili siano raggiungibili. È utile per:

• Blocchi di elementi quali una finestra di dialogo modale, il menu di messa a fuoco o la barra di navigazione laterale.
• Un carosello con elementi non attivi.
• Contenuti del modulo non applicabili (ad esempio, dissolvenza in uscita e disattivazione dei campi "Indirizzo di spedizione" quando è stata selezionata la casella di controllo "Uguale all'indirizzo di fatturazione").
• Disattivazione dell'intera UI in uno stato incoerente.

Indica visivamente gli elementi inert

Per impostazione predefinita, non viene fornita alcuna indicazione visiva dello stato di inerte 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 visualizzare tutte le parti di una pagina contemporaneamente. Ad esempio, gli utenti di screen reader, dispositivi di piccole dimensioni o con lenti d'ingrandimento e persino gli utenti che utilizzano finestre particolarmente piccole potrebbero non essere in grado di vedere la parte attiva di una pagina e potrebbero sentirsi delusi se le sezioni inerte non sono palesemente inerti. Per i controlli individuali, l'attributo disattivato è probabilmente più appropriato.

Quali interazioni e movimenti vengono bloccati?

Per impostazione predefinita, inert blocca gli eventi di attivazione e clic. Per le tecnologie per la disabilità, verranno bloccati anche il tabulazione 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.