Evidenzia

Gli elementi interattivi, tra cui controlli del modulo, link e pulsanti, sono: attivabili per impostazione predefinita e attivabili con il tasto Tab. Gli elementi con schede fanno parte dell'ordine di navigazione sequenziale del documento. Altri elementi sono inerti, ovvero non interattivi. Con gli attributi HTML, è possibile rendere inerti gli elementi interattivi, per rendere interattivi gli elementi inerti.

Per impostazione predefinita, l'ordine dello stato attivo della navigazione è uguale all'ordine visivo, ovvero l'ordine del codice sorgente. Esistono codice HTML che possono alterare questo ordine e le proprietà CSS che possono alterare l'ordine visivo dei contenuti. Modificare la modalità l'ordine con il codice HTML o l'ordine di rendering visivo con CSS può compromettere l'esperienza utente.

Non alterare l'ordine di tabulazione percepito ed effettivo con CSS e HTML. Come dimostrano i due esempi seguenti, l'ordine di tabulazione che differiscono dall'ordine visivo previsto generano confusione e peggiori per l'esperienza utente.

In questo esempio, il valore dell'attributo tabindex ha reso l'ordine delle schede caotico:

In questo esempio, il CSS ha creato una divergenza tra l'ordine delle schede e l'ordine visivo dei contenuti:

La dichiarazione flex-flow: row-reverse; ha invertito l'ordine visivo. Inoltre, la proprietà order del CSS è stata applicata alla sesta parola, "Questo", che ha spostato visivamente solo una parola. La sequenza di schede è l'ordine del codice, che non corrisponde più all'ordine visivo, creando una disconnessione per gli utenti con tastiera.

Rendere interattivi gli elementi inerti

Gli attributi contenteditable e tabindex, che sono attributi globali, possono essere aggiunti a qualsiasi elemento e sono quindi attivabili durante il processo. Gli elementi attivabili possono essere attivati anche con un mouse o un puntatore, grazie all'icona autofocus insieme di attributi o per script, come nel caso di element.focus().

Attributo tabindex

L'attributo globale tabindex, introdotto in attributes, abilita gli elementi che altrimenti non sarebbero in grado di attivare lo stato attivo per ottenere lo stato attivo, di solito con il tasto Tab, da cui deriva il nome.

L'attributo tabindex assume come valore un numero intero. Un valore negativo rende un elemento attivabile, ma non selezionabile. R Il valore tabindex di 0 rende l'elemento attivabile e attivabile con il tasto Tab, aggiungendo l'elemento su cui è applicato all'elemento sequenziale concentrarsi sull'ordine di navigazione nell'ordine del codice sorgente. Se il valore è 1 o superiore, è possibile attivare e disattivare l'elemento. ma la aggiunge a una sequenza di tabulazione prioritaria e, come abbiamo visto, dovrebbe essere evitata.

In questa pagina, il pulsante di condivisione, <share-action>, è un elemento personalizzato. tabindex="0" aggiunge questa impostazione nell'ordine di tabulazione predefinito della tastiera:

<share-action authors="@front-end.social/@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, mastodon" role="button" tabindex="0">
  <svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
    <use href="#shareIcon" />
  </svg>
  <span>Share</span>
</share-action>

In questa pagina c'è un altro elemento personalizzato: la navigazione locale ha un elemento con un valore tabindex negativo:

<web-navigation-drawer type="standard" tabindex="-1">

Un attributo tabindex con un valore negativo rende l'elemento attivabile ma non tabulabile. L'elemento è in grado di ricevere focus, ad esempio tramite HTMLElement.focus(), ma non fa parte dell'ordine di navigazione sequenziale. La convenzione per gli elementi attivabili che non è possibile tramite tabulazione prevede l'uso di tabindex="-1". Tieni presente che se aggiungi tabindex="-1" a un elemento interattivo, non sarà più possibile tabulazione.

Puoi utilizzare il metodo element.focus() per impostare lo stato attivo su elementi attivabili. Tieni presente che i browser scorrono per visualizzare gli elementi selezionati. Per questo motivo, evita di utilizzare element.focus({preventScroll:true}), poiché concentrarsi su un elemento non visibile offrirà un'esperienza utente negativa.

