Evidenzia

Gli elementi interattivi, inclusi controlli modulo, link e pulsanti, sono impostati per impostazione predefinita in modo che sia possibile impostare lo stato attivo e spostarsi tra di essi con il tasto Tab. Gli elementi selezionabili tramite tastiera fanno parte dell'ordine di navigazione sequenziale con il tasto Tab del documento. Gli altri elementi sono inerti, ovvero non sono interattivi. Con gli attributi HTML è possibile rendere inerti gli elementi interattivi e rendere interattivi gli elementi inerti.

Per impostazione predefinita, l'ordine di messa a fuoco della navigazione è lo stesso dell'ordine visivo, ovvero l'ordine del codice sorgente. Esistono attributi HTML che possono modificare questo ordine e proprietà CSS che possono modificare l'ordine visivo dei contenuti. La modifica dell'ordine di tabulazione con HTML o dell'ordine di rendering visivo con CSS può danneggiare l'esperienza utente.

Non alterare l'ordine di tabulazione percepito e reale con CSS e HTML. Come dimostrano i due esempi seguenti, gli ordini delle schede diversi da quello visivamente previsto confondono gli utenti e compromettono l'esperienza utente.

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

In questo esempio, CSS ha creato una divergenza tra l'ordine di tabulazione e l'ordine visivo dei contenuti:

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

Rendere interattivi gli elementi inerti

Gli attributi contenteditable e tabindex, essendo attributi globali, possono essere aggiunti a qualsiasi elemento, rendendoli selezionabili durante la procedura. Gli elementi attivabili possono essere attivati anche con un mouse o un puntatore, impostando l'attributo autofocus o tramite script, ad esempio con element.focus().

Attributo tabindex

L'attributo globale tabindex, introdotto in attributi, consente agli elementi che altrimenti non potrebbero ricevere lo stato attivo di ottenerlo, di solito con il tasto Tab, da cui il nome.

L'attributo tabindex accetta come valore un numero intero. Un valore negativo rende un elemento selezionabile, ma non spostabile con il tasto Tab. Un valore tabindex di 0 rende l'elemento selezionabile e spostabile con il tasto Tab, aggiungendo l'elemento a cui viene applicato all'ordine di navigazione sequenziale con la messa a fuoco nell'ordine del codice sorgente. Un valore pari o superiore a 1 rende l'elemento selezionabile e spostabile con il tasto Tab, ma lo aggiunge a una sequenza di spostamento con il tasto Tab con priorità e deve essere evitato.

In questa pagina, il pulsante di condivisione, <share-action>, è un elemento personalizzato. tabindex="0" aggiunge questo elemento non normalmente selezionabile all'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 è presente un altro elemento personalizzato: la navigazione locale ha un elemento personalizzato 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 selezionabile con il tasto Tab. L'elemento è in grado di ricevere il focus, ad esempio utilizzando HTMLElement.focus(), ma non fa parte dell'ordine di navigazione sequenziale con il focus. La convenzione per gli elementi non selezionabili con il tasto Tab e selezionabili è l'utilizzo di tabindex="-1". Se aggiungi tabindex="-1" a un elemento interattivo, questo non sarà più selezionabile con il tasto Tab.

Il metodo element.focus() può essere utilizzato per impostare lo stato attivo sugli elementi su cui è possibile impostare lo stato attivo. I browser scorrono gli elementi focalizzati nella visualizzazione. Per questo motivo, evita l'utilizzo di element.focus({preventScroll:true}), in quanto concentrarsi su un elemento non visibile è una brutta esperienza utente.

Se vuoi eseguire una query sul documento per scoprire quale elemento ha lo stato attivo, utilizza la proprietà di sola lettura Document.activeElement.

