Accessibilità online: what else? – parte 8 – scarica il documento

Promisi, quando parlai di accessiblità online l’ultima volta, che avrei caricato un documento scaricabile che riassumesse tutti i post. Ho creato il file il 12 gennaio ed il post il 27… Poi una serie di vicessitudini (dimissioni e mettersi in proprio – per fare un esempio…) e sono decisamente in ritardo a caricare quanto promesso ormai sei mesi fa 🙂

Il documento è scaricabile in due formati: pdf e docx (quindi office 2007 o superiore, oppure moduli di compatibilità per la lettura). Già che c’ero ne ho approfittato per dargli una ritoccatina estetica, pertanto li leggerete come versione 2.0.

Come noterete all’ultima pagina, il documento è liberamente scaricabile, distribuibile e modificabile al solo patto di citare la fonte. Sostanzialmente è licenziato CC BY 2.5.

Sarei contento se il file potesse essere utile a qualcuno e mi farebbe altrettanto piacere ricevere feedback in caso di utilizzo e segnalazioni circa idee, chiarimenti o altro sul documento o sui post.

— Scarica il documento —

Accessibilità online (pdf)

Accessibilità online (docx)

— Tutti i post precedenti di questa serie che riguardano l’accessiblità —

Parte 1

Parte 2

Parte 3

Parte 4

Parte 5

Parte 6

Parte 7

Annunci

Permalink: esempio di utilizzo del plugin per lo slug (#slug #permalink #jQuery #plugin)

Come promesso nel post in cui presentavo la modifica per il plugin jQuery per lo slug, di seguito riporto un esempio di come utilizzo io il plugin.

Consideriamo che lavoro con tre file miei:

  1. jquery.slug.js (contenente il codice postato ieri)
  2. progetto.js (file utilizzato per la personalizzazione dello specifico progetto ed importato come ultimo file js all’interno della pagina)
  3. progetto.html (file del progetto)

Ovviamente jQuery… un giorno, magari, approfondirò su jQuery.

Il file progetto.js contiene una semplice riga:

$(function(){
	$("#inputTitolo").slug({ separate: "_" });
});

Il file progetto.html è così strutturato nella parte di body (tralascio tutto ciò che c’è prima, ovvero i richiami dei vari file nell’header, e vari eventuali fronzoli necessari – ad esempio il form).

<label for="inputTitolo">Titolo:</label>
<input type="text" id="inputTitolo" maxlength="255" />
<label for="campoSlug">Indirizzo:</label>
<div id="campoSlug"><span class="slug" /><input type="text" id="inputSlug" class="slug" /></div>

La modifica che ho effettuato allo script originale (jQuery slug plugin di Perry) prevede l’utilizzo di <span class=”slug /> prima del campo di input per comodità mia e per velocizzare la lavorazione (al momento mi serviva che fosse funzionale e funzionante… conoscete quick and dirty… :D?). Mi riprometto di reintrodurre l’automatismo in una prossima versione.

A questo punto è sufficiente copincollare l’esempio e farlo partire 😀

Permalink: come creare uno slug “stile wordpress”

Oggi un post per tornare e per dare un primo contributo open source al mondo (sempre modesto :)).

Sto sviluppando un nuovo progetto e mi sono trovato nella necessità di creare qualcosa tipo il generatore di permalink di wordpress (altrimenti detto slug). Cercando qua e là un plugin jquery, ho trovato questo jquery slug plugin.

Il plugin in sè è molto interessante e facilmente utilizzabile. Per fare quello che volevo, però, ho apportato alcune modifiche (guardando un po’ qua e là e mettendoci del mio). Perciò ho deciso di ricondividere il lavoro aggiungendo qualche generalizzazione.

