Principio 1: PERCEPIBILE, linee guida 1.3 e 1.5

SEPARARE LA PRESENTAZIONE DAL CONTENUTO

Linea Guida 1.3 – Le informazioni, la funzionalità e la struttura sono separabili dalla presentazione. 

Test di verifica di successo Livello 1 per la Linea Guida 1.3

1. ciò che segue può essere derivato con programma utente (per esempio attraverso un markup o un modello di dati compatibili con tecnologie assistive) dal contenuto, senza richiedere una interpretazione della presentazione da parte dell’utente:
   1. tutti gli elementi gerarchici e le correlazioni, come ad esempio le intestazioni, i paragrafi e le liste
   2. tutte le relazioni non gerarchiche fra elementi, come ad esempio riferimenti incrociati e collegamenti, associazioni fra etichette e controlli, associazioni fra celle e intestazioni, ecc.
   3. tutte le enfasi
2. l’intera informazione presentata attraverso il colore è anche disponibile senza l’uso del colore (per esempio attraverso contesto o markup o con una codifica non dipendente dal colore).
3. il contenuto testuale non viene presentato sopra una immagine di sfondo o un pattern OPPURE il testo è facilmente leggibile quando la pagina è vista in bianco e nero (senza scala di grigi).

Test di verifica di successo Livello 2 per la Linea Guida 1.3

1. l’intera informazione presentata utilizzando il colore è anche disponibile senza colore e senza necessità di interpretare markup.

Test di verifica di successo Livello 3 per la Linea Guida 1.3

1. non c’è un test di verifica per questo livello.

Vantaggi:

Separare contenuto e struttura dalla presentazione consente alle pagine web di essere presentate in modi diversi per incontrare le esigenze e le limitazioni di diversi utenti senza perdere nulla dell’informazione o della struttura. Ad esempio, l’informazione può essere presentata attraverso sintesi vocale o display Braille (testo), la medesima che era originariamente concepita per essere presentata in modo visuale.

Inoltre ciò facilita la resa automatica dell’enfasi degli elementi strutturali e una più efficiente navigazione, con beneficio per persone affette da disabilità cognitive, fisiche, dell’udito e della vista.

Linea Guida 1.5 – La struttura è resa percepibile attraverso la presentazione.

Test di verifica di successo Livello 1 per la Linea Guida 1.5

1. non c’è un test di verifica per questo livello.

Test di verifica di successo Livello 2 per la Linea Guida 1.5

1. gli elementi strutturali presenti si differenziano per aspetto visivo o uditivo, essendo distinti gli uni dagli altri e rispetto al corpo del testo.

Test di verifica di successo Livello 3 per la Linea Guida 1.5

1. le enfasi strutturali sono scelte in modo da essere distinguibili nel diversi maggiori tipi di display visuali (per es. bianco e nero, piccoli display, mono audio playback).
2. il contenuto è costruito in modo da consentire agli utenti di controllare la presentazione degli elementi strutturali, oppure l’enfasi strutturale può essere variata attraverso diversi formati di presentazione.

Nota editoriale: i seguenti item sono techniques e dovranno essere spostati nel techniques gateway [http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-GATEWAY-20030723.html]:

1. per presentazioni visuali, variazioni di font, stile, grandezza e spazio bianco possono essere utilizzati per enfatizzare la struttura.
2. colori e grafica possono essere usati per enfatizzare la struttura.
3. per presentazioni uditive, differenti caratteristiche di voce e suoni possono essere usati per le intestazioni principali, per le sezioni e altri elementi strutturali.
4. se il contenuto è destinato a un particolare gruppo di utenti, e se la presentazione dei contenuti strutturati non è abbastanza distinguibile per incontrare le esigenze dei destinatari, l’integrazione di colori, grafica e suoni, e altri aspetti della presentazione, possono essere utilizzati per enfatizzare la struttura.

