Test guidato intelligente per elementi interattivi

L'IGT per Elementi Interattivi supporta il test di molti stati senza dover eseguire nuovamente gli IGT. Un elemento interattivo è semplicemente qualsiasi cosa con cui l'utente interagisce sulla pagina web come pulsanti, link, input, menu, ecc.

Come funziona

La prima cosa che dovrai fare è mettere la pagina nello stato che desideri testare. Dopodiché, alcune semplici domande ti guideranno attraverso i test di accessibilità richiesti per ognuno degli elementi interattivi sulla pagina.

Clicca su "START" quando sei pronto per eseguire il test.

Passo 1: Mancanti

Per prima cosa, l'IGT scansionerà la pagina (o il componente) per trovare tutti gli elementi interattivi. Se il Machine Learning è abilitato (consulta la pagina delle impostazioni), rileverà qualsiasi elemento non contrassegnato con attributi interattivi (ruoli, tab index, ecc.) che potrebbe essere in realtà interattivo.

In questa prima domanda, ti verrà chiesto di selezionare eventuali elementi interattivi che sono stati trascurati. Se non manca nulla, basta fare 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 visualizzarli senza alcun raggruppamento utilizzando il controllo "Group by".

Passo 2: Precisione

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 viene utilizzato per comunicare lo scopo degli elementi interattivi come un'etichetta su un campo del modulo. Il Ruolo indica con quale controllo l'utente sta interagendo (pulsante, scheda, link, ecc.). Lo Stato informa l'utente che utilizza tecnologia assistiva su quale sia l'attuale stato del controllo (come selezionato/non selezionato, spuntato/non spuntato).

Nome Accessibile

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

Ruolo

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

Stato(i)

Analogamente, l'IGT mostrerà gli stati preselezionati. Per gli elementi dove uno stato non è rilevante, lascia lo stato su "Non Applicabile". Dopo aver confermato che il Nome Accessibile, il ruolo e lo stato sono correttamente comunicati, puoi testare un altro stato dello stesso elemento! Procedi e metti l'Elemento Interattivo nello stato aggiuntivo che desideri testare (come spuntare una casella di controllo, selezionare una scheda, ecc.). Quando sei pronto, clicca su "CONTROLLA LO STATO DELL'ELEMENTO". L'IGT rileverà il nuovo stato e potrai confermare se lo stato viene correttamente comunicato. Questo sarà ripetuto per tutti gli elementi che hai selezionato per il test. Una volta terminato il test di tutti gli elementi selezionati e degli stati che desideri testare, seleziona "NEXT".

Esecuzione in Modalità Automatica

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

Passo 1: Selezionare gli elementi da testare

Prima che l'analisi IA inizia, ti verranno presentati tutti gli elementi interattivi trovati sulla pagina — sia quelli rilevati automaticamente che eventuali elementi aggiuntivi identificati dalla nostra IA come potenzialmente interattivi ma non contrassegnati con attributi interattivi standard (ruoli, tab index, ecc.).

Seleziona gli elementi che vuoi includere nel tuo test, poi clicca su Next per procedere.

Passo 2: L'IA analizza i tuoi elementi selezionati

L'IA valuta automaticamente il nome accessibile, il ruolo e lo stato di ogni elemento selezionato. Una volta completata l'analisi, sarai indirizzato allo schermo di revisione per ispezionare i risultati dell'IA, effettuare eventuali correzioni e finalizzare il tuo test. Consulta IGT automatici per i dettagli sulla revisione dei risultati, sull'effettuare correzioni e sul completamento del tuo test.

Cosa testa

L'IGT per Elementi Interattivi testa:

• Nomi accessibili validi
• Ruoli validi
• Stati validi

FAQ

Cosa significano ciascuno degli "Stati dell'elemento" disponibili?

Di seguito è riportata una suddivisione di ciascuno degli stati disponibili per il test nell'IGT per Elementi Interattivi.

Disabilitato

Indica che un elemento non è modificabile o comunque operabile. Quando è disabilitato, un elemento non è né modificabile né focalizzabile. Disabilitare un elemento può essere fatto usando il disabled property HTML nativo (consigliato) o aria-disabled="true".

Esempi disabilitati

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 di attivazione/disattivazione è attualmente "premuto". Lo stato premuto di un elemento è gestito tramite l'attributo aria-pressed . Sono supportati 3 valori per aria-pressed:

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

Esempi di pulsanti premuti

Un pulsante di pausa che non è attualmente premuto:

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

Un pulsante muto 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 elemento di raggruppamento che controlla) è espanso e impostato su "false".

Esempi di elementi espansi

Un pulsante espanso:

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

Selezionato

Indica che un elemento è attualmente nello 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, "false" quando non lo è e "mixed" per le checkbox a tri-stato in stato selezionato misto.

Esempi di elementi selezionati

Un semplice pannello di tab 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>

Verificato

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

Esempi di elementi verificati

Una checkbox nativa verificata:

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

Una checkbox ARIA non verificata:

<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 è comunque operabile e focalizzabile. Lo stato di sola lettura di un elemento può essere gestito usando l'attributo HTML readonly attributo o l' ", "context": "paragraph aria-readonly attributo. Se si utilizza ", "context": "paragraph aria-readonly, il valore dell'attributo dovrebbe essere impostato su ", "context": "paragraph "true" quando l'elemento è in uno stato di sola lettura e ", "context": "paragraph "false" quando non lo è.", "context": "paragraph

Esempi di sola lettura", "context": "heading level 5

Un input di sola lettura:", "context": "paragraph

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