Testo nascosto e screen reader nel 2013

omino in incognitoNascondere del testo sul monitor in accessibilità è una tecnica spesso usata soprattutto per migliorare l’esperienza di navigazione di un utente che utilizza uno screen reader: così facendo, è possibile aggiungere alla pagina informazioni che se visualizzate potrebbero apparire superflue o nocive per il design, ma che invece sono fondamentali per chi utilizza uno screen reader. Per esempio, per migliorare e completare la struttura dei titoli che delineano i contenuti delle pagine, o per gli skip link e tante altre situazioni, come etichettare elementi dei form o fornire istruzioni speciali dove l’interazione potrebbe confondere un utente che utilizza tecnologie assistive.

Per anni, allo scopo di ottenere questo risultato è stata utilizzata una tecnica ben documentata in CSS in Action: Invisible Content Just for Screen Reader Users su WebAIM, che prevede di nascondere il testo posizionandolo in modo assoluto fuori dallo schermo (e sue variazioni).

Però, a oggi questa tecnica presenta molti inconvenienti: il layout si può deformare se l’elemento così nascosto riceve il focus da tastiera (tipicamente, quando un utente naviga utilizzando il tasto Tab), il rientro negativo del testo non funziona quando la direzione di lettura è da destra a sinistra, Apple VoiceOver non legge gli elementi XHTML se questi hanno un’altezza pari a 0, Safari con VoiceOver su SnowLeopard legge i titoli nascosti come semplice testo.

Per risolvere questi malfunzionamenti, è stata elaborata una nuova tecnica basata sulla proprietà clip di CSS 2.1. clip consente di consente di specificare le dimensioni di un elemento posizionato in modo assoluto utilizzando i valori in alto, a destra, in basso, e a sinistra creando un box per il contenuto. Impostando tutti i valori a 0 pixel, il contenuto diventa invisibile.

In teoria sembrerebbe semplice, ma come al solito le incompatibilità fra browser ci mettono lo zampino:

  • Bisogna prevedere una sintassi diversa per IE6 e IE7, vedi linea con il commento.
  • Bisogna correggere un bug in WebKit e Opera che provoca l’overflow del contenuto “ritagliato”; sistemato con overflow: hidden.
  • Bisogna impostare l’altezza di 1 pixel per garantire che VoiceOver legga il contenuto.
  • Come ulteriore precauzione, gli attributi padding e border sono impostati a 0, al fine di evitare eventuali problemi relativi ai bordi del box di ritaglio.

Alla fine della fiera, il codice del CSS diventa così (al posto di hidden ovviamente utilizzate il nome della classe che avete creato nel vostro CSS):

.hidden {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}

Formati aperti: ma il .doc è davvero un formato chiuso?

Qualche giorno fa per ragioni diverse mi è capitato di consultare la pagina relativa ai Formati Aperti sul sito DigitPA.

Che cos’é il formato aperto

Il formato dei dati digitali si definisce “aperto” quando ne viene resa pubblica, mediante esaustiva documentazione, la sintassi, la semantica, il contesto operativo e le modalità di utilizzo. Tali informazioni, unitamente ad una guida all’uso del formato, orientata alla lettura da parte dell’utilizzatore, devono essere presenti in uno o più documenti rilasciati dall’ente proponente lo standard.

I formati aperti fanno parte, insieme al software open source, dell’insieme degli standard aperti.

Ok. Allegata una tabella contenente l’elenco dei formati aperti, come prevedibile.

Per i formati da “ufficio” (documentali), ci sono PDF e Open Document Format for Office Applications. Il diffusissimo formato doc non è contemplato, così come docx e altri formati XML di Microsoft, probabilmente perché ritenuti “formati chiusi“, o proprietari.

Non so se questo sia corretto: fin dal 2006 Microsoft permette l’uso libero dei suoi formati sotto licenza Microsoft Open Specification Promise.  La OSP permette l’utilizzo libero di diversi formati Microsoft a chiunque

Microsoft irrevocably promises not to assert any Microsoft Necessary Claims against you for making, using, selling, offering for sale, importing or distributing any implementation to the extent it conforms to a Covered Specification (“Covered Implementation”), subject to the following.

Non capisco bene. Nella pagina di Wikipedia dedicata all’argomento si leggono diverse citazioni del tipo:

“I’m pleased that this OSP is compatible with free and open source licenses.”

“Red Hat believes that the text of the OSP gives sufficient flexibility to implement the listed specifications in software licensed under free and open source licenses.”

Magari le specifiche sono segrete? No, sono disponibili a chiunque. Office Open XML è uno standard? Sì, è standard ISO. Sono un po’ confuso…

PDF accessibili da Word: axesPDF