(function($) {
	$.fn.slug = function(o) {
		var d = {
			slug: 'slug', // Class used for slug destination input and span. The span must exists on the page
			hide: true,  // Boolean - By default the slug input field is hidden, set to false to show the input field and hide the span.
			customizable: true, // Boolean - customizable
			separate: '-', // Character - defult value set to '-'
			write: 'input', // String - the tag name for wrinting personalized slug default is set to input
			read: 'span' // String - the tag name for reading the slug default is set to span
		};
		var o = $.extend(d, o);
		return this.each(function() {
			$t = $(this);
			$w = $(o.write + "." + o.slug);
			$r = $(o.read + "." + o.slug)
			$().ready(function() {
				if (o.hide) {
					inputSlug(true);
				}
			});
			if (o.customizable) {
				$w.live('blur', function() {
					inputSlug(true)
				});
				$r.live('click', function() {
					inputSlug(false);
				});
			}

			function inputSlug(show) {
				$r.text($w.val());
				if (show) {
					$r.show();
					$w.hide();
				}
				else {
					$r.hide();
					$w.show().focus();
				}
			}

			makeSlug = function() {
				s = s.replace(/\s/g, o.separate);
				s = s.replace(eval("/[^a-z0-9" + o.separate + "]/g"), '');
				s = s.replace(eval("/" + o.separate + "{2,}/g"), o.separate);
				s = s.replace(eval("/(^" + o.separate + ")|(" + o.separate + "$)/g"), '');
				$w.val(s);
				$r.text(s);
			}

			$t.keyup(makeSlug);
			return $t;
		});
	};
})(jQuery);

A beve anche del codice per mostrare qualche esempio.

