Esplorare Chrome DevTools con le tecnologie per la disabilità

Questa guida ha lo scopo di 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 Riferimento all'accessibilità se stai cercando funzionalità di DevTools correlate 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 assistive rispetto ad altri. Questa guida illustra i pannelli più accessibili e mette in evidenza i problemi specifici che potresti incontrare lungo il percorso.

Panoramica

Prima di iniziare, è utile avere un modello mentale della struttura dell'interfaccia utente di DevTools. DevTools è diviso in una serie di riquadri organizzati in un ARIA tablist. Ad esempio:

• Il riquadro Elementi consente di visualizzare e modificare i nodi DOM o il CSS.
• Il pannello Console ti consente di leggere i log JavaScript e modificare gli oggetti in tempo reale.

All'interno dell'area dei contenuti di ogni pannello, sono disponibili diversi strumenti, spesso chiamati schede o riquadri nella documentazione. Ad esempio, il riquadro Elementi contiene schede aggiuntive per esaminare i listener di eventi, l'albero dell'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

Il riferimento alle scorciatoie da tastiera di DevTools è un utile foglio di riferimento. Assicurati di aggiungerlo ai preferiti e di consultarlo mentre esplori i vari pannelli.

Apri DevTools

Per iniziare, leggi Aprire Chrome DevTools. Esistono diversi modi per aprire DevTools, tramite scorciatoie da tastiera o voci di menu.

Navigare tra i riquadri

Navigare tramite tastiera

