Questa pagina è un riferimento completo delle funzioni di accessibilità in Chrome DevTools. È destinata agli sviluppatori web che:
- Avere una conoscenza di base di DevTools, ad esempio come aprirlo.
- Avere familiarità con i principi e best practice di accessibilità.
Lo scopo di questo riferimento è aiutarti a scoprire tutti gli strumenti disponibili in DevTools che possono aiutarti a esaminare l'accessibilità di una pagina.
Consulta Navigare in Chrome DevTools con la tecnologia per la disabilità se stai cercando aiuto nell'esplorazione di DevTools con una tecnologia per la disabilità come uno screen reader.
Consulta Scopri l'accessibilità se vuoi imparare a sviluppare siti web accessibili.
Panoramica delle funzioni di accessibilità in Chrome DevTools
Questa sezione spiega in che modo DevTools si inserisce nel toolkit di accessibilità complessivo.
Per determinare se una pagina è accessibile, devi porti due domande generali:
- Posso navigare nella pagina con una tastiera o uno screen reader?
- Gli elementi della pagina sono stati sottoposti correttamente a markup per gli screen reader?
In generale, DevTools può aiutarti a correggere gli errori relativi alla domanda n. 2, perché questi errori sono facili da rilevare in modo automatico. La domanda n. 1 è altrettanto importante, ma sfortunatamente DevTools non può aiutarti. L'unico modo per trovare gli errori relativi alla domanda n. 1 è provare a utilizzare una pagina con una tastiera o uno screen reader. Per ulteriori informazioni, consulta Come eseguire un controllo dell'accessibilità.
Controllare l'accessibilità di una pagina
In generale, utilizza i controlli di accessibilità nel riquadro Lighthouse per determinare se:
- Una pagina è stata sottoposta correttamente a markup per gli screen reader.
- I rapporti di contrasto degli elementi di testo di una pagina sono sufficienti. Vedi anche Rendere il sito web più leggibile.
Per controllare una pagina:
- Vai all'URL che vuoi controllare.
In DevTools, fai clic sulla scheda Lighthouse. DevTools mostra varie opzioni di configurazione.
In Dispositivo, seleziona Mobile se vuoi simulare un dispositivo mobile. Questa opzione modifica in modo diverso la stringa dello user agent e ridimensiona l'area visibile. Se la versione mobile della pagina viene visualizzata in modo diverso rispetto alla versione desktop, questa opzione potrebbe influire notevolmente sui risultati del controllo.
Nella sezione Lighthouse, assicurati che l'opzione Accessibilità sia attiva. Disattiva le altre categorie se vuoi escluderle dal report. Lasciale attivate se vuoi scoprire altri modi per migliorare la qualità della tua pagina.
La sezione Limitazione consente di limitare la rete e la CPU; questo è utile per analizzare le prestazioni di caricamento. Questa opzione dovrebbe essere irrilevante per il tuo punteggio di accessibilità, quindi puoi utilizzare quello che preferisci.
La casella di controllo Cancella dati archiviati ti consente di cancellare tutto lo spazio di archiviazione prima di caricare la pagina o di preservare lo spazio di archiviazione tra un caricamento pagina e l'altro. Probabilmente questa opzione non è pertinente al punteggio di accessibilità, quindi puoi usare l'opzione che preferisci.
Fai clic su Genera report. Dopo 10-30 secondi, DevTools genera un report. Il tuo report fornisce vari suggerimenti su come migliorare l'accessibilità della pagina.
Fai clic su un controllo per saperne di più.
Fai clic su Scopri di più per visualizzare la documentazione del controllo in questione.
Vedi anche: estensione aXe
Ti consigliamo di utilizzare l'estensione aXe o l'estensione Lighthouse anziché il riquadro Lighthouse disponibile per impostazione predefinita in Chrome. Di solito forniscono le stesse informazioni, poiché aXe è il motore sottostante che alimenta il pannello Lighthouse. L'estensione aXe ha una UI diversa e descrive i controlli in modo leggermente diverso.
Un vantaggio dell'estensione aXe rispetto al pannello Controlli è che consente di ispezionare ed evidenziare i nodi in errore.
Riquadro Accessibilità
Nel riquadro Accessibilità puoi visualizzare l'albero dell'accessibilità, gli attributi ARIA e le proprietà di accessibilità calcolate dei nodi DOM.
Per aprire il riquadro Accessibilità:
- Fai clic sulla scheda Elementi.
- Nell'albero DOM, seleziona l'elemento che vuoi ispezionare.
- Fai clic sulla scheda Accessibilità. Questa scheda potrebbe essere nascosta dietro il pulsante Altre schede
.
Visualizzare la posizione di un elemento nell'albero dell'accessibilità
L'albero dell'accessibilità è un sottoinsieme dell'albero DOM. Contiene solo elementi dell'albero DOM che sono pertinenti e utili per visualizzare i contenuti della pagina in uno screen reader.
Controlla la posizione di un elemento nell'albero dell'accessibilità dal riquadro Accessibilità.
Questa visualizzazione consente di esplorare solo un singolo nodo e i relativi predecessori. Per esplorare l'intero albero dell'accessibilità, procedi nel seguente modo.
(Anteprima) Esplorare l'albero dell'accessibilità a pagina intera
La visualizzazione a pagina intera dell'albero dell'accessibilità ti consente di esplorare l'intero albero e ti aiuta a comprendere meglio in che modo i tuoi contenuti web sono esposti alle tecnologie per la disabilità.
Per esplorare l'albero dell'accessibilità:
- Seleziona
Attiva l'albero dell'accessibilità a pagina intera. Nella barra delle azioni in alto, fai clic su Ricarica DevTools.
Nell'angolo in alto a destra del riquadro Elementi, attiva/disattiva il pulsante Passa alla visualizzazione ad albero dell'accessibilità di
.
Sfoglia l'albero dell'accessibilità. Puoi espandere i nodi o fare clic per visualizzare i dettagli in Proprietà calcolate.
Seleziona un nodo e fai clic sul pulsante
Passa alla visualizzazione ad albero DOM per tornare alla struttura ad albero DOM.Il nodo DOM corrispondente è ora selezionato. Questo è un ottimo modo per comprendere la mappatura tra il nodo DOM e il relativo nodo dell'albero dell'accessibilità.
Visualizzare gli attributi ARIA di un elemento
Gli attributi ARIA assicurano che gli screen reader dispongano di tutte le informazioni necessarie per rappresentare correttamente i contenuti di una pagina.
Visualizza gli attributi ARIA di un elemento nel riquadro Accessibilità.
Visualizza l'ordine di origine degli elementi sullo schermo
Gli elementi della pagina non sempre appaiono nell'ordine in cui si trovano nell'origine. Questo potrebbe confondere gli utenti che dipendono dalle tecnologie per la disabilità per navigare sul web.
Per visualizzare ed eseguire il debug dell'ordine di origine sul tuo sito web:
- Ispeziona un elemento nella pagina.
- In Elementi > Accessibilità > Visualizzatore ordine origine, seleziona
Mostra ordine di origine.
Nell'area visibile, DevTools delinea gli elementi nidificati con bordi e li contrassegna con numeri corrispondenti all'ordine di origine.
Visualizzare le proprietà di accessibilità calcolate di un elemento
Alcune proprietà di accessibilità vengono calcolate in modo dinamico dal browser. Queste proprietà possono essere visualizzate nella sezione Proprietà calcolate del riquadro Accessibilità.
Visualizza le proprietà di accessibilità calcolate di un elemento nel riquadro Accessibilità.
Rilevamento e correzione del testo a basso contrasto
DevTools può individuare automaticamente i problemi a basso contrasto e suggerire colori migliori per aiutarti a risolverli. Per saperne di più, consulta Rendere il sito web più leggibile.