Joomla core e i suoi template predefiniti Atum e Cassiopea forniscono una buona base per la creazione di siti web accessibili: l'output principale è progettato tenendo presente l'accessibilità, aiutando i proprietari dei siti a soddisfare le raccomandazioni delle WCAG 2.2. Tuttavia, i progettisti di template, gli sviluppatori di estensioni e gli editor di contenuti possono infrangere le regole e danneggiare l'usabilità per le persone con disabilità.
Con la crescente importanza dell'accessibilità, gli strumenti di test automatici stanno attirando un crescente interesse.
Strumenti come WAVE, AXE, Lighthouse possono aiutare a individuare problemi comuni. Trovano testo alternativo mancante, identificano errori di contrasto dei colori, strutture di intestazione improprie e molto, molto altro.
Alcuni di loro sono ben noti e la maggior parte degli sviluppatori web li sta già utilizzando. Ma ecco il problema: Questi strumenti non comprendono il contesto, vedono il DOM dopo il caricamento della pagina e il CSS. Ma non possono sapere come le persone stanno spostandosi attraverso un sito o come i progettisti di template possono ingannare le regole di contrasto dei colori.
Ecco perché è necessaria la tua esperienza, indipendentemente da ciò che i controllori ti dicono sull'accessibilità del tuo sito. Alcuni esempi mostrano dove gli strumenti hanno punti deboli che controllano il contrasto dei colori. Il test è stato eseguito su Win 11 con diversi browser, altri strumenti in altri ambienti potrebbero dare risultati diversi.
Quali strumenti?
WAVE, Faro, AXE Checker
Essi sono descritti qui.
IBM Equal Access Accessibility Checker
Uno strumento eccezionale è l'IMB Equal Access Accessibility Checker, che fornisce un riepilogo dettagliato di errori, avvisi e raccomandazioni, a un livello che è migliore per gli sviluppatori, non per gli utenti.
È possibile trovare lo strumento nell'area di sviluppo web (F12 o ispettore). Può eseguire la scansione di una pagina o di un intero sito. È possibile adattare le impostazioni, è autoesplicativo..
La scansione fornisce informazioni molto dettagliate sui problemi, mostra avvisi e dà buone raccomandazioni.
Sui siti che sono ancora in fase di sviluppo è anche possibile attivare Jooa11y per frontend, il Plugin per il controllo dell'accessibilità di Joomla.
Altri strumenti da selezionare
Ci sono molti altri strumenti che potresti usare, vedi ad esempio qui: https://www.w3.org/WAI/test-evaluate/tools/list/. Molti di loro sono commerciali, ma offrono anche test gratuiti.
Nei prossimi numeri della nostra rivista voglio far luce su insidie nascoste che possono rendere un sito Web inaccessibile per gli utenti disabili, anche quando gli strumenti di test automatizzati dicono che tutto è perfetto.
Iniziamo con il problema di accessibilità più frequentemente identificato, il contrasto cromatico.
Risultati del controllo del contrasto del colore
Controllare il contrasto dei colori sembra così semplice: calcola il rapporto di contrasto tra il colore del back-end e il colore del carattere. Il rapporto di contrasto deve essere >= 4,5, tutto qui.
Ma è così semplice? Puoi essere sicuro che questi strumenti trovino tutti i problemi? No. Gli strumenti non riescono a trovare i problemi che si verificano dopo il caricamento del DOM.
Ecco un esempio di sito. Con l'accessibilità in mente il tuo primo pensiero sarà: Scarso contrasto di colore in tutta l'area principale. Lo vediamo a prima vista, ma - sorpresa! Gli strumenti non vedono tutte le violazioni della regola.
CSS:{color: white; background-color: lightgray; }
Ogni strumento ha trovato questo problema, come previsto.
Gli strumenti non possono vedere le immagini. È nostra piena responsabilità decidere se esiste un'immagine con testo, se questo testo è un'informazione e se ha un contrasto sufficiente con lo sfondo.
CSS: {color: white; background-color: darkblue; }
Ogni strumento accetta bianco su blu scuro, come previsto.
Nessuno strumento può vedere che il pulsante cambia colore di sfondo in bianco che risulta su font bianco su sfondo bianco.
Gli strumenti non vedono se e come il contrasto dei colori possa cambiare nelle azioni. I tester devono controllarlo manualmente.
CSS: {
color: white;
background-color black;
background-image: linear-gradient(….)}
Ma un'immagine di sfondo copre lo sfondo nero e rende basso il contrasto.
WAVE, Lighthouse, AXE non trovano nessun problema.
IBM checker e Jooa11y danno un avvertimento, che potrebbe esserci un problema.
CSS {
background-color: darkgreen;
opacity: 0.4;
color: white;
}
il colore dello sfondo è manipolato con opacità
WAVE, Jooa11y sono ok con esso.
AXE, IBM checker, Lighthouse vedono il problema.
CSS {
background-color: darkgreen;
color: white;
}
cambiamenti di colore di sfondo su hover
:hover {
background-color: lightblue;
}
Nessun strumento vede questo errore. Quando si controlla un sito, il tester deve passare il mouse su tutti gli elementi
Conclusione:
Gli strumenti di test automatici non sono sufficienti per valutare il contrasto dei colori su un sito web moderno con colori che cambiano dinamicamente.
Alcuni articoli pubblicati sulla rivista Joomla Community Magazine rappresentano l'opinione personale o l'esperienza dell'autore su un argomento specifico e potrebbero non essere in linea con la posizione ufficiale del progetto Joomla.