Nota sul techniques gateway:
Questo documento è un gateway ai documenti che descrivono le techniques per generare contenuti accessibili utilizzando le diverse tecnologie Web. Include inoltre informazioni per la conformità alle linee guida con tutte le tecnologie. Questo documento è concepito per aiutare gli sviluppatori di contenuti che intendono dichiarare la conformità alle Web Content Accessibility Guidelines 2.0. Tuttavia queste techniques non assicurano la conformità e non rappresentano l’unica via per un autore per produrre contenuti accessibili.

Esempi relativi al cp 3.3:

E’ importante ricordare che gli elementi di tipo <hx> non vanno utilizzati per ottenere esclusivamente un effetto di formattazione del carattere ma per tali funzionalità è possibile crearsi delle classi dedicate nel foglio di stile.

.testogrande {
   font-family: Georgia, “Times New Roman”, Times, serif;
   font-size: 1.3em;
   color: #000;
   background-color: #fff;
   border: 1px solid #000;
   padding: 0px;
}

L’allineamento, i margini e il posizionamento degli elementi nella presentazione di una pagina vanno quindi gestiti tramite fogli di stile. Lo sviluppatore deve comunque garantire la lettura dei contenuti della pagina anche senza l’utilizzo dei fogli di stile, al fine di garantirne l’accesso e la fruibilità agli utenti che utilizzano lettori solo testo (o lettori vocali).

Allineamento: utilizzando ‘text-indent’, ‘text-align’, ‘word-spacing’, ‘font-stretch’ è possibile formattare il nostro testo aumentando/diminuendo gli spazi, definendo l’allineamento, ecc. Utilizzando ‘text-align: center’ sarà possibile eliminare l’attributo ‘center’ oramai disapprovato.

Margini: ‘margin’, ‘margin-top’, ‘margin-right’, ‘margin-bottom’, ‘margin-left’ consentono di definire i margini dell’oggetto (<div>, …) all’interno del quale andremo a fornire i contenuti.

Posizionamento: ‘float’, ‘position’, ‘top’, ‘right’, ‘bottom’, ‘left’ consentono di posizionare l’oggetto all’interno della pagina.

Esempi di codice relativi al cp 3.4:

L’utilizzo di unità di misura di tipo assoluto, come pica (pc), punti (pt), inches (in), centimetri (cm), e millimetri (mm) ha la caratteristica di mantenere sempre la stessa dimensione: un testo che noi consideriamo di dimensioni “normali” potrebbe essere di fatto troppo piccolo per un utente ipovedente o per un utente normodotato ma con tecnologie informatiche (es: schermo ad alte risoluzioni) che rendono di fatto illeggibili i caratteri.
Utilizzando invece dei caratteri con dimensioni di tipo “em” (altezza del carattere di un elemento) o in percentuale, i visitatori del sito web potranno facilmente adattare il carattere alle proprie esigenze.
Ciò comporta da parte dello sviluppatore una fase di test delle proprie pagine simulando tali visualizzazioni e controllando che anche a risoluzioni medio-basse (800×600) con i caratteri molto grandi (e molto piccoli, alcuni preferiscono settare così i caratteri) l’informazione sia fruibile in modo agevole.

body {
   font-family: Georgia, “Times New Roman”, Times, serif;
   color: #000;
   background-color: #369;
   font-size: .9em;
}

a {
   color: #036;
   text-decoration: underline;
   background-color: transparent;
}

.codice {
   font-family: “Courier New”, Courier, serif;
   background-color: transparent;
   color: #666;
   font-size: 0.9em;
}

Techniques per il cp 3.3:

Core Techniques: Structure vs. Presentation
http://www.w3.org/TR/WCAG10-CORE-TECHS/#structure

HTML Techniques: Emphasis
http://www.w3.org/TR/WCAG10-HTML-TECHS/#text-emphasis

CSS Techniques: Text instead of images
http://www.w3.org/TR/WCAG10-CSS-TECHS/#text-not-images

CSS Techniques: Text formatting and position
http://www.w3.org/TR/WCAG10-CSS-TECHS/#style-text-formatting

CSS Techniques: Layout, positioning, layering, and alignment
http://www.w3.org/TR/WCAG10-CSS-TECHS/#style-alignment