10 strumenti per migliorare l'accessibilità del sito web
Non c'è dubbio che capisci la necessità che il tuo sito web sia accessibile al maggior numero possibile di utenti. Ma leggere tutte le linee guida e gli standard può essere un po 'travolgente. Puoi trovare le ultime raccomandazioni W3C qui, ma devi conoscere ogni parola e seguire tutte le linee guida?
Oggi, proveremo a rendere tutto un po 'più semplice con alcuni strumenti e risorse per aiutarti a migliorare l'accessibilità del sito Web (e forse anche alcuni controlli per considerare che non erano nel tuo radar!).
Sia che tu stia cercando di assicurarti di avere un contrasto visivo sufficiente, un sito accessibile agli screen reader o persino di creare e-mail accessibili, ti abbiamo coperto!
1. Cassaforte a colori
Color Safe ti aiuta a controllare (e persino creare) tavolozze di colori accessibili in base alle Linee guida WCAG per il contrasto del colore del testo e dello sfondo. Lo strumento e gli standard utilizzano una formula basata sul rapporto per determinare le combinazioni di colori che possono essere lette da tutti.
Le linee guida WCAG raccomandano un rapporto di contrasto di 4, 5 per il testo piccolo (corpo) e 3 per il testo grande (qualsiasi cosa oltre 24 punti).
Basta inserire i colori, in base al codice HEX, la scelta e la dimensione del carattere e generare una tavolozza. Ottieni un rapporto immediato da verificare e puoi vedere altri colori simili. Controlla se qualcosa di simile potrebbe essere un'opzione migliore in base al tipo di carattere e alle dimensioni.
2. NoCoffee
NoCoffee è un'estensione del browser Google Chrome che ti aiuta a visualizzare il tuo design nello stesso modo in cui qualcuno che ha problemi di vista potrebbe vederlo. (Nulla mette in evidenza l'importanza dell'accessibilità come vederla in questo modo.)
Può verificare e mostrare quanto segue:
- Acuità bassa con testo piccolo o target di clic
- Problemi a basso contrasto con elementi di testo e di sfondo
- Daltonismo
- Neve visiva, bagliore, ghosting e cataratta
- Nistagmo, che è un rapido movimento involontario degli occhi
- Campi visivi ostruiti
3. Controllo contrasto
Contrast Checker consente di inserire i colori di sfondo e di primo piano sullo schermo e ottenere controlli immediati rispetto a diversi standard visivi con un passaggio / errore istantaneo con codice colore.
Le belle funzioni dello strumento includono la possibilità di alternare le opzioni di colore e scala di grigi, condividere campioni dei controlli e estrarre i colori dalle immagini. Puoi anche salvare un campione PDF. È uno strumento semplice con molte funzionalità che chiunque può utilizzare rapidamente.
Fornisce inoltre il rapporto colore, come indicato nelle Linee guida WCAG.
4. Tota11y
Tota11y è un file JavaScript che mette un piccolo pulsante nell'angolo inferiore dei documenti. Si espande con una barra degli strumenti che include più plugin per diversi controlli di accessibilità.
- Intestazioni e violazioni dell'ordine di intestazione
- Contrasto (o mancanza di ciò)
- Link al testo mancante o confuso
- Etichette mancanti dagli input
- Immagini senza testo alternativo
- Le etichette sono punti di riferimento ARIA
- Lo screen reader "bacchetta" in modo da poter "leggere" il sito come farebbe uno screen reader
5. WAVE
WAVE, o strumento di valutazione dell'accessibilità del web, è una solida raccolta di controlli in un unico posto.
Lo strumento utilizza una sovrapposizione visiva di icone relative alle informazioni nella barra laterale per fornire dettagli su tutto, dal contrasto di colore ai titoli ridondanti ai collegamenti a HTML e elementi strutturali.
Il checker gratuito ti fornisce quasi tutto ciò che devi sapere su una singola pagina, ma WAVE include anche strumenti a livello aziendale a pagamento per proprietari di più siti o utenti che desiderano più di una pagina alla volta. Include anche estensioni del browser Chrome e Firefox che possono controllare pagine Web intranet, protette da password, generate dinamicamente o sensibili in un ambiente privato.
6. Controllore 508
Il correttore 508 verifica gli URL per determinare se un sito Web soddisfa le linee guida per la conformità 508 degli Stati Uniti, richiesta dalla legge per qualsiasi organizzazione che riceve finanziamenti federali.
Mentre questo strumento è gratuito, devi registrarti per vedere i risultati completi della scansione.
Il sito include anche altri strumenti e risorse, incluso un quiz per aiutare le organizzazioni a scoprire se sono soggette alla Conformità 508 e alle risorse specifiche per l'istruzione superiore, il non profit e gli enti governativi.
7. HTML_CodeSniffer
HTML_CodeSniffer è uno script lato client che controlla il codice sorgente e cerca violazioni di standard definiti. Controlla sia le Linee guida per l'accessibilità dei contenuti Web 2.0 sia la Sezione 508 degli Stati Uniti.
Incollare il codice direttamente nel sito Web per un controllo o utilizzare il bookmarklet.
È facile da usare e puoi scegliere il tipo di informazioni da visualizzare: errori, avvisi o avvisi e visualizzare un rapporto che descrive in dettaglio eventuali dubbi dal controllo.
8. Email accessibile
Accessible Email è un correttore online e un editor HTML che ti aiuterà a migliorare il codice di una newsletter e-mail prima di inviarlo. (Puoi anche controllare le campagne passate / inviate.)
Con così tanta comunicazione digitale e generazione di lead proveniente dall'e-mail, non dovrebbe essere uno degli elementi del sito Web dimenticati in termini di accessibilità, ma spesso lo è. Le stesse regole per l'accessibilità sul web si applicano anche agli invii di e-mail.
Lo strumento è gratuito e progettato per promuovere l'accessibilità e l'usabilità dell'email marketing.
9. Amara
Amara è uno strumento per la creazione di sottotitoli e sottotitoli per video.
Fornire un modo per connettersi senza audio o in un'altra lingua può aprire i tuoi elementi di design a più persone, in particolare se il video è un elemento chiave del design.
Questo strumento include opzioni gratuite e aziendali che semplificano l'inserimento della lingua sullo schermo in un formato leggibile che funziona su siti Web e piattaforme di streaming video come YouTube.
10. MobiReady
MobiReady fornisce un test di accessibilità mobile in un formato visivo e con un rapporto dei risultati in modo da poter vedere dove il tuo sito Web potrebbe non essere all'altezza del più piccolo dei dispositivi.
Puoi confrontare il tuo sito con l'Alexa 1000, una classifica dei migliori siti Web al mondo; ottenere risultati tecnici dettagliati con consigli e visualizzare i rendering del tuo sito Web su schermi diversi, inclusi i dispositivi di livello alto, medio e basso.
Una delle parti migliori di questo test è che è segnato in dozzine di aree e ci sono suggerimenti per migliorare ogni "fallimento".
Conclusione
Quando si tratta di accessibilità del sito Web, è importante considerare l'usabilità e la leggibilità per tutti i tipi di utenti. Pensa al colore, alle dimensioni e al posizionamento di elementi, didascalie e sottotitoli, HTML e struttura appropriati e persino e-mail in modo da offrire la migliore esperienza possibile a quante più persone possibile.
È anche importante verificare eventuali regole di conformità regionali o nazionali che potrebbero applicarsi ai tuoi progetti, come gli standard di conformità 508 sopra menzionati.
E in caso di dubbio, è meglio sbagliare dal lato dell'accessibilità. È OK modificare un colore da una tavolozza o aumentare le dimensioni del carattere in modo che più persone possano capire facilmente cosa c'è sullo schermo.