Acronym e Abbr: usare i tag corretti aiuta l’indicizzazione (#acronym #abbr #SEO)

Altro post nerdoso (c’è la n, non la m…). Può anche essere che mi manchi la fantasia, ma reputo l’accesso alla rete da parte di tutti una cosa molto importante e, non essendo io un’azione di carità che vive per la gloria, reputo altrettanto importante il risvolto economico della cosa.

Molto semplicemente:

  1. lavoro sulla rete
  2. più gente accede alla rete, più posso guadagnare
  3. cerco di agevolare, per quanto riguarda il mio livello, l’accesso alla rete a quante più persone possibili

Premessi questi dati di fatto, oggi scrivo di un paio di tag HTML che vengono sottovalutati e scarsamente utilizzati: ACRONYM e ABBR.

Anzitutto capiamo cos’è un acronimo e cos’è un’abbreviazione:

ACRONIMO
Un nome che viene creato utilizzando le prime lettere (o sillabe) di altre parole per formare una nuova parola che sia pronunciabile come fosse una sola.
Un paio di esempi per l’italiano: FIAT (Fabbrica Italiana Automobili Torino); CCISS (Centro Coordinamento Informazioni Sicurezza Stradale)
Ed un paio di esempi per l’inglese: HTML (HyperText Markup Language); SOS (Save Our Souls)
ABBREVIAZIONE
Una parola che è solo una rappresentazione differente della stessa parola. Solitamente si usa il punto per evidenziare la contrazione. Di norma, poi, si pronuncia come la prola base.
Per esempio: pag. per pagina; pagg. per pagine; p.zza per piazza e così via…

Sapendo queste piccole differenze, possiamo proseguire.

Spesso chi scrive i testi per un sito internet utilizza delle abbreviazioni e degli acronimi (anche di uso comune). Altrettanto spesso capita a chi trascrive questi testi di non conoscerne neppure il significato.

Il problema maggiore, però, si presenta quando chi non capisce il significato è chi legge.

In quel caso, infatti, abbiamo due diversi (grossi) problemi:

  1. comunicazione incompleta
  2. non comprensione del testo

E questi due fattori sono deleteri per quanto riguarda la comunicazione dell’azienda e, per quello che mi interessa evidenziare qui, per l’ottimizzazione sui motori di ricerca. Ricordo, infatti, che i motori di ricerca non sono altro che degli algoritmi (anche abbastanza stupidi per certi versi) he leggono le singole parole. Per una versione base di motore di ricerca, infatti, FIAT è una parola che non è riconducibile ad automobili.

Ovviamente se si prendono Google, Bing o Yahoo!  e si cerca FIAT vengono fuori risultati inerenti le automobili… se però cercassi un acronimo meno famoso?

Cerchiamo, ad esempio, RSPP. A parte il primo risultato (che evidenzia il responsabile del servizio prevenzione e protezione in wikipedia), i restanti risultati non sono rimandabili al significato dell’acronimo. Il rischio è, dunque, che si parli di RSPP per una pagina intera senza che una persona abbia la possibilità di capire cosa vuol dire la sigla.

Qui entrano in gioco i nostri ACRONYM e ABBR.

Le sintassi sono banali:

<acronym title=”Fabbrica Italiana Automobili Torino”>FIAT</acronym>

<abbr title=”pagine”>pagg.</abbr>

Scrivendo il codice in questa maniera stiamo fornendo una bella manciata di informazioni non solo al motore di ricerca, ma anche ai lettori umani. Come?

Di seguito trascrivo l’esito dei due esempi:

FIAT

pagg.

Soffermatevici sopra un attimo col mouse… appare una tooltip con la spiegazione dell’acronimo o dell’abbreviazione.

Questo utilizzo dei due tag è semplice, gestibile, manutenibile (a condizione di non riscrivere ogni volta che appare FIAT in un testo monografico l’acronimo… usate il buon senso) e, soprattutto, amico dei motori di ricerca (SEO) e delle persone con disabilità.

p.s.: piccolo trucco aggiuntivo da designer: aggiungerci un po’ di stile per evidenziare la presenza di qualcosa di diverso ed importante nella pagina, non guasta mai.

#Accessibilità online: what else? – parte 7

Concludo, con il settimo capitolo, questo ciclo di brevi articoli che ho voluto dedicare all’accessibilità.

In che modo concludo? Semplicemente riassumendo i vantaggi che l’accessibilità porta e, riprendendo il commento di Dani al primo post, portando ad esempio la Mozilla Foundation.

Accessibilità online: vantaggi

Suddividiamo immediatamente i campi in cui si possono ottenere dei vantaggi seguendo le norme legate all’accessibilità:

  • Sociale
  • Tecnico
  • Immagine e comunicazione
  • Economico

Accessibilità: vantaggi sociali

  1. Riduzione delle barriere (quindi punto 2)
  2. Maggiore uguaglianza (quindi punto 3)
  3. Minori discriminazioni (quindi punto 4)
  4. Migliore integrazione tra le persone

Accessibilità: vantaggi tecnici

  1. Elevata manutenibilità
  2. Migliore usabilità
  3. Elevata qualità del codice
  4. Conformità agli standard internazionali
  5. Minori problemi di cross-browsing e simili
  6. Leggibilità sia visiva (uomo), che automatizzata (crawler e/o brwoser testuali)

Accessibilità: vantaggi di immagine ed efficacia della comunicazione

  1. Azienda / società / prodotto / sito “amico” delle fasce più deboli o disagiate
  2. Comunicazione rivolta al 100% dei potenziali utenti
  3. Comunicazione su misura per il 100% degli utenti raggiunti
  4. Migliore scorrevolezza nei contenuti
  5. Migliore indicizzazione sui motori di ricerca (Google, Bing, Yahoo! ecc.) (quindi punto 6)
  6. Miglior posizionamento nei motori di ricerca (SEO…)
  7. Il rispetto della semantica proietta il sito verso il web 3.0

Accessibilità: vantaggi economici

  1. Riduzione dei costi di gestione e di manutenzione sul lungo periodo
  2. Riduzione delle spese di advertising online legate al SEM per determinate parole chiave
  3. Possibilità di inserirsi in mercati (per ora) poco considerati o considerati solo marginalmente (quindi punto 4)
  4. Ritagliarsi una posizione di vantaggio rispetto ai concorrenti in quanto “chi primo arriva, meglio alloggia” (giusto per capirsi…)
  5. Miglior ROI (considerati gli investimenti in comunicazione)

Ma, alla fine di tutto, perché dovrei puntare sull’accessibilità? Chi punta sull’accessibilità? Rischio solo io?

Beh, in tutta sincerità: no, non rischi solo tu. Un esempio su tutti può essere dato dalla Mozilla Foundation, la cui missione (sì, ok è mission, ma preferisco in italiano) ed il cui manifesto sottolineano l’importanza che hanno dato, danno (e quasi certamente continueranno a dare) all’accessiblità. Si pensi che il rispetto degli standard (che implica accessibilità) ha portato il browser di Mozilla (Firefox) a far crollare in pochi anni il predominio indiscusso di Internet Explorer (6.0) che aveva conquistato il 90% e passa del mercato: un esempio di investimento cospicuo e ben direzionato che ha portato un elevato ritorno.

In definitiva… accessibilità online: what else?

— FINE —

Parte 1

Parte 2

Parte 3

Parte 4

Parte 5

Parte 6

a breve estrarrò un documento di testo  – in vari formati – da quanto scritto e  lo caricherò così da non dover faticare, se interessati, tra le pagine del blog e per avere il tutto immediatamente sotto mano

Accessibilità online

#Accessibilità online: what else? – parte 6

Tecnologie assistive

Anzitutto: cosa sono le tecnologie assistive? Sono tutti quegli strumenti tecnologici (altrimenti perché tecnologie…?) che aiutano un disabile nelle varie attività. Ovviamente, per quello che riguarda noi, focalizzeremo sulle attività legate ad un computer.

Per quello che ho potuto vedere io (come sempre attendo eventuali aggiunte), questi strumenti mirano, perlopiù, agevolare chi è affetto da disabilità motorie o fisiche. V iriporto un po’ di esempi.

Basti pensare a chi non può usare braccia o mani: come fa ad usare un pc che come configurazione (ormai standard) ha tastiera e mouse come interfaccia? Beh, il problema non è da nulla…

Molti ricorderanno il “caso Welby“. Al di là di tutto quanto di personale, politico, morale, etico, religioso o quelchesivuole, guardiamo l’aspetto tecnico/tecnologico: Welby era in grado di comunicare benché privo dell’uso di mani, braccia, bocca ecc… come? Potendo muovere gli occhi egli guardava una grossa tastiera disegnata sul monitor. Delle videocamere rilevavano il movimento degli occhi e inviavano un input al pc corrispondente alla lettera fissata con lo sguardo. Sotto, poi, apparivano via via le parole da poter usare, una sorta di T9 avanzato (un po’ come molti cellulari di oggi dove vengono suggerite le parole man mano che vengono scritte). A quel punto Welby poteva selezionare una delle parole o un’altra lettera. Il programma, poi, consentiva il salvataggio di frasi più usate o “frasi rapide”. Essendo un testo, poi, il pc può farne potenzialmente quel che se ne vuole: comunicarlo con un sintetizzatore vocale, salvare il documento, impostarlo come indirizzo internet… insomma: c’è un testo sul pc, e tanto basta.

Pensando a situazioni meno estreme, comunque, possiamo trovare mouse da bocca (in base a come viene mosso con le labbra ed al soffio viene mosso il mouse sul monitor), tastiere grandi 2/4 volte più di una tastiera normale (sia per agevolare gli ipovedenti, sia per coloro che, non avendo dita o mani, faticano a premere i tasti piccoli), delle sorte di grossi trackpad oppure ancora dei mouse da usare coi piedi (per chi, senza mani, fatica ad usare i mouse).

I dispositivi esistenti sono innumerevoli ed hanno tutti impostazioni personalizzabili (sensibilità, velocità ecc…)

Come già precedentemente portato ad esempio, esistono disabilità visive (come l’ipovisione) che non consentono un uso semplice del pc (il motivo per cui tutti i browser attuali prevedono una funzione di zoom è dato dal fatto che non tutti gradiscono i caratteri da 8/10px che necessitano di microscopio per essere letti, indipendentemente dal fatto di essere disabili…).

Per chi ha problemi di vista, oltre agli accorgimenti tecnici di cui già ho trattato, esistono programmi apposta che leggono i contenuti e li ripropongono attraverso un programma di sintetizzazione vocale. Vi posso assicurare che le prime volte non è per niente facile capire le pagine internet, anzi… A proposito di questo: chi programma per internet si ricordi che esistono (e vengono usati…) i browser testuali, il più famoso è Lynx…

Ci sono, inoltre, tutti quei software di riconoscimento vocale (alcuni addirittura preinstallati – sia Windows 7 che Ubuntu ne hanno) per impartire comandi vocali al pc, piuttosto che per dettargli i testi.

Alla luce di quanto emerso, i creatori di contenuti, i designer ed i programmatori di siti internet e, più in generale, di applicazioni oline, dovrebbero pensare anche ai mezzi con cui verranno fruite le proprie creazioni senza dare per scontato che tutti usino tastiera, mouse, monitor o sistema di visualizzazione “standard“.

Infine voglio nuovamente sottolineare come tutte queste tecnologie aiutano il processo di integrazione e riducono parte di quei fattori che, spesso, aumentano il senso di diversità, cercando di dare a chiunque le stesse possibilità espressive.

— continua —

Parte 1

Parte 2

Parte 3

Parte 4

Parte 5

Parte 7

Accessibilità online

#Accessibilità online: what else? – parte 5

Accessibilità: colori ed affini

Non di solo codice vive l’uomo

Viene detto agli informatici

Non di sola comunicazione vive l’uomo

Viene detto agli esperti di comunicazione, marketing, brand ecc…

Effettivamente ci sono altre cose. No. Non sono il mangiare, il bere ed il dormire, quelli vengono poi :p.

Cosa c’è di altro oltre al codice ed al contenuto? Il come viene presentato. La grafica, il design e tante altre belle cosucce.

Non posso addentrarmi nelle tecniche specifiche in quanto non sono un grafico od un designer (nel caso qualcuno lo fosse sarebbe interessante sentirne l’aspetto tecnico…), posso però dire quali sarebbero i fini da perseguire (in realtà sempre lo stesso: far sì che chiunque possa usufruire di un sito) e, a grandi linee, il come.

L’aspetto grafico dell’accessibilità è legato principalmente a chi ha linee lente e chi ha problemi di ipovisione.

Per chi ha linee lente vuol dire creare una grafica poco pesante in termini di KB. Immagini ottimizzate; evitare blocchi monocromatici usando un’enorme jpg di un solo colore, ma sfruttare la potenza dei css e ridurre il colore ad un’elaborazione di codice; per le strisce sfumate usare immagini dell’altezza/larghezza voluta e la larghezza/altezza di un solo pixel… ed accorgimenti affini.

Ho notato (nel mio piccolo) che è buona cosa provare a salvare in diversi formati la stessa immagine e cercare il migliore nel rapporto qualità/peso. Sicuramente è una soluzione empirica, ma per quel che faccio io penso possa bastare. Ovviamente se mi arrivassero lumi, sarei ben lieto di accoglierli, migliorare il post e cercare migliorare me stesso (sì, è un invito esplicito ai designer :)).

