Esplorare Chrome DevTools con le tecnologie per la disabilità

Rob Dodson

Lo scopo di questa guida è aiutare gli utenti che si affidano principalmente alle tecnologie per la disabilità, come gli screen reader, ad accedere e a 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 stai cercando funzioni DevTools per migliorare l'accessibilità di una pagina web.

L'accessibilità di DevTools è in continua evoluzione. Alcuni riquadri e schede funzionano meglio con le tecnologie per la disabilità rispetto ad altri. Questa guida illustra i riquadri più accessibili e evidenzia problemi specifici che potresti riscontrare durante il percorso.

Panoramica

Prima di iniziare, è utile avere un modello mentale di strutturare la UI 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 i CSS.
  • Il riquadro Console ti consente di leggere i log JavaScript e gli oggetti di modifica in tempo reale.

All'interno dell'area dei contenuti di ciascun riquadro è disponibile una serie di strumenti diversi, spesso indicati come schede o riquadro nella documentazione. Ad esempio, il riquadro Elementi contiene schede aggiuntive per esaminare i listener di eventi, l'albero dell'accessibilità e molto altro ancora. La distinzione tra schede e riquadri è in qualche modo arbitraria. L'unico motivo per cui vedrai uno o l'altro termine è mantenere la coerenza con il resto della documentazione ufficiale di DevTools.

Scorciatoie da tastiera

Il riferimento sulle scorciatoie da tastiera di DevTools è un utile documento di riferimento. Assicurati di aggiungerlo ai preferiti e di farvi riferimento mentre esplori i vari 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.

Spostarsi tra i riquadri

