Accessibilità web: cosa significa e come rendere accessibile il nostro sito

È evidente a tutti come il web e la digitalizzazione delle imprese abbiano portato nuovi e vecchi servizi alla portata di tutti. Proprio per questo una delle cose che mi ha sempre sorpreso riguardo i media digitali è la scarsa importanza che è spesso data al tema dell'accessibilità web, creando, anche in questo contesto, delle vere e proprie “barriere architettoniche” digitali.

Vediamo meglio di cosa si tratta.

A cosa ci riferiamo quando parliamo di accessibilità web?

Per accessibilità web si intende la possibilità, da parte dei sistemi informatici, di fornire i servizi anche a coloro che sono affetti da disabilità temporanee e non, che quindi utilizzano tecnologie ausiliarie. Si riferisce alle pratiche inclusive di rimozione delle barriere che impediscono l’interazione o l’accesso ai siti web da parte di persone con disabilità.

(Fonte: Wikipedia)

Ma di che numeri parliamo?

Secondo l’ISTAT il 3% della popolazione italiana è non o ipovedente, l’8% ha problemi di udito, il 2,5% è dislessico e ben il 23,2% ha problemi di interazione col digitale a causa dell’avanzata età. Personalmente il dato che più mi fa riflettere è quel 3% di persone con disabilità visive. Più di una volta nella mia vita, business con cui ho collaborato hanno insistito fortemente per supportare browser desueti con percentuali di utilizzo similari o inferiori, ma mai una volta che qualcuno si sia soffermato a pensare all’accessibilità.

Di certo, soprattutto nell’ambito dell’impresa, le cose devono cambiare. Non solo per una maggiore sensibilità etica, ma anche e soprattutto perchè il 27 maggio 2022 l’Italia ha recepito la direttiva europea n. 2019/882. Non è lo scopo di questo articolo sviscerare come e chi debba sottostare a questa legge. L’obiettivo è principalmente quello di dare un minimo di informazioni per iniziare ad essere più inclusivi in modo rapido ed agile.

Come cerco informazioni sui motori di ricerca?

Come ogni sviluppatore sa bene, la prima cosa da imparare quando non si conosce bene un argomento, è cercarlo online! Per questo una delle cose da conoscere fin da subito è la parola A11y. A11y è l’abbreviazione di Accessibility, con lettera iniziale e finale e le undici lettere nel mezzo compresse con il numero 11. Un’abbreviazione che adoro, perché, oltre a consentirvi di trovare facilmente un contenuto sul web, è leggibile anche come la parola inglese Ally, letteralmente “Alleato”, che rende ancora più chiaro come si dovrebbe approcciarsi al problema.

Agire prima per ridurre i costi

Inutile negarlo. L’accessibilità ha un costo. Il mio consiglio, per tenerlo sotto controllo, è inserire dei check per controllare fin da subito lo stato dell’accessibilità. Quando si crea un’applicazione web, una delle buone norme è quella di riutilizzare quanto più possibile si è scritto o si può trovare open-source. Scegliere i giusti tool e tenerli monitorati fin dall’inizio, può salvare in futuro un sacco di problemi.

Quando una tecnologia web è considerata accessibile?

Come sapere se il mio sito è accessibile? Questa domanda è di difficile risposta, ma vediamo alcune azioni che possono facilmente dare un’idea dell’entità dei (possibili) problemi.

1. Navigate da tastiera: Cliccate Tab, Shift + Tab, Spazio, Frecce e Invio per capire se il vostro sito è navigabile da tastiera. È molto importante che i bottoni, gli input e tutto quello che è cliccabile abbia uno stato di focus.
2. Usate i tool di sviluppo del browser: Ogni browser ha degli strumenti appositi per valutare la vostra accessibilità. Se siete degli sviluppatori, è vostro dovere almeno conoscere come utilizzarli in modo base.
3. Installate delle estensioni: Tra tutte il mio consiglio va per Axe.
4. Consultate i vostri utenti Può sembrare banale, ma avere un canale dedicato di ascolto per queste tematiche, può far bene non solo al prodotto, ma anche alla vostra immagine. Non è possibile essere subito perfetti e qualcuno potrebbe segnalarvi dimenticanze o problematiche particolari. Imparare a recepire queste informazioni con la giusta umiltà, è forse il modo più agile per dimostrare la giusta attenzione verso queste tematiche.

Design di un'interfaccia web accessibile

Prima di scendere in dettagli leggermente più tecnici, parliamo dell’interfaccia che caratterizza la nostra applicazione. Come già detto nel paragrafo precedente è importante che ogni elemento interattivo in pagina abbia un riconoscibile stato di focus. Progettare status di focus per bottoni e input è il primo elemento da mettere in conto quando si progettano le nostre interfacce.

Bisogna inoltre stare attenti ai colori. Ogni tool che si rispetti, ha ormai integrato vari strumenti che possono aiutarvi nel scegliere il giusto contrasto.

Come si rende un sito web accessibile?

Senza scendere troppo nel tecnico, perchè come promesso nell’incipit, vorrei qualcosa di leggero e che dia solo i giusti spunti sull’argomento. Vi racconto come qui in Tot abbiamo gestito queste tematiche.

1. Componenti prima di tutto: Lo sviluppo dell’applicativo web di Tot segue un approccio component-first. Viene quindi sviluppato un componente in isolamento e grazie ai tool messi a disposizione da Storybook, ne controlliamo l’accessibilità fin dalle prime fasi. È anche possibile per tutti, sbirciare questi componenti in modo che si possano avere feedback sull’operato il prima possibile.
2. Monitoraggio costante: In Tot, ogni due settimane, il prodotto viene testato con Lighthouse, un tool che dà un feedback numerico in percentuale, dando un veloce output su quello che è lo stato dell’arte dell’applicazione. Sappiamo che questo non basta, ma ci fornisce un rapido indice di quello che sta succedendo sul nostro prodotto.
3. Automatizzare il più possibile: Anche questo in ottica di gestione dei costi è fondamentale! I nostri test automatici cercano di prendere, quando possibile, gli oggetti in pagina tramite ruoli aria e testi distinguibili, in modo da riuscire a capire automaticamente se qualcosa non va. Anche tool di analisi statica del codice possono aiutare. Se conoscete esLint, date un occhio a questo plugin.

That’s (not) all folks

Ovviamente l’argomento è lungo e questo articolo voleva essere solo una breve carrellata sulla tematica per, magari, approfondirlo in seguito, ma soprattutto per sensibilizzare sull’argomento. Se avete dei dubbi o delle domande (magari delle segnalazioni sul nostro sito?) fatecelo sapere!