Lezione 10Il processo di progettazione: come fare spazio all'accessibilità del web?
- Nozione 67 - Pensate al layout
- Nozione 68 - Come utilizzare il design per ottimizzare il contenuto
- Nozione 69 -
- Nozione 70 - L'usabilità è essenziale!
- Nozione 71 - Strutturare correttamente l'HTML
- Nozione 72 - L'uso del linguaggio è importante
- Nozione 73 - Come lavorare con il contenuto visuale
- Nozione 74 - L'importanza della navigazione tramite tastiera
- Nozione 75 - Consigli professionali sul design utili a livello globale
- Nozione 76 - I tipi di contenuto da evitare a tutti i costi
- Nozione 77 - Verificate la conformità rispetto alle norme per l'accessibilità e le buone prassi
- Nozione 78 - Revisione dei concetti principali
Nozione 77
Verificate la conformità rispetto alle norme per l'accessibilità e le buone prassi
competenza target
Esercizio
In questo breve esercizio, cercherete di individuare i principali problemi di accessibilità legati a una pagina web con l'aiuto di strumenti e linee guida.
Selezionate una pagina web
Per quest'esercizio usate una pagina web che conoscete bene. Potrebbe essere la pagina della vostra azienda o della vostra scuola, oppure il sito di shopping online che preferite. Se non riuscite a trovare alcun problema nei passaggi successivi, selezionate un'altra pagina con più elementi.
Cercate problemi di accessibilità
Potete usare le risorse sottostanti per aiutarvi a trovare problemi legati all'accessibilità. Tenete a mente le problematiche affrontate nelle lezioni precedenti, visto che sono le più comuni.
Le linee guida saranno esaustive e descriveranno i requisiti di accessibilità e le migliori prassi legate al tema. I plugin dei browser dovrebbero essere utili ad individuare rapidamente i problemi e fare un rapido audit.
Compilate una breve relazione
Elencate tutti i problemi incontrati nel plugin e segnate quelli più ricorrenti che andrebbero risolti. Questa rapida valutazione fornirà indicazioni sulla quantità di correzioni da apportare.
Poi scegliete un elemento specifico e provate a fornire una soluzione al problema: ad esemppio, aveto individuato un elemento particolarmente negativo nell'interfaccia utente e pensate che debba essere semplificato. Usate le lezioni precedenti per formulare la vostra proposta.
Risorse
Linee guida
Le linee guida sono esaustive e ordinate per categoria. Può essere noioso consultarle senza avere in mente un problema specifico, ma spesso indicano la soluzione associata a un problema di accessibilità.
- WCAG ( https://www.w3.org/TR/WCAG21/ )
#Plugin
Questi plugin sono strumenti contenuti nel browser che permettono di scansionare rapidamente una pagina web alla ricerca di problemi di accessibilità: sono perfetti per un rapido audit!
- Wave ( https://wave.webaim.org/extension/ )
- Axe DevTools ( https://www.deque.com/axe/devtools/ )
Sito web
- Il progetto A11Y ha realizzato una lista di controllo basata sulle linee guida WCAG per sapere se sono state applicate correttamente o no su una pagina web ( https://www.a11yproject.com/checklist/ )
Correzione
A titolo d'esempio, ecco come abbiamo fatto il nostro audit. Verificate in cosa differisce dalle vostre conclusioni.
Sito web preso in esame
Abbiamo selezionato un sito web molto famoso di shopping online.
Approccio rapido
I nostri plugin hanno rilevato un numero molto alto di problemi (~80) solo sulla homepage. La metà di questi sono problemi di contrasto cromatico, un terzo sono testi alternativi errati per le immagini.
Approccio esaustivo
Tramite le direttive WCAG sul contrasto cromatico, abbiamo imparato qual è il rapporto necessario tra sfondo e testo ( https://www.w3.org/TR/WCAG21/#contrast-minimum ). Possiamo usare un tool online per calcolare l'effettivo valore del contrasto ( https://coolors.co/contrast-checker/112a46-acc8e5 ) e proporre nuovi valori di colore nella nostra relazione.
Le linee guida WCAG potrebbero anche aiutarci in caso di altri problemi sulla pagina web e fornire soluzioni da aggiungere alla relazione.
Per revisionare cosa avete imparato sulle WCAG, potete tornare a consultare la Lezione 8.