Accessibilità della vetrina

Jan 12 2023
Il dilemma dell'accessibilità I criteri di successo per l'accessibilità web secondo le WCAG 2.1 (linee guida per l'accessibilità dei contenuti web) potrebbero essere schiaccianti se visti solo dal punto di vista dei libri di testo.
Un'illustrazione artistica mostra un collage di immagini. Una donna che indossa una sciarpa gialla e una giacca nera con un logo di accessibilità web filigranato. Un utente non vedente di sesso maschile su uno sfondo di tastiera. Una mano con una benda ingessata. Un segno di dollaro collega tutte e 3 le immagini.

Il dilemma dell'accessibilità

I criteri di successo per l'accessibilità web secondo le WCAG 2.1 (linee guida per l'accessibilità dei contenuti web) potrebbero essere schiaccianti se visti solo dal punto di vista dei libri di testo. Nella mia esperienza, sviluppatori e manager hanno reazioni di disagio quasi unanimi ai progetti di Web Accessibility. Ad esempio: dobbiamo leggere "tutto quello", è solo "così noioso", "basta eseguire il validatore" ... grilli e tumbleweeds per riassumere.

In qualità di sviluppatore e studente di accessibilità Web, mi sono reso conto che una volta superato il "dolore atroce" della lettura dei criteri, è possibile affrontarlo da diverse angolazioni. Dal punto di vista dell'esperienza utente , ad esempio, e anche per livelli. Lentamente, ma davvero, solo testandolo. Qualcosa che gli sviluppatori fanno sempre. Ora, questo di solito mi porta alle seguenti domande e risposte:

Ma cosa dobbiamo "testare" esattamente?

Quello che facciamo inconsciamente la maggior parte del tempo: il viaggio dell'utente .

Come lo facciamo?

Empatizzando consapevolmente con le disabilità che i nostri utenti possono avere, in altre parole, simulare o emulare.

Non è sufficiente testare il mio sito con un validatore?

Non è. I validatori sono di grande aiuto quando si analizzano siti Web di grandi dimensioni per alcuni criteri. Come solo il 20% di loro. Tuttavia, ho visto i validatori superare i siti a pieni voti solo per rendersi conto che, in realtà, non sono accessibili direttamente.

Analogia concreta, per favore?

Credere che solo perché rispetti alcuni criteri, rende il tuo sito web "accessibile" a un certo livello. Sarebbe come pensare che il tuo edificio per uffici sia “accessibile” perché ha un pulsante molto grande per aprire automaticamente la porta all'ingresso principale… ma solo dopo aver attraversato un parcheggio di ghiaia e aver salito una scala. Quindi, come fa l'utente ad arrivare alla porta per cominciare?

Accessibilità della vetrina

Molti settori sono soggetti alla conformità all'accessibilità del Web in questi giorni, per alcuni, come il governo, è obbligatoria. La vendita al dettaglio online è diventata l'obiettivo di un numero crescente di cause legali , anche gli utenti con disabilità hanno chiare aspettative , pertanto è in aumento un crescente bisogno di Storefront Accessibility . A volte fare la differenza tra un approccio "lead-to-cash" e un risultato "lead-to-quere".

Locali

Illustriamo il processo con un esempio, ma prima stabiliamo alcune premesse:

  1. L'obiettivo principale di una vetrina è consentire agli utenti di effettuare il checkout dei prodotti.
  2. Gli elementi sull'interfaccia dovrebbero facilitare l'utente a completare il checkout, inclusi gli utenti con disabilità.
  3. Gli sviluppatori e i tester del controllo qualità spesso testano fingendo che un utente possa passare con successo dal punto A al punto B o Z sull'interfaccia. Le stesse persone dovrebbero anche verificare che gli utenti con disabilità siano in grado di raggiungere gli stessi punti.
  4. Passare con successo dal punto A al punto B o Z in un test, emulando una Persona con disabilità, si tradurrà in una serie di criteri di accessibilità rispettati con successo.

Prima di entrare nel dettaglio di cosa sia una Persona , chiariamo l' empatia . Sembra una cosa facile da fare, l'abbiamo sentita tante volte: “mettici nei panni di qualcun altro”, quanto può essere difficile? Bene, si scopre che le persone hanno diversi livelli di empatia e di solito sono influenzate dalle proprie esperienze di vita... quindi non è così facile.

La simpatia NON è empatia

Inoltre, le diverse percezioni di cosa significhi empatia complicano le cose, ho sentito molte definizioni spontanee: si tratta di avere un grande cuore, essere tutti sentimentali per qualcosa, essere un filantropo, o leggere le emozioni "tra le righe"... sì, immagino di sì potrebbe benissimo essere tutto ciò a seconda del contesto della conversazione, ma comunque, tutti i suddetti sono più vicini alla simpatia che all'empatia. Ora, quando si parla di Web Accessibility , l'empatia è fortunatamente una questione molto pragmatica. Ad esempio, una vetrina online è accessibile o non lo è. In altre parole, "semi accessibile" non funziona se un viaggio critico non ha successo. Come non farebbe per un negozio fisico. O gli acquirenti con disabilità possono o non possono entrare e fare acquisti.

