Siti accessibili

Questo articolo fa parte di un corso gratuito di accessibilità web ospitato su questo sito.

Navigando per la rete, la probabilità che un sito sia veramente accessibile è oggi piuttosto scarsa. Molti sono i tranelli che rendono un sito non accessibile, ma i più comuni sono:

  • immagini e mappe senza l’attributo alt
  • etichette dei link poco significative
  • colori con poco contrasto
  • dimensioni di font piccole e non personalizzabili dal lettore
  • uso esagerato di animazioni (soprattutto Flash)

Non sempre è facile costruire un sito completamente accessibile, poiché tante sono le variabili da tenere in considerazione e non esistono software o servizi che automatizzino completamente il processo.

Questa non è comunque una scusa valida per abbandonare la costruzione di un sito accessibile. La maggior parte delle linee guida che rendono un sito sufficientemente accessibile sono facili da includere, soprattutto se stiamo progettando un nuovo sito.

Tipici casi di siti non accessibili

Vediamo come progettare un sito perché NON sia accessibile. Si tratta di alcuni esempi trovati per caso in rete durante la normale navigazione. Nostra intenzione non è quella di criticare questi siti, incolpevoli protagonisti della nostra prova, anche perché siamo sicuri che ce ne siano sicuramente altri, meno accessibili di questi.

Camera di commercio di Belluno [nuova finestra]

Il sito presenta numerose lacune che ne pregiudicano l’accessibilità. Tra le altre cose:

  • titolo – La pagina è senza titolo (tag title). Un utente dotato di software di sintesi vocale potrebbe dover aspettare minuti prima di capire in quale sito è capitato
  • immagini e testo alternativo – Le immagini del menu (La Camera, I servizi, Agenda, ecc.) non dispongono del tag alt. Un software di sintesi vocale non sarà mai in grado di aiutare a capire dove punta il link
  • applet – A fondo pagina compare un’applet Java con del testo scorrevole. Anche in questo caso non c’è modo, per un software di sintesi vocale, di “leggere” il testo che scorre

Barra di navigazione senza titolo
Mancano gli alt alle immagini

Federazione italiana sport equestri [nuova finestra]

In questo caso osserviamo un esempio di form non accessibile:

  • colore – I campi in rosso sono obbligatori, ma una persona affetta da daltonismo non sarà in grado di capire quali campi deve compilare e quali, invece, può tralasciare. Molto meglio mettere i campi obbligatori in grassetto oppure evidenziarli con un’immagine
  • accesso ai campi – Se provate a premere il tabulatore vi accorgete che dovete insistere per un bel po’ di volte prima che il cursore si posizioni nel primo campo della form. Non è un limite esclusivo delle form, ma di tutta la navigazione. È bene dare la possibilità di “saltare” tutti gli elementi di navigazione usando una combinazione di tasti
  • compilazione dei campi – In caso di dato mancante viene presentata una schermata con l’elenco degli errori e la possibilità di tornare alla pagina precedente. Questa soluzione ha due svantaggi:
    1. richiede di tornare indietro, quando la form potrebbe essere riproposta su questa stessa pagina
    2. è facile dimenticarsi qualcuno degli errori commessi; l’errore dovrebbe comparire in corrispondenza dei dati errati all’interno della form, con un sommario in testa alla pagina, così il software di sintesi vocale è il grado di leggerli per primi

Form con i campi obbligatori in rosso
Elenco di errori nella form

Provincia di Bolzano [nuova finestra]

  • alt text e testo – Qui il problema comincia dalla spash screen, poiché un software di sintesi vocale non ha la possibilità di distinguere tra le varie lingue; non rimane che provare a caso
  • organizzazione dei contenuti – Una volta entrati nel sito, ci si trova davanti un enorme elenco di link che scoraggia anche i più avventurosi. Sono presenti degli alt, purtroppo mancano ancora per i titoli delle sezioni, dove la loro presenza è fondamentale
  • grafica – Le etichette di testo nella parte bassa dello schermo sono ottenute applicando un effetto anti-alias troppo marcato e sono poco leggibili

Splash screen senza alternative
Pagina fitta di elenchi
Footer con anti-alias troppo marcato

