risposta-alla-domanda-sullo-sviluppo-web-bd.com

Come testare un sito Web per utenti ipovedenti?

Quali tecniche dovrei usare durante il test di un sito Web per utenti ipovedenti che si verificano comunemente a causa dell'invecchiamento come la degenerazione maculare, la necessità di occhiali da lettura, la possibile perdita di campi di contrasto, ecc.?

19
Chris Marisic

Nota : il motivo per cui ho scritto questa risposta evidenziando i diversi punti di controllo di una persona deve fare per garantire che il suo sito sia accessibile a persone con problemi di vista perché ritengo che una comprensione dei difetti o dei problemi di progettazione nel sito contribuirà a definire quali problemi gli utenti potrebbero incontrare durante l'accesso al sito

Per i principianti, consiglio vivamente di provare a testare il tuo sito Web per vedere come gestisce gli screen reader in quanto si tratta di una potenziale base di utenti che non puoi evitare e inoltre non puoi sempre presumere che le persone possano usare strumenti di ingrandimento per leggere i contenuti in caso di ipovisione e screen reader sono uno strumento di accessibilità atteso non solo per le persone "cieche" ma anche per le persone con visione limitata. Quindi, evitandoli, stai alienando tecnicamente il tuo gruppo di utenti.

Detto questo, ci sono alcune pratiche raccomandate su ciò che dovrebbe essere fatto per garantire agli utenti ipovedenti di accedere al tuo sito web.

L'acuità visiva ridotta è probabilmente il problema dell'invecchiamento più noto, eppure i siti Web con caratteri minuscoli sono legioni. I siti che scelgono come target gli anziani dovrebbero utilizzare caratteri di almeno 12 punti come impostazione predefinita. E tutti i siti, indipendentemente dal fatto che siano rivolti o meno specificamente agli anziani, dovrebbero consentire agli utenti di aumentare le dimensioni del testo come desiderato, soprattutto se l'impostazione predefinita del sito è una piccola dimensione del carattere.

  • Assicurare la coerenza del design : la maggior parte degli anziani è generalmente a conoscenza dei colori standard per i collegamenti e di solito presume che un elemento con quel colore sia un collegamento. Evitare di provare a implementare nuovi colori di progettazione per collegamenti e altri elementi di interazione attivi. Per citare lo stesso rapporto di Norman Neilson a cui si fa riferimento prima

I collegamenti ipertestuali sono componenti essenziali di progettazione; l'utilizzo di testo di grandi dimensioni per loro è particolarmente importante per due motivi: 1) per garantire la leggibilità e 2) per renderli obiettivi più importanti per il clic. Inoltre, dovresti evitare collegamenti strettamente raggruppati; l'uso di spazi bianchi per separare i collegamenti riduce i clic errati e aumenta la velocità con cui gli utenti colpiscono il collegamento corretto. Questa regola si applica anche ai pulsanti di comando e ad altri oggetti di interazione, che dovrebbero essere ragionevolmente grandi per facilitare un semplice clic.

Consiglio anche di dare un'occhiata a questo articolo da Mashable

Spesso, semplicemente ingrandire il testo è tutto ciò che un utente richiede. Prendi in considerazione l'offerta di fogli di stile alternativi con dimensioni dei caratteri più grandi e assicurati che il layout non si interrompa quando lo zoom solo testo è abilitato nel browser. Molti utenti ipovedenti vorranno ingrandire il testo senza modificare la scala dell'intero layout del sito, il che può comportare difficoltà nello scorrimento e nel tracciamento del testo su lunghe righe.

A seconda del mercato di destinazione del tuo sito, potresti anche prendere in considerazione l'idea di aumentare di qualche punto il carattere predefinito e, se pubblichi articoli o grandi quantità di testo, è una buona idea offrire versioni di solo testo, quindi l'utente può quindi manipola il testo come preferisce.

Utilizzare un carattere tipografico sans serif, come Helvetica, non condensato. Evita l'uso di caratteri serif, novità e display.

  • Uso del colore : Alcuni colori possono essere difficili da prevenire per le persone con visione limitata. Esistono anche diversi tipi di daltonismo e devi assicurarti che i colori selezionati possano essere compresi dalle persone con visione limitata o persino daltonismo . Puoi anche usare un simulatore di colore per vedere come si sovrappongono i tuoi progetti come http://colorfilter.wickline.org/ . Assicurati anche che il contrasto del colore sia significativamente alto in modo che gli utenti possano leggere il contenuto senza doversi sforzare Per citare questo articolo dalle combinazioni di colori

L'uso di colori appropriati può essere una parte importante della facilità d'uso per le persone con particolari esigenze visive. Non tutti i monitor riproducono accuratamente i colori che potresti aver scelto per il tuo web design. Rimanendo all'interno delle 216 "selezioni di colori sicure per il browser" riconosciute, si può essere certi che i colori scelti verranno trasmessi senza modifiche. Ciò è importante perché alcune combinazioni di colori perdono la loro efficacia quando il livello di contrasto viene ridotto agli spettatori ipovedenti. Gradi di tonalità, luminosità e saturazione possono essere meno distinguibili, il che può rappresentare un problema significativo, soprattutto se i colori vengono utilizzati come indicatori primari.

