Concentrazione

Per impostazione predefinita, gli elementi interattivi, inclusi i controlli del modulo, i link e i pulsanti, sono attivabili e utilizzabili con il tasto Tab. Gli elementi disponibili con il tasto Tab fanno parte dell'ordine di navigazione dello stato attivo sequenziale del documento. Altri elementi sono inerti, ovvero non sono interattivi. Con gli attributi HTML, è possibile rendere inerti gli elementi interattivi e quelli inerti.

Per impostazione predefinita, l'ordine di impostazione dello stato attivo per la navigazione coincide con l'ordine visivo, ovvero l'ordine del codice sorgente. Esistono attributi HTML che possono modificare questo ordine, mentre le proprietà CSS possono modificare l'ordine visivo dei contenuti. Modificare l'ordine delle schede con HTML o l'ordine di rendering visivo con CSS può danneggiare l'esperienza utente.

Non alterare l'ordine delle schede percepite ed effettivo con CSS e HTML. Come dimostrato dai due esempi riportati di seguito, gli ordini delle schede diversi dall'ordine visivo previsto risultano confusi per gli utenti e negativi per l'esperienza utente.

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

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à CSS order è stata applicata alla sesta parola, "This", che ha spostato visivamente quella parola. La sequenza di schede è l'ordine del codice, che non corrisponde più all'ordine visivo, creando una disconnessione per gli utenti che utilizzano la tastiera.

Rendere interattivi gli elementi inerti

Gli attributi contenteditable e tabindex, essendo attributi globali, possono essere aggiunti a qualsiasi elemento, il che li rende attivabili nel processo. 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 negli attributi, consente di attivare gli elementi che altrimenti non potrebbero essere attivati, in genere tramite il tasto Tab, da cui deriva il nome.

L'attributo tabindex prende come valore un numero intero. Un valore negativo rende un elemento attivabile, ma non selezionabile. Un valore tabindex pari a 0 rende attivabile e utilizzabile il tasto Tab per l'elemento, aggiungendo l'elemento a cui viene applicato all'ordine di navigazione sequenziale dello stato attivo nell'ordine del codice sorgente. Un valore pari o superiore a 1 rende l'elemento attivabile e utilizzabile con il tasto Tab, ma lo aggiunge a una sequenza di schede prioritaria e, come abbiamo visto sopra, deve essere evitato.

In questa pagina, il pulsante di condivisione, <share-action>, è un elemento personalizzato. tabindex="0" aggiunge questo elemento non attivabile normalmente nell'ordine di tabulazione predefinita 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 valore negativo rende l'elemento attivabile, ma non selezionabile. L'elemento può ricevere lo stato attivo, ad esempio tramite HTMLElement.focus(), ma non fa parte dell'ordine di navigazione con stato attivo sequenziale. La convenzione per gli elementi non attivabili e non selezionabili è l'uso di tabindex="-1". Tieni presente che se aggiungi tabindex="-1" a un elemento interattivo, non sarà più possibile usare il tasto Tab.

È possibile usare il metodo element.focus() per impostare lo stato attivo sugli elementi attivabili. Tieni presente che i browser scorrono gli elementi attivi per visualizzarli. Per questo motivo, evita di utilizzare element.focus({preventScroll:true}), perché concentrarti su un elemento non visibile causerà un'esperienza utente negativa.

Se vuoi eseguire una query sul documento per scoprire quale elemento è attualmente attivo, utilizza 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, le schede iniziano in una sequenza separata, in ordine dal valore più basso a quello più alto, prima di passare da quelle nella sequenza regolare (nessun tabindex impostato o tabindex="0") in ordine di origine:

tabindex con un valore positivo inserisce l'elemento in una sequenza di messa a fuoco prioritaria, causando un caos dell'ordine di messa a fuoco. Evita di modificare l'ordine DOM con tabindex. Oltre a creare un'esperienza utente negativa, gli ordini di tabulazione alterati sono difficili da gestire e gestire per gli sviluppatori.

Attributo contenteditable

L'attributo contenteditable è stato discusso in precedenza. L'impostazione di contenteditable="true" su qualsiasi elemento lo rende modificabile e attivabile e fa parte dell'ordine delle schede. Il comportamento dello stato attivo è simile all'impostazione di tabindex="0", ma non è uguale. Gli elementi contenteditable nidificati possono essere attivati, ma non possono essere riprodotti con il tasto Tab. Per rendere un elemento contenteditable nidificato, aggiungi tabindex="0", che lo aggiungerà all'ordine di navigazione dello stato attivo sequenziale.

Concentrazione degli elementi interattivi

Attributo autofocus

Sebbene l'attributo booleano autofocus sia un attributo globale che può essere impostato su qualsiasi elemento, non rende interattivo un elemento inerte. Quando la pagina viene caricata, verrà impostato lo stato attivo sul primo elemento attivabile con l'insieme di attributi autofocus, purché quell'elemento sia visualizzato e non nidificato in un elemento <dialog>.