Se vuoi eseguire una query sul documento per scoprire quale elemento è attualmente attivo, usa la proprietà di sola lettura Document.activeElement.

Gli elementi con un valore tabindex pari o superiore a 1 sono inclusi in una sequenza di schede separata. Come noterai nel codepen, il tasto Tab inizia in una sequenza separata, in ordine dal valore più basso a quello più alto, prima di passare attraverso quelle della sequenza regolare (nessun tabindex impostato o tabindex="0") nell'ordine di origine:

tabindex con un valore positivo inserisce l'elemento in una sequenza di messa a fuoco prioritaria, che può portare al caos dell'ordine di messa a fuoco. Evita di modificare l'ordine DOM con tabindex. Non solo gli ordini di tabulazione alterati possono creare utenti malintenzionati sono difficili da gestire e mantenere per gli sviluppatori.

Attributo contenteditable

Abbiamo già parlato dell'attributo contenteditable. Se imposti contenteditable="true" su qualsiasi elemento, sarà modificabile, attivabile e parte dell'ordine delle schede. Il comportamento dello stato attivo è simile all'impostazione di tabindex="0", ma non è lo stesso. Nidificati Gli elementi contenteditable sono attivabili, ma non selezionabili. Per rendere tabulabile un elemento contenteditable nidificato, aggiungi tabindex="0", che la aggiungerà all'ordine di navigazione sequenziale dello stato attivo.

Concentrarsi sugli elementi interattivi

Attributo autofocus

Mentre il valore booleano autofocus è un attributo globale che può essere impostato su qualsiasi elemento, non rende interattivo un elemento inerte. Quando la pagina si carica, viene attivato il primo elemento attivabile con l'attributo autofocus impostato verrà attivato lo stato attivo, a condizione che l'elemento sia visualizzato e non nidificato in un elemento <dialog>.

Impostare automaticamente l'attenzione sui contenuti può creare confusione. L'impostazione di autofocus in un controllo modulo significa che il controllo scorre fino a visualizzare al caricamento pagina. Tutti i tuoi utenti, inclusi gli utenti di screen reader e quelli con aree visibili piccole, potrebbero non "vedi" le istruzioni per il modulo, magari anche scorrendo oltre l'etichetta normalmente visibile del controllo del modulo. autofocus non altera l'ordine di navigazione sequenziale dello stato attivo del documento. Gli elementi della sequenza che seguono vengono semplicemente ignorati. Per questi motivi, non è consigliabile includere l'attributo autofocus.

L'eccezione alla regola "non usare autofocus" consiglio di includere l'attributo autofocus in elementi <dialog>. Quando viene aperta una finestra di dialogo, il browser si attiva automaticamente sul primo elemento interattivo attivabile all'interno di <dialog>, e autofocus a un elemento non è necessario. Se vuoi assicurarti che un determinato elemento interattivo all'interno della finestra di dialogo riceva Imposta lo stato attivo quando si apre la finestra di dialogo, aggiungi l'attributo autofocus all'elemento.

<dialog open>
  <form method="dialog">
    <button type="submit" autofocus>close</button>
  </form>
</dialog>

L'attributo autofocus impostato sulla chiusura <button> assicura che venga attivato all'apertura della finestra di dialogo. Come primo elemento nella finestra di dialogo, avrebbe comunque subito lo stato attivo. Per impostazione predefinita, quando viene aperta una finestra di dialogo, viene attivato il primo elemento attivabile all'interno la finestra di dialogo verrà attivata, a meno che non sia impostato l'attributo autofocus per un altro elemento all'interno della finestra.

Rendere inerti gli elementi interattivi

Esistono anche attributi HTML che possono rimuovere gli elementi interattivi dalla sequenza di schede. Include un valore negativo di tabindex agli elementi attivabili, aggiungendo l'attributo disabled ai controlli di supporto del modulo e l'attributo inert globale in un container rendono tutti gli elementi non tabulabili. Questi tre attributi NON sono intercambiabili.

Valore tabindex negativo