Esagerando i contrasti o le differenze di luce tra lo spazio dello schermo in primo piano e di sfondo, la persona con problemi di vista può differenziare più facilmente i colori. Per lo stesso motivo, non usare mai colori di simile leggerezza uno accanto all'altro. Alleggerisci le luci, blu-verde, verde, giallo e arancione e scurisci i colori scuri, blu, viola, viola e rosso per l'uso più efficace del contrasto. Più drammaticamente diversa puoi rendere ogni area, maggiore sarà la chiarezza della tua pagina web.

La rimozione di grafica estranea e "lavoro intenso" può disordinare il tuo sito Web. Un layout pulito e semplice è molto più facile da leggere e navigare. Progettare in bianco e nero con minimi colori aggiunti per enfatizzare è l'approccio migliore. Giallo, blu, bianco e nero sono i colori meno confusi per le persone con problemi di vista. In realtà, mentre potrebbe non essere il testo più attraente, bianco o giallo chiaro a 24 punti su uno sfondo nero, è considerato la combinazione di colori più leggibile per gli utenti online.

  • Consenti agli utenti di accedere al tuo sito utilizzando la tastiera : Mentre so che hai menzionato non volevi supportare gli screen reader e ti dissuoto fortemente dal prendere un tale passo, assicurati anche che il tuo sito possa essere navigato da tastiera in quanto ciò consentirebbe agli utenti di navigare rapidamente al contenuto usando le scorciatoie da tastiera, consentendo allo stesso tempo agli screen reader di scansionare il contenuto. Per citare questo articolo da mascherabile

Oltre ad essere utili per le persone con screen reader, le scorciatoie da tastiera possono rendere molto più semplice la navigazione del sito per gli utenti ipovedenti. Con l'aggiunta di comandi da tastiera, è possibile navigare in un sito utilizzando i tasti freccia e alcuni tasti rapidi, eliminando la necessità di seguire il cursore del mouse su uno schermo e la necessità associata di mantenere la messa a fuoco visiva. Questo può fare molto per ridurre l'affaticamento degli occhi e la frustrazione. Molti utenti con disabilità visive navigano in rete su monitor di grandi dimensioni (23 "o più), che possono portare a molti movimenti della testa e degli occhi, in particolare a distanze focali più brevi. Meno tempo l'utente deve impiegare a seguire il cursore (che può perdersi facilmente) intorno allo schermo, meglio è.

In chiusura ecco alcuni link che vale la pena dare un'occhiata

Rendi le tue pagine accessibili ai non vedenti

WebAim: comprensione della cecità

5 strumenti di miglioramento dell'accessibilità del web

15
Mervin

Esistono diversi strumenti che possono essere utilizzati per verificare i livelli di contrasto per assicurarsi che ci sia abbastanza contrasto tra il colore del tipo e lo sfondo su cui è attivo. Ecco un link a 10 di questi strumenti. http://www.456bereastreet.com/archive/200709/10_colour_contrast_checking_tools_to_improve_the_accessibility_of_your_design/

Per quanto riguarda la dimensione del carattere, assicurati di utilizzare EM per dimensionare proporzionalmente le cose in modo che gli utenti possano modificare le impostazioni di zoom del browser e i tuoi layout continueranno a sembrare OK.

Se la vista del tuo utente è così brutta da dover utilizzare uno screen reader, ti consiglio di fare una ricerca su Google per i consulenti che ti aiuteranno nel processo per far funzionare bene il tuo sito Web per gli screen reader. JAWS ( http://en.wikipedia.org/wiki/JAWS_ (screen_reader) ) è attualmente il più popolare. Se non hai i soldi per un consulente, scarica JAWS dal sito web del produttore e giocaci insieme leggendo i loro tutorial online. Far funzionare correttamente il tuo sito Web con gli screen reader è un affare complicato, ho lavorato a un progetto prima che lo richiedesse e abbiamo dovuto assumere un consulente.

3
taylorhayward

Presumo che tu stia chiedendo come farlo manualmente, dopo aver già creato il tuo sito Web? Tuttavia, è possibile automatizzare alcuni di questi test mentre si è ancora in fase di sviluppo. Non sono sicuro di quante persone siano consapevoli che ciò sia possibile, ma spero che tu (o i tuoi sviluppatori) lo troviate utile.

Se è stato impostato un ambiente di test di integrazione automatizzato (build automatizzate, test automatizzati ecc.) Sarebbe possibile automatizzare il test di alcune pagine utilizzando capybara-accessibile (per a Ruby on Rails). Ti permette di eseguire automaticamente audit di accessibilità per ogni pagina visitata da un test di funzionalità (tipicamente scritto usando uno strumento come RSpec). eseguito da Google strumenti per sviluppatori di accessibilità , con report generati dalle loro librerie Javascript open source.

Un esempio di alcune delle regole di audit incluse nei report:

  • minimo contrasto cromatico
  • etichetta associazioni con input
  • presenza di attributi alt
  • uso valido dei ruoli ARIA

Uno dei principali vantaggi del test di accessibilità automatizzato (come in realtà con qualsiasi test di codice automatizzato), è la possibilità di rilevare se una modifica del codice settimane o mesi in corso cambia l'accessibilità del tuo sito in modi che potresti non avere previsto.

Un altro vantaggio è il ridotto carico di lavoro dei team di controllo qualità, che consente loro di concentrarsi su interazioni specifiche o pagine complesse.

Questo potrebbe non essere un proiettile d'argento, ma può darti fiducia su almeno un livello di base di accessibilità in futuro.

3
CJF