Concentrazione

Gli elementi interattivi, inclusi controlli dei moduli, link, e pulsanti, sono selezionabili e attivabili con il tasto Tab per impostazione predefinita. Gli elementi attivabili con il tasto Tab fanno parte dell'ordine di navigazione sequenziale con lo stato attivo del documento. Gli altri elementi sono inerti, il che significa che non sono interattivi. Con gli attributi HTML, è possibile rendere inerti gli elementi interattivi e interattivi gli elementi inerti.

Per impostazione predefinita, l'ordine dello stato attivo di 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ò compromettere l'esperienza utente.

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

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

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

La flex-flow: row-reverse; dichiarazione 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. Ciò crea una disconnessione per gli utenti che utilizzano la tastiera.

Alcune funzionalità CSS, tra cui flexbox, griglia, posizionamento, trasformazioni, e multi-colonna, possono modificare l'ordine visivo dei contenuti. Prova i contenuti spostandoti con il tasto Tab con una tastiera: con shift + tab per spostarti all'indietro nei contenuti. Utilizza CSS per indicare quale elemento ha lo stato attivo. Non riordinare gli elementi selezionabili con CSS.

È importante mantenere un ordine di tabulazione logico in tutte le dimensioni della finestra.

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 selezionabili possono essere selezionati anche con un mouse o un puntatore, impostando l' autofocus attributo o tramite script, ad esempio con element.focus().

L'attributo tabindex

L'attributo globale tabindex, introdotto negli attributi, consente agli elementi che altrimenti non sarebbero in grado di ricevere lo stato attivo di ottenere lo stato attivo, in genere 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 attivabile con il tasto Tab. Un valore tabindex di 0 rende l'elemento selezionabile e attivabile con il tasto Tab, aggiungendo l'elemento su cui viene applicato all'ordine di navigazione sequenziale con lo stato attivo nell'ordine del codice sorgente. Un valore pari o superiore a 1 rende l'elemento selezionabile e attivabile con il tasto Tab, ma lo aggiunge a una sequenza di tabulazione con priorità e deve essere evitato.

In questa pagina, il pulsante di condivisione, <share-action>, è un elemento personalizzato. Il tabindex="0" aggiunge questo elemento 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>

Inoltre, 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 selezionabile, ma non attivabile con il tasto Tab. L'elemento può ricevere lo stato attivo, ad esempio utilizzando HTMLElement.focus(), ma non fa parte dell'ordine di navigazione sequenziale con lo stato attivo. La convenzione per gli elementi selezionabili ma non attivabili con il tasto Tab è l'utilizzo di tabindex="-1". Se aggiungi tabindex="-1" a un elemento interattivo, questo non sarà più attivabile con il tasto Tab.

Il element.focus() metodo può essere utilizzato per impostare lo stato attivo sugli elementi selezionabili. I browser scorrono gli elementi selezionati nella visualizzazione. Per questo motivo, evita l'utilizzo di element.focus({preventScroll:true}), in quanto la selezione di un elemento non visibile è una pessima 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 pari o superiore a 1 sono inclusi in una sequenza di tabulazione separata. Come nel seguente Codepen, la tabulazione inizia in una sequenza separata, in ordine dal valore più basso al valore più alto, prima di passare a quelli nella sequenza normale (nessun tabindex impostato o tabindex="0") nell'ordine del codice sorgente:

tabindex con un valore positivo inserisce l'elemento in una sequenza di stato attivo con priorità, che può portare a un ordine di stato attivo caotico. Evita di modificare l'ordine DOM con tabindex. L'ordine di tabulazione modificato può creare esperienze utente negative ed è difficile da gestire.

L'attributo contenteditable

L'contenteditable attributo è stato trattato in precedenza. L'impostazione di contenteditable="true" su qualsiasi elemento lo rende modificabile, selezionabile e parte dell'ordine di tabulazione. Il comportamento dello stato attivo è simile a impostazione tabindex="0", ma non è lo stesso. Gli elementi contenteditable nidificati sono selezionabili ma non attivabili con il tasto Tab. Per rendere attivabile con il tasto Tab un elemento nidificato contenteditable, aggiungi tabindex="0", che lo aggiunge all'ordine di navigazione sequenziale con lo 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 selezionabile con gli autofocus attributi riceve lo stato attivo, a condizione che l'elemento venga visualizzato e non sia nidificato in un <dialog>.

