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 o passare ai link con Tab.

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

Inert 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.

Accessibilità migliore

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 dell'albero 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 riguarda elementi come un riquadro, che aggiunge elementi al DOM non sempre visibili all'utente. Con inert puoi assicurarti che, mentre gli elementi secondari del riquadro siano fuori dallo schermo, un utente con tastiera non possa interagire accidentalmente con il riquadro.

Elementi DOM non interattivi

Un altro problema comune di accessibilità si verifica quando il design dell'interfaccia utente è visibile o parzialmente visibile, ma chiaramente non interattivo. Ad esempio, durante il caricamento della pagina, l'invio di un modulo o se è aperta una finestra di dialogo in overlay.

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 operazione è 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. Ti consigliamo di contrassegnare chiaramente le parti del DOM attive e quelle inattive.

[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 piccoli 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 stato attivo e di clic. Per le tecnologie per la disabilità, vengono bloccati anche i tabulatori e la rilevabilità. Il browser potrebbe anche ignorare la ricerca di pagine e la selezione di testo nell'elemento.

Il valore predefinito di inert è false.