Migliorare l’accessibilità di un sito web

Per accessibilità si intende la capacità dei sistemi informatici di erogare servizi e fornire informazioni fruibili, senza discriminazioni, anche da parte di coloro che a causa di disabilità necessitano di tecnologie assistive o configurazioni particolari. Linee guida.

L’accessibilità di un sito è uno degli obbiettivi che ogni sviluppatore deve considerare nel suo progetto per riuscire a fornire contentuti fruibili da tutti e si fonda su quattro principi:

• percepibile
• utilizzabile
• comprensibile
• robusto

Ognuno di questi principi coinvolge numerosi aspetti dello sviluppo di un sito internet. Per chi, come noi, utilizza un CMS (Content Management System) per pubblicare contenuti in rete, e non deve scrivere codici o usare linguaggi di programmazione per sviluppare strumenti adatti a pubblicare in internet, molti degli aspetti legati all’accessibilità restano nascosti e non modificabili.

Possiamo però cercare e scegliere programmi e temi grafici che gli sviluppatori di quei software certificano come rispettosi dei criteri dell’accessibilità e utilizzare programmi di terze parti utili per ottimizzare le prestazioni del sito.

Migliorare l’accessibilità fa anche bene all’ottimizzazione della SEO, (Search Engine Optimization), impone di migliorare il design e l’usabilità del sito. Per ottenere risultati apprezzabili non servono molte cose, ma attuare pochi passaggi alla portata di tutti.

Come autori di contenuti possiamo agire sui contenuti accessibili solo su aspetti di superficie, ma molto importanti e modificabili anche da chi ha conoscenze di base. Sebbene il campo del nostro intervento sia limitato, abbiamo la responsabilità di compiere tutte le azioni necessarie e, come detto, alla nostra portata, per contribuire alla creazione di un web etico ed inclusivo.

Le azioni che dobbiamo svolgere sono semplici e possono essere riassunte in 7 punti:

1. testo alternativo per le immagini
2. ottimizzare le immagini
3. titoli descrittivi e significativi
4. uso di caratteri leggibili
5. navigazione intuitiva
6. collegamenti testuali e significativi
7. offrire permalink intuitivi e comprensibili.

Testo alternativo per le immagini

Il cardine dell’accessibilità dei siti web è la possibilità di inserire il testo alternativo alle immagini. Il testo alternativo è fondamentale per fare in modo che le risorse visive di un sito web siano comprese dai browser per ipovedenti in modo che possano descrivere con una voce artificiale il testo alternativo fornito insieme all’immagine e far sì che le persone con problemi visivi possano avere una descrizione di ciò che non possono vedere.

Il testo alt ha un altro beneficio per i siti web, ovvero aiuta nell’ottimizzazione della SEO. Pertanto è importante fornire il testo alternativo alle immagini significative per i contenuti, mentre per quelle esclusivamente decorative si può lasciare il campo vuoto.

Se lavori con un CMS come WordPress il testo alt deve essere compilato per ogni immagine.

Sulla Cmmunity Prever é installato un programma che consente di copiare il nome del file immagine all’interno del campo per il testo alternativo, al momento del caricamento dell’immagine nella libreria dei media. Il plugin WP Folder, per attivare questa comoda funzione, deve essere attivato e configurato dall’amministratore del sito.

Non è possibile usare immagini al posto del testo. Se proprio non puoi farne a meno devi fornire un’alternativa testuale che riporti tutte le parole dell’immagine. SIgnifica che se vuoi creare una bella immagine con un testo per un link, devi assicurarti che quell’immagine sia accompagnata anche da un link testuale che punti alla stessa risorsa o da un testo che spieghi la natura e destinazione del collegamento.

Se inserisci un documento immagine, anche se l’immagine è salvata come PDF, devi assicurarti di fornire un testo che riporti quanto riprodotto dall’immagine, o almeno che il PDF immagine sia ricercabile, vale a dire il cui testo sia selezionabile. Perché un PDF immagine, anche se PDF, resta sempre un’immagine e come tale il testo in essa riportato non é accessibile.

Per rendere accessibile un pdf immagine, prima di tutto deve essere un’immagine di buona qualità, diritta, con colori e testi ben percepibili. Se l’immagine ha queste caratteristiche, devi passarlo allo strumento OCR (Optical Character Recognition). Se il documento immagine in PDF è di pessima qualità puoi tentare di migliorarlo con un programma di grafica.

Come prima cosa devi convertire il file PDF in formato immagine. Convertito il file puoi aprirlo con un programma di elaborazione delle immagini. Ora puoi correggere la direzione, migliorare il colore, il contrasto e ritagliare le parti inutili. Se il risultato finale è accettabile puoi riconvertirlo in PDF e processarlo con l’OCR.