Indipendentemente da come uno “si sente” riguardo al fatto, le nostre buone intenzioni, pensieri ed emozioni riversati nel pensare agli utenti che non sono in grado di utilizzare lo storefront non lo renderanno più accessibile. Questa è simpatia. È carino. È la motivazione. Aiuta. Aumenta la consapevolezza. Ma non rende accessibili i siti web.

La mia solita storia per "indurre" le persone all'empatia è la seguente, aggiungiamo prima un'atmosfera rilassata e fingiamo di essere in un ristorante o in un bar, circondati da familiari, amici o passanti occasionali, di solito il contesto in cui racconto questa storia:

Fai finta che tu (un utente senza disabilità) stia acquistando online un prodotto semplice, come diciamo... una sciarpa gialla da donna, e improvvisamente il mouse del tuo computer smette di funzionare - la sua batteria si esaurisce - e devi finire il checkout usando solo il tastiera .

Resistenza all'empatia

Naturalmente, c'è sempre resistenza a questo esercizio di empatia, ed è normale, siamo messi fuori dalla nostra zona di comfort. Quindi sento cose come: "e se utilizzo un laptop con un tappetino per mouse integrato"... concordiamo che non è questo il punto. Può sembrare un'assurdità dover entrare in empatia con qualcosa di così banale come avere un topo, ma è rilevante per l'intero processo.

Devo sottolineare un fattore generazionale in questo pubblico occasionale delle mie storie; teniamo presente che gli utenti che possedevano un computer a metà degli anni '80 potrebbero ricordare come muoversi sullo schermo con una tastiera, allora i mouse a sfera stavano solo iniziando ad essere introdotti e solo alla fine degli anni '90 i mouse ottici sono diventati disponibile in commercio, ma gli utenti nati in quei decenni potrebbero essere colti alla sprovvista immaginando uno scenario solo per tastiera. Come ho detto, non è così facile entrare in empatia.

Ad ogni modo, una volta assimilato l'esempio e le persone iniziano a lanciare teorie e ricordare o capire come muoversi sullo schermo usando solo la tastiera , allora avremo un'idea, un piano, una tabella di marcia - un viaggio - su come finire il checkout .

Ok, una volta assimilato questo viaggio con la tastiera, aggiungiamo complessità : supponiamo che tu abbia acquistato questo articolo molte volte (prendi sciarpe gialle per tutti) e ora conosci il processo a memoria, conoscilo "così bene" che puoi farlo senza un mouse, così bravo che puoi farlo “ad occhi chiusi”… davvero? … proviamo così: navigazione da tastiera + occhi chiusi .

Persone con disabilità

Prima di chiudere gli occhi , definiamo cos'è una Persona ; Nel contesto della progettazione dell'esperienza utente (UX), le " persone " sono utenti archetipici i cui obiettivi e caratteristiche rappresentano i bisogni e i limiti di un gruppo più ampio di utenti. Sì, mettere le facce agli utenti aiuta con il processo di empatia, cercando su Google "persone per l'accessibilità" possiamo trovare molte persone prontamente disponibili da usare, ma poi sì, più letture ... di nuovo grilli e tumbleweeds.

Detto questo, per dare seguito alla narrazione casuale eccessivamente semplificata al bar, e poiché questo articolo sta iniziando a diventare lungo (mancando il punto sul non dover leggere così tanto) semplifichiamo eccessivamente in un breve paragrafo un paio di personaggi che possono essere facilmente emulato da utenti senza disabilità. Inserisci Jane & John , provenienti da un articolo precedente , mi hanno aiutato in precedenza durante l'impostazione delle prospettive e delle aspettative della base dell'accessibilità.

  • Jane: utente destro, che di recente si è rotta la mano destra, deve usare la navigazione solo tramite tastiera, fa affidamento sulla sua vista per sapere dove si trova sullo schermo e per passare all'elemento successivo in un'interfaccia utente.
  • John: utente non vedente, usa la navigazione solo da tastiera, fa affidamento su una vocalizzazione dello screen reader per sapere dove si trova e per arrivare all'elemento successivo in un'interfaccia utente.

Esistono molti modi in cui un utente può navigare in una vetrina, ma ci sono sempre percorsi più comuni, quelli in cui la vetrina effettivamente guadagna sono i percorsi utente critici . La navigazione solo da tastiera non fa eccezione, quindi concordiamo su un viaggio medio super semplice basato sul prodotto di una storia su Storefront Accessibility, una sciarpa gialla per le donne .

Viaggio dell'utente critico

Caso d'uso di prova: Jane sta cercando di acquistare una sciarpa gialla per se stessa. D'altra parte, John vuole comprare la stessa sciarpa per la sua ragazza. Per chiarire ulteriormente, Jane e John , non sono imparentati, non si conoscono.

Per entrambi, Jane e John , il percorso critico per acquistare una sciarpa gialla da donna sarà simile a questo:

