Da zero a Iper: impariamo insieme il web

condividendo si impara

Siti web consultabili da tutti. Qualche strumento per testare e migliorare l'accessibilità.

2022-01-27 11:42:05

La tendenza a trasferire sempre più attività online, già in atto prima della pandemia, ha subito notevoli accelerazioni negli ultimi anni. 

Lavorare, comprare, vendere, investire, gestire i propri conti, studiare, avviare procedure amministrative, fiscali e di sicurezza sociale. Questo e molto altro può oggi essere fatto da remoto e in alcuni periodi che speriamo non si ripresentino questa è stata anche l'unica modalità disponibile per eseguire tali operazioni. 

In un contesto del genere diventa vitale tenere presente che non tutte le persone possono navigare e fruire dei contenuti del web nella stessa maniera. 

Se non rendiamo i nostri siti navigabili e i loro contenuti comprensibili e consultabili anche per persone con difficoltà visive, uditive, motorie, cognitive o altre, creiamo delle esclusioni paragonabili alle barriere architettoniche nel mondo fisico. 

Non c'è niente di più sgradevole e frustrante di avere la propria libertà di movimento limitata sia dentro che fuori dal web e in una democrazia gli spazi fisici e virtuali dovrebbero essere strutturati in maniera da essere accessibili per tutti. 

Nel video di oggi scopriremo assieme alcuni strumenti che ci permettono di testare e migliorare l'accessibilità dei nostri contenuti per tutti gli utenti dei nostri siti web.

Questo tema sarà sempre presente in sottofondo nel proseguio del nostro percorso in cui impariamo a creare dei siti web a partire da zero.

Puoi leggere l'articolo associato a questo video cliccando sul pulsante "vedi tutto". Gli articoli non sono delle trascrizioni dei video ma dei contenuti aggiuntivi. 

(La foto in cpertina è di Yan Kruko da Pexels)

Una sfida continua

Le linee guida per l'accessibilità dei contenuti web ci indicano delle specifiche tecniche che permettono ai nostri siti e alle nostre risorse online di essere utilizzabili anche da parte di persone con disabilità.

Sono sviluppate dall'Iniziativa per l'accessibilità del web (Web Accessibility Initiative, WAI), un gruppo di lavoro che fa parte del World Wide Web Consortium (W3C), cioè il consorzio che definisce gli standard di Internet a livello mondiale. 

La versione 2.0 di queste raccomandazioni risale all'11 dicembre 2008, seguita poi dalla 2.1 pubblicata il 5 giugno 2018 ed ora è in preparazione una nuova versione 2.2 la cui uscita è prevista in giugno 2022. 

Con l'evoluzione di supporti e tecnologie è necessario mantenere al passo anche le raccomandazioni per rivederle e migliorarle in modo più frequente. 

Una caratteristica interessante in questo ambito è che per ora l'adozione di una versione successiva dello standard non porta alla deprecazione della precedente e quindi basta conformarsi alla versione più aggiornata per essere automaticamente conformi anche alle precedenti. Dall'altro lato non è necessario cambiare tutto dopo l'uscita di una nuova versione ma solo occuparsi delle raccomandazioni aggiuntive e migliorative. 

Ma in pratica come funzionano e come possiamo usare queste raccomandazioni?

Dai principi generali alle singole tecniche

Le raccomandazioni in materia di accessibilità si strutturano a più livelli per venire incontro alle differenti esigenze dei loro utilizzatori che non necessariamente rivestono un ruolo tecnico nella creazione dei contenuti. 

Principi globali

Innanzitutto sono esposti i quattro principi fondamentali su cui si fonda l'accessibilità del contenuto web che deve essere: 

  • percepibile
  • utilizzabile
  • comprensibile e
  • robusto.

Linee guida

Da questi quattro pilastri derivano tredici linee guida che forniscono il quadro di riferimento e gli obiettivi per concretizzare i principi nella produzione dei contenuti.

Criteri di successo

Per ogni linea guida sono poi definiti dei criteri di successo in maniera da poter testare la conformità. A seconda delle esigenze sono stabiliti tre livelli di conformità: A (minimo), AA e AAA (massino). 

Tecniche 

Sono inoltre presenti una grande varietà di suggerimenti di tecniche associate ad ogni linea guida e ad ogni criterio di successo.

Ve ne sono di due categorie: le tecniche sufficienti e quelle consigliate. Queste ultime vanno al di là dei criteri di successo e possono anche rivolgersi a problemi di accessibilità per cui non è possibile definire dei criteri di successo verificabili. 

Strumenti pratici

Consultare le linee guida regolarmente quando stiamo creando dei siti è certamente un buon modo per espandere la nostra consapevolezza e la nostra attenzione in questo ambito. 

Tuttavia esistono anche dei metodi più veloci di testare i nostri siti in maniera automatica: dei software e delle estensioni per browser che sono stati creati proprio sulla base di queste raccomandazioni e che sono in grado di scansionare i siti alla ricerca di elementi da correggere per migliorarne l'accessibilitá.

Naturalmente, come per tutte le procedure automatizzate, i suggerimenti che riceviamo da questi software devono essere valutati da noi e adattati alla situazione. 

Anche per questo rimane, a mio avviso, necessario conoscere il tema e informarsi sulle linee guida anche se il grosso del lavoro di controllo può essere automatizzato. 

Wave