• Con DevTools aperto, premi Ctrl+] o Comando+] (Mac) per mettere a fuoco il riquadro successivo.
• Premi Ctrl+[ o Comando+[ (Mac) per mettere a fuoco il riquadro precedente.
• È anche possibile utilizzare Maiusc+Tab per spostare lo stato attivo in un tablist di 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 il focus nell'area dei contenuti non appena vengono attivati. In questo modo, la navigazione con i tasti freccia può risultare difficile.
• Il nome del riquadro selezionato viene annunciato, ma solo dopo che sono stati letti i contenuti focalizzati nel riquadro. Per questo motivo, è molto facile non accorgersene.

Navigare tramite il menu dei comandi

Per mettere a fuoco un riquadro specifico, utilizza il menu dei comandi:

1. Con DevTools aperto, premi Ctrl+Maiusc+P o Cmd+Maiusc+P (Mac) per aprire il menu Comando. Il menu dei comandi è una casella combinata di completamento automatico della ricerca fuzzy.
2. Digita il nome del pannello che vuoi aprire, quindi utilizza il tasto Freccia giù della tastiera per navigare fino all'opzione corretta.
3. Premi Invio per eseguire un comando.

Ad esempio, per aprire il riquadro Elementi:

1. Apri il menu dei comandi.
2. Digita E, poi L. L'opzione Pannello > Mostra elementi è selezionata.
3. Premi Invio per eseguire il comando che apre il riquadro.

L'apertura di un riquadro in questo modo sposta lo stato attivo sui contenuti del riquadro stesso. Nel caso del riquadro Elementi, lo stato attivo si sposta nell'albero DOM.

Riquadro Elementi

Ispezionare un elemento della pagina

1. Vai all'elemento che vuoi esaminare utilizzando il cursore dello screen reader.
2. Simula un clic con il tasto destro del mouse sull'elemento per aprire il menu contestuale.
3. Scegli l'opzione Ispeziona. Si apre il riquadro Elementi e viene selezionato l'elemento nell'albero DOM.

L'albero DOM è strutturato come un albero tree ARIA. Per un esempio, consulta Navigare nella struttura DOM con una tastiera.

Copiare il codice di un elemento nell'albero DOM

1. Con il focus su un nodo nell'albero DOM, visualizza il menu contestuale con il tasto destro del mouse.
2. Espandi l'opzione Copia.
3. Seleziona Copia outerHTML.

Problemi noti

• Copia outerHTML spesso non seleziona il nodo corrente, ma il nodo principale. Tuttavia, i contenuti dell'elemento devono comunque trovarsi nell'outerHTML copiato.

Modificare gli attributi di un elemento nell'albero DOM

• Con lo stato attivo su un nodo nell'albero DOM, premi Invio per renderlo modificabile.
• Premi Tab per spostarti tra i valori degli attributi. Quando senti "spazio", ti trovi all'interno di un campo di input di testo vuoto e puoi digitare un nuovo valore dell'attributo.
• Premi Ctrl+Invio o Cmd+Invio (Mac) per accettare la modifica e ascoltare l'intero contenuto dell'elemento.

Problemi noti

• Quando digiti nell'input di testo non ricevi alcun feedback. Se commetti un errore di battitura 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 l'HTML di un elemento nell'albero DOM

• Con lo stato attivo su un nodo nell'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", 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, se digiti h3 e premi Ctrl+Invio o Comando+Invio (Mac), i tag di inizio e fine dell'elemento vengono modificati in h3.

Schede del riquadro Elementi

Il riquadro Elementi contiene schede aggiuntive per esaminare elementi come il CSS applicato a un elemento o la sua posizione nell'albero di accessibilità.

• Con lo stato attivo su un nodo nell'albero DOM, premi Tab finché non senti che il riquadro Stili è selezionato.
• Utilizza la Freccia destra per esplorare le altre schede disponibili.

L'albero DOM trasforma gli elementi con attributi href in link selezionabili, quindi potresti dover premere Tab più di una volta per raggiungere il riquadro Stili.

Problemi noti

Le schede Punti di interruzione DOM e Proprietà non sono accessibili da tastiera.

Riquadro Stili

Nel riquadro Stili troverai i controlli per filtrare gli stili, attivare/disattivare gli stati degli elementi (ad esempio :active e :focus), attivare/disattivare le classi e aggiungere nuove classi. È disponibile anche un potente strumento di ispezione degli stili per esplorare e modificare gli stili attualmente applicati all'elemento selezionato nell'albero DOM.

Il concetto chiave da comprendere del riquadro Stili è che mostra solo gli stili del nodo attualmente selezionato nell'albero DOM. Ad esempio, supponi di aver finito di esaminare gli stili di un nodo <header> e ora vuoi 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 Ispeziona per esaminare un nodo che si trova nelle vicinanze del nodo footer (ad esempio un link nel piè di pagina), che mette a fuoco l'albero DOM, e poi utilizzare la tastiera per navigare fino al nodo esatto che ti interessa.

Navigare nel riquadro Stili

Poiché tutti gli strumenti di stile sono collegati in un modo o nell'altro al riquadro Stili, è consigliabile diventare esperti di questo strumento.

• Con lo stato attivo sul riquadro Stili, premi Tab per spostare lo stato attivo all'interno ed 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 scorrere l'elenco degli stili in ordine di specificità. Un lettore di schermo annuncia ogni stile a partire dal nome del file CSS, dal numero di riga in cui appare lo stile e dal nome dello stile stesso. Ad esempio: "main.css:233 .card__img {}"
• Premi Invio per esaminare uno stile in modo più dettagliato. Il focus 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 modificabile vuoto che puoi utilizzare per aggiungere proprietà CSS aggiuntive.
• Puoi continuare a premere Tab per spostarti nell'elenco degli stili oppure premere Esc per uscire da questa modalità e tornare alla navigazione con i tasti freccia.

Assicurati di leggere il riferimento alle scorciatoie da tastiera del riquadro Stili per altre scorciatoie.

Problemi noti

• Se utilizzi il campo di testo modificabile Filtra, non potrai più navigare nell'elenco degli stili.

Attiva/disattiva stato dell'elemento

Per attivare o disattivare lo stato di un elemento, ad esempio :active o :focus:

1. Vai al riquadro Stili e premi Tab finché lo stato attivo non è sul pulsante Attiva/disattiva stato elemento.
2. Premi Invio per espandere la raccolta di stati degli elementi. Gli stati degli elementi sono presentati come un gruppo di caselle di controllo.
3. Premi Tab finché non viene selezionato il primo stato, :active.
4. Premi Spazio per attivarlo. Se l'elemento attualmente selezionato nella struttura DOM ha uno stile :active, questo viene applicato.
5. Continua a premere il tasto Tab per esplorare tutti gli stati disponibili.

Aggiungere una classe in uscita

Accanto al pulsante Attiva/disattiva stato dell'elemento si trova il pulsante Classi di elementi. Sposta il cursore su di esso premendo Tab e poi Invio. Lo stato attivo viene spostato su un campo di modifica del testo con l'etichetta Aggiungi nuovo corso.

Il pulsante Classi di elementi viene utilizzato principalmente per aggiungere classi esistenti a un elemento. Ad esempio, se il tuo foglio di stile contiene una classe helper denominata .clearfix, puoi premere . all'interno del campo di testo di modifica per visualizzare un elenco di suggerimenti di classi e utilizzare la Freccia giù per trovare il suggerimento .clearfix. In alternativa, digita il nome della classe 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 esso premendo Tab e poi Invio. Lo stato attivo viene spostato su un campo di testo modificabile all'interno dell'ispettore di stile. Il contenuto di testo iniziale del campo è il nome del tag dell'elemento selezionato nell'albero DOM. Puoi digitare il nome della classe che preferisci in questo campo e poi premere Tab per assegnargli le proprietà CSS.

Scheda Calcolati

Con lo stato attivo sulla scheda Calcolato, premi Tab per spostare lo stato attivo all'interno ed esplorarne i contenuti. All'interno della scheda Elaborato sono presenti controlli per esplorare quali proprietà CSS vengono effettivamente applicate a un elemento in ordine di specificità.

Esplora tutti gli stili calcolati

Premi Tab finché non raggiungi la raccolta di stili calcolati. Questi vengono presentati come ARIA tree. L'espansione di una casella di riepilogo mostra quali selettori CSS applicano lo stile calcolato. Questi selettori sono organizzati in base alla specificità. Un lettore di schermo annuncia il valore calcolato, il selettore CSS attualmente corrispondente, il nome file del foglio di 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

Nel riquadro Elementi puoi esaminare i listener di eventi applicati a un elemento utilizzando la scheda Listener di eventi. Con il focus sul riquadro Stili, premi la Freccia destra per passare alla scheda Event Listeners (Listener di eventi).

Esplorare i listener di eventi

I listener di eventi vengono presentati come tree ARIA. Puoi utilizzare i tasti freccia per spostarti tra le opzioni. Un lettore di schermo annuncia il nome dell'oggetto DOM a cui è collegato il listener di eventi, nonché il nome del file in cui è definito il listener di eventi e il numero di riga.

Pannello Accessibilità

Con lo stato attivo sul riquadro Accessibilità, premi Tab per spostare lo stato attivo all'interno ed esplorarne i contenuti. Nel riquadro Accessibilità sono presenti controlli per esplorare l'albero dell'accessibilità, gli attributi ARIA applicati a un elemento e le relative proprietà di accessibilità calcolate.

Albero di accessibilità

L'albero dell'accessibilità viene presentato come un tree ARIA in cui 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 spostarti nella struttura ad albero ed esplorare le relazioni padre-figlio.

Problemi noti

• Il tipo di struttura ARIA utilizzato nel riquadro Accessibilità potrebbe non essere esposto correttamente in Chrome per gli screen reader macOS come VoiceOver. Iscriviti al problema di Chromium n. 868480 per ricevere aggiornamenti sull'avanzamento della risoluzione.
• Le sezioni Attributi ARIA e Proprietà calcolate sono contrassegnate come alberi ARIA, ma al momento non dispongono della gestione dello stato attivo, pertanto non sono utilizzabili tramite tastiera.

Pannello 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 una serie di altre categorie.

Configurare ed eseguire un controllo

1. Quando il riquadro Audit viene aperto per la prima volta, lo stato attivo è impostato sul pulsante Esegui audit alla fine del modulo. Per impostazione predefinita, il modulo è configurato per eseguire audit per ogni categoria utilizzando l'emulazione mobile su una connessione 3G simulata.
2. Utilizza Maiusc+Tab o torna indietro in modalità di navigazione per modificare le impostazioni di controllo.
3. Quando è tutto pronto per eseguire il controllo, torna al pulsante Esegui controllo e premi Invio.
4. Lo stato attivo si sposta in una finestra modale con un pulsante Annulla che ti consente di uscire dall'audit. Potresti sentire una serie di segnali acustici 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 ciascuna sezione.
• Al termine dell'esecuzione dell'audit, non viene riprodotto alcun earcon o annuncio della regione live. In genere, l'operazione richiede circa 30 secondi, dopodiché dovresti essere in grado di accedere ai risultati. La modalità Sfoglia potrebbe essere il modo più semplice per raggiungere i risultati.

Navigare nel report di controllo

Il report di controllo è organizzato in sezioni che corrispondono 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 passare 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 superati. Ogni sezione termina con un elemento details finale che contiene tutti i controlli superati.

Per eseguire un nuovo controllo, utilizza Maiusc+Tab per uscire dal report e cerca il pulsante Esegui un controllo.