Questo articolo spiega passo a passo come utilizzare il pannello degli strumenti di sviluppo di Chrome DevTools insieme allo screen reader NVDA. Di seguito eccovi il link alle principali scorciatoie da tastiera per DevTools: Scorciatoie da tastiera – Chrome DevTools.
Ispezionare un elemento nel DOM
Apriamo il browser e carichiamo la pagina web che desideriamo analizzare. Premiamo F12 o Ctrl+Maiusc+I per aprire DevTools con una panoramica sulla pagina intera. In alternativa, con NVDA attivo, possiamo invece spostarci su un elemento della pagina web, attivare il menu contestuale con il comando Shift+F10 e selezionare “Ispeziona”. Il tool si aprirà direttamente sull’elemento selezionato, evitando di farci cercare manualmente il componente in tutto il codice HTML. A questo punto NVDA leggerà la struttura dell’elemento: tag, attributi, contenuto.
Usiamo i tasti freccia per spostarci all’interno della struttura del DOM nel pannello Elements. Verifichiamo come NVDA legge tag e attributi (ad esempio id, class, aria-*). È utile aggiungere attributi accessibili visibili o ARIA se l’elemento non ha un nome leggibile.
Modificare un elemento (tasto destro → Modifica HTML)
Nella scheda «Elements», con l’elemento selezionato, premiamo Shift+F10 e scegliamo «Edit as HTML». Possiamo ora modificare il codice HTML: ad esempio aggiungere un attributo aria-label o cambiare il contenuto testuale. Premiamo Ctrl+Invio per confermare la modifica. NVDA può essere usato per verificare subito come la modifica impatta l’annuncio dell’elemento. Per tornare alla pagina web appena modificata premiamo il tasto F6.
Questa tecnica permette di testare in tempo reale come modifiche al DOM influiscono sull’accessibilità percepita dallo screen reader: possiamo provare ad aggiungere role, aria-labelledby o modificare il testo visibile.
Ricerca rapida con Ctrl+Maiusc+P
Premiamo Ctrl+Maiusc+P per aprire il «Command Menu» di Chrome DevTools. Possiamo digitare parole-chiave come “Show accessibility” oppure “Open console” per accedere rapidamente a pannelli o funzionalità senza navigare con il mouse. NVDA leggerà il campo di comando e i suggerimenti; questo è particolarmente utile perché ci evita di dover tabulare attraverso molti elementi dell’interfaccia. Gli elementi corrispondenti alla ricerca appariranno sotto forma di elenco verticale, navigabile con le frecce direzionali. A mio avviso è questo uno dei comandi più potenti, in quanto ci mette a disposizione in un unico pannello tutta l’interfaccia di questo strumento. Ad esempio, appena appare, anche senza digitare nulla, è possibile muoversi con le frecce e individuare tutta una serie di pannelli suggeriti. Fate anche attenzione alla lingua in cui avete configurato i devtools, influenzeranno anche questa ricerca.
Ricerca con Ctrl+F all’interno del pannello DOM
Con la scheda «Elements» attiva, premiamo Ctrl+F per attivare la ricerca del testo all’interno dell’albero DOM. Digitiamo il nome del tag, un valore di attributo o un contenuto testuale. NVDA leggerà il campo di ricerca e con Shift+Tab potremo accedere al primo risultato della ricerca. Spostandoci avanti con il tasto Tab troveremo i pulsanti per passare al risultato precedente o successivo. Questa funzione è utile per trovare rapidamente elementi specifici o testo semplice. Devo dire che tra tutte le sezioni che ho esplorato, questa mi è sembrata la più complessa da capire in quanto non sembra proprio fatta per rendere la vita più semplice a chi usa screen reader, si esplora, ma non con semplicità.
Apertura del pannello «Sources» (Origini)
Mediante il Command Menu, cerchiamo e attiviamo la scheda «Origini». Qui possiamo accedere ai file caricati dal sito: JavaScript, CSS, HTML. Con NVDA possiamo navigare la lista dei file per esplorarli.
Apertura della Console per errori JS
Allo stesso modo, passiamo alla scheda «Console» dal Command Menu. Qui possiamo vedere errori JavaScript, messaggi di avviso e log personalizzati. NVDA annuncerà l’area della console e potremo navigare con Tab o frecce per leggere i messaggi. Attenzione, all’apertura della console, il focus di NVDA viene catturato dal campo di testo in cui “noi” possiamo impartire comandi al nostro browser, ad esempio tramite codice javascript. Per accedere all’elenco di messaggi o errori dobbiamo uscire da quel campo, spostandoci indietro alla ricerca dell’albero di navigazione.
Apertura dell’Accessibility Tree
All’interno della scheda «Elements», spostiamoci nel pannello laterale «Accessibility» (oppure accediamoci tramite il Command Menu). In DevTools possiamo visualizzare l’«Accessibility Tree», che mostra come lo screen reader vede gli elementi: ruoli, nomi accessibili, attivabilità, visibilità. Con NVDA possiamo verificare come gli elementi vengono riconosciuti dallo screen reader e confrontarli con ciò che vediamo nel tool.
Apertura delle impostazioni con F1
Premendo F1 quando DevTools è attivo, si apre il pannello Impostazioni. Qui possiamo attivare opzioni utili per l’accessibilità: ad esempio possiamo consultare e modificare le scorciatoie di sistema per DevTools.
Apertura di Lighthouse e panoramica accessibilità
Nel menu di DevTools selezioniamo la scheda «Lighthouse» e individuiamo il pulsante «Generate report» per eseguire un audit della pagina. Il report includerà una sezione «Accessibilità» che segnala problemi come mancanza di nomi accessibili, contrasto colore o elementi focusabili invisibili. Con NVDA possiamo leggere i dettagli rilevati e poi tornare al pannello Elements per correggerli direttamente. Questa è una strategia efficace per migliorare l’esperienza dello screen reader sulla pagina. In alcuni casi potrebbe essere necessario installare Lighthouse dal Chrome Store.
Conclusione
Chrome DevTools è uno strumento molto potente e a volte complesso da esplorare con uno screen reader, senza mouse e senza un colpo d’occhio. Con questo breve articolo speriamo di aver fornito le conoscenze di base per avvicinarci all’utilizzo di questo strumento, che può aiutarci a interpretare al meglio il codice presente nelle pagine web, soprattutto quando siamo alla ricerca di errori o possibili miglioramenti in ottica di accessibilità.