Slider accessibili e user-friendly: i requisiti!
Gli slider sono usati per attirare l’attenzione degli utenti sugli elementi in evidenza del sito Web. Data la loro importanza e visibilità (molto spesso li troviamo in homepage), slider inaccessibili o difficilmente utilizzabili possono presentare un grosso ostacolo alla visita della pagina.
Requisiti di accessibilità
Gli slider possono presentare problemi di accessibilità che riguardano le persone con disabilità, che usano screen reader per leggere i contenuti oppure navigano utilizzando solo la tastiera.
Per prima cosa vediamo i requisiti di accessibilità che devono essere soddisfatti per creare uno slider accessibile:
Fornire all’utente un pulsante di stop/avvio
Le animazioni per lo scorrimento delle slide possono essere fonte di distrazione per alcuni utenti. Bisogna quindi fornire agli utenti la possibilità di interrompere tutti i movimenti. Lo slider deve poter essere arrestato completamente dall’utente, tramite la tastiera, il mouse o il tocco (su un dispositivo mobile). Inoltre gli utenti devono poter di riavviare lo slider dopo averlo fermato.
I controlli utente devono essere ben visibili (abbastanza grandi per essere visti e soddisfare i requisiti di contrasto di colore)
I controlli utente (bottoni stop/avvio, pausa, prossima slide, precedente slide e indicatori) e il testo sullo slider devono soddisfare i requisiti di contrasto colore. A volte i controlli non sono abbastanza visibili o sono sovrapposti al contenuto e il contrasto colore dipende interamente dalla slide sottostante. Una soluzione valida potrebbe essere avere un sfondo dietro il controllo che fornisca il contrasto.
Il focus/hover dei controlli utente deve essere diverso dallo stato di default
Mostrare chiaramente agli utenti quale elemento ha il focus è un requisito di accessibilità essenziale. Il più delle volte vediamo che il passaggio del mouse comporta solo un leggero cambiamento di colore dei controlli utente, questo non è abbastanza. Una soluzione migliore sarebbe quella di cambiare la forma del controllo durante il focus, oppure inserire un bordo continuo sul controllo.
I controlli utente devono poter essere utilizzabili anche da tastiera
Gli slider sono spesso delle vere e proprie trappole per gli utenti che usano la tastiera, essi rischiano anche di rimanere bloccati all’interno senza possibilità di lasciare il carousel e leggere il resto della pagina. Tutti i controlli utente che compongono lo slider devono essere resi accessibili tramite tastiera.
Codice valido
Il codice HTML e CSS devono essere validi.
Fornire il testo alternativo
Tutte le immagini nello slider devono avere un attributo alt, il cui valore deve descrivere lo scopo dell’immagine. Se un’immagine è puramente decorativa, ovvero può essere rimossa senza perdere nessuna informazione, il testo alternativo può rimanere vuoto.
Requisiti di usabilità
Se l’implementazione dello slider non è pensata per l’utente finale, si può trasformare in un’esperienza frustrante per l’utente e non ottenere l’effetto desiderato.
Ora vediamo altri consigli, non necessari per l’accessibilità, ma che servono per rendere i carousel più funzionali agli utenti finali:
Il carousel non dovrebbe mai essere l’unico modo per accedere ai contenuti di un sito web
In genere gli utenti non vedono tutte le slide di uno slider, perché non stanno abbastanza a lungo fermi su quella parte di homepage. Questo non è un problema purché il carousel non sia l’unico modo per accedere a determinate parti del sito. Bisogna vedere il carousel come un modo supplementare per mettere in evidenza importanti informazioni, mai come l’unica via per accedervi.
Anche la sequenza di diapositive è importante perché la diapositiva iniziale otterrà notevolmente più esposizione di quelle successive. Bisogna scegliere la sequenza di diapositive attentamente, mettendo il contenuto più importante sulla prima slide.
Le slide non devono ruotare troppo in fretta
A volte gli slider si muovono così velocemente che è difficile capire il loro contenuto. Se un carousel gira troppo in fretta, gli utenti non avranno abbastanza tempo per leggere le slide di interesse. La quantità di testo in una slide deve in gran parte determinare la durata di visibilità della slide.
Indicare la slide corrente tra il set, e permettere agli utenti di navigare avanti e indietro
Controlli chiari e ben visibili consentono agli utenti di contestualizzare i contenuti di un carousel e di renderli più propensi a guardare tutte le slide. Per indicare la slide corrente in genere si usano una serie di punti. Attenzione a non metterli direttamente sopra l’immagine per non avere problemi di visibilità e di contrasto colore. Indicando la slide corrente mostriamo all’utente che ci sono altri contenuti e quanti sono, oppure che lo slider è arrivato all’ultima slide e ricomincerà da capo. Per muoversi avanti e indietro tra le slide di solito forniamo all’utente delle frecce. Anche in questo caso bisogna preoccuparsi del contrasto colore.
Pausa dell’auto-rotazione al passaggio del mouse
Se un utente è posizionato con il mouse su una slide potrebbe voler dire che è interessato a leggerla o a cliccare sul contenuto, quindi lo slider dovrebbe essere in pausa.
Bloccare permanente l’auto-rotazione dopo che l’utente ha cliccato sui controlli utente dello slider
Quando un utente cambia la slide facendo click sul pulsante successiva o precedente, ha indicato di essere interessato a determinati contenuti. Pertanto bisogna interrompere definitivamente l’auto-rotazione una volta che l’utente interagisce attivamente con lo slider.
Che si tratti di requisiti di accessibilità o di consigli funzionali, migliorare l’esperienza dell’utente finale deve sempre essere il primo obbiettivo quando si costruisce un sito Web. Spero che questa raccolta di requisiti vi abbia aiutato!
Per appronfondire
Ecco le fonti che ho usato per scrivere questo post:
https://www.w3.org/WAI/tutorials/carousels/
http://design.italia.it/linee-guida/layout/carousel/
https://www.smashingmagazine.com/2016/07/ten-requirements-for-making-home-page-carousels-work-for-end-users/
https://www.sitepoint.com/unbearable-accessible-slideshow/