Tab per il campo di ricerca > digita "Donna sciarpa gialla" > Tab per il primo prodotto (fingendo che sia la sciarpa gialla) > Avvia la procedura di checkout.

Emulare o simulare?

Ci stiamo arrivando, grazie per aver letto fin qui. La differenza tra simulazione ed emulazione è sottile. Dal momento che entrambi includono la parola "imitazione", atteniamoci a quel concetto. Per il seguente esempio, utilizzeremo un software di emulazione, quindi chiamiamola emulazione, ma sappi che intendo decisamente imitazione.

Ora, l'imitazione è la chiave per entrare in empatia, e dobbiamo farlo il più vicino possibile a come Jane e John navigheranno verso quella sciarpa gialla in un negozio. Sappiamo che entrambi utilizzeranno la navigazione solo da tastiera, quindi questo ci lascia con i seguenti tasti per completare il checkout.

Interazioni da tastiera

  • TAB
  • MAIUSC+TAB
  • SPAZIO
  • ACCEDERE
  • Tasti freccia.

Ok, è qui che sfido il pubblico del bar e tu, il lettore - sto scherzando - ti invito gentilmente a scegliere una o più vetrine online là fuori sul web. Ma soprattutto, uno in cui puoi trovare una sciarpa gialla per le donne e provare ad andare il più lontano possibile attraverso il processo di pagamento emulando Jane & John . Detto questo, non devi "in realtà" comprare la sciarpa ogni volta, non se non vuoi.

Emulando Jane

Segui il viaggio dell'utente critico utilizzando solo i tasti della tastiera che Jane userebbe.

Emulare Giovanni

Attiva l' estensione ChromeVox e — finalmente! - chiudi gli occhi e poi segui il viaggio dell'utente critico ascoltando ciò che ti dice la vocalizzazione e usando solo i tasti della tastiera che John userebbe.

Problemi comuni

Confrontando la tua esperienza di emulazione con diversi tipi di accessibilità della vetrina, potresti riscontrare problemi quali: impossibilità di passare all'elemento logico successivo nella pagina arrivando a elementi casuali, impossibilità di eseguire la tabulazione da qualsiasi punto in avanti (trappola da tastiera) , incapace di ascoltare una descrizione significativa del prodotto, come il suo colore o il suo prezzo. Purtroppo, questo è molto comune e un indicatore della mancanza di accessibilità Web su un particolare sito web.

Conformità al criterio

Chiarimento dei termini: criteri è plurale; criterio è singolare.

Ora, se sei riuscito a completare con successo la procedura di checkout emulando Jane & John , quella vetrina ha soddisfatto i seguenti criteri WCAG 2.0 .

Tabella che mostra 16 criteri per l'emulazione riuscita di Jane e John (tastiera, nessuna trappola da tastiera, blocchi di esclusione, ordine del focus, navigazione coerente, focus visibile, contenuto non testuale, informazioni e relazioni, titolo della pagina, scopo del collegamento, lingue della pagina, Focus, Identificazione degli errori, Parsing, Intestazione ed etichette, Prevenzione degli errori). I primi 6 criteri sono per Jane e John, mentre i restanti 10 sono solo per John.

Si noti come la maggior parte dei criteri sia di livello A con solo un paio di livello AA. A mio parere, quelli di cui sopra sono i criteri più importanti da rispettare “per cominciare”. Hanno posto le basi per costruire un'esperienza utente più ricca su di loro. Ad esempio, aggiungendo più criteri di livello AA o collegando altre tecnologie assistive come i display braille. Consideriamoli la parte difficile, ovvero indipendenti da criteri più “semplici”, come quelli riguardanti l'uso del colore, la dimensione del testo, il video e l'audio.

Bene, qui è dove finisce la storia al bar. O se sei riuscito o meno a finire l'emulazione come Jane & John . Anche se hai appena provato un po', merita un brindisi. Come ormai avrai capito, chiudendo gli occhi hai iniziato a "vedere" dove sono i problemi con Storefront Accessibility. Quindi, evviva! con quello che stai bevendo.

Insomma

  1. Possiamo convalidare l'accessibilità dello Storefront "percorrendo la strada" con empatia.
  2. Durante la pianificazione, lo sviluppo e il test di una vetrina online, qualsiasi sforzo nel processo per rimuovere i bug relativi ai 16 criteri sopra indicati faciliterà il checkout per gli utenti con disabilità.
  3. Uno sviluppatore web dovrebbe assicurarsi che un percorso utente critico accessibile funzioni effettivamente prima di consegnarlo al tester QA.
  4. Il miglior strumento di convalida è l'empatia.
  5. A volte chiudendo gli occhi, possiamo "vedere" dov'è il problema.
  6. Gli acquirenti con disabilità dovrebbero essere in grado di acquistare online come fanno nei negozi fisici.
  7. Nessuno è esente da disabilità per tutta la vita, nella migliore delle ipotesi: invecchiamo tutti.
  8. L' accessibilità Web dovrebbe essere vista come un'opportunità di business in qualsiasi strategia lead-to-cash prima che diventi uno scenario lead-to-quere .