Elementi interattivi Test guidato intelligente

L'IGT Elementi Interattivi supporta il test di più stati senza dover rieseguire 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 vuoi testare. Dopodiché, alcune semplici domande ti guideranno attraverso i test di accessibilità richiesti per ciascuno degli elementi interattivi della pagina.

Quando sei pronto per eseguire il test, fai clic su "START".

Fase 1: Mancante

Per prima cosa, il [Italian equivalent of IGT] analizzerà la pagina (o il componente) per trovare tutti gli elementi interattivi. Se l'Apprendimento automatico è abilitato (vedere la pagina delle impostazioni), rileverà tutti gli elementi non contrassegnati con attributi interattivi (ruoli, indice tab, ecc.) che potrebbero in realtà essere interattivi.

In questa prima domanda ti verrà chiesto di selezionare gli elementi interattivi che sono stati tralasciati. Se non manca nulla, clicca semplicemente su "AVANTI".

Successivamente puoi scegliere quale elemento desideri testare. Per impostazione predefinita, questi elementi vengono raggruppati in modo "intelligente" utilizzando il nostro algoritmo per raggruppare gli elementi simili. Tuttavia, è possibile scegliere di raggrupparli in base al ruolo o di presentarli senza alcun raggruppamento utilizzando il controllo "Raggruppa per".

Fase 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, ad esempio un'etichetta su un campo di un modulo. Il ruolo indica con quale controllo l'utente sta interagendo (pulsante, scheda, collegamento, ecc.). Lo Stato indica all'utente che utilizza la tecnologia assistiva qual è lo stato attuale del controllo (ad esempio selezionato/deselezionato, segnato/non segnato).

Nome accessibile

Ti verrà chiesto di confermare che il Nome accessibile descriva accuratamente lo scopo degli elementi interattivi.

Ruolo

Successivamente, se l'IGT è in grado di rilevare il ruolo, questo verrà preselezionato. È possibile ignorare la selezione predefinita se il ruolo è diverso da quello rilevato dal menu a discesa dei ruoli disponibili.

State(s)

Allo stesso modo, l'IGT visualizzerà gli stati preselezionati. Per gli elementi in cui uno stato non è rilevante, lasciare lo stato come "Non applicabile". Dopo aver verificato che il Nome accessibile, il ruolo e lo stato siano stati correttamente trasmessi, puoi testare un altro stato dello stesso elemento! Procedi e metti l'elemento interattivo nello stato aggiuntivo che desideri testare (ad esempio selezionando una casella di controllo, selezionando una scheda, ecc.). Quando sei pronto, clicca su "VERIFICA STATO ELEMENTO". Il TGI rileverà il nuovo stato e potrai confermare se lo stato viene trasmesso correttamente. Questa operazione verrà ripetuta per tutti gli elementi selezionati per il test. Una volta terminati i test su tutti gli elementi selezionati e sugli stati che desiderate testare, seleziona "AVANTI".

Cosa verifica

Gli elementi interattivi IGT testano per:

• Nomi accessibili validi
• Ruoli validi
• Stati validi

Domande frequenti

Cosa significa ciascuno degli "stati degli elementi" disponibili?

Di seguito è riportata una ripartizione di ciascuno degli stati disponibili per il test in Interactive Elements IGT.

Disabilitato

Indica che un elemento non è modificabile o altrimenti operativo. Se disabilitato, un elemento non è né modificabile né attivabile. La disabilitazione di un elemento può essere eseguita utilizzando la proprietà nativa HTML disabled (preferita) oppure 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 viene 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 premuti

Un pulsante di pausa che non è attualmente premuto:

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

Un pulsante di muto attualmente premuto:

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

Espanso

Indica che un elemento, o un altro elemento di raggruppamento da esso controllato, è attualmente espanso. Lo stato espanso di un elemento viene 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) viene espanso e impostato su "false".

Esempi 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 viene 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 caselle di controllo a tre stati in uno stato di selezione misto.

Esempi selezionati

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 nello stato "spuntato". Comunemente utilizzato nelle caselle di controllo, nei pulsanti di scelta e in altri widget. Lo stato spuntato di un elemento può essere gestito utilizzando l'attributo HTML checked (utilizzato con le caselle di controllo native) o l'attributo aria-checked . Se si utilizza aria-checked, il valore dell'attributo deve essere impostato su "true" quando l'elemento è spuntato e su "false" quando è deselezionato.

Esempi selezionati

Una casella di controllo nativa spuntata:

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

Una casella di controllo ARIA non spuntata:

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

Solo lettura

Indica che un elemento non è modificabile, ma è comunque utilizzabile e in grado di ricevere il focus. 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 deve essere impostato su "true" quando l'elemento è in stato di sola lettura e "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 />