Il primo degli strumenti che voglio presentarvi è Wave, prodotto dalla compagnia specializzata in formazione e valutazione nell'ambito dell'accessibilità online Webaim in collaborazione con l'Università statale dello Utah. 

L'uso è molto semplice e intuitivo. Basterà inserire l'url del sito che intendiamo controllare nel campo apposito della pagina web di Wave, ed ecco che visualizzeremo il sito in questione con tutta una serie di simboli e osservazioni che ci indicano gli aspetti da correggere e migliorare con anche delle spiegazioni semplici e didattiche del perché è meglio fare come suggerito. 

È anche possibile scaricare un'estensione per browser Chrome, Firefox e Edge. In questo caso basterà cliccare sull'icona dell'estensione per avviare la scansione del sito che stiamo visitando. 

Uno strumento molto utile e interessante che permette di migliorare l'accessiblitá anche a chi non conosce ancora o non ha avuto il tempo di studiarsi le linee guida. 

Funkify

Il secondo strumento che vi propongo si chiama Funkify, ed è prodotta da un team di esperti di accessibilità svedesi.

Si tratta di un'estensione browser purtroppo disponibile solo per Chrome al momento.

Funkify ci fa mettere nei panni degli utenti affetti da differenti disabilità che potrebbero finire sul nostro sito. 

Cliccando sull'icona dell'estensione possiamo scegliere differenti profili (miopia, problemi motori nell'uso del mouse, daltonismo, dislessia,...).

Una volta scelto, il programma simulerà la condizione selezionata e ci farà vivere in prima persona la navigazione del nostro sito con gli ostacoli determinati da quella disabilità. 

Questo ci permette di renderci conto di persona, ad esempio, se i bottoni sono troppo piccoli per chi ha la mano che trema e non può gestire bene il mouse, se i colori rendono ben visibile il contenuto anche per chi ha dei problemi di daltonismo o ha bisogno di più contrasto,... 

Trovo che sia un'estensione molto interessante ed empatica.

Ci permette di renderci conto di problemi che possono sfuggire alla valutazione attraverso al sola scansione del codice perché sono insiti nell'esperienza individuale di navigazione. 

L'accessibilitá nel proseguio del nostro percorso da zero a iper

Il tema dell'accessibilità rimarrà sempre presente anche nei prossimi contenuti di questo canale e quando incontreremo diversi modi di trattare un elemento della nostra pagina per ottenere un risultato simile cercherò sempre di scegliere il metodo migliore per l'accessibilità e di esplicitare il ragionamento. 

Così potremo imparare insieme a creare dei siti web a partire da zero e allo stesso tempo migliorare e democratizzare Internet, per quel che possiamo fare nel nostro piccolo.

Come contribuire allo sviluppo del nostro gruppo di studio

Se ritenete utile e interessante questo progetto potete contribuire al suo sviluppo e alla sua continuazione condividendo questo canale con chi pensate che possa essere interessato a fare questo percorso insieme a noi e imparare a creare siti web a partire da zero.

V'invito anche a valutare la possibilità di diventare finanziatori di questa spedizione nel mondo del web con un contributo a vostra scelta utilizzando gli strumenti offerti da Cam.TV, per esempio attraverso l'opzione sostieni sotto ai contenuti oppure nella pagina del canale.

Se volete potete poi entrare nell' I-Team: L'area riservata ai sostenitori periodici del canale in cui condivido dietro le quinte, contenuti e riflessioni che non sono disponibili altrove. 

Approfitto dell'occasione per ringraziare di cuore tutte le persone che hanno già contribuito!

Vi ringrazio per il tempo che avete passato con me e vi auguro un iper-buona vita online e offline!

E non dimentichiamoci che condividendo si impara!!

Linkoteca

Sito di FreeCodeCamp (il nostro quaderno degli esercizi) 

Lo scopo e la filosofia di Iper

Come si colloca ciò che impariamo nel più vasto mondo del web

La magia dell'ipertesto

Il browser va all'asilo. Che cos'è un linguaggio di markup

Il browser va a teatro: la struttura di base di una pagina web

Qualche strumento per trasformare il canale in un gruppo di studio interattivo

Esercizi pratici: le basi dell'HTML

HTML 5 e la struttura logica delle pagine web

HTML: impariamo ad aggiungere un'immagine a una pagina web

Facciamo insieme qualche esercizio su FreeCodeCamp (attenzione! spoiler soluzioni!)

 Come funzionano i link: le ancore che ci collegano al web

HTML: come inserire delle liste nelle nostre pagine web 

Quaderno degli esercizi HTML: link liste e inserimento dati

HTML: i tipi di visualizzazione predefiniti degli elementi

HTML: esercizi pratici con soluzioni (spoiler alert!!!)

Il protocollo HTTP: il browser va all'osteria

Introduzione ai formulari web 

Input: un elemento fondamentale dei formulari web 

Formulario web: costruiamo alcuni campi di input utente

Web form: terminiamo la carrellata degli elementi principali

Trattiamo con rispetto i dati dei nostri utenti

Mettiamo in partica i formulari

Tls: ricevere dati dai nostri utenti in maniera sicura

Crittografia: la scrittura nascosta (parte 1)

Crittografia parte 2: la firma digitale

Trasmissioni sicure e veloci abbinando i metodi di cifratura

Al riparo da siti ingannevoli grazie ai certificati digitali

Rubare i dato oggi per decifrarli in futuro: la minaccia quantistica

112  
66