Visual Design

Tu progetti l’aspetto visivo del prodotto.

Struttura i contenuti

Accertati che le informazioni più importanti siano individuabili a prima vista. Utilizza una struttura semplice con gerarchie chiare e tieni conto dell’ordine di lettura delle informazioni. Verifica che la pagina sia perfettamente comprensibile anche con lo zoom al 200%.

In fase di test: utilizza la funzione di zoom nel tuo browser o sul tuo dispositivo mobile.

Riferimento: https://www.w3.org/TR/WCAG21/#resize-text

Assicurati che il contrasto sia sufficiente

Il contrasto del testo rispetto allo sfondo deve essere almeno di 4,5:1. Per l’interfaccia e altri elementi non testuali importanti ai fini della comprensione, il rapporto di contrasto deve essere di almeno 3:1, con particolare attenzione soprattutto se sullo sfondo compaiono immagini.

In fase di test: Color Contrast Analyzer https://developer.paciellogroup.com/resources/contrastanalyser

Riferimento 1: https://www.w3.org/TR/WCAG21/#contrast-minimum
Riferimento 2: https://www.w3.org/TR/WCAG21/#non-text-contrast

Assicurati che la dimensione dei caratteri sia sufficiente

Verifica che tutti i touch target abbiano una dimensione minima di 44 x 44 Pixel. Inoltre, utilizza caratteri ben leggibili e di dimensioni sufficienti. La regola generale prevede una dimensione minima di 14 Pixel.

In fase di test: effettua il controllo con i rispettivi developer tool.

Riferimento: https://www.w3.org/TR/WCAG21/#target-size

Rendi visibile il focus

Imposta il focus della tastiera in modo che le utenti e gli utenti sappiano sempre dove si trovano, in ogni situazione. Per esempio, vai sul sito ffs.ch e premi più volte il pulsante tab.

In fase di test: non utilizzare il mouse o collega una tastiera esterna al dispositivo mobile.

Riferimento: https://www.w3.org/TR/WCAG21/#focus-visible