Test Guidato Intelligente degli Elementi Interattivi

L'IGT degli Elementi Interattivi supporta la verifica di stati multipli senza dover ripetere gli IGT. Un elemento interattivo è semplicemente qualsiasi cosa con cui l'utente interagisce sulla pagina web, come pulsanti, link, campi di input, menu, ecc.

Come funziona

La prima cosa da fare è impostare la pagina nello stato che si desidera testare. Successivamente, alcune semplici domande ti guideranno attraverso i test di accessibilità necessari per ciascuno degli elementi interattivi sulla pagina.

Fai clic su "START" quando sei pronto per eseguire il test.

Passo 1: Elementi Mancanti

Prima di tutto, l'IGT eseguirà una scansione della pagina (o del componente) per individuare tutti gli elementi interattivi. Se l'apprendimento automatico è abilitato (vedi pagina delle impostazioni), rileverà eventuali elementi non marcati con attributi interattivi (ruoli, indice di tabulazione, ecc.) che potrebbero in realtà essere interattivi.

In questa prima domanda, ti viene chiesto di selezionare eventuali elementi interattivi che sono stati tralasciati. Se non manca nulla, fai semplicemente clic su "NEXT".

Successivamente, puoi scegliere quale elemento desideri testare. Per impostazione predefinita, questi elementi sono raggruppati "intelligentemente" utilizzando il nostro algoritmo per raggruppare elementi simili. Tuttavia, puoi scegliere di raggrupparli per ruolo o di presentarli senza alcun raggruppamento usando il controllo "Raggruppa per".

Passo 2: Accuratezza

Per gli elementi che scegli di testare, ti verrà chiesto di verificare il Nome Accessibile, il Ruolo e lo Stato dell'elemento. Il Nome Accessibile è utilizzato per trasmettere lo scopo degli elementi interattivi come un'etichetta su un campo di un modulo. Il Ruolo indica quale controllo l'utente sta usando (pulsante, scheda, link, ecc.). Lo Stato indica all'utente che utilizza la tecnologia assistiva qual è lo stato attuale del controllo (ad esempio selezionato/non selezionato, spuntato/non spuntato).

Nome Accessibile

Ti verrà chiesto di confermare che il Nome Accessibile descriva accuratamente lo scopo dell'elemento interattivo.

Ruolo

Successivamente, se l'IGT è in grado di rilevare il ruolo, esso sarà preselezionato. Puoi annullare la selezione predefinita se il ruolo è diverso da quello rilevato, scegliendo da un menu a tendina dei ruoli disponibili.

Stato(i)

Allo stesso modo, l'IGT mostrerà stati preselezionati. Per gli elementi per cui uno stato non è rilevante, lascia lo stato su "Non Applicabile". Dopo aver confermato che il Nome Accessibile, il ruolo e lo stato sono correttamente trasmessi, puoi testare un altro stato dello stesso elemento! Procedi mettendo l'Elemento Interattivo nello stato aggiuntivo che desideri testare (come spuntare una casella di controllo, selezionare una scheda, ecc.). Quando sei pronto, fai clic su "VERIFICA STATO DELL'ELEMENTO". L'IGT rileverà il nuovo stato e potrai confermare se lo stato viene correttamente comunicato. Questo verrà ripetuto per tutti gli elementi che hai scelto per il test. Una volta terminato di testare tutti gli elementi selezionati e i loro stati che desideri testare, seleziona "NEXT".

Esecuzione in Modalità Automatica

Quando modalità IGT automatizzata è abilitata, l'IGT degli Elementi Interattivi include un passaggio di selezione degli elementi prima che l'IA inizi la sua analisi. Questo ti dà un controllo diretto sull'ambito del tuo test.

Passo 1: Seleziona gli elementi da testare

Prima che l'analisi IA inizi, ti verranno presentati tutti gli elementi interattivi trovati sulla pagina — sia quelli rilevati automaticamente che qualsiasi elemento aggiuntivo che la nostra IA identifica come potenzialmente interattivo, ma non marcato con attributi interattivi standard (ruoli, indice di tabulazione, ecc.).

Seleziona gli elementi che vuoi includere nel tuo test, quindi fai clic su Avanti per procedere.

Passo 2: L'IA analizza gli elementi selezionati

L'IA valuta automaticamente il nome accessibile, il ruolo e lo stato di ciascun elemento che hai selezionato. Una volta completata l'analisi, verrai portato alla schermata di revisione per ispezionare i risultati dell'IA, apportare eventuali correzioni e finalizzare il tuo test. Vedi IGT automatizzati per i dettagli su come revisionare i risultati, effettuare correzioni e completare il tuo test.