Per coloro che hanno problemi di vista ci sono un paio di semplici accorgimenti da adottare almeno come base: possibilità di aumentare/ridurre i caratteri della pagina (dei tasti apposta, ipotizzando di essere in assenza di zoom o simili messi a disposizione dei varii browser); dare la possibilità di vedere il sito con colori differenti rispetto a quelli della grafica “standard” e, possibilmente, ad elevato contrasto (mi viene in mente lo sfondo nero coi caratteri bianchi, piuttosto che dei particolari gialli su determinate tonalità di blu).

Ovviamente tutta la parte di design che rende il sito attraente viene meno, ma, in questi casi, ciò che conta sono la funzionalità e la fruibilità. Se eventualmente, poi, c’è anche del design, ben venga e tanti complimenti al designer ;).

Un’ultima sottolineatura: l’eccesso di immagini sarebbe bene gestirlo come detto in precedenza, con un uso accorto dei CSS in quanto alcuni dei browser utilizzati da non vedenti sono browser testuali che leggono il solo testo pertanto, se si vuole comunicare qualcosa, bisogna essere in grado di saperlo anche con parole a corredo delle eventuali immagini.

— continua —

Parte 1

Parte 2

Parte 3

Parte 4

Parte 6

Parte 7

Accessibilità online

#Accessibilità online: what else? – parte 4

