Creazione sito web accessibile

Non è vero, perché è utile nelle situazioni più comuni e anche per persone di diversa età. Si calcola che circa il 20% della popolazione italiana abbia delle disabilità. La percentuale si allarga molto se si considera che l’età media italiana cresce ogni anno. Nel 2022 le persone con più di 65 anni in Italia erano il 24%. Questo si traduce in una grossa opportunità per le aziende.

Non è vero. Servono competenze tecniche che si possono imparare e poi serve una buona dose di empatia, sensibilità e capacità di inclusione. È vero invece che le persone con disabilità potrebbero avere capacità maggiori nell’uso delle tecnologie assistive, per il fatto che le usano per le attività quotidiane.

Il suggerimento è di includere nel team di lavoro anche persone con disabilità che potrebbero avere un altro punto di vista.

Non è vero, perché l’accessibilità deve far parte di un progetto dall’inizio. Esistono varie soluzioni (Plugin di accessibilità, Accessibility Overlay) che sono vendute con la promessa di rendere un sito web accessibile. Aggiungendo un rattoppo alla fine non si crea un sito web accessibile.

Nel 2023 la Commissione Europea si è pronunciata dicendo che gli Accessibility Overlay sono inutili e possono danneggiare l’accessibilità di uno strumento digitale. Nel 2024 il Nielsen Norman Group ha testato diversi widget di accessibilità e ha dimostrato che nessuno dei partecipanti ha mostrato interesse per questi strumenti.

Anche questo non è vero. Invece è vero che bisogna mettere in atto alcune soluzioni grafiche che possono essere usate da chiunque. Inserendo l’accessibilità dall’inizio è possibile controllare l’aspetto grafico del sito web, come si fa normalmente.

Sbagliato per 3 motivi principali:

1. Ci sono disabilità che si possono vedere, mentre altre sono nascoste e non possiamo vederle;
2. Ha a che fare con la comunicazione inclusiva della tua azienda e con il benessere delle persone e dei clienti;
3. Le normative saranno sempre più stringenti. Alla data 23 Settembre 2023 la dichiarazione di accessibilità obbligatoria ha coinvolto la Pubblica Amministrazione e le aziende con un fatturato di almeno 500 milioni di euro. Questo è un bacino ancora molto ristretto ma, nel prossimo futuro, coinvolgeranno sempre più aziende e siti web.

È importante garantire abbastanza contrasto colore tra i testi e lo sfondo, in modo che i testi siano facili da leggere per tutte le persone, anche quelle con una vista ridotta e che non usano tecnologie assistive come gli Screen Reader. Il contrasto colore è regolato dal WCAG Criterio di Successo 1.4.3.

Tutti i contenuti non testuali, come le immagini, dovrebbero avere un testo alternativo per fornire un’esperienza di utilizzo simile a tutte le persone. In alcuni casi specificati dal WCAG Criterio di Successo 1.1.1 il testo alternativo non va messo.

Le label (etichette) servono per rendere accessibili i form come i moduli di contatto. Leggi alcuni consigli di Adam Silver sui form accessibili.

Questo è un errore comune perché la pratica di inserire link con icona senza testo è molto diffusa. È importante ricordare che non tutte le persone vedono allo stesso modo. Alcune persone hanno bisogno dei testi alternativi perché usano i siti web con gli Screen Reader.

Fa riferimento all’attributo lang che deve essere specificato nel codice HTML in modo che Google e anche le tecnologie assistive riescano a capire quale lingua è usata nel sito web.

Parliamo insieme per capire le necessità e gli obiettivi. L’intervista è una chiacchierata informale che si può fare nella tua sede, in ufficio Flying Chair, oppure in videochiamata a distanza attraverso Google Meet.

Definiamo l’alberatura delle pagine necessarie per il sito. La mappa è uno strumento essenziale per capire i collegamenti, le gerarchie e i modelli delle pagine che condividono la stessa struttura.

Progettiamo la struttura delle pagine per capire quali contenuti bisogna inserire e come vengono disposti nelle pagine. Generalmente suggerisco di mantenere una struttura semplice per mettere il focus sul contenuto.

Raccogliamo i testi e le immagini che servono per il sito. Sappiamo dove metterli quindi possiamo raccogliere esattamente quello che serve senza perdere tempo e risorse. Per i testi uso dei documenti facili da compilare in Google Drive.

Sono raccolti anche eventuali testi visibili solo con Screen Reader, ad esempio se è necessario mantenere la sequenza dei titoli.

Realizzo la bozza grafica per capire come sarà il sito così puoi verificare che vada tutto bene. L’errore più comune di accessibilità è legato al contrasto colore, quindi è molto importante scegliere correttamente i colori in questa fase.