Cosa verifica

L'IGT degli Elementi Interattivi verifica:

• Nomi accessibili validi
• Ruoli validi
• Stati validi

Domande frequenti

Cosa significano ciascuno degli "Stati degli Elementi" disponibili?

Di seguito è riportata una ripartizione di ciascuno degli stati disponibili da testare nell'IGT degli Elementi Interattivi.

Disabilitato

Indica che un elemento non è modificabile o altrimenti operativo. Quando è disabilitato, un elemento non è né modificabile né focalizzabile. Disabilitare un elemento può essere fatto utilizzando la proprietà disabled nativa di HTML (preferito) o aria-disabled="true".

Esempi di Disabilitato

Pulsante di invio disabilitato:

<button type="submit" disabled>Submit</button>

Campo di input disabilitato:

<form>
  <label for="email">Email</label>
  <input type="text" id="email" disabled />
</form>

Premuto

Indica che un pulsante a interruttore è attualmente "premuto". Lo stato premuto di un elemento è gestito tramite l'attributo aria-pressed. Ci sono 3 valori supportati per aria-pressed:

• "true": indica che il pulsante di attivazione è attualmente premuto
• "false": indica che il pulsante di attivazione non è attualmente premuto
• "mixed": indica che i valori di più elementi controllati dal pulsante di attivazione non condividono tutti lo stesso valore (stato tri-stato)

Esempi di stato premuto

Un pulsante di pausa che non è attualmente premuto:

<button aria-pressed="false">Pause</button>

Un pulsante di silenziamento che è attualmente premuto:

<button aria-pressed="true">Mute</button>

Espanso

Indica che un elemento, o un altro elemento di raggruppamento che controlla, è attualmente espanso. Lo stato espanso di un elemento è gestito tramite l'attributo aria-expanded. Il valore dell'attributo aria-expanded dovrebbe essere impostato su "true" quando l'elemento (o l'elemento di raggruppamento che controlla) è espanso e impostato su "false".

Esempi di stato espanso

Un pulsante espanso:

<button aria-expanded="true">options</button>

Selezionato

Indica che un elemento è attualmente in uno stato "selezionato". Lo stato selezionato di un elemento è gestito tramite l'attributo aria-selected. Il valore dell'attributo aria-selected dovrebbe essere impostato su "true" quando l'elemento è selezionato, su "false" quando non lo è e su "mixed" per le caselle di controllo tri-stato in uno stato misto.

Esempi di stato selezionato

Un semplice pannello a schede che gestisce aria-selected sugli elementi role="tab":

<div role="tablist" aria-label="Simple Tabs">
  <div
    role="tab"
    aria-selected="true"
    aria-controls="panel-1"
    id="tab-1"
    tabindex="0"
  >
    Tab 1
  </div>
  <div
    role="tab"
    aria-selected="false"
    aria-controls="panel-2"
    id="tab-2"
    tabindex="-1"
  >
    Tab 2
  </div>
</div>
<div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
  <p>Panel 1 content...</p>
</div>
<div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden>
  <p>Panel 2 content...</p>
</div>

Controllato

Indica che un elemento è attualmente in uno stato "controllato". Comunemente usato nelle caselle di controllo, nei pulsanti radio e in altri widget. Lo stato controllato di un elemento può essere gestito utilizzando l'attributo HTML checked (usato con le caselle di controllo native) o l'attributo aria-checked. Se si utilizza aria-checked, il valore dell'attributo dovrebbe essere impostato su "true" quando l'elemento è controllato e su "false" quando non lo è.

Esempi di stato controllato

Una casella di controllo nativa controllata:

<input id="terms" type="checkbox" checked />
<label for="terms">I agree to the terms and conditions</label>

Una casella di controllo ARIA non controllata:

<span
  role="checkbox"
  id="checkbox"
  aria-checked="false"
  tabindex="0"
  aria-labelledby="checkbox-label"
></span>
<label id="checkbox-label">Subscribe to newsletter</label>

Sola lettura

Indica che un elemento non è modificabile, ma è altrimenti operabile e focalizzabile. Lo stato di sola lettura di un elemento può essere gestito utilizzando l'attributo HTML readonly o l'attributo aria-readonly. Se si utilizza aria-readonly, il valore dell'attributo dovrebbe essere impostato su "true" quando l'elemento è in uno stato di sola lettura e su "false" quando non lo è.

Esempi di sola lettura

Un input di sola lettura:

<label for="first-name">First Name:</label>
<input name="first-name" type="text" value="Gene" readonly />