Introduzione alla semantica e alle tecnologie per la disabilità
Hai scoperto come rendere un sito accessibile agli utenti che non possono usare un mouse o un dispositivo di puntamento (a causa di disabilità fisiche, problemi tecnologici o preferenze personali) affrontando l'uso della sola tastiera. Sebbene richieda un po' di attenzione e attenzione, non è tanto lavoro da pianificare fin dall'inizio. Una volta eseguite queste operazioni di base, arriverai fino a un sito completamente accessibile e rifinito.
In questa lezione, approfondiremo questo approccio e farti pensare ad altri fattori di accessibilità, ad esempio come creare siti web per supportare utenti come Victor Tsaran, che non possono vedere lo schermo.
Per prima cosa, ci occuperemo di tecnologie per la disabilità, il termine generale per strumenti come gli screen reader che aiutano gli utenti con disabilità e che possono impedir loro di accedere alle informazioni.
In seguito, esamineremo alcuni concetti generali relativi all'esperienza utente e ne affideremo i concetti per approfondire l'esperienza degli utenti delle tecnologie per la disabilità.
Infine, vedremo come utilizzare l'HTML in modo efficace per creare una buona esperienza per questi utenti e come si sovrapponga piuttosto al modo in cui abbiamo focalizzato l'attenzione in precedenza.
Tecnologie per la disabilità
Tecnologie per la disabilità è un termine generico che descrive i dispositivi, i software e gli strumenti che aiutano le persone con disabilità a svolgere un'attività. Nel senso più ampio, potrebbe trattarsi di qualcosa di low-tech, come una gruccia per camminare o una lente d'ingrandimento per leggere, oppure qualcosa di high-tech, come un braccio robotico o un software di riconoscimento immagini su uno smartphone.
Le tecnologie per la disabilità possono includere elementi generici come lo zoom del browser o specifici come un controller di gioco personalizzato. Può essere un dispositivo fisico separato, ad esempio un display braille, o essere implementato completamente in software come il controllo vocale. Può essere integrato nel sistema operativo, ad esempio alcuni screen reader, o essere un componente aggiuntivo, ad esempio un'estensione di Chrome.
Il confine tra tecnologie per la disabilità e tecnologie in generale è confuso; dopotutto, tutta la tecnologia è pensata per aiutare le persone a svolgere un certo compito. e spesso le tecnologie possono entrare e uscire dalla categoria "assistive".
Ad esempio, uno dei primi prodotti commerciali di sintesi vocale è stata una calcolatrice parlante per ciechi. Ora la sintesi vocale è ovunque, dalle indicazioni stradali agli assistenti virtuali. Al contrario, la tecnologia originariamente di uso generico trova spesso un impiego assistivo. Ad esempio, le persone ipovedenti potrebbero utilizzare lo zoom della fotocamera del loro smartphone per osservare meglio qualcosa di piccolo nel mondo reale.
Nel contesto dello sviluppo web, dobbiamo considerare una gamma diversificata di tecnologie. Gli utenti possono interagire con il tuo sito web utilizzando uno screen reader o un display braille, una lente d'ingrandimento, un controllo vocale, un sensore o altri tipi di tecnologie per la disabilità che adattano l'interfaccia predefinita della pagina per creare un'interfaccia più specifica da utilizzare.
Molte di queste tecnologie per la disabilità si basano su una semantica espressa in modo programmatico per creare un'esperienza utente accessibile. Questo è l'argomento della maggior parte della lezione. Ma prima di spiegare la semantica espressa in modo programmatico, dobbiamo parlare un po' di affordanza.
Convenienza
Quando utilizziamo uno strumento o un dispositivo artificiale, in genere ne teniamo conto nella forma e nel design per darci un'idea di cosa fa e come funziona. Un'affordanza è qualsiasi oggetto che offre o offre all'utente l'opportunità di eseguire un'azione. Migliore è la progettazione dell'offerta, più chiaro o intuitivo è il suo utilizzo.
Un esempio classico è il bollitore o la teiera. Anche se non hai mai visto una teiera, si capisce facilmente di afferrarla per la maniglia, non per il beccuccio.
Questo perché l'affetto è simile a quello che hai visto su molti altri oggetti: annaffiare barattoli, brocche per bevande, tazze da caffè e così via. Probabilmente potresti prendere la pentola vicino al beccuccio, ma la tua esperienza con affinità simili indica che il manico è l'opzione migliore.
Nell'interfaccia utente grafica, le opportunità rappresentano azioni che possiamo intraprendere, ma possono essere ambigue, in quanto non esiste un oggetto fisico con cui interagire. Le affinità dell'interfaccia grafica sono progettate specificamente per essere inequivocabili: i pulsanti, le caselle di controllo e le barre di scorrimento servono a trasmetterne l'utilizzo con il minor addestramento possibile.
Ad esempio, puoi parafrasare l'uso di alcuni elementi di modulo comuni (affordanza) come segue:
- Pulsanti di opzione: "Posso scegliere una di queste opzioni".
- Casella di controllo "Posso scegliere 'sì' o 'no' per questa opzione".
- Campo di testo: "Posso digitare qualcosa in quest'area".
- Menu a discesa: "Posso aprire questo elemento per visualizzare le mie opzioni".
Puoi trarre conclusioni su questi elementi solo perché puoi vederli. Naturalmente, chi non può vedere gli indizi visivi forniti da un elemento non può comprenderne il significato o comprendere intuitivamente il valore dell'offerta. Dobbiamo quindi assicurarci che le informazioni siano espresse in modo abbastanza flessibile da poter essere accessibili dalle tecnologie per la disabilità in grado di creare un'interfaccia alternativa per soddisfare le esigenze dell'utente.
Questa esposizione non visiva all'uso di un'offerta è chiamata semantica.
Screen reader
Uno dei tipi più diffusi di tecnologie per la disabilità è lo screen reader, un programma che consente alle persone con disabilità visiva di utilizzare i computer leggendo ad alta voce il testo dello schermo con una voce generata. L'utente può controllare ciò che viene letto spostando il cursore su un'area pertinente con la tastiera.
Abbiamo chiesto a Victor Tsaran di spiegare in che modo, in quanto persona cieca, accede al web utilizzando uno screen reader integrato su OS X, chiamato VoiceOver. Guarda questo video di Victor che utilizza VoiceOver.
Ora tocca a te provare a usare uno screen reader. Ecco una pagina con ChromeVox Lite, uno screen reader minimo ma funzionante scritto in JavaScript. Lo schermo è volutamente sfocato per simulare un'esperienza ipovedente e obbliga l'utente a completare l'attività con uno screen reader. Per questo esercizio dovrai usare il browser Chrome.
Puoi usare il pannello di controllo nella parte inferiore dello schermo per controllare lo screen reader. Le funzionalità di questo screen reader sono minime, tuttavia puoi esplorare i contenuti utilizzando i pulsanti Previous e Next e fare clic sugli elementi utilizzando il pulsante Click.
Prova a usare questa pagina con ChromeVox lite attivato per avere un'idea dell'uso dello screen reader. Pensa al fatto che uno screen reader (o un'altra tecnologia per la disabilità) crea effettivamente un'esperienza utente alternativa completa per l'utente in base alla semantica espressa in modo programmatico. Al posto di un'interfaccia visiva, lo screen reader fornisce un'interfaccia udibile.
Osserva come lo screen reader ti fornisce alcune informazioni su ciascun elemento dell'interfaccia. Un lettore ben progettato ti dirà tutte o almeno la maggior parte delle seguenti informazioni sugli elementi che incontra.
- Il ruolo o tipo dell'elemento, se specificato (dovrebbe esserlo).
- Il nome dell'elemento, se presente (dovrebbe).
- Il valore dell'elemento, se presente (può o meno).
- Lo state dell'elemento, ad esempio se è attivato o disattivato (se applicabile).
Lo screen reader è in grado di creare questa UI alternativa perché gli elementi nativi contengono metadati di accessibilità integrati. Proprio come il motore di rendering usa il codice nativo per creare un'interfaccia visiva, lo screen reader usa i metadati nei nodi DOM per creare una versione accessibile, in questo modo.
