Il tema dell’inclusività ricopre un ruolo centrale nel dibattito attuale, e il mondo dello sviluppo software non ne è escluso. Realizzare prodotti software inclusivi e accessibili a tutti significa, per un’azienda, allargare il proprio bacino d’utenza e consentire a più persone di beneficiare del medesimo servizio in maniera eguale e democratica, con conseguenti vantaggi sia in termini etici che di business.
In aggiunta a ciò, normative recenti come il decreto legge n. 76 di luglio 2020 in Italia o la norma Europea EN 301 549 hanno iniziato a definire dei veri e propri obblighi di legge sul tema, imponendo degli standard minimi di accessibilità sui contenuti digitali delle aziende private. Ma non solo: la stessa Agenda 2030 delle Nazioni Unite si esprime sull’argomento. Tra i suoi obiettivi compare infatti “aumentare in modo significativo l’accesso alle tecnologie di informazione” per ottenere “un accesso a Internet universale”.
È perciò chiaro come oggigiorno occuparsi di accessibilità web sia per le aziende una necessità, non solo per sensibilità verso i consumatori, ma anche per adempimento legislativo e impegno sociale.
Cosa significa “Accessibilità Web”
Con Accessibilità Web si intende la capacità di un sito, applicazione o interfaccia digitale di poter essere utilizzata in modo efficace da tutti gli utenti, a prescindere dalle loro condizioni fisiche e da eventuali disabilità che potrebbero influenzare la navigazione.
Il tema dell’accessibilità web è di larghissimo impatto: l’OMS stima che nel 2022 oltre 1 miliardo di persone (circa il 15% della popolazione mondiale) soffra di una qualche forma di disabilità. Questo include sia condizioni di difficoltà visiva (cecità o ipovisione) che fisica (paralisi o danni fisici che potrebbero essere di impedimento all’uso di mouse o tastiera), ma anche problemi uditivi, cognitivi o neurologici.
Ottenere un web accessibile e inclusivo è uno degli obiettivi del W3C, il consorzio globale che sovrintende all’organizzazione e alla standardizzazione del web. A tal proposito, W3C ha redatto le Web Content Accessibility Guidelines (WCAG): una raccolta di linee guida per l’accessibilità che funge da punto di riferimento nella progettazione di interfacce web, nonché da base per tutta la normativa in materia.
Raccogliamo ora alcuni punti da seguire per migliorare l’accessibilità dei nostri sistemi, in accordo con WCAG 2.x.
Accessibilità visiva: font e colori
Partendo dalle basi: un sito web dev’essere sempre ben leggibile. Questo significa non soltanto mantenere una dimensione del carattere che sia confortevole alla vista (almeno 16px), ma anche selezionare con cura la tipologia di font (i font sans‑serif, ossia privi di grazie, sono generalmente considerati più accessibili). Alcuni font sono stati studiati appositamente ai fini dell’accessibilità: è il caso di Open‑Dyslexic, un carattere open‑source creato su misura per gli utenti con problemi di dislessia.
In aggiunta a ciò, è essenziale assicurarsi che la pagina rimanga leggibile qualora l’utente ridefinisca lo zoom: molto spesso, se l’architettura di un sito web non è stata studiata a dovere, uno zoom molto elevato (es: oltre il 150%) può comportare una fuoriuscita del testo dai confini dello schermo, con forti impatti sull’usabilità del sito.
Grande importanza ricopre inoltre la scelta dei colori. WCAG 2.x definisce uno standard di contrasto per orientarsi nella scelta della propria paletta cromatica, imponendo un livello di contrasto minimo di 4.5:1 (e ottimale di 7:1) tra il colore del testo principale e quello dello sfondo. È bene inoltre evitare certe combinazioni di colori (in particolare verde‑rosso), che possono risultare di difficile accesso a chi soffre di daltonismo. Lo stesso vale per background multicolori, a pattern, e per sfondi con immagini, che possono in generale ostacolare la lettura.
In ultimo, è importante assicurarsi che, a prescindere dai colori scelti, l’outline degli elementi visivi (ossia il bordo colorato che appare attorno a input e pulsanti) sia sempre chiaramente visibile. L’outline è di fondamentale importanza ai fini di una navigazione accessibile, perché consente agli utenti di individuare a colpo d’occhio l’ultimo elemento interagibile attivo.
Accessibilità nella navigazione
Non tutte le persone navigano il web allo stesso modo. Disabilità fisiche particolarmente gravi o invalidanti possono essere infatti di impedimento all’utilizzo del mouse, limitando l’utente alla navigazione tramite tastiera. Allo stesso modo, problemi visivi o condizioni di cecità possono portare chi naviga a munirsi di screen reader, software che effettuano uno scan delle pagine internet e leggono ad alta voce i contenuti testuali, fungendo da supporto o sostituto del mezzo visivo. In questi casi, la navigazione viene effettuata tramite combinazioni di tasti, che permettono agli utenti di muoversi agilmente tra i contenuti di interesse in una pagina.
Con questi scenari in mente, è facile capire come curare la navigazione da tastiera sia un requisito di fondamentale importanza nella realizzazione di interfacce web inclusive. È utile quindi impostare un flusso dei contenuti della pagina che si orienti dall’alto verso il basso, con la possibilità per l’utente di muoversi tra gli elementi della pagina e interagire con essi come farebbe con il mouse.
Nello specifico, l’utente dovrebbe sempre potersi muovere in successione tra gli elementi interattivi della pagina (form, pulsanti, ecc.), con i tasti Tab (in avanti) e Shift+Tab (all’indietro). È quindi importante curare il focus order, ossia l’ordine consecutivo con cui tali elementi riceveranno il focus da parte dell’utente. Allo stesso modo, componenti complessi, come tabs e gruppi di radio button, dovrebbero sempre essere navigabili internamente tramite frecce, mentre link e pulsanti dovrebbero poter essere premuti con Enter o Space. Widget o modali bloccanti, invece, dovrebbero sempre poter essere chiusi tramite il tasto Esc. È inoltre importante posizionare correttamente gli headings (e.g. h1, h2, ecc.), in modo che l’utente possa navigare tra di essi (ad esempio, tramite H).
Una volta impostato un flusso di navigazione, è bene condurre dei test manuali simulando il comportamento dell’utente, in particolare verificando che non esistano elementi che blocchino gli spostamenti e impediscano di rimuovere il focus (focus trap).
Accessibilità nel codice: HTML e ARIA
Quando si sviluppa un’interfaccia accessibile, un punto focale su cui concentrarsi è il codice stesso. Quanto più riusciamo a essere semanticamente espressivi nella scrittura, tanto più il browser sarà in grado di interpretare quanto scritto e riadattare l’esperienza dell’utente di conseguenza, ad esempio prioritizzando certi contenuti o fornendo informazioni aggiuntive durante la lettura tramite screen reader.
Il primo passo verso un codice più accessibile è l’uso dei tag semantici HTML. Nonostante HTML costituisca lo scheletro di ogni pagina web, infatti, il suo uso è spesso limitato ai soli tag generici come <div> e <span> che, sebbene efficaci, non forniscono informazioni circa il nostro intento nello sviluppo. Un uso di tag semantici quali <header>, <footer>, <main> o <nav>, invece, permette ai browser di comprendere la semantica degli elementi e modificare in modo opportuno l’esperienza utente.
Laddove HTML non sia sufficiente, è possibile aumentare l’espressività del proprio codice con l’ausilio di ARIA. ARIA (Accessible Rich Internet Applications) è una suite tecnologica pubblicata da W3C, che fornisce una raccolta di ruoli e attributi HTML specifici per l’accessibilità, assieme a uno standard per utilizzarli. Gli attributi ARIA (come aria‑label, aria‑checked, aria‑disabled, ecc.) consentono di dettagliare i tag HTML con informazioni aggiuntive non esprimibili tramite il linguaggio di base (ad esempio, marcando un <div> con aria‑disabled=true per segnalare al browser che si trova in uno stato disabilitato). I ruoli (come banner, feed, tab, ecc.), invece, ci permettono di definire l’intento esplicito dei nostri elementi (ad esempio, contrassegnando un <div> con role=alert per esplicitare la sua funzione di avviso all’utente o un <p> con role=presentation per indicare che si tratta di un testo con fini estetici e quindi ignorabile dagli screen reader).
Conclusioni
Sviluppare interfacce web accessibili non è semplice, ma è un obiettivo verso cui tendere. Oltre a essere un requisito di legge per molte aziende, infatti, l’accessibilità web ci consente di ottenere un mondo digitale migliore, in cui poter navigare e accedere a contenuti online senza barriere o discriminazioni.
Questo articolo è stato scritto da Andrea Mafessoni, Full‑Stack Engineer Expert di Mia‑Platform.
