Sia in fase di costruzione quando le mie attività sono rivolte al coordinamento di team di sviluppo, sia in fase di verifica quando sono chiamato a effettuare verifiche tecniche di accessibilità, mi scontro sempre su interpretazioni errate e talvolta fantasiose dell’elemento label.

Roberto Scano in questo articolo su webaccessibile.org, parlando di scarse competenze degli sviluppatori per il web, cita proprio le etichette come esempio. Così ho deciso di scrivere un articolo per parlare degli errori di implementazione di tali elementi, perché di tutorial e di guide ce ne sono davvero tante in giro.

Il mio articolo è questo pubblicato su webaccessibile.org.
Buona lettura.

I browser e gli ingrandimenti

Fino a un certo punto della evoluzione dei browser l’ingrandimento del testo è stata una funzionalità standard, l’unica possibile per dare la possibilità agli utenti di ridimensionare il testo a proprio piacere.

I browser non erano così evoluti come oggi e per poter effettuare questo tipo di zoom era necessario che le dimensioni dei font fossero espresse in em, una unità di misura relativa adatta a tale scopo, al contrario delle dimensioni espresse in pixel (px) che invece bloccavano tale possibilità.

Per questo linee guida e best practice su accessibilità e usabilità suggerivano di utilizzare nei progetti web unità di misure relative (em) e non assolute (px).

Ad un certo punto dell’evoluzione dei browser fu introdotta una funzionalità di zoom diversa, in un certo senso innovativa, quella dello zoom di porzioni di pagina. Internet Explorer, nelle sue stravaganti evoluzioni, nella versione 8.0 decise di eliminare la funzione di ingrandimento del solo testo a vantaggio dell’unica funzionalità di ingrandimento delle porzioni di pagina.

Molti utenti ipovedenti, ma anche utenti normo vedenti, non hanno mai gradito lo zoom di pagina per due motivi fondamentali:

1. I testi e le immagini subiscono un degrado della qualità e della definizione che talvolta rende difficile, se non talmente scomodo e in definitiva impossibile, l’accesso al contenuto
2. La pagina ingrandita non è più contenuta dallo schermo del dispositivo e si genera un nuovo scrolling orizzontale che l’utente è obbligato a usare per visualizzare l’intera pagina. Questo effetto introduce due problemi:
   1. Si è costretti a gestire lo zoom orizzontale per completare la lettura di ogni riga di testo; è un’operazione davvero scomoda, basta provare un attimo per rendersene conto. Provoca un continuo spostamento del focus visivo che molti utenti non possono proprio gestire.
   2. La presenza dello scrolling orizzontale non è usuale e la sua presenza, una volta generato, può diventare non immediatamente percepibile. L’utente può perdere consapevolezza che esistono porzioni di pagina nascoste. Per esempio possono diventare invisibili le barre laterali che sono spesso nettamente separate dal resto della pagina.

Ecco quindi che diventa importante, così come richiedono le WCAG2 (e in Italia la legge 4/2004) progettare pagine che supportino l’ingrandimento di solo testo, perché in questo modo viene preservata l’integrità della pagina che rimane (seppure con aspetto diverso) sempre integralmente a disposizione del campo visivo dell’utente.

In questo discorso le tecniche di responsive design, ossia la capacità dei progetti web di adattarsi al dispositivo usato dall’utente, conducono sviluppatori e committenti su due strade opposte: da una parte amplificano la consapevolezza che un progetto web deve “resistere” a ingrandimenti anche molto forti, dall’altra però la somiglianza dei progetti web alle applicazioni per mobile induce a credere che il tutto debba essere sempre immutabile, preciso al pixel e non modificabile.

Come spesso accade la verità sta nel mezzo: garantire correttamente le funzioni responsive senza però introdurre oggetti che impediscono il ridimensionamento dei caratteri.

A questo proposito ho provato a individuare quali sono gli elementi di design che devono essere usati con particolari attenzioni perché potenzialmente portatori di problematiche.

Menù orizzontali (semplici o a più righe)

