Informazioni sulle funzioni di accessibilità

Kayce Basques

Sofia Emelianova

Questa pagina è un riferimento completo alle funzionalità di accessibilità in Chrome DevTools. È destinata agli sviluppatori web che:

• Hanno una conoscenza di base di DevTools, ad esempio come aprirlo.
• Conoscono 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 stai cercando aiuto per navigare in DevTools con una tecnologia per la disabilità come uno screen reader, consulta la pagina Navigare in Chrome DevTools con la tecnologia assistiva.

Se vuoi imparare a sviluppare siti web accessibili, consulta la pagina Scopri l'accessibilità.

Panoramica delle funzionalità di accessibilità in Chrome DevTools

Questa sezione spiega come DevTools si inserisce nel tuo toolkit di accessibilità generale.

Quando determini se una pagina è accessibile, devi tenere a mente due domande generali:

1. Posso navigare nella pagina con una tastiera o uno screen reader?
2. Gli elementi della pagina sono contrassegnati correttamente 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 purtroppo DevTools non può aiutarti in questo caso. 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 saperne di più, consulta la pagina Come eseguire una revisione dell'accessibilità.

Eseguire un controllo dell'accessibilità di una pagina

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

• Una pagina è contrassegnata correttamente per gli screen reader.
• Gli elementi di testo di una pagina hanno rapporti di contrasto sufficienti. Consulta anche Rendere il tuo sito web più leggibile.

Per eseguire un controllo di una pagina:

1. Vai all'URL che vuoi controllare.

2. In DevTools, fai clic sul riquadro Lighthouse. DevTools mostra varie opzioni di configurazione.

   

   Nota: gli screenshot in questa sezione sono stati acquisiti con Chrome 69. Negli screenshot, il riquadro è ancora denominato Controlli, ma è stato rinominato Lighthouse in Chrome 83 Puoi controllare la versione in esecuzione all'indirizzo chrome://version. L'interfaccia utente del riquadro Controlli sarà diversa in alcune versioni precedenti o successive di Chrome, ma il flusso di lavoro generale è lo stesso.

3. Per Dispositivo, seleziona Mobile se vuoi simulare un dispositivo mobile. Questa opzione modifica la stringa dello user agent e ridimensiona il viewport. Se la versione mobile della pagina viene visualizzata in modo diverso dalla versione desktop, questa opzione potrebbe avere un effetto significativo sui risultati del controllo.

4. Nella sezione Lighthouse, assicurati che l'opzione Accessibilità sia attivata. Disattiva 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 ti consente di limitare la rete e la CPU, il che è utile per analizzare il rendimento del caricamento. Questa opzione non dovrebbe influire sul punteggio di accessibilità, quindi puoi utilizzare quella che preferisci.

6. La casella di controllo Cancella spazio di archiviazione ti consente di cancellare tutto lo spazio di archiviazione prima di caricare la pagina o di conservare lo spazio di archiviazione tra i caricamenti delle pagine. Anche questa opzione è probabilmente irrilevante per il punteggio di accessibilità, quindi puoi utilizzare 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 del controllo.

   

Consulta anche: estensione aXe

Potresti preferire utilizzare l'estensione aXe o l'estensione Lighthouse anziché il riquadro Lighthouse disponibile per impostazione predefinita in Chrome. In genere forniscono le stesse informazioni, poiché aXe è il motore sottostante che alimenta il riquadro 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 consente di ispezionare ed evidenziare i nodi non riusciti.

Testare il reflow dei contenuti con la barra degli strumenti del dispositivo

Il criterio di reflow delle Linee guida per l'accessibilità dei contenuti web (WCAG) consiglia di mantenere i contenuti web visibili senza perdita di informazioni anche quando il viewport viene ridimensionato o cambia orientamento. Allineando i contenuti a una singola colonna, gli utenti che utilizzano testo ingrandito sono supportati. Per testare il reflow dei contenuti, ridimensiona il viewport in modo dinamico con la barra degli strumenti del dispositivo nel riquadro Lighthouse.

Per ridimensionare il viewport, trascina i punti di manipolazione alle dimensioni che ti servono. Per le dimensioni specifiche da testare, consulta il criterio di successo del reflow WCAG.

La scheda Accessibilità