AxesPDF è un altro di quegli attrezzi senz’altro da avere se desiderate creare file PDF accessibili direttamente da Word 2007/2010.
La beta 3 è disponibile gratuitamente. Attenzione: si tratta di una beta, ed alcune stringhe dei comandi o l’help non sono ancora stati tradotti, così come le etichette di alcune icone. Però è uno strumento così promettente che non posso non presentarlo anche se ancora in fase di sviluppo.

Si tratta di un plugin per Word. Dopo l’installazione, troverete una nuova scheda axesPDF nella barra di accesso rapido. La scheda contiene alcuni pulsanti, che permettono di configurare le opzioni di conversione e creare il PDF.

Bè, che dire, provate, è davvero semplice da usare. La scheda Structure permette di definire nel dettaglio la mappatura degli elementi di tabelle, note, note a piè di pagina, paragrafi e titoli, didascalie.

Le impostazioni di Initial View sono per default già configurate correttamente, ed oltre alle consuete opzioni sono presenti anche due ulteriori controlli per determinare una eventuale pagina speciale dove il file si debba aprire e un fattore di ingrandimento.

Insomma, sono ansioso di vedere la versione commerciale: significherebbe davvero PDF accessibili con un clic, senza interventi a posteriori ed elaborate conversioni.

Le opzioni della scheda Structure di axesPDF.

Le opzioni della scheda Structure di axesPDF.

La fine di Ruth: il Texture Compositing Service

Ruth grigia in Second LifeTempo fa avevamo detto dello “Shining Project” di Linden Lab. Ora è arrivato il momento della fase Sunshine (Server-side Baked Texture Generation & Storage), e questo probabilmente coinciderà anche con la fine dei Viewer 1.x.

Senza entrare troppo in dettagli tecnici, questa fase del progetto si occupa del rendering delle texture sul vostro avatar. Ora il processo avviene client side, ovvero è il vostro client che si occupa della corretta riproduzione delle texture utilizzate per rappresentare gli abiti del vostro avatar.

In pratica, oggi il processo chiamato “avatar baking” implica che quando un livello dell’outfit o dell’abbigliamento viene cambiato, incluso gli alpha layer, gli aggiornamenti vengono applicati in locale nel viewer dell’utente. Poi questi cambiamenti vengono comunicati al server a cui si è connessi, che invia gli aggiornamenti ai viewer degli utenti presenti sullo stesso server, in modo che anche loro possano vedere i cambiamenti. Si tratta di un processo che ha diversi punti di potenziale errore: per esempio il processo di comunicazione fra viewer e server si può interrompere, così il server non riceve tutte le informazioni necessarie e come risultato l’utente che ha effettuato le modifiche si vede perfettamente, mentre tutti gli altri lo vedono esattamente come prima, oppure sfocato o grigio, o nei casi peggiori nudo (già successo, vero?). L’avatar appare “ruthed” con i risultati visibili in molte foto di Flickr. Ma di certo è un fenomeno che avete già visto su voi stessi.

I nuovi viewer (e un aggiornamento sarà obbligatorio, oppure vedrete in modi del tutto curiosi gli avatar intorno a voi), si avvarranno del “Texture Compositing Service”. Il rendering avviene lato server, così che tutti i client vengano aggiornati in tempo reale e contemporaneamente (esclusi gli oggetti indossati).

Appena il client ufficiale verrà aggiornato con il nuovo codice (molto a breve), seguiranno immediatamente tutti i TPV come Firestorm, Kokua, ecc. ecc.

La fine di Ruth? Chissà. Non so cosa ne penseranno quelli del Culto di Ruth.

My name is Ruth

I libri di testo elettronici sono nocivi alla salute

“Senza contare che la memorizzazione e la comprensione sono meno sollecitati dai supporti elettronici”. Aggiungerei “se ne leggete troppi diventerete ciechi” ed ecco fatto.

Non lo dico io eh, lo afferma “La Filiera Del Libro”, ovvero Associazione italiana editori (AIE), la Federazione della Filiera della Carta e della Grafica, l’Associazione librai italiani (ALI), l’Associazione nazionale agenti rappresentanti e promotori editoriali (ANARPE) in una dichiarazione congiunta rilasciata ieri. Sono proprio incazzatissimi contro Profumo e il Decreto Ministeriale n.209 del 26 marzo 2013 – libri digitali.

Condivido pienamente quanto risposto dall’Editore Mario Guaraldi ad AIE & Co, quindi copio/incollo il testo di Guaraldi.

Con preghiera di diffusione