L'impostazione automatica dello stato attivo sui contenuti può creare confusione. L'impostazione di autofocus su un controllo modulo fa sì che venga visualizzato al caricamento pagina. Tutti i tuoi utenti, inclusi gli utenti di screen reader e quelli con aree visibili di piccole dimensioni, potrebbero non "vedere" le istruzioni per il modulo, magari anche scorrendo oltre l'etichetta normalmente visibile del controllo modulo. L'attributo autofocus non modifica l'ordine di navigazione dello stato attivo sequenziale del documento. Gli elementi della sequenza che precedono l'elemento incentrato automaticamente vengono ignorati. Per questi motivi, non è consigliabile includere l'attributo autofocus.

L'eccezione al consiglio "Non utilizzare autofocus" è l'inclusione dell'attributo autofocus negli elementi <dialog>. Quando si apre una finestra di dialogo, il browser si concentrerà automaticamente sul primo elemento interattivo attivabile all'interno di <dialog>, il che significa che autofocus per un elemento non è necessario. Se vuoi assicurarti che un elemento interattivo specifico della finestra di dialogo venga impostato come attivo all'apertura della 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> garantisce che venga impostato lo stato attivo all'apertura della finestra di dialogo. Come primo elemento della finestra di dialogo, sarebbe stato in ogni caso attivo. Per impostazione predefinita, all'apertura di una finestra di dialogo il primo elemento attivabile al suo interno verrà impostato come attivo, a meno che un altro elemento al suo interno non abbia impostato l'attributo autofocus.

Rendere inerti gli elementi interattivi

Esistono inoltre attributi HTML che possono rimuovere elementi interattivi dalla sequenza di tabulazione. L'inclusione di un tabindex escluso agli elementi attivabili, l'aggiunta dell'attributo disabled ai controlli del modulo e l'aggiunta dell'attributo globale inert a un contenitore rendono tutti gli elementi non selezionabili. Questi tre attributi NON sono intercambiabili.

Valore tabindex negativo

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

Un valore tabindex escluso impedisce agli utenti della tastiera di impostare lo stato attivo 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.

Disabilitata

L'attributo booleano disabilitato rende i controlli del modulo su cui viene applicato e i relativi discendenti, se presenti, non attivabili. I controlli dei moduli disattivati non possono essere attivati, non ricevono eventi di clic e non vengono inviati dopo l'invio del modulo. Nota: disabled non è un attributo globale. Si applica a <button>, <input>, <optgroup>, <option>, <select>, <textarea>, agli elementi personalizzati associati al modulo e a <fieldset>. Se impostati su <optgroup> o <fieldset>, tutti i controlli dei moduli secondari vengono disattivati, ad eccezione dei contenuti dei primi <legend> di <fieldset>.

Gli stessi elementi che supportano disabled possono essere scelti come target anche con le pseudoclassi :disabled e :enabled. Gli elementi disattivati con l'attributo disabled generalmente vengono impostati come grigio chiaro tramite il foglio di stile dello user agent, anche se è impostato un accent-color.

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 consente di verificare se un input è disabilitato. Poiché disabled non è un attributo globale, non viene ereditato da HTMLElement, ma ogni interfaccia dell'elemento di supporto, come HTMLSelectElement, HTMLTextareaElement, ha la stessa proprietà di sola lettura.

L'attributo disabled non si applica agli elementi inert normalmente di cui è possibile impostare lo stato attivo tramite tabindex o contenteditable. Inoltre, non si applica all'elemento <form> stesso. Per disattivarli, è 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 (non selezionabili o disponibili con il tasto Tab) e vengono rimossi dall'albero dell'accessibilità. Sebbene inert possa essere applicato a qualsiasi elemento, viene generalmente utilizzato per sezioni di contenuti, ad esempio contenuti fuori schermo o altrimenti nascosti.

Quando applichi disabled ai controlli del modulo, il browser fornisce uno stile predefinito e può essere definito con la pseudoclasse :disabled. L'attributo inert non fornisce indicatori visivi e non ha una pseudoclasse corrispondente (anche se il selettore degli attributi [inert] corrisponde).

L'uso di inert su contenuti visibili senza stili che indicano l'inertezza può portare a un'esperienza utente scadente. Poiché i contenuti inerti non sono disponibili per gli utenti di screen reader, ciò può creare confusione quando gli utenti vedenti vedono sullo schermo contenuti non disponibili per gli strumenti di accessibilità. Fai in modo che l'inerzia sia molto evidente tramite CSS.

Assicurati che l'elemento attivo non si sposti mai sui contenuti non visibili. Tutto ciò che viene visualizzato fuori dallo schermo che non viene visualizzato automaticamente quando lo stato è attivo deve essere impostato su inerte. Se il contenuto è nascosto, ma è visibile quando lo è, come il link Passa ai contenuti in questa pagina, non è necessario che sia inerte.

Verifica le tue conoscenze

Verifica le tue conoscenze

Verifica la tua conoscenza del focus.