Accessibilità di Riferimento

Questa pagina è un riferimento completo di funzioni di accessibilità in Chrome DevTools.È inteso per gli sviluppatori web che:

• Avere una conoscenza di base di DevTools, di come aprirlo.
• Hanno familiarità con i principi di accessibilità e le best practice.

Lo scopo di questo riferimento è quello di aiutare a scoprire tutti gli strumenti disponibili inDevTools che possono aiutare a esaminare l’accessibilità di una pagina.

Vedere Navigazione DevTools Chrome con tecnologia Assistivase stai cercando aiuto sulla navigazione DevTools con una tecnologia assistiva come un lettore di schermo.

Panoramica delle funzioni di accessibilità in Chrome DevTools

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

Quando si determina se una pagina è accessibile, è necessario avere in mente 2 domande generali:

1. Posso navigare la pagina con una tastiera o un lettore di schermo?
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, poiché questi errori sono facili da rilevare in modo automatico. La domanda n.1 è altrettanto importante, ma sfortunatamente Devtoolscan’t ti aiuta lì. L’unico modo per trovare errori relativi alla domanda n.1 è provare a utilizzare una pagecon una tastiera o un lettore di schermo da soli. Vedi come fare una recensione di accessibilitàper saperne di più.

Verifica l’accessibilità di una pagina

In generale, utilizzare il pannello Audit per determinare se:

• Una pagina è contrassegnata correttamente per gli screen reader.
• Gli elementi di testo di una pagina hanno rapporti di contrasto sufficienti. Vedere anche Visualizzare il rapporto di contrasto di un elemento di testo nel Selettore colore.

Per controllare una pagina:

1. Vai all’URL che vuoi controllare.

2. In DevTools, fare clic sulla scheda Audit. DevTools mostra varie opzioni di configurazione.

   

3. Per Dispositivo, selezionare Mobile se si desidera simulare un dispositivo mobile. Questa opzione cambia in modo diverso la stringa dell’agente utente e ridimensiona la finestra. Se la versione mobile di pagedisplays differentemente che la versione desktop, questa opzione potrebbe avere un effetto significativo sui risultati del Suo controllo.

4. Nella sezione Audit, assicurarsi che l’Accessibilità sia abilitata. Disabilitare le othercategories se si desidera escluderle dal report. Lasciali abilitati se vuoiscopri altri modi per migliorare la qualità della tua pagina.

5. La sezione di limitazione consente di limitare la rete e la CPU, che è utile quando si analizzano le prestazioni del carico. Questa opzione dovrebbe essere irrilevante per il tuo punteggio di accessibilità, quindi puoi usarequalsiasi cosa preferisci.

6. La casella di controllo Cancella spazio di archiviazione consente di cancellare tutto lo spazio di archiviazione prima di caricare la pagina o preservestorage tra i carichi della pagina. Questa opzione è probabilmente irrilevante per il tuo punteggio di accessibilità, quindi puoi usare quello che preferisci.

7. Fare clic su Esegui audit. Dopo 10 a 30 secondi, DevTools fornisce un rapporto.Il report fornisce vari suggerimenti su come migliorare l’accessibilità della pagina.

   

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

   

9. Fare clic su Ulteriori informazioni per visualizzare la documentazione dell’audit.

   

Vedi anche: aXe extension

È preferibile utilizzare l’estensione aXe piuttosto che il pannello Audit.Generalmente forniscono le stesse informazioni, poiché aXe è il motore sottostante che alimenta il pannello degli Audits. L’estensione aXe ha un’interfaccia utente diversa e descrive gli audit in modo leggermente diverso.Un vantaggio che l’estensione aXe ha rispetto al pannello Audit è che consente di ispezionare e evidenziare i nodi in errore.

Il riquadro Accessibilità

Il riquadro Accessibilità è dove è possibile visualizzare l’albero di accessibilità, gli attributi ARIA e le proprietà di accessibilità computate dei nodi DOM.

Per aprire il riquadro Accessibilità:

1. Fare clic sulla scheda Elementi.
2. Nell’albero DOM, selezionare l’elemento che si desidera ispezionare.
3. Fare clic sulla scheda Accessibilità. Questa scheda potrebbe essere nascosta dietro il pulsante Altre schede.

Visualizza la posizione di un elemento nell’albero accessibilità

L’albero accessibilità è un sottoinsieme dell’albero DOM. Contiene solo elementi dall’albero DOM che sono rilevanti e utili per visualizzare il contenuto della pagina in uno screen reader.

Controllare la posizione di un elemento nell’albero di accessibilità dal riquadro Accessibilità.

Visualizza gli attributi ARIA di un elemento

Gli attributi ARIA assicurano che gli screen reader abbiano tutte le informazioni necessarie per rappresentare correttamente il contenuto di una pagina.

Visualizzare gli attributi ARIA di un elemento nel riquadro Accessibilità.

Visualizza le proprietà di accessibilità calcolate di un elemento

Alcune proprietà di accessibilità sono calcolate dinamicamente dal browser. Queste proprietà possono essere visualizzate nella sezione Proprietà calcolate del riquadro Accessibilità.

Visualizzare le proprietà di accessibilità calcolate di un elemento nel riquadro Accessibilità.

Visualizza il rapporto di contrasto di un elemento di testo nel Selettore colore

Alcune persone con problemi di vista non vedono aree molto luminose o molto scure. Tutto tende aapparire a circa la stessa luminosità, il che rende difficile distinguere contorni e bordi.Il rapporto di contrasto misura la differenza di luminosità tra il primo piano e lo sfondo del testo. Se il tuo testo ha un basso rapporto di contrasto, allora questi utenti ipovedenti possono letteralmente sperimentare il tuo sito come una schermata vuota.

Il Selettore colore può aiutarti a verificare che il testo soddisfi i livelli di contrasto raccomandati:

1. Fare clic sulla scheda Elementi.

2. Nell’albero DOM, selezionare l’elemento di testo che si desidera ispezionare.

   

3. Nel riquadro Stili, fare clic sul quadrato colore accanto al valore color dell’elemento.

   

4. Controllare la sezione Rapporto di contrasto del Selettore colore. Un segno di spunta significa chel’elemento soddisfa la raccomandazione minima.Due segni di spunta significa che soddisfa la raccomandazione avanzata.

   

5. Fare clic sulla sezione Rapporto di contrasto per visualizzare ulteriori informazioni. Una linea appare nel visualpicker nella parte superiore del Selettore colore. Se il colore corrente soddisfa le raccomandazioni, alloraqualsiasi cosa sullo stesso lato della linea soddisfa anche le raccomandazioni. Se il colore corrente non soddisfa le raccomandazioni, anche nulla sullo stesso lato non soddisfa le raccomandazioni.

   

Feedback