Come abbiamo imparato in precedenza, un attributo tabindex con un valore negativo rende un elemento attivabile ma non selezionabile. Durante l'aggiunta tabindex="0" a un elemento attivabile per impostazione predefinita, inclusi link, pulsanti, controlli del modulo ed elementi contenteditable non è necessaria; l'inclusione di tabindex con un valore negativo rimuove gli elementi normalmente selezionabili dall'elemento attivo sequenziale ordine di navigazione.

Un valore negativo tabindex impedisce agli utenti della tastiera di concentrarsi sugli elementi interattivi, ma non disattiva l'elemento. Pointer gli utenti possono comunque concentrarsi sull'elemento. Per disattivare un elemento, utilizza l'attributo disabled.

Disabilitato

L'attributo booleano Disabled rende i controlli del modulo attivati cui viene applicata e i relativi discendenti, se presenti, non attivabili. Impossibile impostare lo stato attivo sui controlli dei moduli disattivati, non è possibile attivare gli eventi di clic e non vengono inviati al momento dell'invio del modulo. Nota: disabled non è un attributo globale. Si applica a <button>, <input>, <optgroup>, <option>, <select>, <textarea>, elementi personalizzati associati al modulo e <fieldset>. Se impostato su <optgroup> o <fieldset>, tutti i controlli del modulo secondario sono disattivati, ad eccezione dei contenuti del primo <legend> di <fieldset>.

Gli stessi elementi che supportano disabled possono essere scelti come target anche con :disabled e pseudoclassi :enabled. Gli elementi disattivati con Gli attributi disabled generalmente vengono definiti in grigio chiaro tramite il foglio di stile dello user agent, anche se un valore accent-color è impostata.

Essendo un attributo booleano, la presenza dell'attributo disattiva l'elemento altrimenti abilitato. non puoi impostarlo su false. Per riattivare un elemento disattivato, l'attributo deve essere rimosso, in genere tramite Element.removeAttribute('disabled').

La proprietà HTMLInputElement.disabled ti consente di controllare se un input è disattivato. Poiché disabled non è un attributo globale, non viene ereditato da HTMLElement, ma tutte le risorse di supporto dell'interfaccia utente, come HTMLSelectElement, HTMLTextareaElement ha la stessa proprietà di sola lettura.

L'attributo disabled non si applica agli elementi inert normalmente resi attivabili tramite tabindex o contenteditable. Inoltre, non si applica all'elemento <form> stesso. Per disattivarle, è possibile utilizzare l'attributo globale inert.

Attributo inert

Quando l'attributo booleano globale inert viene aggiunto a un elemento, quest'ultimo e tutti i contenuti nidificati vengono disattivati, nemmeno cliccabile o tabulare e rimossi dall'albero dell'accessibilità. Anche se inert può essere applicato a qualsiasi elemento, in genere viene utilizzati per le sezioni dei contenuti, ad esempio contenuti fuori schermo o comunque nascosti.

Quando applichi disabled ai controlli del modulo, il browser fornisce lo stile predefinito e può essere applicato agli stili mediante :disabled pseudo-classe. L'attributo inert non fornisce indicatori visivi e non ha pseudoclassi corrispondenti (anche se il selettore di attributi [inert] corrisponde).

L'utilizzo di inert su contenuti visibili senza stili che indichino l'inerzia può portare a un'esperienza utente scadente. Come contenuto inerte non è disponibile per gli utenti di screen reader, può creare confusione quando gli utenti di screen reader vedenti visualizzano i contenuti sullo schermo non disponibile per gli strumenti di accessibilità. Rendi l'inerzia molto evidente tramite CSS.

Assicurati che l'elemento attivo non si sposti mai sui contenuti non visibili. Qualsiasi elemento visualizzato al di fuori dello schermo che non viene visualizzato automaticamente vengono mostrati quando l'attenzione deve essere resa inerzia. Se i contenuti sono nascosti, ma diventa visibile quando è selezionato, come il link Vai ai contenuti di questa pagina, non è necessario che sia inerte.

Verifica le tue conoscenze

Verifica le tue conoscenze

Metti alla prova le tue conoscenze su come concentrarti.