Virgilio Mappe [nuova finestra]

  • alt text nelle image map – La mappa d’Italia non porta i nomi delle regioni né nell’immagine, né negli alternative
  • uso della tastiera – attenzione anche se scrivete il nome di una zona nella form e premete invio. Dovete in realtà spostarvi espressamente sul pulsante “cerca” perchè la ricerca funzioni correttamente

Mappa dell'Italia senza alt

Holden Lab [nuova finestra]

Il sito della scuola Holden, benché sia una cornucopia di contenuti, soffre di diversi problemi di usabilità ed accessibilità:

  • navigazione – La barra di navigazione sinistra, oltre che essere una serie di immagini, è anche poco chiara concettualmente. Da evitare metafore sulla quali l’utente si interroga ogni volta
  • trascrizioni – La recensione dei libri è presente solo come file sonoro, mentre riteniamo fondamentale la presenza di una trascrizione del testo.
  • file sonoro – Il caricamento del file sonoro lascia a desiderare. Richiede Flash e l’utente non può scegliere di rinunciarvi: viene caricato insieme alla scheda del libro.
  • tabelle e colori – La tabella con brevi spunti per i libri (da ridere, da regalare, ecc.) non è accessibile: un software di sintesi vocale non è in grado di distinguere tra voci selezionate (con sfondo arancione) e non selezionate.

Navigazione con titoli emblematici: arcipelago, immersioni, porto di mare
File sonoro senza trascrizione
Tabella non accessibile con sfondo arancione

Come costruire un sito accessibile

La costruzione di un sito accessibile ne interessa l’intero cicla di vita, dalla progettazione alla manutenzione. Vediamo in breve cosa va tenuto in considerazione in ogni fase.

Information Architecture

In questa fase vengono realizzati gli schizzi, i percorsi di navigazione, la nomenclatura per i menu e le etichette. Siamo in un momento in cui l’accessibilità va a braccetto con l’usabilità. L’information architect deve assicurarsi di:

  • scegliere una nomenclatura non ambigua, chiara e semplice da ricordare
  • realizzare un percorso di navigazione efficiente
  • prevedere una struttura di pagina modulare, con spazi tra le sezioni e ampia rilevanza data al contenuto “utile”

Visual Design

Visual designer è chi parte dagli “schizzi” preparatori e realizza i template grafici necessari per la costruzione dell’Html. In questa fase accessibilità significa:

  • scegliere colori con sufficiente contrasto tra sfondo e contenuto
  • non lasciare che il colore da solo porti con sé un carico informativo, come l’evidenziazione di una sezione o l’obbligatorietà di un campo in una form
  • privilegiare dove possibile il testo alle etichette grafiche
  • prevedere soluzioni “ridondanti” per soddisfare il maggior numero di utenti:
    • grafica unita al testo (soprattutto per le image map)
    • descrizione di testo per grafici ed elementi complessi
    • spazio per trascrizioni di filmati ed audio
  • realizzare una guida di stile che spieghi come è stato realizzato il design e gli standard impiegati e consegnarla a chi si occuperà della manutenzione del sito una volta avviato

Product Design

È il lavoro “dell’htmlista”: tradurre i template grafici nella struttura Html.