per riassumere:

1. converti il file in formato PDF in PNG un formato immagine che non perde definizione nei passaggi successivi
2. procedere alle correzioni con il programma grafico
3. riconvertire il file in formato PDF
4. passarlo all’OCR

Le immagini nel documento potrebbero essere di scarsa qualità, ma il testo almeno è selezionabile e volendo puoi copincollarlo in un documento e salvarlo in un formato testo.

Un buon strumento online che consente di fare moltissime operazioni sui file PDF, tranne l’elaborazione delle immagini,, è PDF24 Tools.

Ottimizzare le immagini

Le immagini ottimizzate non sembra abbiano a che fare con l’accessibilità, ma se consideriamo il tempo di caricamento e il tempo in cui i contenuti vengono resi disponibili e usabili, ecco che oltre all’ottimizzazione del codice, delle richieste CSS (Cascading Style Sheet) e Javascript, anche la dimensione delle immagini, oltre alla presenza del testo alternativo, dà la misura della nostra attenzione sull’accessibilità.

Per noi che usiamo WordPress con temi e plugin sviluppati da altri, sulle prime tre voci, codice, CSS e Javascript, possiamo intervenire solo utilizzando un plugin che ottimizzi quelle risorse e la cache. Sulla dimensione delle immagini però possiamo fare molto. La regola è sempre quella: ridurre e comprimere.

Su questi aspetti sul blog della community si è detto molto e qui riporto solo l’elenco degli articoli che trattano questo tema:

• ottimizzare le immagini per il web
• ridimensionare e fornire immagini ottimizzate con WordPress
• immagini e sicurezza
• strumenti di WordPress per le immagini

Ricorda, infine, di cancellare tutte le immagini caricate e che non usi, spesso sono solo doppioni caricati e usati solo per fare delle prove e con dimensioni eccessive ed inutili.

Importanza dei titoli

HTML (Hypertext Markup Language) prevede un’organizzazione dei titoli che va dal più importante al meno importante. Questa gerarchia viene definita con i seguenti elementi da H1, H2, H3, H4, H5, H6.

I titoli sono essenziali per la qualità e l’accessibilità dei contentui. Fanno capire al browser la struttura del documento. Il titolo più importante è H1 e il meno importante H6. Di solito con H1 si definisce il titolo del documento o della pagina e lo si utilizza una sola volta. H2 è utilizzato per i titoli dei paragrafi, H3 e H4 sono usati per i titoli dei sottoparagrafi, mentre H5 e H6 si usano per le fonti e le risorse esterne.

La regola principale è: definire un solo H1 e non saltare da un titolo all’altro all’interno dello stesso paragrafo.

I titoli non si usano per evidenziare testo, così come del testo in grassetto o un font più grande non può sostituire un titolo.

Se utilizzi un blocco sommario o un plugin, per creare un indice della pagina o del tuo articolo, sono i titoli ad essere utilizzati come collegamenti, chiamati ancore, che puntano alle sezioni interne del contenuto.

Per sapere altro sull’importanza dei titoli, puoi leggere l’articolo: titoli, indici e sommari.

Usa un font leggibile dai dispositivi mobili

Come si legge il tuo sito in uno schermo piccolo? È importante utilizzare font leggibili per far si che i contenuti del tuo blog siano visibili anche da chi ha problemi di vista come miopia o astigmatismo. Per far questo si devono preferire font con una dimensione non inferiore ai 14 pixel e buona leggibilità. Questo spesso significa rinunciare a voli di fantasia e creatività a beneficio di concretezza e usabilità.

Questo significa rinunciare a caratteri con grazie estreme, anche se belli; evitare contrasti stravaganti tra primo piano e sfondo. L’ideale sarebbe avere un carattere minimo di 14 pixel, meglio 16, colore grigio scuro su bianco ma non troppo bianco.

Sceglii un font come Roboto o Noto, o un safe font come Arial o Verdana anche se sembrano scontati e utilizzati da tutti. Per un font con le grazie usa un safe font come Time New Roman.

I safe font sono quelle famiglie di caratteri che garantiscono leggibilità su tutti i browser e su tutti i sistemi operativi, inoltre, hanno una leggibilità superiore e la capacità di ridurre i tempi di caricamento delle pagine dato che sono già presenti nel sistema operativo e non devono essere caricati da librerie esterne. Questo è l’elenco riconosciuto dei caratteri sicuri per il web.

