Skip to content
This repository has been archived by the owner on Aug 1, 2022. It is now read-only.

Segnalazioni sul sito web #28

Open
conte-oliver opened this issue May 19, 2022 · 5 comments
Open

Segnalazioni sul sito web #28

conte-oliver opened this issue May 19, 2022 · 5 comments

Comments

@conte-oliver
Copy link
Contributor

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
Copy link
Contributor Author

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
Copy link
Contributor Author

conte-oliver commented May 19, 2022 •
edited
Loading

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
Copy link
Contributor Author

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
Copy link
Contributor Author

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
Copy link
Contributor Author

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@conte-oliver