L’Associazione italiana editori (AIE) e tutta la filiera del libro, schiuma alla bocca, riafferma sua totale contrarietà al decreto ministeriale dedicato alle scelte dei libri scolastici: i toni sono apocalittici e le colorazioni xenofobe, da ventennio fascista.
Secondo AIE/ALI, infatti, il decreto solleciterebbe le scuole e le famiglie ad acquistare “prodotti di aziende straniere, non europee, a danno di imprese italiane, mettendo così in difficoltà le aziende e gli occupati dell’intera filiera del libro e della carta”, senza considerare che “l’impatto sempre più pervasivo degli strumenti elettronici sui ragazzi ” potrebbe essere nocivo per la loro salute!
Mi vergogno profondamente di far parte di questa razza di farisei xenofobi che ha fatto pagare alle famiglie italiane ogni anno milioni di euro imposti in nome di quella stessa “autonomia didattica” che oggi viene invocata in difesa dei propri lesi interessi di categoria!
Chiedo pubblicamente scusa ai nostri figli di averli ridotti a fanalini di coda della cultura mondiale dell’innovazione anche a causa di questa arcaica concezione didattica asservita ai soli interessi corporativi.
Mi dissocio da questa per fortuna esigua categoria editoriale, erede fino in fondo di quella cultura fascista che l’ha asservita alla trasmissione dei valori dell’ideologia dominante, “canalizzata” in maniera coatta nel mondo della scuola.

Mario Guaraldi

Io, da parte mia, sono proprio contento di leggere nell’Allegato 1 una frase finalmente chiara:

“il libro di testo in versione digitale deve tenere conto delle vigenti normative sull’accessibilità”.

E ciao.

Navigare il Web con lo screen reader: Giuseppe, i suoi esperimenti e la fondamentale importanza dei titoli

Giuseppe Di Grande è lo sviluppatore dell’eccellente software Biblos, un word processor che permette di creare stampe Braille e grafici tattili a partire da documenti scritti in un ambiente di authoring del tutto simile a quello di Word.

Giuseppe è un non vedente, esperto di computer e informatica. Trovo quindi molto significativi i suoi interventi in video dedicati ad illustrare le difficoltà che un non vedente incontra navigando il Web: è un’esperienza formativa per chi intende comprendere seriamente che cosa sia l’accessibilità, poiché Giuseppe illustra con chiarezza le operazioni che esegue e le difficoltà incontrate.

La sua playlist è disponibile su Youtube, ed è composta da diversi video dedicati all’uso del suo software, Biblos, e all’illustrazione delle sue esperienze di navigazione su importanti siti italiani.

Recentemente Giuseppe ha visitato i siti di due quotidiani, Il Fatto Quotidiano e La Repubblica. Per me, come studioso dell’accessibilità, si tratta di materiale molto interessante, poiché Giuseppe non è un tecnico del Web, e non esamina i siti secondo un’ottica da “accessibilista” o per una verifica di accessibilità. Semplicemente documenta la sua esperienza, fornendo dove possibile consigli per gli sviluppatori.

Su questo blog si è parlato molte volte dell’importanza degli elementi <hn> di XHTML e di come sia di fondamentale importanza utilizzarli correttamente. I video di Giuseppe mostrano chiaramente perché, e perché sia altrettanto importante il rispetto di quella “grammatica formale” tante volte richiamata dalla normativa e dalle specifiche riguardanti l’accessibilità.

Per esempio osserviamo il sito de Il Fatto Quotidiano (ma la stessa cosa vale per Repubblica): Giuseppe utilizza il tasto speciale H del suo screen reader per navigare la pagina desumendone la struttura dai titoli presenti. La struttura non sembra corrispondere a un ordine logico, bensì presentazionale: i titoli di livello due vengono utilizzati per titolare articoli riguardanti notizie di rango inferiore alla notizia principale, che possiede il tag <h1>.

Giuseppe e Il Fatto Quotidiano

Però, secondo la grammatica formale utilizzata, <h2> non è una notizia di rango inferiore, il tag dovrebbe delineare un sottotitolo all’interno dell’articolo iniziato con <h1>.

Cosa significa in pratica? Per capirlo chiaramente utilizziamo un add-on per Firefox,  Heading Maps. Ora osserviamo il sito del Fatto Quotidiano con questo add-on attivo.

Heading Maps crea una mappa attiva e navigabile degli elementi <hn> presenti nella pagina, e simula perfettamente quello che Giuseppe fa nei video utilizzando il tasto H dello screen reader.

Come è facilmente visibile nell’immagine successiva, non è affatto vero che la notizia marcata con <h2> “Csm, 35 milioni di costi e il bilancio è inaccessibile” (sic) sia un sottotitolo all’interno di “Governo, M5S: non diamo liste di nomi” marcata con <h1>.

Sito de il Fatto Quotidiano (03/04/2013). Elementi h annidati.

Così come la notizia marcata con <h3> “Alla Bufalotta tra lamiere e teche” non è per niente un sottotitolo interno a “Il Fatto Quotidiano TV“, marcato con <h2>.

Il Fatto Quotidiano. Elementi h annidati.

Il Fatto Quotidiano. Elementi h annidati.

Ovviamente, il mancato rispetto della semantica di quegli elementi rende la navigazione di Giuseppe più confusa ed imprecisa. Con poco lavoro di riorganizzazione della struttura della pagina la navigazione potrebbe essere chiara e semplice anche per un non vedente, che mi sembra una bella cosa.