vai ai contenuti
vai al menu

Regione Piemonte per l'Accessibilità e l'Usabilità



Wcag 2.0 e la presentazione dei contenuti

La rappresentazione del contenuto è un punto fondamentale delle Wcag 2.0 e viene trattata in diverse linee guida.
Prima di addentrarci nei requisiti tecnici forniti dalle linee guida, è bene ricordare che molti dei punti affrontati in seguito possono rivelarsi utili a tutte le categorie di utenti non solo ai portatori di handicap visivi.

Differenti modalità di rappresentazione

La pagina Web deve essere fruibile anche utilizzando divere modalità di visualizzazione, per esempio utilizzando layout più semplici) (Linea guida 1.3).
La struttura di una pagina, può essere determinata anche senza l'utilizzo dei css, per fare questo si possono usare diversi accorgimenti:

  • Le intestazioni comunicano la struttura del documento e sono evidenziate con gli appositi tag (<h1> , <h2> , <h3>...): un contenuto posto sotto il tag <h1> sarà più rilevante di uno posto sotto il tag <h2>;
  • Gli elenchi sono formattati come liste (<ol> , <ul> , <dt>);
  • Nei form i campi obbligatori sono etichettati correttamente; le etichette e i campi sono correlati logicamente (ossia se clicco sull'etichetta il focus passa al campo correlato);
  • Le tabelle di dati sono formattate con il necessario codice di marcatura, ad es. le intestazioni di colonne, righe e tabelle sono contrassegnate, le intestazioni e i riassunti sono disponibili;
  • I contenuti organizzati in tabelle sono linearizzati correttamente; non vi sono celle vuote per le spaziature;
  • Non vi sono istruzioni esclusivamente ottiche o acustiche, ad es. "azionare il pulsante verde a sinistra".

Uno dei metodi per superare questo punto è quello di utilizzare gli elementi già presenti nell' HTML. Per esempio per creare un elenco è inutile utilizzare delle label con dei fogli di stile associati, basta utilizzare il tag <ol> o <ul> e modificare lo stile tramite un css.
Utilizzando questa semplice tecnica possiamo mostrare il contenuto come meglio preferiamo (Es togliendo i punti elenco dagli elenchi), ma nel caso qualcuno non utilizzi i CSS, riuscirà comunque a capire che si tratta di un elenco.

Utilizzo di immagini e colori

I logotipi (testo che fa parte di un logo o di un marchio) sono considerati sempre essenziali e quindi esulano dalle restrizioni di contrasto o di utilizzo.

Altro aspetto importante e messo ben in evidenza dalle Wcag2.0 è il corretto utilizzo dei colori e delle immagini in modo da rendere più semplice la visione dei contenuti da parte di utenti con difficoltà visive. (Linea guida 1.4)
In quest'ottica, il colore non deve essere utilizzato come unica modalità visiva per rappresentare azioni o come unico elemento di distinzione visiva. (punto 1.4.1 livello A)

Contrasto dei testi

Per definire le soglie di contrasto, le Wcag 2.0 utilizzano un nuovo algoritmo di controllo del colore. Queste soglie possono essere verificate utilizzando programmi automatici come Colour Contrast Analiser.

Tabella dei livelli di contrasto
Tipo di testolivello AAlivello AAA
Testo normalerapporto di contrasto almeno 4.5:1Rapporto di contrasto almeno 7:1
Testo grande (18pt o 14pt grassetto)rapporto di contrasto almeno 3:1Rapporto di contrasto almeno 4.5:1
Testo non essenziale: Testo o immagini contenenti testo che sono parti inattive dell'interfaccia, che sono di pura decorazione o non visibiliNessun requisito minimo di contrasto
Logotipi: un testo che è parte di un logo o marchio.Nessun requisito minimo di contrasto

Immagini contenenti testo

Le immagini contenenti testo andrebbero evitate, preferendo ad esse il testo semplice (Livello Tripla A), tranne nei casi in cui l'immagine è personalizzabile secondo le esigenze dell'utente o essenziale per veicolare l'informazione (Livello doppia A). In entrambi i casi, le immagini possono essere usate se sono puramente decorative o dove una rappresentazione particolare del testo è essenziale per il tipo di informazioni veicolate.

Dimensioni del testo

Il testo può essere ingrandito fino al 200% senza l'ausilio di tecnologie assistive e senza perdita di contenuto. Fanno eccezioni i sottotitoli e le immagini contenenti testo (Livello doppia A).

Per la presentazione visiva dei blocchi di testo, deve essere presente una modalità che consegue i seguenti obbiettivi (Livello tripla A):

  • Il colore del testo e dello sfondo possono essere scelti dall'utente;
  • La larghezza non supera gli 80 caratteri;
  • Il testo non è giustificato;
  • Lo spazio tra le righe (interlinea) è ameno uno spazio e mezzo all'interno del paragrafo, mentre lo spazio tra i paragrafi è almeno una volta e mezzo più grande rispetto all'interlinea;
  • Il testo deve essere ridimensionato fino al 200% senza il supporto di tecnologie assistive in modo da non richiedere all'utente di dover scorrere orizzontalmente per leggere una riga di testo in una finestra a schermo intero.

Tutti i punti precedenti possono essere facilmente superati utilizzando in modo adeguato tecniche CSS e Javascript che se correttamente pensate in fase di progettazione non comportano alcun dispendio di tempo. Queste tecniche oltre a rendere fruibili le pagine a chi possiede delle disabilità visive, agevola anche gli utenti privi di disabilità e che per esempio preferiscono visualizzare la pagina con uno zoom maggiore.

Come costruire interfacce utente usabili?

Le WCAG, sin dalla loro prima stesura si sono occupate di come i contenuti vengono presentati all'utente, definendo punti di controllo e tecniche che permettessero a tutte le categorie di utenti di raggiungere l'informazione desiderata. Questi punti tocano aspetti della programmazione web facilmente controllabili come per esempio la differenza di colore o la grandezza dei caratteri e che vanno ad incidere pesantemente sul livello di accessibilità di un sito web.

Cosa succede se un sito è accessibile, ma non usabile?

Prima di tutto bisogna dare una definizione di usabilità:
la normativa ISO/IEC 2001 definisce l'usabilità come "la capacità di un sistema di essere compreso, appreso, utilizzato e attraente per gli utenti quando usato sotto condizioni specificate".
La normativa ISO 9241-11:1998, invece la indica come "Il grado in cui un prodotto può essere usato da particolari utenti per raggiungere certi obiettivi con efficacia, efficienza, soddisfazione in uno specifico contesto d'uso"

L'usabilità ha quindi come obbiettivo quello di garantire un facile utilizzo dei siti web a tutte le categorie di utenti, creando prodotti che siano di facile utilizzo e comprensione. La web usability è un approccio alla progettazione che si pone come obbiettivo quello di rendere i siti web facili da utilizzare anche per utenti finali che non possiedono una formazione specifica ed ha come obbiettivi:

  1. Presentare l'informazione all'utente in modo chiaro e conciso, evitando termini tecnici o specialistici;
  2. Semplificare la struttura del compito;
  3. Organizzare ogni pagina in modo che le azioni siano riconoscibili(Es: tasto home sempre nello stesso posto);
  4. Eliminare ogni ambiguità relativa alle conseguenze di un'azione (es. fare clic su cancella/rimuovi/compra);
  5. Fare in modo che ogni azione compiuta informi tempestivamente l'utente sullo stato della stessa;
  6. Rendere la grafica accattivante ed interessante dal punto di vista visivo attraverso l'uso di diagrammi, tabelle, sezioni informative;
  7. Ridurre, in generale, gli sforzi dell'utente

La web usability viene usata per rendere "trasparente" la tecnologia che sta dietro le pagine web e permettere all'utente di concentrarsi sul compito più che sull'utilizzo. In questi termini si può parlare anche di User-centered design (Disegno centrato sull'utente) ossia un metodo di sviluppo software che tiene conto del punto di vista e delle esigenze dell'utente. Lo User-centered design cerca di rispondere alle seguenti domande:

  • Chi è l'utente che usufruisce del sito?
  • Quali sono i compiti e gli obbiettivi?
  • Qual'è l'esperienza dell'utente con quel sito o con siti simili?
  • Di quali funzioni ha bisogno l'utente?
  • Di che informazioni l'utente potrebbe avere bisogno?
  • Come l'utente pensa che il sito funzioni?
  • L'interfaccia dispone di diversi metodi di input?

Rispondendo alle domande precedenti e seguendo gli obbiettivi della web usability si può progettare un sito facile da usare e che risponde alle esigenze dell'utente.
Ma come posso impostare l'interfaccia utente in modo che risponda a questi requisiti?

La teoria della gestalt

La psicologia della Gestalt (dove la parola tedesca Gestalt significa forma, schema, rappresentazione), detta anche psicologia della forma, è una corrente psicologica riguardante la percezione e l'esperienza che nacque e si sviluppò agli inizi del XX secolo in Germania. Questo ramo della psicologia si occupa di studiare come l'uomo percepisce l'ambiente e gli oggetti, creando schemi e associazioni che apparentemente non esitono.

Le principali regole che emergono da questa teoria sono:

  • Vicinanza

    Oggetti vicini vengono percepiti come una unico elemento. Questo principio può essere usato nella costruzione di interfacce web, avvicinando elementi che vengono considerati simili in modo da creare un'associazione mentale.

  • Similitudine

    Oggetti simili vengono percepiti come una unico elemento. Un classico esempio è quello degli elenchi puntati. Nell'immagine, i punti colorati sono percepiti come collegati sebbene la distanza tra i punti pieni e quelli vuoti sia la stessa.

  • Chiusura

    Le forme facilmente riconoscibili vengono percepite come chiuse o complete anche se, a livello grafico, non lo sono. Questo è uno dei principi più sfruttati nell'impaginazione delle pagine web. Basti pensare alla divisione della pagina in paragrafi, oppure alla divisione stessa dei menù.

  • Figura-sfondo

    Gli oggetti vengono percepiti principalmente per il loro contorno. Se si percepisce una figura principale, il resto viene interpretato come sfondo.

Oltre alle regole sopora citate, bisogna tener conto di altri fattori psicologici, ad esempio l'utilizzo di modelli già presenti e diffusi che, se stravolti potrebbero portare ad un utilizzo non corretto dell'applicativo. (Ad esempio un pulsante con una X disegnata sopra , di solito annulla un'operazione, se noi lo utilizziamo per confermare, potremmo confondere l'utente.)

Tenendo a mente le regole sopra citate, si può costruire la struttura di un sito in modo che risulti efficace e non dispersiva, ma sopratutto che focalizzi l'attenzione sul reale obbiettivo della pagina.

Sitografia

Aggiornamento: maggio 2012

Torna su

stampa la pagina


Torna su


Torna su