SEO, SEM e motori di ricerca

SEO, SEM, SERP… sono termini che molti già conoscono, in ogni caso non sono altro che acronimi che hanno sempre a che fare con il posizionamento delle pagine internet sui motori di ricerca.

Come è chiaro che debba essere, quali sono i motori di ricerca su cui maggiormente un sito vuole apparire? Ovviamente i più usati e diffusi (Google, Yahoo! e Bing in primis).

Il come finire in un motore di ricerca e come salire in graduatoria non sono questioni che tratterò in questi post sull’accessibiilità  (un giorno, chissà, ne farò qualcuno specifico sui suddetti argomenti), però voglio spiegare perché è meglio fare un sito accessibile per questi fini.

Come ho spiegato nei post precedenti l’accessibilità ha tanti vantaggi sociali, umani, tecnici e così via. Fossero solo lì i vantaggi, però, sarebbero, di fatto, marginali o addirittura inutili dal punto di vista di un’azienda. Non è per cinismo – sono il primo a realizzare da anni siti accessibili – è per una mera constatazione dei fatti e della realtà: perché io (azienda) devo spendere il doppio, il triplo, una volta e mezzo… il prezzo di un sito per averlo accessbilie? Che ritorno ho?

Ok un ritorno di immagine perché perché l’azienda è vicina alle problematiche sociali: l’accessibilità non è una cosa “che si vede”, pertanto gli utenti privi di disabilità non riescono a cogliere questo aspetto sociale, quindi il ritorno di immagine non giustificherebbe l’investimento.

