L'attributo inert è un attributo HTML globale che semplifica il modo in cui rimuovere e ripristinare gli eventi di input utente per un elemento, inclusi eventi di interesse ed eventi delle tecnologie per la disabilità.
Inerte è 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 ignorarla dalla schermata.
Dopo aver aperto un elemento <dialog>, il resto della pagina si inerte, ad esempio non puoi più fare clic o premere il tasto Tab per accedere ai link.
Puoi utilizzare l'attributo inert per ottenere lo stesso comportamento su altri elementi.
Inerte indica l'assenza della capacità di muoversi, quindi quando contrassegni qualcosa di inerte, viene rimosso 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>
Qui, inert è stato dichiarato per il secondo <div> elemento contenente button2,
quindi tutti i contenuti all'interno di questo <div>, inclusi il pulsante e l'etichetta, non possono essere selezionati o essere attivati.
L'attributo inert è particolarmente utile per l'accessibilità,
in particolare per impedire l'acquisizione della messa a fuoco.
Migliore accessibilità
Le Linee guida sull'accessibilità dei contenuti web richiedono una gestione dell'attenzione e un ordine di messa a fuoco ragionevole e utilizzabile. Questo include sia la rilevabilità che l'interattività. In precedenza, la rilevabilità poteva essere soppressa 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à. Ciò consente di controllare sia la rilevabilità che l'interattività, oltre alla possibilità di creare pattern più utilizzabili e accessibili.
Esistono due casi d'uso principali per applicare 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 di accessibilità comune riguarda gli elementi come un riquadro a scomparsa, che aggiungono al DOM elementi non sempre visibili all'utente.
Con inert puoi assicurarti che, anche se gli elementi secondari del riquadro a scomparsa sono fuori schermo, l'utente della tastiera non possa interagirvi accidentalmente.
Elementi DOM non interattivi
Un altro problema comune di accessibilità è quando il design 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 quando è aperto un overlay di dialogo.
Per offrire agli utenti un'esperienza ottimale, indica lo stato dell'interfaccia utente e "blocca" l'elemento attivo sulla parte della pagina interattiva.
Intrappolamento della messa a fuoco
L'acquisizione della concentrazione è un concetto centrale di buona accessibilità dell'interfaccia utente. Devi assicurarti che lo stato attivo dello screen reader sia impostato sugli elementi interattivi dell'interfaccia utente e che un elemento blocchi l'interattività. Ciò consente anche di evitare che gli screen reader non autorizzati possano restare dietro l'overlay di una pagina o non inviare accidentalmente un modulo mentre il primo invio è ancora in fase di elaborazione.
Con inert, puoi assicurarti che siano raggiungibili gli unici contenuti rilevabili. È utile per:
- Elementi di blocco come una finestra di dialogo modale, un menu che contraddistingue l'elemento attivo o la barra di navigazione laterale.
- Un carosello con articoli non attivi.
- Contenuti del modulo non applicabili (ad esempio, dissolvenza e disattivazione dei campi "Indirizzo di spedizione" quando è stata selezionata la casella di controllo "Uguale all'indirizzo di fatturazione").
- È in corso la disattivazione dell'intera UI in uno stato incoerente.
Indica visivamente gli elementi inert
Per impostazione predefinita, non viene visualizzata alcuna indicazione visiva che un sottoalbero sia inerte. Si consiglia di contrassegnare chiaramente quali parti del DOM sono attive e quali inerti.
[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 di lenti di ingrandimento, e persino gli utenti che usano solo finestre particolarmente piccole, potrebbero non riuscire a vedere la parte attiva di una pagina e potrebbero sentirsi frustrati se le sezioni inerti non sono ovviamente inerti. Per i singoli controlli, probabilmente l'attributo disabilitato è 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à, questo blocca anche l'utilizzo di schede e la rilevabilità. Il browser potrebbe anche ignorare la ricerca nelle pagine e la selezione del testo nell'elemento.
Il valore predefinito di inert è false.