Selezionare Elementi
Diverse funzioni di axe DevTools richiedono di indicare elementi specifici sulla pagina. Puoi selezionare elementi con il mouse cliccandoli sulla pagina, oppure con la tastiera e la tecnologia assistiva usando il „Selettore di Elementi“. Entrambi i metodi possono essere usati in modo intercambiabile nello stesso passaggio.
- Dove selezionare gli elementi
- Selezionare con il mouse
- Selezionare con il Selettore di Elementi
- Passare tra gli elementi evidenziati
- Rimuovere una selezione
Dove selezionare gli elementi
| Funzione | Cosa si seleziona |
|---|---|
| Scansione Parziale della Pagina | Un elemento al quale la scansione è limitata |
| Segnalazione Manuale dei Problemi | Un elemento contro cui viene segnalato il problema, più eventuali elementi correlati |
| Test Guidati Intelligenti | Dipende dalla domanda. Alcune domande richiedono un solo elemento (ad esempio, un tavolo o un trigger di un modale), altre richiedono qualsiasi numero di elementi (ad esempio, intestazioni o punti tab che non sono già stati evidenziati) |
Quando un passaggio accetta solo un elemento, non puoi selezionare un altro fino a quando non rimuovi la selezione corrente.
Selezionare con il mouse
La selezione con il mouse è controllata dall'interruttore „Selezione con il Mouse“, che mostra se è attualmente „ATTIVA“ o „SPENTA“. Nella maggior parte dei passaggi, la selezione con il mouse viene attivata automaticamente.
Quando la selezione con il mouse è attiva:
- Passa il mouse sopra la pagina. L'elemento sotto il puntatore viene evidenziato con un contorno.
- Clicca l'elemento evidenziato per selezionarlo. L'elemento rimane evidenziato sulla pagina e il Selettore di Elementi si espande per mostrarlo.
I clic sono catturati da axe DevTools mentre la selezione con il mouse è attiva, quindi i link e i pulsanti sulla pagina non si attivano. Per interagire normalmente con la pagina (ad esempio per aprire un modale prima di selezionarlo), disattiva l'interruttore „Selezione con il Mouse“, quindi riattivalo quando sei pronto a selezionare.
In alcuni passaggi dei Test Guidati Intelligenti, come la selezione di un modale dopo averlo lanciato, la selezione con il mouse inizia spenta permettendoti di interagire con la pagina prima. Attiva l'interruttore „Selezione con il Mouse“ quando sei pronto a selezionare.
Selezionare con il Selettore di Elementi
Il Selettore di Elementi è un modo accessibile via tastiera e compatibile con gli screen reader per selezionare elementi senza un mouse. Appare in fondo al pannello, sotto l'intestazione „Selettore di Elementi“, e mostra il DOM della pagina come un albero espandibile. Ogni voce mostra il nome del tag dell'elemento insieme ai suoi attributi id, class e role, quando presenti.
Nella maggior parte delle funzioni, il Selettore di Elementi è inizialmente ridotto. Attiva il pulsante „Visualizza selettore di elementi“ accanto all'intestazione per espanderlo.
Navigazione tramite tastiera
| Tasto | Azione |
|---|---|
| Freccia Giù | Passa all'elemento visibile successivo |
| Freccia Su | Passa all'elemento visibile precedente |
| Freccia Destra | Espandi un elemento ridotto o spostati al suo primo figlio se è già espanso |
| Freccia Sinistra | Riduci un elemento espanso o spostati al suo genitore se è già ridotto |
| Spazio | Seleziona l'elemento focalizzato o deselezionalo se è già selezionato |
Mentre scorri l'albero, l'elemento focalizzato è evidenziato sulla pagina e scorre in vista, così puoi confermare di essere sull'elemento giusto prima di selezionarlo.
Puoi anche utilizzare i pulsanti sotto l'albero:
- „Seleziona“ seleziona l'elemento focalizzato
- „Rimuovi“ rimuove l'elemento focalizzato dalla tua selezione
Cliccando un elemento nell'albero lo espandi o lo riduci; non lo selezioni. Per selezionare un elemento dall'albero con il mouse, clicca l'elemento e poi clicca „Seleziona“.
Supporto per gli screen reader
Quando un elemento nell'albero riceve il focus, gli screen reader annunciano i dettagli sull'elemento, come il suo nome accessibile e il ruolo calcolato. Gli elementi annunciano anche „Selezionato“ quando fanno parte della tua selezione, e „Evidenziato“ (con la loro posizione, ad esempio, „Evidenziato 2 di 5“) quando axe DevTools li ha evidenziati.
Per l'elenco completo delle proprietà e degli attributi dell'elemento focalizzato, attiva il pulsante „Maggiori Informazioni“.
Passare tra gli elementi evidenziati
In alcuni passaggi, axe DevTools evidenzia gli elementi sulla pagina che devi esaminare, come le intestazioni o i punti tab trovati durante un Test Guidato Intelligente, o i problemi evidenziati quando si segnala manualmente un problema. Invece di navigare l'albero per trovare ciascuno, puoi passare direttamente tra loro.
Quando ci sono due o più elementi evidenziati, usa i pulsanti „Salta al Precedente Evidenziato“ e „Salta al Successivo Evidenziato“ nel Selettore di Elementi. Mentre un elemento evidenziato è in focus, un contatore (ad esempio, „2 / 5“) mostra la sua posizione tra tutti gli elementi evidenziati.
Puoi anche utilizzare le scorciatoie da tastiera mentre il focus è ovunque nel Selettore di Elementi, inclusi gli elementi nell'albero:
| Scorciatoia | Azione |
|---|---|
| Alt+Shift+N (Opzione+Shift+N su macOS) | Salta al prossimo elemento evidenziato |
| Alt+Shift+P (Option+Shift+P su macOS) | Salta all'elemento evidenziato precedente |
Il salto si avvolge, quindi superando l'ultimo elemento evidenziato si torna al primo e viceversa. Se c'è solo un elemento evidenziato e ti sei allontanato da esso, uno dei due collegamenti ti riporta ad esso.
Rimuovere una selezione
Per rimuovere un elemento selezionato, esegui una delle seguenti azioni:
- Nel Selettore di Elementi, focalizza l'elemento e premi Spazio o attiva „Rimuovi“
- Attiva il pulsante rimuovi (cestino) accanto all'elemento nella lista degli elementi selezionati
- Nei Test Guidati Intelligenti, attiva „Rimuovi tutte le selezioni“ per cancellare ogni selezione nel passo corrente
Quando si solleva un problema manuale, il primo elemento che selezioni è l'„Elemento Selezionato“ contro il quale il problema è sollevato e ogni elemento successivo è elencato sotto „Elementi Correlati“.