Sono usati spesso su siti web ricchi di contenuti e contenenti molte sezioni. Le criticità legate ai menù orizzontali sono note ai designer: il numero di voci che possono contenere è limitata e la lunghezza di ogni elemento è talvolta un problema. Spesso gli sviluppatori, per garantire un’adeguata stabilità del menù optano per oggetti bloccati in lunghezza e altezza. Questo implica che ai primi ingrandimenti il testo scivola fuori dal suo contenitore e spesso le voci di menù si sovrappongono.
Quello che segue è il menù superiore del sito http://www.trenitalia.com con alcuni aumenti di solo testo.

Menù orizzontali e altri oggetti dropdown

Le criticità descritte nel punto precedente si amplificano quando i menù orizzontali hanno menù di secondo livello che si aprono a tendina per ogni voce di menù sulla quale si esercita un’azione hover con il mouse. Questi livelli “annidati” soffrono ancora di più del problema dell’ingrandimento del testo anche perché spesso sono generati dinamicamente dai cms e quindi il controllo del contenuto è più difficoltoso. Capita spesso per esempio che il designer che sviluppa il progetto di base ipotizzi voci di menù sintetiche e ottimizzate e poi il content manager (o l’addetto ai contenuti dell’azienda) trasformi la voce di menù in qualcosa di molto più esteso e complesso. Mi è capitato di vedere progetti web nei quali una voce di menù pensata per contenere la parola “Prodotti”, si sia poi trasformata in “I nostri prodotti a catalogo 2016/2017”.

Nell’immagine che segue c’è una pagina del Corriere della Sera, con il suo menù orizzontale e il menù dropdown aperto.

Box (elementi DIV) bloccati in altezza

Forse vi sarete accorti che negli ultimi anni molti progetti web, anziché essere strutturati in colonne verticali (una volta esisteva quasi uno pseudo standard basato su tre colonne, poi più frequentemente a due), sono strutturati a “fette” orizzontali. Tali tipo di layout ha introdotto anche la disposizione dei contenuti a blocchi orizzontali, e spesso i designer optano per bloccare le altezze di tali blocchi onde evitare lo spiacevole effetto che i tre elementi abbiano una estensione in verticale diversa.

Esistono chiaramente tecniche per bloccare le altezze dei box di layout ad altezze predefinite, ma che non impediscono al box di estendersi in verticale qualora lo spazio non sia sufficiente a contenere tutti gli elementi al suo interno. Esiste ad esempio il semplice attributo CSS min-height adatto a questo scopo, ma chiaramente non sempre gli effetti possono essere quelli desiderati.

L’esempio che segue è il sito Vodafone http://www.vodafone.it nella sezione di homepage dedicata alla scelta dello smartphone

Oggetti sliders

Anche gli sliders di immagini e testi in homepage sono diventati in questi anni quasi uno pseudo standard. Di indubbia efficacia comunicativa, sono però oggetti amati e contestati per uno stesso motivo: presentano molto bene un argomento in primo piano, ma allo stesso tempo catalizzano l’attenzione solo su quell’argomento.

I motivi per cui andrebbero usati con molta cautela è invece proprio perché spesso sono oggetti che non si adattano bene al contesto, né alle fasi responsive (visualizzazione nei vari dispositivi) né agli effetti degli ingrandimenti dei testi, che spesso ai primi zoom slittano in zone non visibili all’utente o peggio ancora sforano in aree con immagini di sfondo rendendo il testo non più leggibile.

In questo caso l’esempio riportato è la homepage del sito turistico ufficiale di Roma http://www.turismoroma.it

Icone gestite come immagini (e non da CSS)

Questo è uno dei problemi tipici delle applicazioni web: se le icone sono inserite come oggetto immagine, gli ingrandimenti di solo testo non avranno effetto su di esse. Un esempio su tutti, nell’applicazione Gmail di Google il pulsante stampa per le email è una immagine png, ingrandendo il testo quel pulsante rimane della sua dimensione originale e quindi quasi invisibile per l’utente che ha bisogno di accedere al contenuto in forma più ingrandita.