• Arial (sans-serif)
• Arial Black (sans-serif)
• Verdana (sans-serif)
• Tahoma (sans-serif)
• Trebuchet MS (sans-serif)
• Impact (sans-serif)
• Times New Roman (serif)
• Didot (serif)

Un’interessante risorsa per capire di più sui caratteri web safe.

Nei tuoi progetti segli un font per i titoli, uno per il testo e se proprio vuoi essere “creativo” uno per la navigazione, e fai anche molta attenzione al contrasto tra sfondo e primo piano. Per verificare se il rapporto di contrasto, tra sfondo e primo, piano è sufficiente guarda Contrast-cheker uno strumento online molto semplice da utilizzare.

Crea un struttura di navigazione intuitiva

La navigazione di un sito web, anche se piccolo, oltre ad essere uno dei fondamenti dell’accessibilità, è sempre in divenire perché i contenuti cambiano, le pagine vanno aggiornate, alcune si creano e altre si eliminano. La navigazione richiede tempo ed è necessario progettarla anche su carta, o utilizzando dei postit, lo scopo è capire cosa si collega con cosa.

Gli elementi devono essere facili da percepire, comprendere e decifrare. Un menu di navigazione deve essere semplice ed efficace. Per far questo si applica una facile regola: una buona interfaccia utente è riduttiva non espansiva. Pertanto un menu breve, è meglio di uno lungo, Tutte le parti del sito devono essere raggiungibili con due, massimo, tre click.

Per migliorare l’accessibilità del sito web devi lavorare sulla sua navigabilità: togli tutto quello che non serve, non creare menu con tutti i link utili per raggiungere qualsiasi punto del sito, ma crea percorsi semplici e intuitivi, facili da usare anche da tablet, cellulare, smart TV.

Usa etichette di navigazione, quelle dove si fa click, testuali, intuitive e significative. Per l’etichetta di un link, utilizza, quando, e se possibile, un’unica parola descrittiva e significativa che faccia capire dove conduce il collegamento: il microcopy, vale a dire ogni parola che usiamo ha un significato, non deve essere uno sfogo di creatività ma di semplicità e chiarezza.

Usa link facili da individuare e cliccare

Se vuoi migliorare l’accessibilità del sito web ricorda anche di fare in modo che i collegamenti ipertestuali siano facili da individuare e cliccare. Puoi usare un testo differente per i link, magari sottolineato, e che cambi di tonalità tra pagine visitate e non visitate. Questo con WordPress lo fa il tema grafico, ma se conosci CSS (Cascading Style Sheet) puoi impostare regole diverse per i singoli stili di link: non visitato, attivo, visitato, evidenziato o focus.

All’interno dei testi evita soprattutto etichette come “clicca qui” o fai “click qui” perché non chiariscono la natura del collegamento nè la destinazione, ma crea collegamenti utilizzando le parole del testo.

Verifica sempre che la navigazione sia disponibile e intuitiva da dispositivi mobili.

Se vuoi creare dei bottoni per i link più importanti da utilizzare da mobile, l’editor di WordPress ha un blocco che consente la creazione dei pulsanti, inoltre anche il tema grafico può rendere disponibile blocchi alternativi tra cui anche un blocco per creare bottoni più creativi di quello predefinito.

Permalink

Il permalink è l’indirizzo permanente di una risorsa pubblicata in rete. In WordPress ci sono varie possibilità di settaggio per i permalink. Tra queste è necessario sceglierne una comprensibile all’utente che non corrisponde a quella selezionata come predefinita.
Il sistema predefinito dei permalink in WordPress, sulla barra degli indirizzi mostra permalink per niente comprensibilii, del tipo https://miosito-esempio/?p=123.

È chiaro che un indirizzo di questo tipo non dice nulla, né agli utenti né ai motori di ricerca. Tra le prime cose da fare quando si sta creando un sito con WordPress e accedere alla Bacheca, l’area amministrativa da cui si gestisce il sito, andare al menu Impostazioni e selezionare la voce Permalink, infine, selezionare qualcosa di diverso dalla voce predefinita con etichetta Semplice.
Di solito tra le voci presenti, viene selezionata la voce Nome articolo. Questa selezione riporta il nome dell’articolo, che non è altro che il titolo trasformato in automatico dalla piattaforma in quello che è chiamato slug.

Siccome è il titolo di primo livello, H1, ad essere utilizzato come permalink, ecco un altro buon motivo per creare un titolo di poche parole ma che sia significativo.

Se hai altri suggerimenti per l’accessibilità o vuoi esprimere la tua opinione in merito, puoi farlo con il modulo dei commenti che trovi qui sotto.