Esplorare Chrome DevTools con le tecnologie per la disabilità

Rob Dodson

Questa guida è pensata per aiutare gli utenti che si affidano principalmente a tecnologie per la disabilità (TA), 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 il riferimento all'accessibilità se stai cercando funzionalità di DevTools correlate al miglioramento dell'accessibilità di una pagina web.

L'accessibilità di DevTools è un work in progress. Alcuni riquadri e schede funzionano meglio con le TA rispetto ad altri. Questa guida ti illustra i riquadri più accessibili ed evidenzia i problemi specifici che potresti riscontrare.

Panoramica

DevTools è suddiviso in una serie di riquadri organizzati in un elemento tablistARIA. Ad esempio:

Nell'area dei contenuti di ogni riquadro sono presenti diversi strumenti, spesso indicati come schede o riquadri nella documentazione. Ad esempio, il riquadro Elementi contiene schede aggiuntive per ispezionare i listener 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

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

Aprire 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

Puoi navigare tra i riquadri tramite tastiera, menu dei comandi o utilizzando un mouse o un trackpad.

Navigare tramite tastiera

  • Con DevTools aperto, premi Control+] o Command+] (Mac) per selezionare il riquadro successivo.
  • Premi Control+[ o Command+[ (Mac) per selezionare il riquadro precedente.
  • È anche possibile utilizzare Maiusc+Tab per spostare lo stato attivo in un elemento 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 lo stato attivo nella loro area di contenuti non appena vengono attivati. Questo può rendere difficile la navigazione con i tasti freccia.
  • Il nome del riquadro selezionato viene annunciato, ma solo dopo che uno screen reader ha letto i contenuti selezionati nel riquadro. Questo può rendere molto facile non accorgersene.

Navigare tramite il menu dei comandi

Per selezionare un riquadro specifico, utilizza il menu dei comandi:

  1. Con DevTools aperto, premi Control+Maiusc+P o Command+Maiusc+P (Mac) per aprire il menu dei comandi. Il menu dei comandi è una casella combinata di completamento automatico per la ricerca fuzzy.
  2. Digita il nome del riquadro che vuoi aprire, quindi utilizza il tasto Freccia giù per selezionare l'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 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 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 nella pagina

  1. Vai all'elemento che vuoi ispezionare 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 l'elemento viene selezionato nell'albero DOM.

L'albero DOM è disposto come un elemento ARIA tree. Vedi un esempio in Navigare nell'albero DOM con una tastiera.

Copiare il codice di un elemento nell'albero DOM

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

Problemi noti

  • Copia outerHTML spesso seleziona il nodo padre anziché il nodo previsto. Tuttavia, i contenuti dell'elemento dovrebbero comunque essere copiati all'interno di outerHTML.

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 input di testo vuoto e puoi digitare un nuovo valore dell'attributo.
  • Premi Control+Invio o Command+Invio (Mac) per accettare la modifica e ascoltare l'intero contenuto dell'elemento.

Problemi noti

  • Quando digiti nell'input di testo, non riceverai feedback. Se commetti un errore di battitura e utilizzi i tasti freccia per esplorare l'input, non riceverai 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 Control+Invio o Command+Invio (Mac) per accettare la modifica.

Ad esempio, se digiti h3 e premi Control+Invio o Command+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 ispezionare 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 il tasto Freccia destra per esplorare le altre schede disponibili.

L'albero DOM trasforma gli elementi con attributi href in link selezionabili, quindi potrebbe essere necessario premere Tab più di una volta 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 troverai 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 applicati all'elemento selezionato nell'albero DOM.

Il concetto chiave da comprendere sul riquadro Stili è che mostra solo gli stili del nodo attualmente selezionato nell'albero DOM. Ad esempio, supponiamo che tu abbia finito di ispezionare gli stili di un nodo <header> e ora vuoi esaminare gli stili di un nodo <footer>. Per farlo, devi selezionare il <footer> nodo nell'albero DOM.

Potresti trovare più veloce utilizzare il flusso di lavoro Ispeziona per ispezionare un nodo che si trova nelle vicinanze del nodo footer (ad esempio un link all'interno del piè di pagina), che seleziona l'albero DOM, quindi utilizzare la tastiera per selezionare il nodo esatto che ti interessa.

Navigare nel riquadro Stili

Poiché tutti gli strumenti di stile si collegano 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 viene annunciato come "element.style {}".
  • Premi Freccia giù per navigare nell'elenco degli stili in ordine di specificità. Uno screen reader annuncia ogni stile a partire dal nome del file CSS, dal numero di riga in cui viene visualizzato lo stile e dal nome dello stile stesso. Ad esempio: "main.css:233 .card__img {}"
  • Premi Invio per ispezionare uno stile in modo più dettagliato. Lo stato attivo inizia con 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 altre proprietà CSS.
  • 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.

Leggi il riferimento alla tastiera del riquadro Stili per altre scorciatoie.

Problemi noti
  • Se utilizzi il campo di testo modificabile Filtra, non puoi navigare nell'elenco degli stili.

Attivare/disattivare lo 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 selezionato il pulsante Attiva/disattiva stato dell'elemento.
  2. Premi Invio per espandere la raccolta di stati degli elementi. Gli stati degli elementi vengono 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 nell'albero DOM ha uno stile :active, questo viene applicato.
  5. Continua a premere Tab per esplorare tutti gli stati disponibili.

Aggiungere una classe esistente

Accanto al pulsante Attiva/disattiva stato dell'elemento si trova il pulsante Classi elemento. Sposta lo stato attivo su questo pulsante premendo Tab e poi Invio. Lo stato attivo si sposta in un campo di testo modificabile con l'etichetta Aggiungi nuova classe.

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 modificabile per visualizzare un elenco di suggerimenti di classi e utilizzare il tast2}Freccia giù per trovare il .clearfix suggerimento. In alternativa, digita il nome della classe e premi Invio per applicarla.

Aggiungere una nuova regola di stile

Accanto al pulsante Classi elemento si trova il pulsante Nuova regola di stile. Sposta lo stato attivo su questo pulsante premendo Tab e poi Invio. Lo stato attivo si sposta in un campo di testo modificabile all'interno dell'ispettore di stili. Il contenuto di testo iniziale del campo è il nome del tag dell'elemento selezionato nell'albero DOM. Puoi digitare qualsiasi nome di classe in questo campo e poi premere Tab per assegnargli le proprietà CSS.

Scheda Elaborato

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

Esplorare tutti gli stili elaborati

Premi Tab finché non raggiungi la raccolta di stili elaborati. Questi vengono presentati come un elemento tree ARIA. L'espansione di una casella di riepilogo rivela quali selettori CSS applicano lo stile elaborato. Questi selettori sono organizzati in base alla specificità.

Uno screen reader annuncia il valore elaborato, il selettore CSS 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

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

Esplorare i listener di eventi

I listener di eventi vengono presentati come un elemento tree ARIA. Puoi utilizzare i tasti freccia per spostarti tra di essi. Uno screen reader annuncia il nome dell'oggetto DOM a cui è collegato il listener di eventi, nonché il nome 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 presenti controlli per esplorare l'albero di accessibilità, gli attributi ARIA applicati a un elemento e le relative proprietà di accessibilità elaborate.

Albero di accessibilità

L'albero di accessibilità viene presentato come un elemento ARIA tree in cui ogni treeitem corrisponde a un elemento nel DOM. L'albero annuncia il ruolo elaborato per il nodo selezionato. Gli elementi generici, come div e span, vengono annunciati come "GenericContainer" nell'albero. Utilizza i tasti freccia per attraversare l'albero ed esplorare le relazioni padre-figlio.

Problemi noti

  • Il tipo di albero ARIA utilizzato dal riquadro Accessibilità potrebbe non essere disponibile negli screen reader di Chrome per macOS, come VoiceOver. Iscriviti al problema di Chromium n. 868480 per ricevere aggiornamenti sui progressi.
  • Le sezioni Attributi ARIA e Proprietà elaborate sono contrassegnate come alberi ARIA, ma non includono la gestione dello stato attivo. Ciò significa che queste sezioni non sono utilizzabili tramite tastiera.

Riquadro Controlli

Il riquadro Controlli 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 Controlli viene aperto per la prima volta, lo stato attivo viene posizionato sul pulsante Esegui controllo alla fine del modulo. Per impostazione predefinita, il modulo è configurato per eseguire i controlli per ogni categoria utilizzando l'emulazione mobile su una connessione 3G simulata.
  2. Utilizza 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 in una finestra modale con un pulsante Annulla che consente di uscire dal controllo. Durante l'esecuzione del controllo e l'aggiornamento della pagina più volte, potresti sentire una serie di segnali acustici.

Problemi noti

  • 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.
  • Non viene emesso alcun earcon o annuncio di area dinamica al termine dell'esecuzione del controllo. In genere ci vogliono circa 30 secondi, dopodiché dovresti essere in grado di navigare tra i risultati. Utilizza la modalità Sfoglia per raggiungere rapidamente 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.