Gli elementi con un tabindex di 1 o superiore sono inclusi in una sequenza di schede separata. Come noterai in Codepen, la navigazione tramite tastiera inizia in una sequenza separata, in ordine dal valore più basso a quello più alto, prima di passare a quelli della sequenza normale (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 con priorità, il che può portare al caos nell'ordine di messa a fuoco. Evita di modificare l'ordine DOM con tabindex. Gli ordini di tabulazione alterati non solo creano esperienze utente negative, ma sono anche difficili da gestire e mantenere per gli sviluppatori.

Attributo contenteditable

L'attributo contenteditable è stato trattato in precedenza. L'impostazione contenteditable="true" su qualsiasi elemento lo rende modificabile, focalizzabile e parte dell'ordine di tabulazione. Il comportamento di messa a fuoco è simile all'impostazione di tabindex="0", ma non identico. Gli elementi contenteditable nidificati sono attivabili, ma non selezionabili con il tasto Tab. Per rendere selezionabile con il tasto Tab un elemento contenteditable nidificato, aggiungi tabindex="0", che lo aggiunge all'ordine di navigazione sequenziale dello stato attivo.

Assegnare autofocus agli elementi interattivi

Sebbene il valore booleano autofocus sia un attributo globale che può essere impostato su qualsiasi elemento, non rende interattivo un elemento inerte. Quando la pagina viene caricata, il primo elemento attivabile con gli attributi autofocus riceve lo stato attivo, a condizione che l'elemento venga visualizzato e non sia nidificato in un <dialog>.

Impostare automaticamente lo stato attivo sui contenuti può creare confusione. L'impostazione autofocus su un controllo modulo indica che il controllo modulo viene visualizzato durante il caricamento della pagina. Tutti gli utenti, inclusi quelli che utilizzano screen reader e quelli con viewport di piccole dimensioni, potrebbero non "vedere" le istruzioni per il modulo, scorrendo forse anche oltre l'etichetta normalmente visibile del controllo del modulo. L'attributo autofocus non altera l'ordine di navigazione sequenziale con la messa a fuoco del documento. Gli elementi della sequenza che precedono l'elemento con stato attivo automatico vengono ignorati. Per questi motivi, non è consigliabile includere l'attributo autofocus.

L'eccezione al consiglio "non utilizzare autofocus" è l'inclusione dell'attributo autofocus all'interno degli elementi <dialog>. Quando viene aperta una finestra di dialogo, il browser si concentra automaticamente sul primo elemento interattivo selezionabile all'interno di <dialog>, il che significa che non è necessario aggiungere autofocus a un elemento. Se vuoi assicurarti che un elemento interattivo specifico all'interno della finestra di dialogo riceva il focus quando la finestra di dialogo si apre, aggiungi l'attributo autofocus a quell'elemento.

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

L'attributo autofocus impostato sul pulsante di chiusura <button> consente di ricevere lo stato attivo quando viene aperta la finestra di dialogo. Essendo il primo elemento della finestra di dialogo, avrebbe ricevuto lo stato attivo in ogni caso. Per impostazione predefinita, quando viene aperta una finestra di dialogo, lo stato attivo viene assegnato al primo elemento su cui è possibile spostare lo stato attivo all'interno della finestra di dialogo, a meno che un elemento diverso all'interno della finestra di dialogo non abbia impostato l'attributo autofocus.

Rendere inerti gli elementi interattivi

Esistono anche attributi HTML che possono rimuovere gli elementi interattivi dalla sequenza di spostamento con il tasto Tab. L'inclusione di un tabindex negativo negli elementi selezionabili, l'aggiunta dell'attributo disabled ai controlli dei moduli di supporto e l'aggiunta dell'attributo globale inert a un contenitore rendono tutti gli elementi non selezionabili con il tasto Tab. Questi tre attributi NON sono intercambiabili.

Valore tabindex negativo

Un attributo tabindex con un valore negativo rende un elemento attivabile, ma non tabulabile. L'aggiunta di tabindex="0" a un elemento selezionabile per impostazione predefinita, inclusi link, pulsanti, controlli dei moduli ed elementi contenteditable non è necessaria; l'inclusione di un tabindex con un valore negativo rimuove gli elementi normalmente selezionabili con il tasto Tab dall'ordine di navigazione sequenziale con la messa a fuoco.

Un valore tabindex negativo impedisce agli utenti che utilizzano la tastiera di concentrarsi sugli elementi interattivi, ma non disattiva l'elemento. Gli utenti che utilizzano il puntatore possono comunque concentrarsi sull'elemento. Per disattivare un elemento, utilizza l'attributo disabled.

Disabilitato

L'attributo booleano disabled rende non selezionabili i controlli del modulo a cui viene applicato e i relativi discendenti, se presenti. I controlli dei moduli disattivati non possono essere selezionati, non ricevono eventi di clic e non vengono inviati al momento dell'invio del modulo.

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 dei moduli secondari sono disattivati, ad eccezione dei contenuti del primo <legend> di <fieldset>.

Gli stessi elementi che supportano disabled sono anche selezionabili con le pseudo-classi :disabled e :enabled. Gli elementi disattivati con l'attributo disabled sono generalmente stilizzati in grigio chiaro con il foglio di stile user agent, anche se è impostato un accent-color.

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

La proprietà HTMLInputElement.disabled consente di verificare se un input è disattivato. Poiché disabled non è un attributo globale, non viene ereditato da HTMLElement, ma ogni interfaccia di elemento di supporto, come HTMLSelectElement, HTMLTextareaElement, ha la stessa proprietà di sola lettura.

L'attributo disabled non si applica agli elementi inert normalmente attivabili con tabindex o contenteditable, né all'elemento <form>. Per disattivare questi elementi, è 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, il che significa che non è possibile farvi clic o spostarsi con il tasto Tab. Vengono inoltre rimossi dall'albero dell'accessibilità. Sebbene inert possa essere applicato a qualsiasi elemento, viene generalmente utilizzato per sezioni di contenuti, come contenuti fuori schermo o altrimenti nascosti.

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

L'utilizzo di inert su contenuti visibili senza stili che indicano l'inerzia può portare a un'esperienza utente scadente. Poiché i contenuti inerti non sono disponibili per gli utenti di screen reader, possono generare confusione quando gli utenti di screen reader vedenti vedono contenuti sullo schermo che non sono disponibili per gli strumenti di accessibilità. Rendi l'inerzia molto evidente con CSS.

Assicurati che lo stato attivo non si sposti mai su contenuti non visibili. Qualsiasi elemento visualizzato fuori dallo schermo che non viene visualizzato automaticamente quando viene selezionato deve essere reso inerte. Se i contenuti sono nascosti, ma diventano visibili quando vengono selezionati, ad esempio un link Vai ai contenuti, non è necessario renderli inerti.

Verifica la tua comprensione

Metti alla prova le tue conoscenze sulla messa a fuoco.