Pulsanti

I pulsanti sono quasi sempre un elemento fondamentale in un progetto web. Invio di moduli, sottoscrizione di newsletter, call-to-action di ogni tipo, rappresentano il punto di interazione tra il visitatore e organizzazione che sta esponendo i propri prodotti o servizi online, per questo andrebbe posta molta attenzione a tali oggetti.

Può sembrare una banalità eppure proprio questi oggetti soffrono di problemi legati all’ingrandimento dei caratteri. L’esempio che evidenzia questo problema è nell’immagine precedente, l’applicazione Gmail, dove l’unico pulsante presente “SCRIVI”, è quasi invisibile a causa dello scivolamento del testo bianco sul fondo bianco.

Conclusione

Chi sviluppa i progetti web dovrebbe occuparsi di rendere più agevole possibile la navigazione, e chi si occupa di competenze digitali e di formazione dovrebbe invitare e suggerire agli utenti di accedere a queste funzionalità: un semplice ingrandimento di caratteri può migliorare significativamente l’esperienza utente.

Purtroppo queste problematiche rimangono spesso sconosciute, o, peggio, chi ne ha consapevolezza si ritrova a pensare che forse, non sono poi così tanti gli utenti che ne beneficiano e ci si ritrova a sperare che quel CTRL+ (o CMD+ in ambiente Apple) non venga mai utilizzato.

Non è solo una questione etica, è anche una questione di business, perché gli utenti che possono beneficiare dell’ingrandimento dei caratteri sono davvero tanti. Ma chi sono questi utenti? Quella che segue è una lista non esaustiva:

• quelli che definiamo ipovedenti
• quelli che hanno altri problemi alla vista e neanche ce lo immaginiamo
• quelli che hanno dimenticato gli occhiali a casa
• quelli che stanno sotto il sole e non vedono bene il monitor
• quelli che hanno un computer obsoleto la cui definizione è scarsa
• quelli che hanno fatto un ingrandimento 5 anni fa e non sanno più tornare indietro (e non sanno neanche di aver ingrandito le pagine)
• quelli che hanno il monitor distante dalla propria posizione
• quelli che devono sopperire alle inconsapevolezze dello sviluppatore che pensa che un font a 8px sia elegante
• quelli che semplicemente stanno comodi a vedere più grande

Vi lascio con una nota di speranza. Visto che gli esempi che ho portato sono di progetti per il web di grande aziende, potreste essere indotti a pensare che quello che dico sia inapplicabile. Quello che segue è l’immagine della homepage del sito dell’Agenzia per l’Italia Digitale http://www.agid.gov.it e quello di IWA http://www.iwa.it  che, dopo molti ingrandimenti, risultano ancora perfettamente utilizzabili, non si perde nessun contenuto e l’interfaccia utente rimane invariata. Insomma, se si vuole si può.

Ci sono tante cose che riguardano l’accessibilità, e mi riguardano, in questi mesi. Per non perdere traccia delle cose importanti ho pensato di riepilogarle qui. Sui miei canali social poi non mancherò di dare anticipazioni e pubblicare dei promemoria per ogni evento. Ecco la lista delle cose.

webaccessibile.org

Da maggio 2017 sono iniziate le attività per l’aggiornamento e la riorganizzazione editoriale dello storica risorsa online per l’accessibilità webaccessibile.org, edita da IWA, di cui sono il coordinatore. È stato costituito un gruppo di lavoro che porterà a breve ad avere sia un nuovo layout che una nuova impostazione editoriale. Non mancherò di tenervi aggiornati su questo fronte.

Global Accessibility Awareness Day

Il 18 maggio 2017 è la giornata mondiale di sensibilizzazione sull’accessibilità. Avremmo voluto far uscire la nuova versione di webaccessibile.org in questa data ma è stato impossible attivare una pianificazione delle attività con conclusione dei lavori (anche in versione beta) con una tempistica così stringente. Il 18 maggio però, su questo sito, in anteprima, pubblicherò un post sulle ipovisioni, un’analisi di alcune problematiche che spesso rimangono border-line nella progettazione per il web.