Un ritorno in numero di utenti a cui arriva l’esatta comunicazione: 1%? 2%? Qualcosina in più? Troppo pochi anche qui per convincere una società ad investire in accessibilità.

Un buon (ottimo) motivo, però, per cui un’azienda ha convenienza ad investire in accessibilità è dato dal fatto che, se accompagnato da un buon lavoro di SEM/SEO , l’accessibilità concorre a migliorare la scansione  e l’indicizzazione del sito.

Per essere precisi non è l’accessiblità in sè, bensì ciò che porta all’accessibilità: il codice ed i contenuti.

Questi infatti, come ricordato nei post precedenti riguardanti la semantica del codice e la semantica dei contenuti, rispettano regole standard di struttura che, guarda caso, sono molto vicine a quelle richieste da un motore di ricerca per intrufolarsi per bene a cercare nel sito. E se scrivo dei contenuti buoni, il motore di ricerca indicizza meglio i contenuti e porta a risultati più attinenti in fase di ricerca.

Che ritorno ha l’azienda che punta sull’accessibilità, a questo punto? Un ritorno intangibile nell’immediato, ma che sul medio termine (3/6 mesi) dà i suoi frutti. Il costo di una campagna pubblicitaria online, infatti, può diventare esoso (molto più di un sito accessibile) ed il ritorno non è per nulla scontato in quanto, online, la gente si fida del passaparola, di ciò che BigG gli sbatte lì come primo risultato, di quello che Bing propone come sito interessante o di quell’immagine rappresentativa data da Yahoo! a seguito di una ricerca.

I metodi di comunicazione tradizionali, qualcun(a) mi dice, non sono più molto validi…

