Lo scopo di questa guida è aiutare gli utenti che si affidano principalmente a tecnologie per la disabilità come gli screen reader ad accedere e utilizzare Chrome DevTools. Chrome DevTools è una suite di strumenti per sviluppatori web integrati nel browser Google Chrome. Consulta la documentazione di riferimento sull'accessibilità se cerchi le funzionalità di DevTools relative al miglioramento dell'accessibilità di una pagina web.
L'accessibilità di DevTools è in fase di sviluppo. Alcuni riquadri e schede funzionano meglio con le tecnologie di assistenza rispetto ad altri. Questa guida illustra i riquadri più accessibili e mette in evidenza problemi specifici che potresti riscontrare durante la procedura.
Panoramica
Prima di iniziare, è utile avere un modello mentale della struttura dell'interfaccia utente di DevTools. DevTools è suddiviso in una serie di riquadri organizzati in un tablist ARIA. Ad esempio:
- Il riquadro Elementi ti consente di visualizzare e modificare i nodi DOM o il CSS.
- Il riquadro Console ti consente di leggere i log JavaScript e modificare in tempo reale gli oggetti.
Nell'area dei contenuti di ogni riquadro sono disponibili diversi strumenti, spesso indicati come schede o riquadri nella documentazione. Ad esempio, il riquadro Elementi contiene schede aggiuntive per ispezionare gli ascoltatori di eventi, l'albero di accessibilità e molto altro. La distinzione tra schede e riquadri è in qualche modo arbitraria. L'unico motivo per cui vedrai un termine o l'altro è mantenere la coerenza con il resto della documentazione ufficiale di DevTools.
Scorciatoie da tastiera
La documentazione di riferimento delle scorciatoie da tastiera di DevTools è un utile cheatsheet. Assicurati di aggiungerla ai preferiti e di consultarla mentre esplori i diversi riquadri.
Apri DevTools
Per iniziare, leggi l'articolo Aprire Chrome DevTools. Esistono diversi modi per aprire DevTools, tramite scorciatoie da tastiera o voci di menu.
Navigare tra i riquadri
Navigare con la tastiera
- Con DevTools aperto, premi Ctrl+] o Comando+] (Mac) per attivare il riquadro successivo.
- Premi Ctrl+[ o Comando+[ (Mac) per attivare il riquadro precedente.
- È anche possibile utilizzare Maiusc+Tab per spostare lo stato attivo in
tablistdi un riquadro e utilizzare i tasti freccia per cambiare riquadro, anche se potrebbe essere più veloce utilizzare le scorciatoie menzionate in precedenza.
Problemi noti
- Alcuni riquadri, come Console e Rendimento, potrebbero spostare lo stato attivo nell'area dei contenuti non appena vengono attivati. Ciò può rendere difficile la navigazione con i tasti freccia.
- Il nome del riquadro selezionato viene annunciato, ma solo dopo aver letto i contenuti in primo piano nel riquadro. È facile non accorgersene.
Navigare nel menu dei comandi
Per mettere a fuoco un riquadro specifico, utilizza il menu dei comandi:
- Con DevTools aperto, premi Control+Maiusc+P o Comando+Maiusc+P (Mac) per aprire il menu di comando. Il menu dei comandi è una casella combinata di completamento automatico per la ricerca fuzzy.
- Digita il nome del riquadro che vuoi aprire, quindi utilizza la Freccia giù della tastiera per accedere all'opzione corretta.
- Premi Invio per eseguire un comando.
Ad esempio, per aprire il riquadro Elementi:
- Apri il menu dei comandi.
- Digita E, quindi L. L'opzione Riquadro > Mostra elementi è selezionata.
- Premi Invio per eseguire il comando che apre il riquadro.
Se apri un riquadro in questo modo, lo stato attivo viene indirizzato ai contenuti del riquadro stesso. Nel caso del riquadro Elementi, lo stato attivo passa all'albero DOM.
Riquadro Elementi
Ispezionare un elemento nella pagina
- Vai all'elemento che vuoi ispezionare utilizzando il cursore dello screen reader.
- Simula un clic con il tasto destro del mouse sull'elemento per aprire il menu contestuale.
- Scegli l'opzione Ispeziona. Si apre il riquadro Elementi e l'elemento viene visualizzato nella struttura DOM.
L'albero DOM è organizzato come tree ARIA. Per un esempio, consulta Navigare nell'albero DOM con una tastiera.
Copiare il codice di un elemento nell'albero DOM
- Con lo stato attivo su un nodo nell'albero DOM, visualizza il menu contestuale con il tasto destro del mouse.
- Espandi l'opzione Copia.
- Seleziona Copia outerHTML.
Problemi noti
- Spesso Copia outerHTML non seleziona il nodo corrente, ma il nodo principale. Tuttavia, i contenuti dell'elemento dovrebbero essere ancora in outerHTML copiato.
Modifica gli attributi di un elemento nell'albero DOM
- Con lo stato attivo su un nodo dell'albero DOM, premi Invio per renderlo modificabile.
- Premi Tab per spostarti tra i valori degli attributi. Quando senti "spazio", significa che ti trovi in un input di testo vuoto e puoi digitare un nuovo valore dell'attributo.
- Premi Ctrl+Invio o Comando+Invio (Mac) per accettare la modifica e ascoltare l'intero contenuto dell'elemento.
Problemi noti
- Quando digiti nel campo di immissione del testo, non ricevi alcun feedback. Se fai un errore ortografico e utilizzi i tasti freccia per esplorare l'input, non ricevi alcun feedback. Il modo più semplice per controllare il tuo lavoro è accettare la modifica, quindi ascoltare l'annuncio dell'intero elemento.
Modificare il codice HTML di un elemento nell'albero DOM
- Con lo stato attivo su un nodo dell'albero DOM, premi Invio per renderlo modificabile.
- Premi Tab per spostarti tra i valori degli attributi. Quando senti il nome dell'elemento, ad esempio "h2", significa che ti trovi all'interno di un input di testo e puoi modificare il tipo di elemento.
- Premi Ctrl+Invio o Comando+Invio (Mac) per accettare la modifica.
Ad esempio, digitando h3 e premendo Control+Invio o
Comando+Invio (Mac) i tag di inizio e di fine dell'elemento vengono impostati su h3.
Schede del riquadro Elementi
Il riquadro Elementi contiene schede aggiuntive per ispezionare elementi come il CSS applicato a un elemento o la sua posizione nella struttura ad albero dell'accessibilità.
- Con lo stato attivo su un nodo dell'albero DOM, premi Tab finché non senti che il riquadro Stili è selezionato.
- Usa la Freccia destra per esplorare le altre schede disponibili.
L'albero DOM trasforma gli elementi con attributi href in link attivabili, pertanto potrebbe essere necessario premere Tab più volte per raggiungere il riquadro Stili.
Problemi noti
Le schede Punti di interruzione DOM e Proprietà non sono accessibili tramite tastiera.
Riquadro Stili
Nel riquadro Stili sono disponibili controlli per filtrare gli stili, attivare/disattivare gli stati degli elementi (ad es.
:active e :focus), attivare/disattivare le classi e aggiungerne di nuove. È inoltre disponibile un potente strumento di ispezione degli stili per esplorare e modificare gli stili attualmente applicati all'elemento attivo nell'albero DOM.
Il concetto chiave da comprendere sul riquadro Stili è che mostra solo gli stili per il node selezionato al momento nell'albero DOM. Ad esempio, supponiamo che tu abbia terminato di ispezionare gli stili
di un nodo <header> e ora voglia esaminare gli stili di un nodo <footer>. Per farlo, devi prima selezionare il nodo <footer> nell'albero DOM. Potresti trovare più veloce utilizzare il flusso di lavoro Esamina per ispezionare un nodo nelle vicinanze del nodo footer (ad esempio un link nel piè di pagina), che mette a fuoco l'albero DOM, quindi utilizzare la tastiera per accedere al nodo esatto che ti interessa.
Esplorare il riquadro Stili
Poiché tutti gli strumenti di stile si collegano in un modo o nell'altro al riquadro Stili, conviene acquisire prima familiarità con questo strumento.
- Con lo stato attivo nel riquadro Stili, premi Tab per spostare lo stato attivo all'interno e esplorarne i contenuti.
- Premi Tab finché il primo stile non diventa attivo. Se utilizzi uno screen reader, questo primo stile verrà annunciato come "element.style {}".
- Premi Freccia giù per spostarti nell'elenco degli stili in ordine di specificità. Uno screen reader annuncia ogni stile iniziando con il nome del file CSS, il numero di riga in cui appare lo stile e il nome dello stile stesso. Ad esempio: "main.css:233 .card__img {}"
- Premi Invio per esaminare un'opzione di stile in maggiore dettaglio. Lo stato attivo inizia su una versione modificabile del nome dello stile.
- Premi Tab per spostarti tra le versioni modificabili di ogni proprietà CSS e i relativi valori. Alla fine di ogni blocco di stile è presente un campo di testo vuoto modificabile che puoi utilizzare per aggiungere altre proprietà CSS.
- Puoi continuare a premere Tab per spostarti nell'elenco degli stili oppure premere Esc per uscire da questa modalità e tornare a navigare con i tasti freccia.
Per altre scorciatoie, consulta il riferimento alla tastiera del riquadro Stili.
Problemi noti
- Se utilizzi il campo di testo modificabile Filtra, non potrai più navigare nell'elenco di stili.
Attiva/disattiva stato dell'elemento
Per attivare o disattivare lo stato di un elemento, ad esempio :active o :focus:
- Vai al riquadro Stili e premi Tab finché il pulsante Attiva/disattiva stato elemento non diventa attivo.
- Premi Invio per espandere la raccolta degli stati degli elementi. Gli stati degli elementi vengono presentati come un gruppo di caselle di controllo.
- Premi Tab finché il primo stato,
:active, non è attivo. - Premi Barra spaziatrice per attivarla. Se l'elemento attualmente selezionato nella struttura DOM ha uno stile
:active, ora viene applicato. - Continua a premere Tab per esplorare tutti gli stati disponibili.
Aggiungere un corso in uscita
Accanto al pulsante Attiva/disattiva stato dell'elemento si trova il pulsante Classi elemento. Sposta lo stato attivo su di essa premendo Tab e poi Invio. Lo stato attivo viene spostato in un campo di modifica del testo denominato Aggiungi Nuovo corso.
Il pulsante Classi elemento viene utilizzato principalmente per aggiungere classi esistenti a un elemento. Ad esempio, se lo stile contiene una classe di supporto denominata .clearfix, puoi premere . all'interno del campo di modifica del testo per visualizzare un elenco di suggerimenti di classi e utilizzare la Freccia giù per trovare il suggerimento .clearfix. In alternativa, digita il nome del corso e premi Invio per applicarlo.
Aggiungere una nuova regola di stile
Accanto al pulsante Classi elemento si trova il pulsante Nuova regola di stile. Sposta lo stato attivo su di essa premendo Tab e premi Invio. Lo stato attivo viene spostato in un campo di testo modificabile all'interno dell'ispettore dello stile. Il contenuto di testo iniziale del campo è il nome del tag dell'elemento selezionato nell'albero DOM. In questo campo puoi digitare il nome della classe che preferisci e poi premere Tab per assegnargli le proprietà CSS.
Scheda Calcolata
Con lo stato attivo sulla scheda Calcolata, premi Tab per spostare lo stato attivo all'interno ed esplorarne i contenuti. Nella scheda Elaborato sono disponibili controlli per esplorare le proprietà CSS effettivamente applicate a un elemento in ordine di specificità.
Esplorare tutti gli stili calcolati
Premi Tab finché non raggiungi la raccolta di stili calcolati. Questi vengono presentati come
tree ARIA. L'espansione di una casella di elenco mostra i selettori CSS che applicano lo stile calcolato. Questi selezionatori sono organizzati in base alla specificità. Uno screen reader annuncia il valore calcolato, il selettore CSS attualmente corrispondente, il nome del file dello stile che contiene il selettore e il numero di riga del selettore.
Problemi noti
- Se utilizzi il campo di testo Filtra, non potrai più ispezionare gli stili.
Scheda Listener di eventi
Dal riquadro Elementi puoi ispezionare i listener di eventi applicati a un elemento utilizzando la scheda Listener di eventi. Con lo stato attivo impostato sul riquadro Stili, premi la Freccia destra per accedere alla scheda Appositi per eventi.
Esplora i listener di eventi
I listener di eventi vengono presentati come tree ARIA. Puoi utilizzare i tasti Freccia per spostarti tra le opzioni. Un screen reader annuncia il nome dell'oggetto DOM a cui è associato l'ascoltatore di eventi, nonché il nome del file in cui è definito l'ascoltatore di eventi e il relativo numero di riga.
Pannello Accessibilità
Con lo stato attivo nel riquadro Accessibilità, premi Tab per spostare lo stato attivo all'interno e esplorarne i contenuti. Nel riquadro Accessibilità sono presenti i controlli per esplorare la struttura ad albero di accessibilità, gli attributi ARIA applicati a un elemento e le relative proprietà di accessibilità calcolate.
Albero di accessibilità
L'albero di accessibilità è presentato come un tree ARIA, dove ogni treeitem corrisponde a un elemento nel DOM. L'albero annuncia il ruolo calcolato per il nodo selezionato. Gli elementi generici come div e span vengono annunciati come "GenericContainer" nell'albero. Utilizza i tasti freccia per esplorare l'albero ed esaminare le relazioni padre-figlio.
Problemi noti
- Il tipo di albero ARIA utilizzato dal riquadro Accessibilità potrebbe non essere correttamente esposto in Chrome per screen reader come VoiceOver per macOS. Iscriviti al problema di Chromium 868480 per ricevere aggiornamenti sull'avanzamento del problema.
- Le sezioni Attributi ARIA e Proprietà calcolate sono contrassegnate come alberi ARIA, ma al momento non dispongono della gestione dell'attenzione, pertanto non sono utilizzabili con la tastiera.
Riquadro Controlli
Il riquadro Audit ti consente di eseguire una serie di test su un sito per verificare la presenza di problemi comuni relativi a rendimento, accessibilità, SEO e a una serie di altre categorie.
Configura ed esegui un controllo
- Quando apri per la prima volta il riquadro Controlli, lo stato attivo si trova sul pulsante Esegui controllo alla fine del modulo. Per impostazione predefinita, il modulo è configurato per eseguire controlli per ogni categoria utilizzando l'emulazione mobile su una connessione 3G simulata.
- Utilizza Maiusc+Tab o torna indietro in modalità di esplorazione per modificare le impostazioni di controllo.
- Quando è tutto pronto per eseguire il controllo, torna al pulsante Esegui controllo e premi Invio.
- Lo stato attivo passa a una finestra modale con un pulsante Annulla che ti consente di uscire dal controllo. Potresti sentire una serie di earcon durante l'esecuzione del controllo e l'aggiornamento della pagina più volte.
Problemi noti
- Al momento le diverse sezioni del modulo di configurazione non sono contrassegnate con un elemento
fieldset. Potrebbe essere più facile navigare in modalità Sfoglia per capire quali controlli sono associati a ogni sezione. - Al termine dell'esecuzione del controllo, non viene emesso alcun segnale acustico o annuncio relativo alla regione in cui si trova l'utente. In genere, sono necessari circa 30 secondi, dopodiché dovresti essere in grado di accedere ai risultati. L'utilizzo della modalità di navigazione potrebbe essere il modo più semplice per raggiungere i risultati.
Esplorare il report di controllo
Il report di controllo è organizzato in sezioni corrispondenti a ciascuna delle categorie di controllo. Il
report si apre con un elenco di punteggi per ogni categoria. Questi punteggi sono anche link che possono essere utilizzati per saltare alle sezioni pertinenti. All'interno di ogni sezione sono presenti elementi details espandibili, che contengono informazioni relative ai controlli superati o non superati. Per impostazione predefinita, vengono mostrati solo i controlli non riusciti.
Ogni sezione termina con un elemento details finale che contiene tutti i controlli superati.
Per eseguire un nuovo controllo, premi Maiusc+Tab per uscire dal report e cerca il pulsante Esegui un controllo.