È la fase in cui le politiche di accessibilità entrano prepotentemente. Qui sono usati i tag e gli attributi che consentono di migliorare l’accessibilità di un sito:

  • completare immagini e image maps con il testo alternativo
  • creare form con ordine di tabulazione corretto e tasti di scelta rapida
  • creare tabelle arricchite di contenuto per i sintetizzatori vocali
  • creare pagine conformi agli standard (X)Html
  • verificare la conformità agli standard con software di controllo
  • sforzarsi di usare i Css per tutte le esigenze di layout della pagina. Se questo non è proprio possibile, utilizzare i Css almeno per i font e gli sfondi
  • usare tipi di misura per i font che consentano all’utente di dimensionare i caratteri (FucinaWeb usa “small“, “medium“, “large“, ecc.
  • sforzarsi di creare pagine visualizzabili in tutti i browser, senza però pretendere che il risultato sia perfetto per ogni piattaforma
  • permettere all’utente di saltare gli elementi della navigazione premendo un link
  • realizzare una guida di stile relativa alle soluzioni adottate da consegnare a chi si occuperà della manutenzione del sito

Programmazione

È la parte di “ingegnerizzazione” del sito. Dove necessario, vengono prese le pagine realizzate nella fase di “Product Design” e rese dinamiche attraverso la comunicazione con database o sistemi di “Content Management“. È opportuno:

  • privilegiare soluzioni server side rispetto a soluzioni client side. Con una soluzione a livello server (Asp, Php, Jsp) è possibile inviare una pagina (X)Html al client. Utilizzando degli script lato client si rischia invece che il contenuto non sia accessibile (ad esempio perché un sintetizzatore vocale non è in grado di leggere quanto presentato sulla pagina)
  • applet e plug-in realizzati devono anch’essi essere dotati di un’interfaccia accessibile

Contenuti

Anche chi si preoccupa di fornire il materiale del sito deve avere le politiche di accessibilità ben chiare in testa:

  • cambiare lo stile di scrittura: paragrafi succinti, divisione in punti dei concetti, per prime le informazioni più importanti
  • evidenziare con attributi opportuni (lang) le parole straniere
  • scegliere efficacemente le etichette per i link
  • informare se un link si apre in nuova finestra
  • sottotitolare i filmati e rendere disponibili trascrizioni delle tracce audio
  • produrre contenuti alternativi per la grafica ed arricchire le tabelle per aiutare i software di sintesi vocale
  • creare una guida di stile per le parole da usare, le forme verbali, la suddivisione dei capitoli

Test

È fondamentale provare in situazioni diverse il sito per verificarne l’accessibilità:

  • con più browser (anche di testo)
  • senza Css
  • dimensionando i caratteri
  • con software di sintesi vocale
  • usando software che misurano l’accessibilità, come Bobby e A-prompt
  • provando a “linearizzare” le tabelle

Manutenzione

L’accessibilità non è un rimedio, ma un processo che continua anche durante la produzione di nuovi contenuti e la modifica del sito esistente. Tutto quanto è stato detto per le fasi precedenti si applica anche alla fase di manutenzione del sito, dopo cioè il suo rilascio.

Come migliorare l’accessibilità di un sito esistente

Ne abbiamo già parlato: non sempre siete nella fortunata ipotesi di creare un sito da zero e di progettarlo con soluzioni accessibili. Molte volte interverrete su un sito già avviato. Cerchiamo di vedere quali sono i punti di intervento realisticamente possibili, fermo restando che ogni sito si sottoporrà più o meno a questi interventi.

Modifiche a basso impatto sul sito esistente

  • contenuto alternativo per immagini, image maps e tabelle
  • inserire i tasti di scelta rapida (shortcut) nelle voci di menu
  • stile editoriale consono per i nuovi contenuti (con descrizioni efficaci dei link)
  • realizzazione di trascrizioni e sottotitoli per i nuovi contenuti (costoso)
  • rendere accessibili le form inserendo dove necessario l’ordine di tabulazione e i tasti di scelta rapida

Modifiche a medio impatto sul sito esistente

  • aumento del contrasto di colore dove necessario
  • modifica dei caratteri nei fogli stile per aumentare la leggibilità e consentire il dimensionamento
  • stile editoriale consono per tutti contenuti
  • realizzazione di trascrizioni e sottotitoli per tutti i contenuti
  • possibilità di saltare la navigazione persistente

Modifiche ad alto impatto sul sito esistente

  • sostituzione degli script lato client con programmi lato server
  • realizzazione di una navigazione intuitiva ed efficace
  • uso relativo delle tabelle di layout o sostituzione con Css

Il difficile compromesso tra accessibilità e compatibilità

Nel realizzare un sito accessibile, dovete operare delle scelte. È inevitabile che non riusciate nello stesso tempo a costruire un sito accessibile e garantire a tutti i browser una visualizzazione ottimale dei contenuti. A prima vista sembra un controsenso, ma basta un esempio per rendersene conto.

Per realizzare un sito accessibile dovreste abbracciare i Css per la realizzazione degli elementi di layout e sostituirli in questo alle tabelle. Così facendo, però, penalizzate gli utenti che non dispongono delle ultime versioni dei browser. In altre parole: aumentate l’accessibilità per una parte del vostro pubblico, penalizzandone un’altra.

Nel medio periodo, con l’adozione massiccia degli standard, questa situazione si andrà risolvendo. All’oggi siamo però ancora nella fase del dubbio. È certamente possibile, utilizzando tecnologia lato server, creare diverse versioni del sito in base al browser dell’utente, ma quasi sempre, a meno di siti con poche pagine, si tratta di una soluzione complessa e dai costi elevati.

All’oggi vale probabilmente ancora la pena di utilizzare le tabelle con il layout, tenendo però questo tipo di tabelle il più possibile fuori dalla parte di contenuti del sito. Domani, quando potrete dare sfogo all’uso dei Css, cambierete la navigazione e l’intelaiatura della pagina, ma interverrete in modo minimo sui contenuti.

Usare soluzioni ad interim

Il supporto dei tag accessibili da parte dei browser e dei software di riconoscimento vocale è solo parziale. Attributi come longdesc sono al momento ignorati, altri come acronym sono visualizzati efficacemente solo da Netscape e Mozilla. Non basta quindi utilizzare tag accessibili, ma inserire espliciti riferimenti che aumentino l’accessibilità.

Fino a quando il browser non aiuterà il lettore, è anche necessario arricchire il testo per avvertirlo quando un link si apre in una nuova finestra, completare i campi delle form con del contenuto fittizio (perché alcuni software di sintesi vocale non considerano un campo quando è vuoto), separare link adiacenti (non solo con spazi).

Nelle puntate pratiche del corso, vedremo anche questo.

Photoshop 7: ecco le novità

A poco più di un anno dalla commercializzazione di Photoshop 6, Adobe lancia la versione 7, che si presenta con interessanti miglioramenti per velocizzare l’editing delle immagini.

L'ambiente di lavoro di Photoshop 7

Vediamo alcune novità:

  • Preset Size – Si trova nella finestra di creazione “Nuovo File” e propone dei valori prefissati, come le dimensioni di un foglio A4 oppure di un banner web
  • Window Tool – A questa barra orizzontale, già presente nella versione 6, è stata aggiunta la possibilità di impostare delle preferenze per ogni “attrezzo” e salvarle con un nome, così da risparmiare tempo quando un lavoro richiede un continuo cambio di strumento
  • Stroke Thumbnail – La lista dei pennelli comprende ora un’anteprima grafica che ne illustra la resa sul nostro disegno.

Anteprima con il contenuto di file di una cartella

Molto interessante è la possibilità di vedere un’anteprima contentente le immagini di una cartella e compiere da qui alcune operazioni di base, come la rotazione dell’immagine, la sua apertura e la possibilità di associare un livello di importanza (Rank) con cui poi ordinare i file.

Queste sono alcune delle funzioni base portate su Photoshop 7: sul sito di Adobe trovate ampio risalto al prodotto e una spiegazione dettagliata delle nuove caratteristiche [nuova finestra].

Inserito alle 19.19.28 »permalink«

Da Photoshop ad Html – Lo Slice Tool

Photoshop è un software di fotoritocco molto flessibile e articolato, nato per l’elaborazione fotografica.

Negli ultimi tempi, soprattutto con l’avvento di Internet, si è sempre più rilevato un ottimo “strumento di lavoro” per i designer Web.

Photoshop non solo supporta i principali formati di salvataggio per immagini utilizzati per la realizzazione dei siti Internet (Gif e Jpeg), ma mette anche a disposizione del grafico strumenti che permettono di ottimizzare il suo lavoro in modo rapido e con qualità professionale.

Salvare il layout in un file Html

Tra gli strumenti a disposizione del Web Design, ce n’è uno molto utile e interessante. Questo strumento permette, dopo aver creato un layout grafico di base, di “montarlo” in formato Html, passando così da un file Psd (o Gif o Jpg), direttamente ad un file Html compilato pronto per essere personalizzato.

Nota:
per apprendere e capire al meglio le tre lezioni che seguiranno, si consideri che:

  • il corso parte dal presupposto che sia già stato realizzato un layout grafico di una pagina web. Per questo è possibile scaricare l’esempio Photostop [Zip, 54 Kbyte] utilizzato nelle lezioni
  • la versione di Photoshop utilizzata nelle lezioni è la 6.0 (versione inglese)
  • Photoshop è un programma molto flessibile, per cui è possibile raggiungere lo stesso risultato finale utilizzando strumenti e passaggi diversi. I passaggi utilizzati in questo corso sono quindi indicativi, in quanto lo stesso risultato si potrebbe ottenere in modi diversi.

Il risultato finale

Per capire al meglio le lezioni che seguiranno, è consigliabile vedere il risultato che si vuole ottenere a fine del corso, questo permette di capire meglio le fasi che seguiranno.
Si tratta di una semplice pagina web [nuova finestra] che contiene il logo di Fucinaweb.com in alto a sinistra, una barra di navigazione e un testo iniziale al centro della pagina.

L’uso delle guide

Lo strumento che permette di sezionare un layout grafico e di “montarlo” in Html è lo “Slice Tool“. Prima di iniziare a vedere nel dettaglio questo strumento, è necessario soffermarsi sull’uso delle guide.

Le guide sono un ottimo strumento per delineare in modo perfetto le parti del layout che andremo a “tagliare”.

Per prima cosa è necessario, proprio con l’aiuto delle guide, delimitare e realizzare un supporto che ci permetta di non lasciare spazi “vuoti”, e nello stesso tempo di ottenere un supporto preciso. Per farlo si seleziona l’opzione “Snap” dal menu “View“, in modo che durante la fase del “taglio” le sezioni create vadano automaticamente ad unirsi alle linee guida create in precedenza.

Una griglia creata con le guide
Utilizzando le guide creiamo una struttura che servirà come supporto per permetterci di utilizzare al meglio lo “Slice Tool

Zoom sull'immagine per aumentare la precisione
Per ottenere una precisione più elevata si consiglia di ingrandire l’area di lavoro e di regolare manualmente le linee al layout grafico.

La griglia completa
Questa è la struttura di supporto che abbiamo ottenuto con l’utilizzo delle guide (ingrandisci la griglia in una nuova finestra)

Lo Slice Tool

Una volta realizata la struttura con le guide, è il momento di passare a vedere più da vicino lo Slice Tool.

Lo Slice Tool
Dalla Toolbar di Photoshop selezionare lo “Slice Tool

Partendo dall’alto, iniziamo a delimitare il logo di Fucinaweb.com, lasciando che la selezione si unisca alle linee guida precedentemente delimitate (opzione “Snap” dal menu “View“).

La delimitazione
La prima delimitazione (ingrandisci la delimitazione in una nuova finestra)

Appena viene creata una “Slide Zone“, Photoshop delimita la zona “attiva” di colore azzurro assegnandole un numero sequenziale e creando una seconda Slice Zone di colore grigio, sotto la zona da noi creata.

Photoshop crea automaticamente una seconda “slide” per compensare il primo “taglio” che abbiamo fatto al layout, in quanto ogni parte del layout grafico deve essere “tagliata”. Se alcune parti del documento non vengono tagliate con lo Slice Tool, Photoshop taglia l’immagine creando degli spazi (spacer) che permetteranno di “riempire” la tabella durante il salvataggio del documento in Html.

Procediamo, di seguito, delimitando tutte le altre zone di nostro interesse

Le aree pronte per il taglio
Le aree attive, di colore azzurro, rappresentano il logo della futura pagina web e i quattro pulsanti della barra di navigazione (ingrandisci le aree in una nuova finestra)

Per concludere, delimitiamo a “mano” libera un’area centrare, che sarà riservata alla parte di testo di benvenuto della nostra pagina web. Lo Slice Tool è uno strumento che può essere utilizzato anche a mano libera ma si consiglia, per ottenere un ottimo risultato, usarlo insieme delle guide. All’occorenza è possibile anche ingrandire con lo zoom la “zona di lavoro”, così da ottenere una precisione millimetrica. La numerazione progressiva delle slice ci aiuta affinchè non si formino Slice non voluti.

L'ultima selezione
Questo è l’aspetto finale del nostro layout grafico dopo l’ultima selezione dell’area che conterrà il testo iniziale della pagina web (ingrandisci l’ultima selezione in una nuova finestra)

A questo punto il nostro layout grafico è stato “tagliato”, rispecchiando il più possibile la struttura finale che dovrebbe avere la tabella della nostra pagina web. Di seguito, per rendere più chiara l’idea, vengono mostrate due immagini:

  • una del layout grafico “tagliato” e pronto per essere salvato
  • una della tabella Html generata con Photoshop e con la dimensione del bordo a 1 pixel, così da vedere le celle create dallo Slice Tool.
Layout tagliato
Layout grafico “tagliato”

Pagina Html con le immagini in una tabella Html
Tabella pagina web con bordo a 1 pixel