Segnalazioni sul sito web

hermescenter / monitorapa

Lo sviluppo continua su https://github.com/MonitoraPA/monitorapa/

https://monitora-pa.it

Other

27 stars 21 forks source link

Segnalazioni sul sito web #28

Open conte-oliver opened 2 years ago

conte-oliver commented 2 years ago

La scritta MONITORA PA dell'immagine iniziale non passa la validazione di contrasto colore con lo sfondo. Sarebbe meglio un arancione più scuro come #B93F3F (nota: la scelta dell'arancione per l'accessibilità è sempre un suicidio)

a:link { color: var(--a-link-color); -> #0277bd }

Lo farei leggermente più scuro per passare la validazione del contrasto AAA anche per testo piccolo (es: #014A84)

a:visited { color: var(--a-visited-color); -> #01579b }

Il colore dei link "visitati" è praticamente indistinguibile da quelli "non visitati" in ogni caso il colore del "visited" di norma è sul rosso. Proporrei un #9E0000 che valida bene sul bianco

Bottone "Scarica il report": anche in questo caso non c'è sufficiente contrasto tra il celeste dello sfondo (#1976d2) ed il colore del testo (#f8f8f8). Suggerisco questo #135699 per lo sfondo

conte-oliver commented 2 years ago

Sull'hover dei link, per favorire chi ha problemi di vista, sarebbe buona norma utilizzare sempre l'inversione di colore tra foreground e background. Ad esempio:

a:hover { color: #f8f8f8; background-color: #0277bd; }

conte-oliver commented 2 years ago

Ci sono due errori di validazione del codice:

manca la definizione del DOCTYPE <!DOCTYPE html>
sul bottone bottone "Scarica il report", nell'attributo style del tag a c'è un indicata la proprietà "valign" che non esiste, forse si intendeva mettere "vertical-align"

conte-oliver commented 2 years ago

Altro problema di accessibilità, i link dovrebbero sempre essere sottolineati quando non sono chiaramente identificabili come tali. In questo caso nell'introduzione c'è il link "Regolamento Generale per la Protezione dei Dati Personali (GDPR)" che si distingue dal resto del testo solo per il colore. In questo caso ci sono due problemi:

il colore usato per il link non è abbastanza diverso dal quello del testo normale e quindi anche chi ha lievi problemi di vista ha difficoltà ad identificarlo
non si può utilizzare il colore come unico metodo per comunicare un'informazione (in questo caso identificare un link nel mezzo al testo) perché chi ha problemi con i colori (es: daltonismo) potrebbe non distinguere due colori.

conte-oliver commented 2 years ago

Sul DIV con classe "container" è stato utilizzato lo stile style="text-align: justify", questo stile viene ereditato a cascata da tutto il contenuto della pagina, quindi tutti i testi hanno allineamento "giustificato". Questo tipo di allineamento non dovrebbe mai essere utilizzato perché modifica lo spazio tra le parole per far si che occupino tutta la dimensione della riga. Queste differenza di spazio ancora una volta creano difficoltà nella lettura di chi ha problemi di vista.

conte-oliver commented 2 years ago

I link vengono aperti su una nuova finestra (con l'attributo target="blank") senza adottare adeguati accorgimenti per informare almeno gli utenti non vedenti che navigano con screen reader. In questo caso per ogni link va messo almeno l'attributo title che specifica la destinazione e l'apertura di una nuova finestra (es: Vai al canale Telgram di MonitoraPA - Apre una nuova finestra) oppure (o in aggiunta) utilizzare gli attributi WAI ARIA.