Navigazione con la tastiera

  • Con DevTools aperto, premi Ctrl+] o Comando+] (Mac) per impostare lo stato attivo sul riquadro successivo.
  • Premi Ctrl+[ o Comando+[ (Mac) per impostare lo stato attivo sul riquadro precedente.
  • È anche possibile utilizzare Maiusc + Tab per spostare lo stato attivo nell'elemento tablist di un riquadro e utilizzare i tasti freccia per cambiare riquadro, anche se potrebbe essere più veloce usare le scorciatoie menzionate in precedenza.

Problemi noti

  • Alcuni riquadri, come quelli della Console e Prestazioni, potrebbero spostare lo stato attivo nell'area dei contenuti non appena vengono attivati. Questa operazione può rendere difficoltosa la navigazione tramite i tasti freccia.
  • Il nome del riquadro selezionato viene annunciato, ma solo dopo che ha letto i contenuti attivi nel riquadro. In questo modo, è molto facile perderli.

Navigazione per menu Comando

Per impostare lo stato attivo su un riquadro specifico, utilizza il menu Comando:

  1. Con DevTools aperto, premi Ctrl + Maiusc + P o Comando + Maiusc + P (Mac) per aprire il menu Comando. Il menu Comando è una casella combinata di ricerca parziale con completamento automatico.
  2. Digita il nome del riquadro da aprire, quindi utilizza la tastiera Freccia giù per andare all'opzione corretta.
  3. Premi Invio per eseguire un comando.

Ad esempio, per aprire il riquadro Elementi:

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

L'apertura di un riquadro in questo modo indirizza lo stato attivo ai contenuti del riquadro stesso. Nel caso del riquadro Elementi, lo stato attivo passa all'albero DOM.

Riquadro Elementi

Esaminare un elemento della pagina

  1. Vai all'elemento che vuoi controllare 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 ed è attivo l'elemento nell'albero DOM.

L'albero DOM è disposto come un ARIA tree. Per un esempio, consulta Esplorare l'albero DOM con una tastiera.

Copia il codice per un elemento nell'albero DOM

  1. Con lo stato attivo su un nodo nella struttura DOM, apri il menu contestuale contestuale.
  2. Espandi l'opzione Copia.
  3. Seleziona Copia outerHTML.

Problemi noti

  • Spesso, l'opzione Copia outerHTML non seleziona il nodo corrente, ma seleziona il relativo nodo principale. Tuttavia, i contenuti dell'elemento devono essere ancora presenti nel file outerHTML copiato.

Modifica degli attributi di un elemento nell'albero DOM

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

Problemi noti

  • Quando digiti il testo non ricevi feedback. Se fai un errore di battitura e usi i tasti freccia per esplorare il testo inserito, non ricevi alcun feedback. Il modo più semplice per controllare il tuo lavoro è accettare la modifica, poi ascoltare l'annuncio dell'intero elemento.

Modifica l'HTML di un elemento nell'albero DOM

  • Con lo stato attivo su un nodo nella struttura 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 cambiare 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 impostati su h3.

Schede del riquadro degli elementi

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

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

L'albero DOM trasforma gli elementi con attributi href in link attivabili, quindi potrebbe essere necessario premere Tab più di una volta per accedere al riquadro Stili.

Problemi noti

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

Riquadro Stili

Nel riquadro Stili troverai i controlli per gli stili di filtro, l'attivazione/disattivazione degli stati degli elementi (come :active e :focus), l'attivazione/disattivazione delle classi e l'aggiunta di nuove classi. Esiste anche un potente strumento di ispezione degli stili per esplorare e modificare gli stili attualmente applicati all'elemento in primo piano nell'albero DOM.

Il concetto chiave da comprendere del riquadro Stili è che mostra solo gli stili per il nodo attualmente selezionato nell'albero DOM. Ad esempio, supponiamo che tu abbia completato l'ispezione degli stili di un nodo <header> e che ora tu voglia esaminare gli stili di un nodo <footer>. Per farlo, devi prima selezionare il nodo <footer> nella struttura DOM. Potrebbe essere più veloce utilizzare il flusso di lavoro Ispeziona per ispezionare un nodo nelle vicinanze generali del nodo footer (ad esempio un link all'interno del piè di pagina), che concentra l'albero DOM, quindi utilizzare la tastiera per andare al nodo esatto che ti interessa.

Esplorare il riquadro Stili

Poiché tutti gli strumenti per gli stili si collegano in un modo o nell'altro al riquadro Stili, è importante diventare subito esperti di questo strumento.

  • Con lo stato attivo sul riquadro Stili, premi Tab per spostare lo stato attivo all'interno ed esplorare i contenuti.
  • Premi Tab finché non viene attivato il primo stile. Se usi uno screen reader, questo primo stile sarà annunciato come "element.style {}".
  • Premi la 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 su cui viene visualizzato lo stile e il nome stesso dello stile. Ad esempio: "main.css:233 .card__img {}"
  • Premi Invio per esaminare uno stile in modo più dettagliato. 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 corrispondenti. Alla fine di ogni blocco di stile c'è un campo di testo modificabile vuoto che puoi utilizzare per aggiungere ulteriori proprietà CSS.
  • Puoi continuare a premere Tab per spostarti nell'elenco degli stili oppure premi Esc per uscire da questa modalità e tornare alla navigazione con i tasti freccia.

Assicurati di leggere le informazioni di riferimento sulla tastiera del riquadro Stili per ulteriori scorciatoie.

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

Attiva/disattiva stato dell'elemento

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

  1. Vai al riquadro Stili e premi Tab finché non viene impostato lo stato attivo sul pulsante Attiva/disattiva stato elemento.
  2. Premi Invio per espandere la raccolta degli stati dell'elemento. Gli stati degli elementi sono presentati come un gruppo di caselle di controllo.
  3. Premi Tab finché non viene impostato lo stato attivo sul primo stato :active.
  4. Premi la Barra spaziatrice per attivare la funzionalità. Se l'elemento attualmente selezionato nell'albero DOM ha uno stile :active, viene applicato.
  5. Continua a premere Tab per esplorare tutti gli stati disponibili.

Aggiungere un corso d'uscita

Accanto al pulsante Attiva/disattiva stato degli elementi si trova il pulsante Classi elemento. Sposta lo stato attivo su di esso premi Tab e poi Invio. Lo stato attivo passa a un campo di testo di modifica denominato Aggiungi nuovo corso.

Il pulsante Classi elemento viene utilizzato principalmente per aggiungere classi esistenti a un elemento. Ad esempio, se il 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 del corso e premi Invio per applicarlo.

Aggiungi 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 premi Invio. Lo stato attivo passa a un campo di testo modificabile all'interno dello strumento di controllo degli stili. Il contenuto di testo iniziale del campo è il nome del tag dell'elemento selezionato nell'albero DOM. Puoi digitare il nome della classe che vuoi in questo campo e poi premere Tab per assegnarle le proprietà CSS.

Scheda Elaborata

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

Esplora tutti gli stili elaborati

Premi Tab fino a raggiungere la raccolta di stili calcolati. Vengono presentati come tree ARIA. L'espansione di una casella di riepilogo mostra quali selettori CSS stanno applicando lo stile calcolato. Questi selettori sono organizzati per specificità. Uno screen reader annuncia il valore calcolato, a quale selettore CSS corrisponde attualmente, il nome del file del foglio di stile che contiene il selettore e il numero di riga del selettore.

Problemi noti

  • Se utilizzi il campo di testo Filtro non potrai più controllare gli stili.

Scheda Listener di eventi

Dal riquadro Elementi puoi esaminare i listener di eventi applicati a un elemento utilizzando la scheda Listener di eventi. Con lo stato attivo sul riquadro Stili, premi la Freccia destra per passare alla scheda Listener di eventi.

Esplora i listener di eventi

I listener di eventi sono presentati come un tree ARIA. Puoi utilizzare i tasti freccia per spostarti tra le opzioni. Uno screen reader annuncia il nome dell'oggetto DOM a cui è associato il listener di eventi, nonché il nome del file in cui è definito il listener di eventi e il relativo numero di riga.

Riquadro 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 disponibili controlli per esplorare l'albero dell'accessibilità, gli attributi ARIA applicati a un elemento e le sue proprietà di accessibilità calcolate.

Albero dell'accessibilità

La struttura ad albero dell'accessibilità è presentata come un elemento 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" nella struttura ad albero. Usa i tasti freccia per spostarti nella struttura ed esplorare le relazioni padre-figlio.

Problemi noti

  • Il tipo di albero ARIA utilizzato dal riquadro Accessibilità potrebbe non essere mostrato correttamente in Chrome per gli screen reader macOS come VoiceOver. Abbonati al problema di Chromium n. 868480 per ricevere informazioni sull'avanzamento del problema.
  • Le sezioni Attributi ARIA e Proprietà calcolate sono sottoposte a markup come strutture ARIA, ma al momento non dispongono della gestione degli elementi attivi, quindi non sono utilizzabili da tastiera.

Riquadro dei controlli

Il riquadro Controlli consente di eseguire una serie di test su un sito per individuare problemi comuni relativi a rendimento, accessibilità, SEO e molte altre categorie.

Configura ed esegui un controllo

  1. Quando il riquadro Controlli viene aperto per la prima volta, lo stato attivo è impostato 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.
  2. Premi Maiusc + Tab o torna indietro in modalità Sfoglia 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 su 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 non è stato eseguito il markup delle diverse sezioni del modulo di configurazione con un elemento fieldset. Potrebbe essere più semplice esplorarli in modalità Sfoglia per capire quali controlli sono associati a ogni sezione.
  • Al termine del controllo, non verrà visualizzato alcun annuncio relativo a earcon o regione dal vivo. In genere l'operazione richiede circa 30 secondi, dopodiché dovresti essere in grado di accedere ai risultati. Il modo più semplice per raggiungere i risultati può essere l'uso della modalità Sfoglia.

Esplorare il report di controllo

Il report di revisione è organizzato in sezioni corrispondenti a ciascuna delle categorie di revisione. Si apre il report con un elenco di punteggi per ogni categoria. Questi punteggi sono anche link da usare 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 riusciti. 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.