Garantire l'accessibilità con gli strumenti per sviluppatori

Completato

Testare la pagina Web in diversi client e visualizzazioni è importante quanto testarla in diversi browser. I test potrebbero non essere pratici in tutti gli scenari e non individuare situazioni in cui gli utenti usano un browser ma potrebbero avere un'altra disabilità. Fortunatamente, sono disponibili strumenti per sviluppatori che consentono di misurare l'accessibilità della pagina.

Correttori del contrasto

Un utente daltonico può non essere in grado di distinguere i colori o avere difficoltà a lavorare con colori che si somigliano tra loro. Il World Wide Web Consortium (W3C), l'organizzazione di standard per il Web, ha stabilito un sistema di classificazione per il contrasto dei colori.

Scegliere i colori giusti per garantire che la pagina sia accessibile a tutti può essere un'operazione difficile da eseguire manualmente. È possibile usare gli strumenti seguenti per generare i colori appropriati e testare il sito per garantire la conformità:

Lighthouse

Lighthouse è uno strumento creato da Google per l'analisi dei siti Web. È diventato così diffuso che è incluso negli strumenti per sviluppatori di molti browser. Lighthouse è in grado di esaminare l'ottimizzazione del motore di ricerca (SEO) di una pagina, le prestazioni di caricamento e altre procedure consigliate. Lighthouse può anche analizzare una pagina e assegnare un punteggio all'attuale accessibilità.

Nota

Come con qualsiasi strumento automatizzato, non è possibile fare affidamento sul punteggio assegnato da Lighthouse come unica indicazione dell'accessibilità di una pagina. Ma rappresenta un buon punto di partenza per identificare e risolvere i problemi.

Esercizio: Generare il punteggio di accessibilità di Lighthouse di una pagina

Provare Lighthouse nel browser in uso. Negli screenshot seguenti è usato Edge, ma è possibile seguire la stessa procedura in Chrome e in molti altri browser.

  1. Aprire il browser e accedere alla pagina Web principale di Microsoft.

  2. Selezionare il tasto F12 per aprire gli strumenti per sviluppatori.

  3. Nella parte superiore selezionare l'icona a forma di freccia di espansione (>>) per aprire l'elenco delle schede nascoste.

    Screenshot degli strumenti per sviluppatori con la freccia di espansione evidenziata.

  4. Selezionare Lighthouse dall'elenco.

  5. In Categorie deselezionare tutti gli elementi tranne Accessibilità.

  6. In Dispositivo selezionare Desktop.

    Screenshot di Lighthouse con solo l'opzione Accessibilità selezionata in Categorie e Desktop selezionato per Dispositivo.

  7. Seleziona Genera report.

  8. Osservare il punteggio e le informazioni associate sulla pagina.

  9. È possibile testare altre pagine selezionando Cancella tutto in Lighthouse, aprendo un'altra pagina e quindi selezionando Genera report.

    Screenshot della sezione URL di Lighthouse, con il pulsante per cancellare tutti gli elementi evidenziati.

A questo punto si è visto come usare Lighthouse e le informazioni sull'accessibilità che lo strumento è in grado di offrire.