L'impostazione automatica dello stato attivo sui contenuti può confondere gli utenti. Quando imposti autofocus su un controllo del modulo, questo viene visualizzato al caricamento della pagina. Gli utenti, inclusi gli utenti dello screen reader e gli utenti con finestre di visualizzazione piccole, potrebbero non vedere le istruzioni del modulo o persino l'etichetta del controllo del modulo. Inoltre, l'attributo autofocus non modifica l'ordine di navigazione sequenziale con lo stato attivo del documento. Gli elementi nella sequenza che precedono l'elemento con lo stato attivo automatico vengono ignorati. Per questi motivi, ti consigliamo di evitare di utilizzare l'attributo autofocus.

L'eccezione alla raccomandazione "non utilizzare autofocus" è l'inclusione dell' autofocus attributo all'interno degli elementi <dialog>. Quando viene aperto un dialogo, il browser imposta automaticamente lo stato attivo 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 del dialogo riceva lo stato attivo all'apertura del dialogo, 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 all'apertura del dialogo. Essendo il primo elemento del dialogo, avrebbe ricevuto lo stato attivo in ogni caso. Per impostazione predefinita, quando viene aperto un dialogo, il primo elemento selezionabile all'interno del dialogo riceve lo stato attivo, a meno che un elemento diverso all'interno del dialogo non abbia l'attributo autofocus impostato.

Rendere inerti gli elementi interattivi

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

Valore tabindex negativo

Un attributo tabindex con un valore negativo rende un elemento selezionabile, ma non attivabile con il tasto Tab. Sebbene non sia necessario aggiungere tabindex="0" a un elemento selezionabile per impostazione predefinita, inclusi link, pulsanti, controlli dei moduli ed elementi contenteditable l'inclusione di un tabindex con un valore negativo rimuove gli elementi normalmente attivabili con il tasto Tab dall'ordine di navigazione sequenziale con lo stato attivo.

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

Disabilitato

L'attributo booleano disabled rende non selezionabili i controlli dei moduli su 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 all'invio del modulo.

disabled non è un attributo globale. Si applica a <button>, <input>, <optgroup>, <option>, <select>, <textarea>, agli elementi personalizzati associati ai moduli e a <fieldset>. Quando è impostato su <optgroup> o <fieldset>, tutti i controlli dei moduli secondari vengono disattivati, ad eccezione dei contenuti del primo <legend> di <fieldset>.

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

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

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

L'attributo disabled non si applica agli elementi normalmente inert che vengono resi selezionabili con tabindex o contenteditable, né all'elemento <form>. Per disattivare questi elementi, è possibile utilizzare l'attributo globale inert.

L'attributo inert

Quando l'attributo booleano globale inert viene aggiunto a un elemento, questo e tutti i contenuti nidificati vengono disattivati, il che significa che non è possibile fare clic o spostarsi con il tasto Tab. Vengono anche rimossi dall'albero dell'accessibilità. Sebbene inert possa essere applicato a qualsiasi elemento, viene in genere utilizzato per le sezioni di contenuti, ad esempio contenuti fuori schermo o altrimenti nascosti.

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

L'utilizzo di inert su contenuti visibili senza stili che indicano l'inerzia può compromettere l'esperienza utente. Poiché i contenuti inerti non sono disponibili per gli utenti dello screen reader, possono creare confusione quando gli utenti dello screen reader 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 sottoposto a rendering fuori schermo che non viene visualizzato automaticamente quando è selezionato deve essere reso inerte. Se i contenuti sono nascosti ma vengono visualizzati quando sono selezionati, ad esempio un link per passare ai contenuti, non è necessario renderli inerti.

Mettiti alla prova

Metti alla prova le tue conoscenze sullo stato attivo.