Il fatto di posizionarsi nella prima pagina di Google è ciò a cui tutti ambiscono e, maggiormente, la prima posizione (che riceve circa il 40/50% dei click per una data stringa di ricerca). Ora: l’accessibilità, come il SEO e come tutte le tecniche varie, non sono il miracolo fatto realtà per cui anche se cerco “pterodattilo” finisco sul tuo sito che produce scope di saggina… semplicemente potrebbe essere che invece di dover cercare “Milowa” per finire sul mio sito, posso cercare “Web Agency” e trovarmelo in prima pagina… (se ci provate, come detto poco fa, non troverete Milowa – ahimé – però la trovate cliccandoci… ok, ok… la smetto con la pubblicità subdola 🙂 ).

Riprendendo un attimo le fila del discorso, concludo aggiungendo che l’accessibilità, per un’azienda, è sì un costo maggiore durante le prime fasi del progetto, però rende il progetto stesso più facilmente manutenibile da parte degli sviluppatori, pertanto riduce i costi di gestione  e manutenzione del lungo periodo.

Come si è potuto notare, quindi, un sito accessibile è di nuovo conveniente in quanto:

  1. offre maggiori possibilità di un buon posizionamento sui motori di ricerca
  2. riduce i costi di manutenzione e gestione sul lungo periodo

— continua —

Parte 1

Parte 2

Parte 3

Parte 5

Parte 6

Parte 7

Accessibilità online

#Accessibilità online: what else? – parte 3

Parlavo di semantica…

Semantica dei contenuti

Che dati andrebbero inseriti in una tabella? La mia risposta era banale: dati tabulari. Scontato? Mica tanto.

Il problema di accessibilità, infatti, non è solo un problema tecnico legato a come usare le tecnologie. Ha un lato “umano” e comunicativo.

Pare evidente che non si possa adattare la comunicazione “a priori” in tutti i casi (soprattutto nelle entità più piccole in quanto i costi di realizzazione tecnica crescerebbero all’inverosimile).

Tralasciando il “come” ed il “cosa” si dice (non è il mio campo e c’è sicuramente qualcuno (… 🙂 ) che potrebbe illuminarmi su questo), ci si può focalizzare sul “dove” vengono dette le cose. Sì, il dove.

Il flusso di una pagina HTML è molto semplice: dall’alto in basso.

Esistono tecniche attraverso i CSS per cui, benché nel codice sia scritto prima “A” e poi “B”, a video appaiono prima “B” e poi “A”.

Questo, nella maggior parte dei casi legati all’accessibilità, è fondamentale per il flusso di lettura in quanto, per esempio, un non vedente può essere agevolato nel leggere (sentire) prima i link principali, poi il contenuto del link che ha premuto e solo successivamente tutti gli altri link della pagina.

Un flusso di lettura migliore, ovviamente, agevola anche chi non è disabile, migliorando la sua esperienza utente.

Fosse tutto così semplice saremmo a posto 🙂

Aggiungiamo un piccolo ostacolo: immagini, video e contenuti multimediali.

Tutti questi elementi non vengono letti né da un disabile né, tantomeno, dai motori di ricerca (di Bing & company parlerò più approfonditamente più in là evidenziando come la cura per l’accessibilità aiuti ed agevoli il lavoro dei motori di ricerca).

Come fare per far “vedere” questi contenuti? Usando dei piccoli accorgimenti a livello di codice che consentono di descrivere il contenuto attraverso un testo alternativo. In questo modo i motori (che leggono esclusivamente il codice) trovano una descrizione dei contenuti che è comprensibile alle persone (ed ai crawler di BigG e fratelli).

Riassumendo, quindi, quali vantaggi otteniamo curando i molteplici aspetti dei contenuti?

  1. Sequenza dei contenuti adattata a seconda del pubblico di riferimento
  2. Maggiore scorrevolezza dei flussi dei contenuti
  3. Comprensione di tutti i contenuti da parte di tutti gli utenti
  4. Migliore indicizzazione delle pagine da parte di motori di ricerca

— continua —

Parte 1

Parte 2

Parte 4

Parte 5

Parte 6

Parte 7

Accessibilità online