Hack-cessibility Days

Venerdì 19 e sabato 20 maggio 2017 si svolge alla Mole Vanvitelliana di Ancona una due giorni dedicata all’accessibilità “Hack-cessibility Days“. Sabato 20 maggio 2017, alle ore 10:30 parlo di accessibilità web “Accessibilità per il web: cos’è, a chi è rivolta e perché è fondamentale per un web di qualità“. Se potete non mancate perché è un evento davvero importante e soprattutto uno dei pochi che si svolgeranno in Italia in occasione del GAAD (descritto nel paragrafo precedente).

ForumPA 2017

Dal 23 al 25 maggio 2017 si svolge a Roma ForumPA 2017. Il giorno 23 alle ore 15:00 si tiene il mio seminario dal titolo “Come vengono percepiti i siti web della PA da parte degli utenti?“. Viaggio attraverso la qualità dei siti web della PA usando la percezione che ne hanno gli utenti.

Webinar: l’accessibilità legata alla User Experience

Il 25 maggio alle 15,30 sarò relatore per Siteimprove di un webinar nel quale parleremo di Accessibilità e User Experience, di utenti e di scelte che oltre ad essere etiche e qualitative, diventano anche un supporto ai modelli di business. Al webinar si parlerà del processo di accessibilità in corso all’Università  LUISS Guido Carli. Il webinar è gratuito e aperto a tutti, basta registrarsi da qui http://go.siteimprove.com/webinar-accessibilita-user-experience

SMAU Bologna 2017

L’8 e il 9 giugno 2017 c’è SMAU Bologna. Il giorno 8 (orario da definire) sarà impegnato in un seminario di presentazione di una importante iniziativa associativa (IWA). Non posso ora rilevarne i dettagli perché appunto verrà presentata in occasione dell’evento. Vi anticipo solo che è una importantissima attività a supporto delle aziende che fanno impresa nel settore digitale. Chiaramente le strategie accessibili saranno uno dei fili conduttori.

Web Marketing Festival

La carrellata di eventi descritti in questa pagina si chiude con il Web Marketing Festival. Si svolge a Rimini il 23 e il 24 giugno 2017. È davvero troppo presto per qualunque anticipazione, ma come si dice in questi casi “save the date”. Ci saranno cose interessanti anche qui.

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]

Tra tutti i temi legati all’accessibilità quello delle ipovisioni è forse il meno discusso, quindi è davvero interessante questo lavoro del W3C. Nei prossimi mesi cercherò di approfondire alcuni aspetti che sono fondamentali per garantire quella necessaria inclusione digitale di cui sempre si parla.

Un esempio in anteprima su tutti. Il pulsante “Aggiungi agli amici” di Facebook non è accessibile, il contrasto di colore tra testo e sfondo non è sufficiente. Infatti una mia amica ipovedente non riusciva a capire come si facesse ad aggiungere gli amici su Facebook. Chiaramente non era un problema suo, ma non riusciva proprio a vedere il pulsante, le sembrava un oggetto verde indefinito.

Come spiego nell’articolo su webaccessibile.org le persone coinvolte in problemi di ipovedenza sono davvero numerosissime, più di quelle che si possa immaginare.

Buona lettura.

Se la fotografia dell’Italia digitale (indice DESI) è da anni pessima, il cuore del problema è soprattutto nella scarsa consapevolezza che si ha della reale capacità di dare peso a ciò che il digitale può rappresentare. Spesso nelle aziende diventa un “ramo d’azienda” con quel testardo uso della parola “anche” prima di “digitale”. Così, facciamo ancora leggi che si applicano di qua, di là e “anche” nel mondo digitale; editiamo libri “anche” digitali; vediamo prodotti “anche” online; paghiamo servizi “anche” online; produciamo documenti “anche” in formato digitale e così via per tutte le attività che ci interessano.