Nella scheda Accessibilità puoi visualizzare l'albero di accessibilità, gli attributi ARIA e le proprietà di accessibilità calcolate dei nodi DOM.

Per aprire la scheda Accessibilità:

1. Fai clic sul riquadro Elementi.
2. Nella struttura DOM, seleziona l'elemento che vuoi ispezionare.
3. Fai clic sulla scheda Accessibilità. Questa scheda potrebbe essere nascosta dietro il pulsante Altre schede keyboard_double_arrow_right .

Puoi trascinare la scheda Accessibilità in primo piano per accedervi più rapidamente in futuro.

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

L'albero di 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.

Per ispezionare la posizione di un elemento nell'albero di accessibilità dalla scheda Accessibilità, attiva/disattiva l'opzione Mostra albero di accessibilità.

Questo pulsante di attivazione/disattivazione sostituisce l'albero DOM nel riquadro Elementi con un albero di accessibilità a pagina intera. Questo albero ti aiuta a capire meglio come i tuoi contenuti web vengono esposti alle tecnologie per la disabilità.

Per sfogliare l'albero di accessibilità, puoi espandere e selezionare i nodi per visualizzarne i dettagli in Proprietà calcolate.

In qualsiasi momento puoi tornare all'albero DOM. Il nodo DOM corrispondente rimane selezionato. Questo è un ottimo modo per comprendere il mapping tra il nodo DOM e il relativo nodo dell'albero di 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 in scheda Accessibilità.

Visualizzare l'ordine di origine degli elementi sullo schermo

Gli elementi della pagina non vengono sempre visualizzati 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:

1. Ispeziona un elemento nella pagina.
2. In Elementi > Accessibilità > Visualizzatore ordine di origine, seleziona check_box Mostra ordine di origine.

Nel viewport, DevTools delinea gli elementi nidificati con bordi e li contrassegna con numeri corrispondenti al loro ordine di origine.

Visualizzare le proprietà di accessibilità calcolate di un elemento

Nota: se stai cercando le proprietà CSS calcolate, consulta la scheda Elaborato.

Alcune proprietà di accessibilità vengono calcolate dinamicamente dal browser. Queste proprietà possono essere visualizzate nella sezione Proprietà calcolate della scheda Accessibilità.

Visualizza le proprietà di accessibilità calcolate di un elemento in scheda Accessibilità.

La scheda Rendering

Utilizza la scheda Rendering per emulare determinate funzionalità multimediali CSS senza specificarle manualmente nel codice o nell'ambiente di test. Queste funzionalità multimediali modificano l'aspetto della pagina web in base alle preferenze del dispositivo dell'utente. Per testare l'accessibilità visiva della pagina, apri la scheda Rendering ed esplora le seguenti opzioni:

• Emula le carenze visive per visualizzare la pagina attraverso diverse carenze visive simulate.
• Emula la funzionalità multimediale CSS prefers-color-scheme per vedere l'aspetto della pagina con la modalità Buio o Chiaro attivata. Molti pensano alla modalità Buio come a una scelta estetica, ma la modalità Buio come strumento di accessibilità ne dimostra l'utilità in altri modi.
• Emula il tipo multimediale CSS per visualizzare la pagina in uno stile multimediale di stampa o schermo.
• Emula la funzionalità multimediale CSS forced-colors per vedere l'aspetto della pagina se lo user agent ha attivato una modalità di colori forzati.
• Emula la funzionalità multimediale CSS prefers-contrast per visualizzare i contenuti web con un valore di contrasto più alto, più basso o specifico.
• Emula la funzionalità multimediale CSS prefers-reduced-motion per visualizzare i contenuti web con movimento ridotto. Alcuni utenti provano distrazione o nausea a causa dei contenuti animati. Utilizza questa opzione per vedere l'aspetto della pagina senza animazioni o elementi come lo scorrimento uniforme.
• Emula la funzionalità multimediale CSS prefers-reduced-transparency per vedere l'aspetto dei contenuti web se l'utente richiede di ridurre gli effetti di livello trasparenti o traslucidi utilizzati sul dispositivo.

Individuare e correggere il testo a basso contrasto

DevTools può trovare automaticamente i problemi di basso contrasto e suggerire colori migliori per aiutarti a risolverli. Per saperne di più, consulta la pagina Rendere il tuo sito web più leggibile.