Informazioni sulle funzioni di accessibilità

Questa pagina fornisce un riferimento completo alle funzioni di accessibilità in Chrome DevTools. È destinato agli sviluppatori web che:

• Avere una conoscenza di base di DevTools, ad esempio come aprirlo.
• Conosci i principi e le 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.

Se hai bisogno di aiuto per navigare in DevTools con una tecnologia per la disabilità come uno screen reader, consulta Navigazione in Chrome DevTools con la tecnologia per la disabilità.

Per scoprire come sviluppare siti web accessibili, consulta la pagina Informazioni sull'accessibilità.

Panoramica delle funzioni di accessibilità in Chrome DevTools

Questa sezione spiega in che modo DevTools si inserisce nel toolkit generale di accessibilità.

Per determinare se una pagina è accessibile, devi tenere in considerazione due domande generali:

1. Posso navigare nella pagina con una tastiera o uno screen reader?
2. Il markup degli elementi della pagina è stato eseguito correttamente per gli screen reader?

In generale, DevTools può aiutarti a correggere gli errori relativi alla domanda 2, perché questi errori sono facili da rilevare in modo automatico. La domanda 1 è altrettanto importante, ma sfortunatamente DevTools non può aiutarti. L'unico modo per trovare 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 sull'accessibilità.

Controllare l'accessibilità di una pagina

In generale, usa i controlli di accessibilità nel riquadro Lighthouse per determinare se:

• Il markup di una pagina è stato eseguito correttamente per gli screen reader.
• Gli elementi di testo in una pagina hanno rapporti di contrasto sufficienti. Vedi anche Rendere più leggibile il sito web.

Per controllare una pagina:

1. Vai all'URL che vuoi controllare.

2. In DevTools, fai clic sulla scheda Lighthouse. DevTools mostra varie opzioni di configurazione.

   

3. Per Dispositivo, seleziona Cellulare se vuoi simulare un dispositivo mobile. Questa opzione cambia in modo diverso la stringa dello user agent e ridimensiona l'area visibile. Se la versione per dispositivi mobili della pagina viene visualizzata in modo diverso rispetto alla versione desktop, questa opzione potrebbe influire notevolmente sui risultati del controllo.

4. Nella sezione Lighthouse, assicurati che l'opzione Accessibilità sia attiva. Disabilita le altre categorie se vuoi escluderle dal report. Lasciale attivate se vuoi scoprire altri modi per migliorare la qualità della pagina.

5. La sezione Limitazione consente di limitare la rete e la CPU, il che è utile quando si analizzano le prestazioni del carico. Questa opzione non dovrebbe essere pertinente per il punteggio di accessibilità, quindi puoi usare quella che preferisci.

6. La casella di controllo Cancella dati archiviati consente di cancellare tutto lo spazio di archiviazione prima di caricare la pagina o di conservarlo tra un caricamento e l'altro della pagina. Inoltre, questa opzione probabilmente non è pertinente al punteggio di accessibilità, quindi puoi usare quella che preferisci.

7. Fai clic su Genera report. Dopo 10-30 secondi, DevTools fornisce un report. Il report fornisce vari suggerimenti su come migliorare l'accessibilità della pagina.

   

8. Fai clic su un controllo per saperne di più.

   

9. Fai clic su Scopri di più per visualizzare la documentazione relativa al controllo in questione.

   

Vedi anche: estensione aXe

Potresti usare l'estensione aXe o l'estensione Lighthouse anziché il pannello Lighthouse, disponibile per impostazione predefinita in Chrome. In genere forniscono le stesse informazioni, poiché aXe è il motore sottostante alla base del pannello Lighthouse. L'estensione aXe ha un'interfaccia utente diversa e descrive i controlli in modo leggermente diverso.

Un vantaggio dell'estensione aXe rispetto al riquadro Controlli è che ti permette di esaminare ed evidenziare i nodi che presentano errori.

Il riquadro Accessibilità

Nel riquadro Accessibilità puoi visualizzare la struttura di accessibilità, gli attributi ARIA e le proprietà di accessibilità calcolate dei nodi DOM.

Per aprire il riquadro Accessibilità:

1. Fai clic sulla scheda Elementi.
2. Nell'albero DOM, seleziona l'elemento che vuoi ispezionare.
3. Fai clic sulla scheda Accessibilità. Questa scheda potrebbe essere nascosta dietro al pulsante Altre schede .

Visualizzare la posizione di un elemento nell'albero dell'accessibilità

L'albero dell'accessibilità è un sottoinsieme dell'albero DOM. Contiene solo gli elementi dell'albero DOM 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 un solo 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à:

1. Seleziona Attiva albero dell'accessibilità a pagina intera.

2. Nella barra delle azioni in alto, fai clic su Ricarica DevTools.

   

3. Nell'angolo in alto a destra del riquadro Elementi, attiva/disattiva il pulsante Passa alla visualizzazione ad albero dell'accessibilità.

   

4. Sfoglia l'albero dell'accessibilità. Puoi espandere i nodi o fare clic per visualizzare i dettagli in Proprietà calcolate.

5. Seleziona un nodo e fai clic sul pulsante Passa alla visualizzazione ad albero DOM per tornare alla visualizzazione 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à.

Visualizzare l'ordine di origine degli elementi sullo schermo

Gli elementi della pagina non vengono sempre visualizzati nell'ordine in cui sono presenti 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:

1. Controlla un elemento della pagina.
2. In Elementi > Accessibilità > Visualizzatore ordine di 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 dinamicamente 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ò rilevare automaticamente i problemi di basso contrasto e suggerire colori migliori per aiutarti a risolverli. Per saperne di più, consulta Rendere più leggibile il sito web.