Soffrire perennemente di “sindrome da incompetenza digitale” genera notevoli problematiche. Decisori che non hanno strumenti per decidere e valutare, fornitori che si lanciano nel mercato con prodotti e servizi talvolta improponibili; assistiamo inoltre alla nascita di una pletora di presunti esperti nelle più astruse professionalità, che, chiaramente, diventano guru di qualunque cosa abbia una base digitale.

C’è una sequenza del film di Nanni Moretti Sogni d’Oro che mi piace citare:

“Parlo mai di epigrafia greca? … io non parlo di cose che non conosco”

Il video della sequenza è qui.

È bellissima questa apologia del tuttologo, che spostata dal cinema al digitale conserva tutta la sua ironica verità.

Non esistono tuttologi, non esistono i webmaster, non esistono gli esperti di internet, non esistono gli esperti di informatica in generale.

Esistono competenze digitali ben definite. Esistono profili professionali operanti nel web che sono stati anche normati da UNINFO. Qui  ulteriori dettagli.

Parlavo di processi di semplificazione già nel 2008, e già allora si metteva in luce la necessità di non semplificare al ribasso: “Semplicità non significa togliere qualcosa, ma eliminare il superfluo e dare maggiore enfasi alle cose che contano.” Purtroppo, spesso, col menù “panino” si nasconde ciò che è significativo.

]]> https://blog.fabriziocaccavello.it/usabilita-e-licona-panino/feed/ 0 https://blog.fabriziocaccavello.it/accessibilita-offline/ https://blog.fabriziocaccavello.it/accessibilita-offline/#respond Sun, 15 Nov 2015 14:36:19 +0000 http://www.fabriziocaccavello.it/?p=6211 Basta avere una scarpa ortopedica e cercare di fare 10 passi riabilitanti per rendersi conto che gli standard a cui si è abituati si stravolgono: tempi, spazi, ostacoli. Un mondo diverso per me provvisorio, per altri permanente, su cui si dovrebbe riflettere di più.

Quando si creano i servizi per poi utilizzarli nelle fatture, gli importi vanno scritti con il punto come separatore decimale. Ossia, si deve scrivere €30.50 e non €30,50, nella forma numerica americana insomma. Se si sbaglia c’è un alert. Mi chiedo: cosa impedisce a chi ha costruito l’applicazione di fare automaticamente la trasformazione? Visto che tecnicamente il problema è stato individuato per mostrare l’alert, perché dare all’utente l’onere di modificare il dato? E poi ancora, se proprio deve essere l’utente a cambiare la sua modalità di scrivere i numeri, che senso ha dargli un avviso come questo?

Quale significato può avere per l’utente una informazione espressa in questo modo? Cosa significa nel mondo reale che il numero deve essere compreso fra 4.9E-324 e 1.7976931348623157E308 ?

Il terzo incontro della Consulta Permanente dell’Innovazione si è svolto il 21 maggio 2013 presso la Sala Mercede della Camera dei Deputati.

Un incontro molto interessante, promosso come al solito dall’associazione Stati Generali dell’Innovazione (SGI), a cui IWA aderisce, che aveva come obiettivo quello di presentare la Carta d’Intenti per l’Innovazione e di condividerla con i parlamentari che nei prossimi mesi potranno rappresentare queste istanze all’interno degli iter parlamentari di riferimento.

Continua a leggere sul blog IWA.

Sia io che Luca Filippetti domenica 28 aprile alle 13,00 inizieremo quello che abbiamo definito in anteprima “Social Media Tasting Team“, ossia seguiremo la passeggiata enogastronomica in modalità social, cercando di interagire anche con altri utenti con l’obiettivo di raccogliere informazioni, suggestioni, commenti in uno Storify finale.

Cercheremo anche di capire come organizzarci per la versione ufficiale di Orvieto Con Gusto, che si terrà come ogni anno a Ottobre, in realtà abbiamo già in mente delle azioni social molto interessanti. In questi giorni verificheremo se fattibili.

Per ora quindi seguite l’hashtag #orvietocongusto. Se potete seguiteci realmente durante la passeggiata.

L’appuntamento è, ovviamente, con l’antipasto :)