Realizziamo il sito web con WordPress sulla base dell’anteprima approvata. Il codice è scritto con linguaggi HTML semantico, ARIA, CSS e JS, seguendo le buone pratiche di accessibilità digitale. Sono installati anche i plugin utili per il progetto.

Pubblichiamo il nuovo sito in uno spazio nascosto e poi nel tuo spazio Hosting, così possiamo verificare che non ci siano errori. Poi viene collegato a Google Analytics e Google Search Console. È sempre inclusa la formazione per usare il sito in autonomia (con la mia soluzione basta 1 ora).

Ho frequentato diversi corsi su accessibilità digitale tra cui:

• Accessible design, the basics, The A11Y Collective
• Writing accessible content for the web, The A11Y Collective
• Web Accessibility Curriculum Package, Deque Systems
• Accessible Code, The A11Y Collective
• Try-out Class – Web Accessibility, The A11Y Collective
• Web accessibility, the basics, The A11Y Collective
• “Smart Interface Design Patterns” Workshop (con Vitaly Friedman)“, Smashing Magazine
• How To Design for Accessibility: for UX Designers (WCAG 2.2), Udemy

La soluzione che ho progettato e che uso per i siti web è testata con:

1. Strumenti automatizzati come WAVE e Accessibility Insights for Web;
2. Metodo manuale tramite l’analisi del codice semantico;
3. Screen Reader VoiceOver su Mac.

Uso il Contrast Checker di WebAIM, uno strumento base che indica i rapporti percentuali fissati da WCAG. Per evitare errori, verifico il contrasto colore all’inizio di ogni progetto e cerco di usare pochi colori.

Al momento uso VoiceOver su Mac per controllare l’accessibilità dei siti che realizzo.

Mi baso su WCAG 2.1 livello AA, cioè il livello preso a riferimento dalla normativa italiana.

È un’autocertificazione che attesta che un sito web è accessibile. Specifica il livello WCAG di riferimento e anche l’elenco degli eventuali errori di accessibilità noti. Leggi su AGID cosa serve per la dichiarazione di accessibilità.

No, sarebbe impossibile. Per evitare errori cerco di scegliere soluzioni semplici e consigliate dalle WCAG, però non escludo eventuali mancanze. Faccio il possibile e mi formo per migliorare giorno dopo giorno. Realizzo siti WordPress usando temi custom e pochi plugin.

Per questo motivo mi concentro su siti web che non hanno necessità standard. Per progetti più complessi chiedo il supporto di altre figure professionali, ad esempio per condurre dei test di accessibilità mirati con la partecipazione di persone con disabilità.

No. Nel processo che adotto per la creazione di siti web, l’accessibilità ha un ruolo importante fin dall’inizio. Installare strumenti esterni è una pratica sbagliata e sconsigliata che può danneggiare l’accessibilità dei siti web. Leggi cosa dice la Commissione Europea sugli Accessibility Overlay.

Il consiglio è di usare meno plugin possibili ma capisco che a volte sia necessario installare qualche soluzione particolare. Ad esempio, per un museo potrebbe essere importante permettere l’acquisto dei biglietti online. Se bisogna usare un plugin non accessibile, il consiglio è di aggiungere un testo informativo che aiuta le persone a ricevere assistenza in caso di bisogno.

Sinonimo di accessibility (accessibilità in italiano). L’11 rappresenta il numero di lettere della parola “accessibility” presenti tra le estremità A e Y. Si pronuncia a-one-one-y oppure a-eleven-y.

Sigla che sta per Web Content Accessibility Guidelines. Sono le linee guida per l’accessibilità dei contenuti web. Le normative nazionali (anche quella italiana) si basano su queste linee guida. La versione della WCAG attuale è la 2.2.

Programma che scansiona e legge ad alta voce quello che sta nella pagina web. È utile per le persone cieche e con vista molto ridotta che così possono navigare su internet. Funziona bene se il codice è scritto in modo corretto.

Screen Reader che funziona su sistema operativo Windows.

Screen Reader che funziona su sistema operativo MAC.

Proprietà importante per la navigazione con tastiera, utile per chi non può usare il mouse. Link, bottoni ed elementi interattivi dovrebbero mostrare un indicatore ben visibile quando vengono selezionati con la tastiera, così si capisce cosa si sta selezionando.

Link rapidi all’inizio della pagina, utili per saltare direttamente al contenuto voluto. Si possono trovare usando la navigazione con tastiera oppure con Screen Reader.

I siti web accessibili si basano sul codice HTML semantico che eredita proprietà utili per gli Screen Reader. Il semantic HTML è utile anche per la SEO.

Proprietà che aggiungono funzioni al codice HTML e che sono utili per l’accessibilità.