Migliorare l'esperienza dell'utente web per i non vedenti

StackOverflow https://stackoverflow.com/questions/61399

  •  09-06-2019
  •  | 
  •  

Domanda

Stavo ascoltando a recente episodio di Hanselminutes dove Scott Hanselman stava discutendo dell'accessibilità nelle applicazioni web e mi ha fatto pensare all'accessibilità nelle mie applicazioni.

Comprendiamo tutti l'importanza del markup semantico nelle nostre applicazioni web in relazione all'accessibilità, ma che dire degli altri semplici miglioramenti che possono essere apportati per migliorare l'esperienza utente per gli utenti disabili?

Nell'episodio ci sono state diverse volte in cui mi sono dato una pacca sulla fronte e ho detto "Certo!Perché non l'ho fatto?" In particolare, Scott ha parlato di un sito web che posizionava un collegamento nascosto nella parte superiore di una pagina web che diceva "passa al contenuto principale".Il collegamento sarà visibile solo alle persone che utilizzano lettori di schermo e consentirà al lettore di schermo di saltare oltre i menu e altri contenuti secondari.È un miglioramento così evidente eppure è facile non pensarci.

C'è di più nell'accessibilità e nell'esperienza complessiva dell'utente oltre alla semplice creazione di XHTML valido e alla fine.

Quali sono alcuni dei tuoi semplici trucchi per migliorare l'esperienza utente per i non vedenti?

È stato utile?

Soluzione 2

Guardare Zanne

Zanne è uno strumento integrato nel browser per Firefox che emula ciò che uno screen reader "vede" quando si visita una pagina Web.La sua funzione è semplice:per produrre una trascrizione di ciò che un lettore di schermo leggerà a un utente quando viene visitata una pagina Web.È uno strumento utile per analizzare rapidamente se hai strutturato i tuoi contenuti in modo efficace in modo che siano comprensibili e utilizzabili da persone con problemi di vista, senza costringerti a imparare a utilizzare (e acquistare) un'applicazione di lettura dello schermo come JAWS o Windows Eyes.

Altri suggerimenti

Creare pagine accessibili è qualcosa a cui è difficile pensare se non l'hai mai fatto.Tuttavia, una volta appresi i concetti di base, è molto semplice farlo nel 95% dei casi.Per lo più ripeterò ciò che hanno detto gli altri, ma:

  1. Utilizzare le tabelle solo per i dati tabulari
  2. Assicurati di utilizzare gli strumenti semantici a tua disposizione tramite HTML.Ciò significa utilizzare TH con un attributo scope.Utilizza <em> invece di <i> e <strong> invece di <b>.Usa il acronimo E abbreviazione tag.Utilizza elenchi di definizioni.Posso approfondire queste cose se qualcuno lo desidera.

  3. Una delle cose più importanti è usare il file etichetta tag sui campi di input.Per ogni campo di input, pulsante di opzione, casella di controllo e input di testo dovresti avere:

    <label for="nomeutente">Nome utente:</label><input name="nomeutente" />

  4. Aggiungi un "salta navigazione" o "passa alla navigazione" a seconda di dove si trovano grandi porzioni di testo.Se stai lavorando su un sito governativo, dovrebbe essere una seconda natura che tutto ciò che stai creando ti consenta di saltare informazioni ripetitive.

  5. Non usare i colori per enfatizzare.

  6. Assicurati che tutto il testo sia ridimensionabile.Questo significa praticamente non usare "px" nel tuo CSS.

  7. Lo sottolineerò nuovamente: creare pagine semantiche. Utilizzo H tag per i tuoi titoli.Utilizzo ul/li per la navigazione.

  8. Usa il alt attribuire su Tutto immagini.Se hai una gif distanziatrice...BENE..non.Altrimenti, spiega di cosa tratta l'immagine e qual è il suo significato per il contenuto a cui è associata.non utilizzare "un grafico" come tag alt.Utilizza il "Grafico delle finanze da inizio anno:$ 5.000 Q1, $ 4.000 Q2, $ 8.000 Q3" o qualcosa di simile.

  9. Fornisci sottotitoli o trascrizioni per tutti i componenti audio e video

La chiave qui è fornire a coloro che hanno capacità visive, uditive e il motore disabilità hanno la stessa esperienza di coloro che hanno capacità fisiche standard.Se non è possibile inserire la scheda in un campo, non può farlo neanche uno screen reader.Se non puoi fare clic sul testo accanto a una casella di controllo per selezionarla, lo screen reader non riconosce che il testo è correlato alla casella di controllo.

