Da cliente Premium di YUMPU, hai la possibilità di adattare completamente il tuo WebKiosk o App alla tua identità aziendale (CI). Questo include la possibilità di caricare CSS personalizzati per modificare font, colori, spaziature, pulsanti, navigazione e altro.
Per garantire che le tue personalizzazioni non solo riflettano il tuo marchio, ma siano anche accessibili a tutti gli utenti, ti consigliamo vivamente di seguire le migliori pratiche per l'accessibilità. Di seguito troverai linee guida utili e strumenti di test per aiutarti a verificare che le tue scelte di design rispettino gli standard attuali di accessibilità.
Perché l'accessibilità è importante quando si utilizza CSS personalizzato
Sebbene lo stile personalizzato aiuti a esprimere il tuo marchio, alcune modifiche CSS potrebbero introdurre involontariamente barriere per gli utenti con disabilità, come:
Contrasto cromatico insufficiente
Font difficili da leggere o dimensioni del testo molto ridotte
Elementi nascosti o non raggiungibili durante la navigazione da tastiera
Funzioni accessibili solo al passaggio del mouse
Problemi di layout quando si effettua lo zoom o su dispositivi mobili
Raccomandiamo di valutare tutte le personalizzazioni per l'accessibilità in base agli standard WCAG 2.1 Livello AA.
Raccomandazioni principali per uno stile accessibile
Ecco gli elementi importanti da considerare quando crei il tuo design personalizzato:
Elemento | Migliore pratica |
Colori | Assicurati di un contrasto sufficiente tra testo e sfondo (almeno 4.5:1). |
Font | Utilizza caratteri leggibili ed evita dimensioni dei font inferiori a 14px. |
Stati di focus | Tutti gli elementi interattivi devono essere accessibili da tastiera e chiaramente focalizzabili. |
Effetti hover | Assicurati che le funzioni critiche siano accessibili senza mouse. |
Strumenti consigliati per il test di accessibilità
Puoi utilizzare i seguenti strumenti gratuiti per verificare se il tuo CSS personalizzato rispetta gli standard di accessibilità:
WAVE Web Accessibility Evaluation Tool → https://wave.webaim.org/
Testa contrasto, struttura, testo alternativo e altro.Accessible Colors Checker → https://accessible-colors.com/
Valuta facilmente le combinazioni di colori testo/sfondo.WebAIM Contrast Checker → https://webaim.org/resources/contrastchecker/
Semplice ed efficace per verificare i rapporti di contrasto.Lighthouse (Chrome DevTools) → Clic con il tasto destro > “Ispeziona” > scheda “Lighthouse”
Genera report di accessibilità automatizzati.axe DevTools (by Deque Systems) → https://www.deque.com/axe/devtools/
Estensione browser per test di accessibilità completi.
Cosa YUMPU fornisce in modo predefinito
YUMPU garantisce che la struttura predefinita del tuo WebKiosk e App sia sviluppata tenendo conto dell'accessibilità. Questo include la navigazione da tastiera, il markup semantico e layout scalabili.
Tuttavia, quando carichi CSS personalizzati, assumi la responsabilità di eventuali aspetti di accessibilità aggiuntivi legati allo stile.
Nota: Ti consigliamo vivamente di testare il tuo design regolarmente, soprattutto dopo il lancio di nuovi contenuti, la modifica dei colori o l'applicazione di modifiche importanti al layout.
Altre risorse