Dovresti visualizzare spesso il tuo sito senza fogli di stile (ctrl-shift-s se hai Firefox e Barra degli strumenti per sviluppatori Web) per vedere se la pagina ha senso.Se non ha senso per te come persona vedente, non avrà senso per qualcuno che usa uno screen reader.

È passato un po' di tempo dall'ultima volta che ho svolto un lavoro in cui dovevamo rispettare la Sezione 508, ma ecco cosa ricordo che non è stato toccato dagli altri poster...

  1. Utilizzare solo tabelle per i dati.Non utilizzare le tabelle per il layout se puoi evitarlo.
  2. Quando utilizzi tabelle per i dati, le intestazioni delle colonne dovrebbero essere nidificate nei tag TH e dovresti utilizzare gli attributi titolo e ambito.I tag della tabella dovrebbero utilizzare l'attributo summary.
  3. Le immagini dovrebbero tutte avere un valore per l'attributo alt che descrive cosa sta succedendo nell'immagine e se l'immagine non ha alcuno scopo (è un'immagine shim o qualcosa di simile), allora l'attributo alt dovrebbe essere impostato su una stringa vuota.
  4. Prova a utilizzare un lettore di sintesi vocale e/o a navigare solo tramite la tastiera e/o a disattivare i fogli di stile.Credo che tu debba acquistare JAWS, ma sono sicuro che ci sono screen reader gratuiti là fuori.È necessario sperimentare un sito attraverso uno screen reader per comprendere veramente quanto sia difficile navigare nella maggior parte delle pagine Web senza i segnali interpretati dagli screen reader.

"Non vedenti" include il daltonismo.Lavoravo con qualcuno che non riusciva a distinguere troppo bene il rosso dal verde, quindi qualsiasi applicazione che utilizzasse un'interfaccia in stile semaforo era molto difficile da usare per lui.Nel settore in cui lavoravamo, gli avvisi nelle righe erano codificati a colori, quindi gli era utile un'altra forma di visualizzazione, ad esempio una colonna aggiuntiva nella riga con il testo del tipo di avviso ("emergenza", "avviso" ecc.) ).

Il problema più grande con gli screen reader sono solitamente le tabelle per posizionare gli elementi sulla tua pagina.Gli screen reader non possono davvero gestirli.Metti le cose nei div nel tuo html e mettili in un ordine sensato.Quindi posiziona i div sulla tua pagina con i css.Utilizza le tabelle per visualizzare il contenuto che dovrebbe essere presente in una tabella.

Il codice per molte pagine web è strutturato come:

  1. Intestazione
  2. Navigazione superiore
  3. Navigazione a sinistra
  4. Contenuto
  5. Piè di pagina

Se strutturato in questo modo, il collegamento nascosto per "Passa al contenuto principale" è utile.Tuttavia, con il layout CSS, potresti essere in grado di riordinarlo in modo da avere:

  1. Contenuto
  2. Intestazione
  3. Navigazione superiore
  4. Navigazione a sinistra
  5. Piè di pagina

Quindi utilizzi il posizionamento CSS e i float per spostare questi diversi elementi sullo schermo per far apparire la pagina nel modo in cui desideri che appaia.

Il vantaggio principale di strutturare una pagina web in questo modo è che se il browser non supporta i CSS, il contenuto sarà il primo nella pagina.Oltre agli screen reader, questo è vantaggioso per i dispositivi mobili e gli spider dei motori di ricerca.

Per gli ipovedenti dobbiamo assicurarci che il testo non sia eccessivamente piccolo e contrasti sostanzialmente con il colore dello sfondo.Dovremmo anche assicurarci che il testo sia ridimensionabile utilizzando unità di dimensionamento relative come empiuttosto che unità assolute come px(anche se, a mio parere, questo sta diventando un problema minore poiché i browser preferiscono sempre più lo zoom rispetto al ridimensionamento del testo).

Per gli utenti di screen reader è utile farsi un'idea del modo in cui vengono effettivamente utilizzati.Il seguente articolo presenta linee guida basate sull'osservazione di persone non vedenti che navigano sul web utilizzando lettori di schermo;ora è un po' obsoleto, ma ti dà un'idea di cosa aiuterà gli utenti di screen reader e cosa no:

http://redish.net/content/papers/interactions.html

Inoltre, la Fondazione americana per i ciechi ha un sezione del loro sito web dedicata ai consigli per gli sviluppatori web su come soddisfare gli utenti con problemi di vista.

Oltre ai non vedenti, dobbiamo considerare quelli con disabilità che impediscono loro di usare il mouse, e anche quelli con disabilità neurologiche.Se qualcuno potesse fornire risorse dando consigli su come soddisfare queste persone, sarebbe fantastico.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top