Caratteristiche di Accessibilità in SVG

Sintesi

Gli elementi grafici vettoriali ridimensionabili (SVG) offrono numerose caratteristiche che consentono di rendere gli oggetti grafici sul Web più accessibili di quanto sia possibile attualmente e per una più ampia cerchia di utenti. Gli utenti che ne traggono beneficio includono gli utenti affetti da ipovisione, da deficit nella visione dei colori o da cecità e gli utenti che utilizzino tecnologie assistive. Numerose caratteristiche di SVG possono inoltre aumentare la fruibilità dei contenuti per molti utenti che non siano affetti da disabilità, quali gli utilizzatori di assistenti personali digitali, di telefoni cellulari o di altri dispositivi non tradizionali di accesso al Web.

L'Accessibilità richiede che le caratteristiche offerte da SVG siano correttamente utilizzate e supportate. Questa Nota descrive le caratteristiche di SVG che favoriscono l'accessibilità e ne illustra l'utilizzo per mezzo di esempi.

Status di questo documento

Questo documento è una Nota messa a disposizione dal W3C al solo scopo di discussione. La pubblicazione di questa Nota da parte del W3C non comporta l'approvazione da parte del Gruppo del W3C o da parte di alcun Membro del W3C. Questa nota è basata sulla Raccomandazione Candidata [SVG]. Questa Nota viene resa disponibile contemporaneamente alla Raccomandazione Candidata SVG al fine di fornire informazioni su considerazioni relative alla potenziale implementazione.

Questa versione della Nota ha ricevuto la revisione ma non ancora l'approvazione da parte del Gruppo di Lavoro su SVG e da parte del Gruppo di Lavoro sui Protocolli e sui Formati. Questi gruppi, insieme con il Gruppo di Lavoro per l'Educazione e lo Sviluppo, il Gruppo di Interesse della WAI e altri, sono invitati a rivedere il presente documento, in particolare nella fase di Raccomandazione Candidata SVG.

Gli autori prevedono di pubblicare una versione aggiornata della presente Nota al verificarsi di una delle seguenti circostanze:

• Ulteriori revisioni, specialmente da parte dei Gruppi di Lavoro e di Interesse del W3C, indichino che siano necessari cambiamenti.
• Cambiamenti significativi vengano apportati alla specifica SVG.
• SVG diventi una Raccomandazione del W3C.

Si prega di inviare commenti alla mailing list del Gruppo di Lavoro per l'Educazione e lo Sviluppo della WAI w3c-wai-eo@w3.org, che è archiviata in forma pubblica all'indirizzo http://lists.w3.org/Archives/Public/w3c-wai-eo/. Questo documento è stato elaborato come parte della Attività Tecnica della WAI. Un elenco dei correnti rapporti tecnici e pubblicazioni del W3C, incluse le Bozze di Lavoro e le Note, è reperibile all'indirizzo http://www.w3.org/TR.

Sommario

1. Introduzione
   1. Perchè l'Accessibilità?
   2. SVG accessibile?
   3. Come leggere questo documento
2. Equivalenti Alternativi
   1. Title e Description
   2. Equivalenti Alternativi in un Documento Strutturato
3. Elementi Grafici Accessibili
   1. Forme Grafiche di Base
   2. Riutilizzo del Testo Alternativo come Elementi Grafici
   3. Riutilizzo dei Componenti Grafici
   4. Riutilizzo di Componenti da Altri Documenti
4. Controllo della Presentazione
   1. Definizioni di Stile Semplici
   2. Definizioni di Stile mediante le Classi
   3. Stile con Differenti Media
   4. Presentazione di Testo - Font
   5. Presentazione di Testo - Creazione di Font
   6. Definizione di Valori di Stile con Elementi SVG
5. Interazione Accessibile
   1. Eventi indipendenti dai dispositivi
   2. Animazione Accessibile
   3. Collegamenti e Navigazione
6. Adattare il Contenuto all'Utente o alle Impostazioni del Sistema
7. Benefici d'Accessibilità derivanti da XML
   1. Fornire Informazione tramite i Metadata
   2. Utilizzo di SVG con gli Altri Linguaggi XML
   3. Supporto alle Tecnologie Assistive - Modello a Oggetti del Documento
8. Ulteriori Letture
   1. SVG
   2. L'Iniziativa per l'Accessibilità del Web (WAI)
   3. Il World Wide Web Consortium (W3C)
9. Glossario
10. Riconoscimenti
11. Riferimenti

1. Introduzione

1.1 Perchè l'Accessibilità?

Le immagini, il suono, il testo e l'interazione sono tutti elementi che recitano un ruolo nella trasmissione dell'informazione tramite il Web. In molti casi, le immagini giocano un importante ruolo nel trasmettere, chiarire e rendere più semplice l'informazione. In questo senso, la multimedialità favorisce di per se stessa l'accessibilità. Ciò nondimeno, l'informazione fornita sotto forma di immagini deve essere accessibile per tutti gli utenti, inclusi gli utenti dotati di dispositivi non visuali. Inoltre, per avere pienamente accesso al Web, è importante che gli autori affetti da disabilità possano creare contenuti Web, incluse le immagini che fanno parte dei contenuti.

Il contesto lavorativo delle persone con (o senza) disabilità può essere enormemente differente. Molti utenti o autori:

• potrebbero non essere affatto in grado di vedere le immagini o potrebbero avere dei deficit nella visione o nell'udito;
• potrebbero avere problemi nella lettura o nella comprensione del testo;
• potrebbero non essere in grado di muoversi con facilità o di utilizzare la tastiera e il mouse nella creazione o nell'interazione con un'immagine;
• potrebbero utilizzare un dispositivo con uno schermo esclusivamente testuale, o una visualizzazione dello schermo a bassa risoluzione o molto ingrandita.

Una maggior accessibilità delle immagini può andare a beneficio di un'ampia varietà di utenti e di autori che include molte persone che non sono affette da alcun tipo di disabilità ma che hanno necessità simili. Ad esempio, un individuo potrebbe lavorare in un ambiente che richiede l'impegno della vista e quindi potrebbe aver bisogno di un contenuto equivalente audio per quelle informazioni che non sia in condizioni di poter vedere. Gli utenti di piccoli dispositivi mobili (con schermi piccoli e privi di tastiera e mouse) hanno le stesse necessità funzionali degli utenti affetti da alcuni tipi di disabilità. Per ulteriori informazioni sul come le persone disabili utilizzino il Web, fare riferimento a "How People with Disabilities Use the Web" ("Come le persone disabili usano il Web") [USENOTE].

1.2 SVG accessibile?

Gli elementi grafici vettoriali ridimensionabili [SVG] sono un'applicazione del Linguaggio di Marcatura Espandibile (XML) per la creazione di oggetti grafici per il Web. Gli SVG offrono agli utenti disabili molti benefici in termini di accessibilità; alcuni di questi derivano dal modello vettoriale degli elementi grafici, altri sono ereditati dal fatto che SVG è implementato su XML, e altri ancora dalla stessa struttura di SVG, ad esempio, gli elementi specifici di SVG per gli equivalenti alternativi.

Le immagini SVG sono ridimensionabili - possono essere ingrandite e ridimensionate a proprio piacimento dal lettore. La ridimensionabilità può essere di aiuto per gli utenti affetti da ipovisione e per gli utenti di alcune tecnologie assistive (ad esempio, i dispositivi grafici tattili, che normalmente sono dotati di una risoluzione molto bassa).

Il seguente esempio illustra la ridimensionabilità di un'immagine a elementi grafici vettoriali. La prima riga mostra una piccola immagine in formato PNG e una corrispondente immagine in formato SVG, che appaiono identiche. La seconda riga mostra un ingrandimento di entrambe. La versione PNG ingrandita dell'immagine ha subito una significativa perdita di qualità, mentre la versione SVG ingrandita appare gradevole e mostra più dettagli che in precedenza. Gli elementi grafici ridimensionabili possono aiutare gli utenti affetti da ipovisione a percepire un'immagine ad una dimensione che meglio si confaccia ai loro bisogni.

Immagini strutturate

La modalità più frequentemente utilizzata dagli autori per rendere un'immagine raster (ad esempio, le immagini GIF o PNG) accessibile sul Web è quella di fornire un equivalente testuale che possa essere rappresentato con o senza l'immagine. Spesso, questo equivalente testuale costituisce l'unica informazione disponibile per la rappresentazione non visuale, poiché l'immagine raster viene memorizzata sotto forma di matrice di punti colorati, generalmente con nessuna informazione strutturale. L'informazione strutturale può essere aggiunta a qualsiasi immagine sotto forma di metadati, ma il doverla gestire separatamente dall'immagine visibile è cosa noiosa, rendendo meno verosimile il fatto che gli autori la creino e la utilizzino con attenzione accurata. Il formato degli elementi grafici vettoriali di SVG memorizza invece le informazioni strutturali relative alle forme grafiche come parte integrante dell'immagine. Come vediamo più sotto, questa informazione può essere utilizzata dalle tecnologie assistive per aumentare l'accessibilità, specialmente quando quest'informazione strutturale è complementare agli equivalenti alternativi e ai metadati.

Alternative equivalenti

In aggiunta alla struttura dell'immagine, SVG consente le alternative equivalenti - contenuti cui gli utenti possono accedere per aiutarsi nella comprensione di un'immagine. In particolare, SVG consente di includere una descrizione testuale di ciascun componente logico dell'immagine e un titolo testuale per illustrare il ruolo del componente nel contesto dell'intera immagine. Il testo viene considerato largamente accessibile per gli utenti affetti da un'ampia tipologia di disabilità (ad esempio, alcune menomazioni visive e alcune disabilità cognitive) poiché può essere rappresentato sullo schermo, come sintesi vocale, o come Braille senza difficoltà, utilizzando le tecnologie assistive disponibili.

XML - Testo puro

Uno dei maggiori benefici che derivano da XML è che un'immagine SVG è codificata come testo puro. Gli autori possono crearla e modificarla con un elaboratore di testi o con uno strumento di sviluppo XML (esistono altre proprietà di SVG che rendono ciò più facile di quanto dapprima potrebbe sembrare). Un buon numero di popolari strumenti di sviluppo Web sono, di fatto, delle applicazioni per l'elaborazione di testo migliorate e per gli utenti affetti da alcune tipologie di disabilità, queste sono molto più facili da utilizzare. Naturalmente, è anche possibile utilizzare gli strumenti di sviluppo SVG grafici, che richiedono solamente in minima parte la lettura e la scrittura e che sono, quindi, di aiuto per persone affette da altre tipologie di disabilità.

La codifica in testo puro, inoltre, implica che le persone possano utilizzare agenti utente XML testuali relativamente semplici per rappresentare SVG come testo, braille, o audio. Ciò può aiutare gli utenti affetti da disabilità visive e può essere utilizzato come supplemento alla rappresentazione grafica.

XML - Fogli di stile

La separazione dello stile dal resto del contenuto è molto importante per l'accessibilità. Gli autori possono utilizzare i fogli di stile CSS o XSL per controllare la rappresentazione delle immagini SVG, caratteristica questa che è comune a tutti i linguaggi di marcatura scritti in XML. Gli utenti, che potrebbero diversamente essere impossibilitati ad accedere al contenuto, possono definire dei fogli di stile per controllare la rappresentazione delle immagini SVG, che vadano incontro alle loro esigenze senza perdere lo stile addizionale fornito dall'autore.

Impiego Estensivo degli Stili

SVG offre un buon numero di caratteristiche di stile, al di là delle proprietà definite in CSS, per fornire effetti grafici specifici di controllo della rappresentazione delle immagini. Queste caratteristiche di stile possono aiutare gli autori nel creare contenuti che possano facilmente essere adattati alle esigenze di utenti con deficit nella visione dei colori, o di utenti che impieghino tecnologie assistive. Caratteristiche quali la creazione di maschere, i filtri, e la possibilità di definire font altamente sofisticati sono tutte disponibili in SVG.

XML - Interfaccia DOM

Un altro beneficio dell'utilizzo di XML è costituito dal fatto che l'interazione può essere resa accessibile attraverso il Modello a Oggetti del Documento (DOM). L'interfaccia DOM può consentire l'utilizzo di molte tecnologie assistive con le immagini SVG. SVG consente l'accesso sia al contenuto dei fogli di stile sia al contenuto XML poiché utilizza la versione 2 del DOM (DOM2) [DOM2].

XML - SVG con altri linguaggi XML

I documenti SVG possono essere inclusi in documenti scritti in altri linguaggi XML, e possono inoltre includere codice da altri linguaggi XML. Il combinare i linguaggi di marcatura può aumentare l'accessibilità perchè gli autori possono utilizzare il linguaggio di marcatura più adatto a ciascuna parte del documento (fare riferimento alle Linee Guida per l'Accessibilità dei Contenuti per il Web 1.0 [WCAG10], Linea guida 3). Ad esempio, un documento MathML potrebbe utilizzare SVG sia per tracciare delle equazioni che per disegnare i grafici di queste equazioni. Negli esempi seguenti, mostriamo come descrivere dei componenti SVG e le loro relazioni attraverso l'inclusione di metadati RDF e di codice SMIL all'interno di SVG.

1.3 Come leggere questo documento

Questo documento evidenzia le caratteristiche di SVG che favoriscono l'accessibilità. Nelle Sezioni 2, 3, 4, 5 e 6 illustriamo le caratteristiche di accessibilità di SVG (incluso l'utilizzo dei fogli di stile). La Sezione 7 illustra i benefici in termini di accessibilità che derivano da XML.

Questo documento fa ampiamente riferimento ai requisiti di accessibilità specificati nella Raccomandazione delle Linee Guida per l'Accessibilità degli Strumenti di Sviluppo1.0 (ATAG10) [ATAG10], alla Raccomandazione delle Linee Guida per l'Accessibilità dei Contenuti per il Web 1.0 (WCAG10) [WCAG10], e al Documento di Lavoro delle Linee Guida per l'Accessibilità degli Agenti Utente (UAAG10) [UAAG10]. Fa inoltre riferimento, in maniera estensiva, ai Fogli di Stile a Cascata Livello 2 (CSS2) [CSS2]. Il lettore che possieda conoscenze di base di HTML o di XML e di CSS (livello uno o due) dovrebbe essere in grado di interpretare il codice in maniera sufficiente a comprendere il senso degli esempi. Anche senza questa conoscenza, vale comunque la pena di leggere gli esempi per osservare il loro funzionamento - nell'illustrare la progettazione accessibile, in molti casi dimostrano al contempo buone pratiche generali di progettazione.

Per illustrare come creare elementi grafici SVG accessibili, disegniamo il diagramma SVG di una rete di computer, elaborandolo nel corso degli esempi. Gli esempi utilizzano una forte evidenziatura per enfatizzare i cambiamenti fra un esempio e l'altro o le caratteristiche importanti di un esempio.

2. Equivalenti Alternativi

Il fornire equivalenti alternativi per il contenuto non accessibile costituisce uno dei modi principali con cui gli autori possono rendere i propri documenti accessibili alle persone affette da disabilità. Il contenuto alternativo adempie essenzialmente, per gli utenti affetti da disabilità, alla stessa funzione o proposito cui il contenuto primario adempie per gli utenti non disabili. I contenuti equivalenti testuali sono sempre obbligatori per l'informazione grafica (fare riferimento alle [WCAG10], Punto di controllo 1.1, e Linea guida 1 in generale). In SVG, il fornire una gerarchia di contenuti equivalenti testuali può altresì comunicare la struttura gerarchica dei componenti grafici. Questa Nota descrive numerosi modi per includere e impiegare contenuti alternativi equivalenti.

2.1 Title e Description

Il modo più semplice per specificare un equivalente testuale per un elemento grafico SVG, è quello di includere i seguenti elementi in qualsiasi contenitore SVG o elemento grafico:

title

Fornisce un titolo, leggibile dall'utente umano, all'elemento che lo contiene. L'elemento title può essere rappresentato da un agente utente grafico come un tooltip [NdT: finestra a comparsa, associata ad una parola o ad una frase, contenente un messaggio di aiuto o di spiegazione, che appare quando il puntatore del mouse passa sopra tale parola o frase]. Può essere rappresentato come sintesi vocale da un sintetizzatore vocale.

desc

Fornisce una descrizione, più lunga e completa, dell'elemento che lo contiene. Gli autori dovrebbero fornire descrizioni per il contenuto complesso o per altro contenuto che abbia significato funzionale.

Il seguente esempio (2.1) è costituito da un semplice documento SVG che include un title e una description per l'immagine di una rete di computer. I componenti grafici, che possono essere realmente disegnati, saranno aggiunti all'immagine nelle sezioni seguenti.

<?xml version="1.0"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN"
  "http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">
<svg width="6in" height="4.5in" viewBox="0 0 600 450">
  <title>Rete</title>
  <desc>Un esempio di una rete di computer basata su di un hub</desc>
</svg>

2.2 Equivalenti Alternativi in un Documento Strutturato

Un'immagine SVG può essere composta da numerosi componenti combinati gerarchicamente, ognuno dei quali può avere un elemento title e un elemento description. La combinazione della gerarchia e degli equivalenti alternativi può aiutare un utente non vedente nella creazione di un modello mentale approssimativo di un'immagine. Gli autori SVG dovrebbero quindi costruire la gerarchia in maniera tale che rispecchi i componenti dell'oggetto illustrato dall'immagine. Alcune indicazioni sull'utilizzo della struttura possono essere reperite nelle WCAG10 (fare riferimento a [WCAG10], Linee guida 3 e 12).

La gerarchia dei componenti con equivalenti alternativi può essere impiegata in modi differenti da differenti agenti utente. Ad esempio, un semplice agente utente non visuale può fornire accesso alla gerarchia dei componenti e consentire all'utente di navigare su e giù o fino ad un determinato livello della struttura, fornendo la descrizione equivalente di ciascun componente incontrato (fare riferimento alle UAAG10 [UAAG10], Punti di controllo 7.6 e 7.7 e Linee guida 7 e 8). Anche un programma di navigazione standard XML, che non rappresenti SVG sotto forma di elementi grafici, potrebbe far ciò. Un agente utente dotato di funzionalità multimediali potrebbe denominare ciascun componente che sia dotato di un focus attraverso la sintesi vocale, così come alcuni programmi di navigazione Web rappresentano i contenuti alternativi testuali delle immagini sotto forma di tooltip.

Il seguente esempio (2.2) amplia il componente dell'immagine della rete introdotta nell'esempio 2.1, introducendo sei sotto-componenti:

1. Hub
2. Computer A
3. Computer B
4. Cavo A
5. Cavo B
6. Cavo N

Ciascun sotto-componente è incluso come un elemento contenitore (g) con un attributo id ed un elemento equivalente testuale specificato per mezzo degli elementi title e desc.

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN"
  "http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">
<svg width="6in" height="4.5in" viewBox="0 0 600 450">
  <title>Rete</title>
  <desc>Un esempio di una rete di computer basata su di un hub</desc>
<!-- aggiungere qui il contenuto grafico, e anche gli altri componenti -->
  </g>
  <g id="ComputerA">
    <title>Computer A</title>
    <desc>Un normale PC da scrivania</desc>
  </g>
  <g id="ComputerB">
    <title>Computer B</title>
    <desc>Un normale PC da scrivania</desc>
  </g>
  <g id="CableA">
     <title>Cavo A</title>
     <desc>Un cavo a coppie ritorte 10BaseT</desc>
  </g>
  <g id="CableB">
    <title>Cavo B</title>
    <desc>Un cavo a coppie ritorte 10BaseT</desc>
  </g>
  <g id="CableN">
    <title>Cavo N</title>
    <desc>Un cavo a coppie ritorte 10BaseT</desc>
  </g>
</svg>

Una semplice modalità di rappresentazione dell'immagine dell'esempio 2.2 da parte di un agente utente è quella di mostrare i contenuti alternativi sotto forma di testo, come nella seguente figura (2.3). L'Esempio 4.2 nella Sezione 4 mostra come allegare l'informazione stilistica CSS2 [CSS2] agli elementi title e desc dell'immagine. Fare attenzione al fatto che, senza le definizioni di questi elementi, un agente utente non rappresenterebbe niente all'utente.

3. Elementi Grafici Accessibili

Gli utenti che esaminino visualmente le immagini possono scomporle in componenti e in connessioni fra i componenti. L'autore dirige la divisione mediante l'utilizzo di strumenti visuali, quali la vicinanza, i colori, i disegni, le dimensioni e le forme dei componenti. Quando le immagini non possano essere viste chiaramente, dev'essere utilizzata l'altra informazione disponibile. Ad esempio, con certe tipologie di immagini grafiche, gli autori possono fornire anche una struttura dei componenti ben strutturata. Mediante questa, gli utenti possono scoprire facilmente quali elementi grafici sono inclusi in ciascun componente, e quali componenti siano riutilizzati nell'immagine.

Con alcune immagini, l'ordine di rappresentazione potrebbe rendere impossibile seguire una struttura dei componenti logica. In questi casi, la struttura deve essere chiaramente illustrata mediante l'elemento desc. L'informazione strutturale non elimina la necessità di informazione equivalente fornita dall'autore. Può però aiutare un utente ad acquisire una più approfondita comprensione dell'immagine. Gli strumenti di sviluppo posso facilitare gli autori a fornire una buona struttura, che sia facile da comprendere, fornendo vie per visualizzare la gerarchia dei componenti (fare riferimento alle Linee Guida per l'Accessibilità degli Strumenti di Sviluppo [ATAG10], Punto di controllo 3.2).

Il riutilizzo dei componenti consente di risparmiare tempo poiché gli utenti hanno bisogno di esaminare lo stesso componente una sola volta. La possibilità di riutilizzare i componenti strutturati aiuta inoltre gli autori, compresi gli autori affetti da disabilità, poiché la modifica delle immagini diventa più facile da gestire. La struttura di un'immagine può anche aiutare l'autore quando sia utilizzata a scopi di modifica. Questo è un requisito delle Linee Guida per l'Accessibilità degli Strumenti di Sviluppo (fare riferimento a [ATAG10], Punto di controllo 7.5). Poiché i componenti dell'immagine possono includere equivalenti alternativi, è anche possibile elaborare delle librerie di elementi multimediali (fare riferimento alle [ATAG10], Punto di controllo 3.5).

3.1 Forme Grafiche di Base

SVG consente agli autori di creare forme di base familiari quali i rettangoli, i cerchi, le ellissi e i poligoni. La manipolazione di queste forme è spesso più facile rispetto al disegno nello spazio libero (e per questo motivo si tratta di una caratteristica comune degli strumenti di sviluppo delle immagini), e SVG consente di codificare nell'immagine l'informazione relativa alla presenza di un quadrato o di un'ellisse. Ciò consente una facile elaborazione delle immagini in qualità di immagini. Come mostriamo nella sezione 4.1, l'uso dei fogli di stile può quanto meno facilitare l'elencazione della forma di base o delle forme utilizzate nella rappresentazione di un oggetto. Nel seguente esempio (3.1) creiamo la base dello hub per l'immagine della rete. Abbiamo due rettangoli, l'uno dentro l'altro, e un piccolo cerchio all'interno del rettangolo più grande.

<?xml version="1.0"?>
<?xml-stylesheet href="svg-basic-style.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN"
  "http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">
<svg width="6in" height="4.5in" viewBox="0 0 600 450">
  <g transform="translate(10 10)">
    <title>Hub</title>
    <desc>Un tipico hub di rete 10BaseT/100BaseTX</desc>
    <rect width="253" height="84"/>
    <rect width="230" height="44" x="12" y="10"/>
    <circle cx="227" cy="71" r="7"/>
  </g>
</svg>

3.2 Riutilizzo del Testo Alternativo come Elementi Grafici

Le immagini spesso includono del testo o denominano gli elementi presentati nell'immagine. Nei formati raster il testo viene convertito in pixel e non è più disponibile per le tecnologie assistive, ma con SVG il testo è contenuto negli elementi text, che mantengono inalterata la forma testuale. Inoltre, il testo derivante da altri elementi, quali gli equivalenti testuali, può essere riutilizzato. Ciò facilita la gestione del testo, poiché necessita di essere cambiato in un solo punto. Ciò può facilitare gli autori per i quali l'immissione del contenuto sia difficoltosa e fornisce aiuto assicurando che, qualora una porzione del testo cambi, l'altro testo, che da questo dipenda, sia aggiornato automaticamente.

Nel seguente esempio (3.3), aggiungiamo un elemento text all'immagine dello Hub che abbiamo descritto nell'Esempio 3.1. Questo elemento text riutilizza il testo del title dell'immagine dello Hub facendovi riferimento mediante un elemento tref e rappresentandolo come parte dell'elemento text. Un attributo id è aggiunto all'elemento title in maniera tale che vi si possa fare riferimento.

<?xml version="1.0"?>
<?xml-stylesheet href="svg-basic-style.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN"
  "http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">
<svg width="6in" height="4.5in" viewBox="0 0 600 450">
  <g transform="translate(10 30)">
    <title id="hub">Hub</title>
    <desc>Un tipico hub di rete 10BaseT/100BaseTX</desc>
<!-- Riutilizza il testo nell'elemento title -->
    <text x="0" y="-10">
      <tref xlink:href="#hub"/>
    </text>
    <rect width="253" height="84"/>
    <rect width="230" height="44" x="12" y="10"/>
    <circle cx="227" cy="71" r="7"/>
  </g>
</svg>

3.3 Riutilizzo dei Componenti Grafici

SVG consente l'elaborazione e il riutilizzo di componenti grafici. Ciò rende più semplice la comprensione della struttura di immagini complesse poiché i componenti riutilizzabili sono definiti solamente una volta e di conseguenza devono essere esaminati e compresi solamente una volta. Ciò costituisce un aiuto specialmente qualora gli strumenti alternativi per l'esame di un'immagine richiedano un maggior impiego temporale. Gli strumenti seriali di esame dell'informazione (ad esempio la sintesi vocale o il braille) sono stati spesso paragonati al leggere attraverso una cannuccia per la soda. Comprendere il contesto e le relazioni può richiedere molto più tempo di quanto non lo faccia l'esame visuale, poiché si tratta di una metodo di percezione dell'informazione più lento, e il modello mentale delle relazioni deve spesso essere elaborato senza il beneficio di una rappresentazione visuale della struttura.

Anche uno strumento di sviluppo potrebbe utilizzare questa caratteristica per aiutare a creare e modificare elementi grafici mediante componenti standard. Ciò può aiutare gli autori che abbiano difficoltà di precisione nel controllo motorio poiché viene richiesto di disegnare e di scrivere in maniera minore.

Nel seguente esempio (3.5) definiamo un connettore, e ne aggiungiamo alcuni allo hub definito in precedenza:

<?xml version="1.0"?>
<?xml-stylesheet href="svg-basic-style.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN"
  "http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">
<svg width="6in" height="4.5in" viewBox="0 0 600 450">
  <g transform="translate(10 30)">
<!-- Definisce una presa -->
    <defs>
      <symbol id="hubPlug">
        <desc>Una presa 10BaseT/100baseTX</desc>
        <path d="M0,5 h5 v-9 h12 v9 h5 v16 h-22 z"/>
      </symbol>
    </defs>
    <title id="hub">Hub</title>
    <desc>Un tipico hub di rete 10BaseT/100BaseTX</desc>
    <text x="0" y="-10">
      <tref xlink:href="#hub"/>
    </text>
    <rect width="253" height="84"/>
    <rect width="229" height="44" x="12" y="10"/>
    <circle cx="227" cy="71" r="7"/>
<!-- Cinque gruppi, ciascuno utilizzante la presa definita -->
    <g transform="translate(25 25)" id="sock1">
      <title>Presa 1</title>
      <use xlink:href="#hubPlug"/>
    </g>
    <g transform="translate(70 25)" id="sock2">
      <title>Presa 2</title>
      <use xlink:href="#hubPlug"/>
    </g>
    <!-- (e altre tre) -->
  </g>
</svg>

3.4 Riutilizzo di Componenti di Altri Documenti

Le immagini SVG possono includere anche componenti o immagini complete di altri documenti utilizzando il Linguaggio di Collegamento XML [XLINK]. XLink consente una facile costruzione e riutilizzo di librerie di immagini note che possono essere disponibili localmente o sul Web. Per gli autori, ciò significa essere in grado di utilizzare un componente grafico noto anche quando questo non possa essere visto. Per gli utenti che non possono vedere, una libreria di immagini corredate di descrizione o di componenti di immagini può essere utilizzata quale ausilio nell'identificazione di componenti grafici standard.

Il seguente esempio (3.7) aggiunge immagini e simboli dal Web, un elemento text e alcuni elementi grafici alla struttura di rete vista in precedenza.

<?xml version="1.0"?>
<?xml-stylesheet href="svg-style.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN"
  "http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">
<svg width="6in" height="4.5in" viewBox="0 0 600 450">
  <title id="mainTitle">Rete</title>
  <desc>Un esempio di una rete di computer basata su di un hub</desc>
<!-- Disegna il testo. -->
  <text x="0" y="-10">
    <tref xlink:href="#mainTitle"/>
  </text>
<!-- Utilizza l'immagine dello hub e l'informazione dei suoi title e description. -->
  <g id="hub" transform="translate(180 200)">
    <image width="600" height="450" xlink:href="hub.svg"/>
  </g>
  <!-- Utilizza un simbolo di computer esterno. Lo ridimensiona per adattarlo. -->
  <g id="ComputerA" transform="translate(20 170)">
    <title>Computer A</title>
 <use xlink:href="computer.svg#terminal" 
      transform="scale(0.5)"/>
  </g>
 <!-- Usa lo stesso simbolo di computer. -->
  <g id="ComputerB" transform="translate(300 170)">
    <title>Computer B</title>
 <use xlink:href="computer.svg#terminal" 
      transform="scale(0.5)"/>
  </g>
  <g id="CableA" transform="translate(107 88)">
    <title>Cavo A</title>
    <desc>Un cavo a coppie ritorte 10BaseT</desc>
    <!-- Disegna il Cavo A. -->
    <path d="M0,0c100,140 50,140 -8,160"/>
  </g>
<!-- (e gli altri due cavi) -->
</svg>

Prestare attenzione al fatto che non sono stati aggiunti elementi title o desc per i componenti dello hub, poiché questo si riferisce ad un'immagine SVG che già contiene questi elementi, e che possiede un proprio Modello a Oggetti del Documento (non sarebbe questa la situazione se lo hub fosse stato un'immagine in formato raster). In conformità al Punto di controllo 2.1 delle Linee Guida per l'Accesibilità degli Agenti Utente [UAAG10]] questi equivalenti dovrebbero essere resi disponibili all'utente da un'agente utente. Analogamente, ciascun'immagine di computer possiede già un elemento desc definito quale parte dell'elemento symbol cosicché non necessita di essere ripetuto. Ma ciascun computer ha necessita di un title individuale per descrivere il ruolo che ricopre nell'immagine della rete.

4. Controllo della Presentazione

Uno dei temi principali delle Linee Guida per l'Accessibilità dei Contenuti Web è costituito dalla separazione della struttura e dell'informazione dallo stile e dalla presentazione (fare riferimento alle [WCAG10], Punto di controllo 3.3 e Linea guida 3). Quando gli autori separano la struttura dalla descrizione di come questa debba essere rappresentata, gli utenti possono più facilmente adattare la rappresentazione affinché questa vada incontro alle loro necessità. Inoltre, un autore che lavori con un editor grafico può adattare, in fase di sviluppo, la presentazione in modo che vada incontro alle necessità di questi e fornire, in fase di pubblicazione, una rappresentazione differente, così come richiesto dal Punto di controllo 7.2 delle Linee Guida per L'Accessibilità degli Strumenti di Sviluppo [ATAG10].

Il posizionamento degli elementi grafici è talmente fondamentale per la maggior parte delle immagini, da essere generalmente incluso negli stessi elementi SVG, ma i fogli di stile possono essere utilizzati per tutte le altre definizioni di stile.

Esistono alcune proprietà stilistiche che sono peculiari di SVG quali fill, stroke e stroke-width nonché le estensioni per l'utilizzo degli effetti scritti in SVG, ma la sintassi è la stessa. SVG utilizza in maniera importante la versione CSS2 [CSS2] della Cascata, consentendo all'utente l'ultima parola in tema di presentazione.

Nella sezione seguente osserviamo i differenti aspetti della separazione di stile e contenuto in SVG. Iniziamo aggiungendo semplici definizioni di stile agli elementi SVG. Quindi, osserviamo l'utilizzo delle classi per aggiungere più elementi semantici e per raggruppare gli elementi, e per fornire definizioni di stile per differenti media. Infine, illustriamo come SVG consenta agli autori di definire i propri effetti di stile da utilizzare per i font, le maschere, i filtri, i riempimenti, ecc. In questo modo è sempre possibile prevenire la perdita di informazioni importanti che potrebbero diversamente essere confuse con le definizioni di stile.

4.1 Definizioni di Stile Semplici

SVG utilizza la sintassi CSS e le proprietà di XSL per specificare gli effetti di formattazione mediante i fogli di stile. I fogli di stile forniscono all'autore uno strumento per specificare presentazioni complesse, assicurando al contempo che siano soddisfatte le differenti necessità degli utenti legate alla presentazione (fare riferimento alle [WCAG10], Punto di controllo 3.3 e Linea guida 3 in generale e alle Caratteristiche di Accessibilità di CSS2 [CSS-access]).

Sebbene sia possibile specificare gli attributi di stile di specifici elementi, o quali parte di un elemento style, abbiamo scelto di dare dimostrazione soprattutto dei fogli di stile esterni collegati. Le Linee Guida per l'Accessibilità degli Agenti Utente [UAAG10] richiedono che l'utente possa scegliere fra i fogli di stile, inclusi i fogli di stile dello stesso utente e con i fogli di stile esterni, gli autori possono fornire più facilmente un insieme di fogli di stile alternativi. Un foglio di stile esterno o un elemento di stile separato aiutano l'autore a concentrare in un solo luogo i cambiamenti di stile relativi ad elementi selezionati.

Le regole di stile relative all'utilizzo degli elementi o dei selettori delle classi dovrebbero generalmente essere preferite agli stili basati sui selettori di attributo id o agli attributi di stile inseriti direttamente all'interno del codice. Le classi possono essere importanti, ad esempio, qualora gli elementi grafici o le loro combinazioni abbiano differenti significati semantici (vedere l’esempio nella Sezione 4.2). Gli attributi di stile inseriti direttamente all'interno del codice, o gli stili basati su id, indicano che lo stile di ciascun elemento deve essere cambiato separatamente. Sebbene questo possa essere gestito dagli autori per mezzo dei loro strumenti di sviluppo, gli stili inseriti direttamente all'interno del codice sono anche più difficilmente sovrascrivibili per gli utenti con disabilità o con restrizioni nel loro ambiente o nei dispositivi che stanno utilizzando. Ciò è specialmente vero qualora le definizioni di stile illustrino un raggruppamento semantico implicito degli elementi, senza il sostengo di definizioni class.

Se un particolare insieme di proprietà stilistiche inserite direttamente all'interno del codice viene usato in maniera consistente, può essere un buon indizio che l’insieme di proprietà è utilizzato per identificare una classe di oggetti. Gli oggetti dovrebbero invece avere un attributo class appropriato e i fogli di stile dovrebbero essere utilizzati per fornire le informazioni di presentazione.

In SVG, la rappresentazione di default degli elementi grafici consiste in un riempimento nero, cosicché, senza un foglio di stile, tutte le forme rappresentate sarebbero piene e nere. Per evitare ciò, il precedente esempio fornisce un collegamento al semplice foglio di stile presentato nel prossimo esempio (4.1). Contiene semplici definizioni di stile per rappresentare elementi grafici semplici quali rettangoli, cerchi e perimetri.

rect   { fill: white; stroke: black;
         stroke-width: 1
}
circle { fill: red; stroke: black;
         stroke-width: 1
}
path   { fill: white; stroke: black;
         stroke-width: 1
}

Il contenuto degli elementi title e desc potrebbe non essere rappresentato, per default, in varie circostanze. Il seguente esempio (4.2) fornisce un semplice foglio di stile CSS, che può essere utilizzato con un insieme strutturato di alternative testuali, quali quelle nella figura 2.2, per rappresentare il contenuto in forma testuale. I fogli di stile rendono visibili solamente gli elementi title e desc, come in figura 2.2, per rappresentare il contenuto in forma testuale. I fogli di stile rendono visibili solamente gli elementi title e desc, in forma di blocco. Inoltre, l’elemento title, posto direttamente all’interno dell’elemento svg, sarà più grande e più spesso degli altri titoli. La dichiarazione !important viene impiegata dopo ciascuna definizione per assicurare che, quando un utente utilizzi questo foglio di stile, possa sovrascrivere lo stile fornito dall’autore. Il risultato viene mostrato nella sovrastante figura 2.3.

svg   { visibility: hidden !important  }
title { visibility: visible !important }
desc  { visibility: visible !important }
g     { display: block !important }
svg > title { 
  font-size: 120% !important;
  font-weight: bolder !important
}

Per fornire all’utente un’idea di massima delle forme grafiche utilizzate in un’immagine, possiamo utilizzare il seguente foglio di stile (esempio 4.3). Questo rappresenterà i tipi degli elementi grafici comuni in forma testuale fra le rappresentazioni del title e del desc. Possiamo utilizzare i fogli di stile, ad esempio, per fornire alcune informazioni delle forme grafiche utilizzate nello Hub degli esempi 3.1 e 3.2.

Utilizzando solamente i CSS, non potremmo descrivere come le forme sono posizionate fra di loro, ma è possibile creare agenti utenti specializzati che leggano SVG e che descrivano le immagini in termini di forme posizionate al di sopra, al di sotto e all’interno delle altre. Quest’informazione può essere di grande aiuto nell’interpretazione di alcuni tipi di immagini per particolari propositi, ad esempio nella descrizione della costruzione di oggetti semplici.

svg   { visibility: hidden !important  }
title { visibility: visible !important }
desc  { visibility: visible !important }
g     { display: block !important }
svg > title { 
  font-size: 120% !important;
  font-weight: bolder !important;
}
rect:before    { 
  visibility: visible;
  content: "rectangle " !important
}
ellipse:before { 
  visibility: visible;
  content: "ellipse " !important
}
circle:before  {  
  visibility: visible;
  content: "circle " !important
}
path[d ~= z]:before,
polygon:before {
  visibility: visible;
  content: "closed shape " !important
}

4.2 Definizioni di Stile mediante le Classi

Come discusso precedentemente, con le immagini grafiche è spesso necessario, o d’aiuto, utilizzare le classi per aggiungere elementi semantici che possono essere utilizzati con le definizioni di stile. Nel prossimo esempio definiamo l’immagine di un computer per utilizzarla nella rete che stiamo costruendo. Il foglio di stile relativo a quest’immagine utilizza gli attributi class per definire gli stili di vari tipi di componenti dell’immagine. In particolare, la classe outline definisce un perimetro che può essere rappresentato con minimi dettagli grafici. (Definiamo anche un componente, con una classe outline-only, che non viene rappresentato dal foglio di stile di default).

<?xml version="1.0"?><?xml-stylesheet href="svg-style.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN"
  "http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">
<svg width="6in" height="4.5in" viewBox="0 0 600 450">
    <defs>
      <symbol id="terminal">
        <desc>A common desktop PC</desc>
        <g id="monitorStand" transform="translate(35 101)">
          <title>Monitor stand</title>
          <desc>One of those cool swiveling monitor stands 
                that sit under the monitor</desc>
          <rect class="outline-only"  width="80" height="20" x="5" y="0" />
          <path d="m5 0 S 15 10 45 12"/>
          <path d="m85 0 S 75 10 45 12"/>
          <path d="m5 20 L 15 10 S 45 12 75 10 L 85 20z"/>
        </g>
        <g id="monitor" transform="translate(0 -20)">
          <title>Monitor</title>
          <desc>A very fancy monitor</desc>
          <rect class="outline"  width="160" height="120"/>
          <rect class="screen"  width="138" height="95" x="11" y="12" />
        </g>
        <g id="processor" transform="translate(0 122)">
          <title>The computer</title>
          <desc>A desktop computer - broad flat box style</desc>
          <rect class="outline" width="160" height="60" />
          <g id="discDrive" transform="translate(70 8)">
            <title>disc drive</title>
            <desc>A built-in disc drive</desc>
            <rect class="disc"  width="58" height="3" x="12" y="8" />
            <rect class="light" width="8" height="2" x="12" y="15" />
          </g>
          <circle cx="135" cy="40" r="5"/>
        </g>
      </symbol>
    </defs>
    <g id="Computer" transform="translate(180 85)">
      <title>Computer</title>
      <use xlink:href="#terminal"/>
    </g>
</svg>

Il seguente foglio di stile definisce alcuni stili per il computer e i suoi componenti.

/* Stile per il computer */

svg {
  /* Stili di default da ereditare */
  fill: beige;
  stroke: black;
  stroke-width: 0.3}

.outline-only {visibility: hidden}
.light { fill: lightgreen}
.screen {fill: grey}

4.3 Stile con Differenti Media

La rappresentazione delle immagini SVG può essere definita diversamente in funzione dei differenti media. Ciò va a vantaggio dell’accessibilità poiché spesso le persone con disabilità fanno uso di tecnologie assistive. Ad esempio, alcuni medium, quale lo schermo, sono adatti ad elementi grafici ad alta risoluzione, mentre altri medium, quale il braille, sono più adatti ad elementi grafici a bassa risoluzione; alcune persone utilizzano inoltre l’audio al posto degli elementi grafici. Di conseguenza, si incoraggiano gli autori a fornire un’ampia varietà di fogli di stile, pronti a coprire le differenti necessità degli utenti (ad esempio, la riproduzione audio). I CSS possono essere impiegati per fornire un’adeguata presentazione di default per tutti questi differenti dispositivi.

Nel seguente esempio (4.7) estendiamo il foglio di stile presentato nell’ultimo esempio (4.6) per fornire una versione semplificata dell’immagine per medium a bassa risoluzione, quali i dispositivi di impressione, il braille, palmari o dispositivi di proiezione, utilizzando le classi outline e outline-only definite nell’esempio 4.4. L’appropriato insieme di definizioni di stile per questi dispositivi viene selezionato per mezzo delle istruzioni CSS @media [CSS2]. Nella versione semplificata, solamente il testo e il contorno dei componenti grafici saranno rappresentati, mentre le definizioni per il medium schermo utilizzano lo stile di default presentato nel precedente esempio (4.6).

/* Stile per i medium a bassa risoluzione */

@media embossed, braille, handheld {
  svg      { visibility: hidden }
  .outline, .outline-only { 
             visibility: visible;
             fill: none;
             stroke: black;
             stroke-width: 5
  }
  text     { visibility: visible }
}


@media screen {
  
/* Stile per il computer */
}

4.4 Presentazione di Testo - Font

Il testo è importante in termini di accessibilità poiché può essere trasformato in funzione dei differenti sensi mediante l’utilizzo delle tecnologie assistive. In ogni caso, spesso gli autori desiderano controllare la presentazione del testo, ad esempio per scopi di comunicazione visuale e legata al marchio. Nel passato ciò è stato realizzato sul Web rendendo disponibile un’immagine in formato raster del testo desiderato. Invece, SVG permette questo livello di controllo fornendo la possibilità di utilizzare font preesistenti o di crearne di nuovi mediante l’utilizzo degli elementi grafici di SVG. Ciò fornisce agli autori un potente meccanismo per offrire nuovi font sofisticati ed estremamente specializzati. Allo stesso tempo, il testo rappresentato mediante questi font può essere direttamente accessibile da parte degli agenti utente.

Le definizioni di stile sono collazionate assieme e referenziate negli elementi, attraverso le classi piuttosto che utilizzando l’attributo style. Ciò rende più facile per un utente sovrascrivere gli stili relativi a differenti classi di elementi, quando necessario. Ad esempio, gli utenti affetti da ipovisione o da deficit nella visione dei colori potrebbero aver bisogno di sovrascrivere le proprietà stilistiche per poter leggere il testo.

L’esempio seguente utilizza un font denominato BaseTwelve per creare il logo del W3C. Qualora l’utente non disponga del font BaseTwelve, un altro font (in questo caso, quello di default del sistema) sarà utilizzato per rappresentare il testo. Poiché il font è referenziato da una dichiarazione di stile CSS, un utente può anche facilmente sovrascrivere quest'ultima. Ovviamente, poiché questo è un documento XML, un foglio di stile può essere utilizzato anche per rappresentare il contenuto (le lettere "W 3 C") come una rappresentazione basata sul testo.

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN"
  "http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">
<svg width="1.5in" height="1in" viewBox="0 0 150 100">
  <defs>
     <mask id="shadowMask">
       <text class="masktext" transform="translate(-3,-4)">C</text>
     </mask>
     <style type="text/css">
       svg { font:BaseTwelve; font-size:45; stroke-width:1 }
       .w3crect { fill:white; stroke:none }
       .w3cline { fill:black; stroke:black }   
       .bluetext { fill:blue; stroke:blue }
       .masktext { fill:white; stroke:white }
       .shadowtext { fill:black; stroke:black;
                     mask: url(#shadowMask)}    
     </style>
  </defs>
  <g id="w3clogo" transform="translate(10,10)scale(1.2)">
    <title id="logotitle">W3C</title>
    <rect class="w3crect" x="-2" y="0" width="80" height="59"/>
    <g transform="translate(0,47)">
      <desc>W e 3 blu e C bianca con un'ombra</desc>
      <text>
        <tspan class="bluetext">W3</tspan>
        <tspan class="shadowtext">C</tspan>
      </text>
    </g>
    <g transform="translate(-2,0)">
      <desc>Linea al di sotto e al di sopra di W3C</desc>
      <path class="w3cline" d="M0,0H80"/>
      <path class="w3cline" d="M0,59H80"/>
    </g>
  </g>
</svg>

Figura 4.9: Le immagini del logo del W3C nell'esempio 4.8. entrambe con a) BaseTwelve e b) un font sostitutivo.

a)

b)

4.5 Presentazione di Testo - Creazione di Font

Spesso, un particolare font, verosimilmente non disponibile per gli utenti, è quello desiderato per un logo. In SVG un nuovo font può essere definito per mezzo dell’elemento font. Il seguente esempio definisce un font denominato w3clogofont. Include i glifi per i caratteri W, 3 e C. Ciascun elemento glyph possiede un title leggibile dagli utenti e la lettera C ha una descrizione dell’effetto speciale implementato per essa.

Fare attenzione al fatto che nel codice del precedente esempio (4.9), l’effetto speciale dell’ombra era stato definito con una maschera, laddove nell’esempio seguente (4.10), il carattere viene invece definito direttamente. Gli strumenti di sviluppo potrebbero scegliere di utilizzare ciascuno dei due metodi per i font SVG, in funzione di considerazioni relative alle prestazioni. In ogni caso, è importante che il contenuto testuale corrisponda effettivamente al testo richiesto: potrebbe infatti essere possibile ottenere l’effetto maschera posizionando una "C" bianca al di sopra di una nera, ma il contenuto testuale sarebbe allora "W3CC", che è sbagliato. L’utilizzo dei font SVG consente ai designer di creare font estremamente sofisticati o personali, mantenendo al contempo il contenuto in forma testuale.

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN"
  "http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">
<svg width="1.5in" height="1in" viewBox="0 0 150 100">
 <defs>
    <style type="text/css">
       svg { font:w3clogofont; font-size:45; stroke-width:1 }
       .w3crect { fill:white; stroke:none }
       .w3cline { fill:black; stroke:black } 
       .bluetext { fill: rgb(0,90,156); ;stroke:rgb(0,90,156); }
       .whitetext { fill:white; stroke:white }
       .shadowtext { fill:black; stroke:black}             
        glyph    { fill: rgb(0,90,156) }  
    </style>
    <font>
 <font-face id="w3clogofont" units-per-em="55"
          cap-height="39.604" x-height="25"
          ascent="23" descent="12"
          baseline="0" centerline="20" 
          topline="43" mathline="20" horiz-adv-x="2"   
          ideographic="5" hanging="0" />
      <desc>w3clogofont</desc>
      <missing-glyph>
        <text>*</text>
      </missing-glyph>
      <glyph unicode="W" horiz-adv-x="39.1157">
        <title>W</title>
        <path d="M 19.8022,0 L 26.8921,24.105 33.9819,0 39.1157,0 
           L 27.3809,39.604 26.8921,39.604 19.5576,15.0596 
           L 12.2236,39.604 11.7349,39.604 0,0 5.13379,0 
           L 12.2236,24.105 17.0151,7.87262 14.6685,0z"/>
      </glyph>
      <glyph unicode="3" horiz-adv-x="19.9981">
        <title>3</title>
        <path d="M 19.9981,26.893 
           C 19.9981 30.479 19.0445 33.494 17.1377 35.938 
           C 15.2305 38.383 12.7613 39.604 9.73001 39.604 
           C 19.3457 21.466 19.9981 23.992 19.9981 26.893z"/>
<!-- (Fare attenzione al fatto che alcuni dati relativi al percorso sono stati rimossi da questo esempio) -->
      </glyph>
   <glyph unicode="C" horiz-adv-x="20.416">
        <title>C</title>
        <desc>L'ombra di una lettera C rialzata</desc>
        <path d="M 19.306,0 
           C 19.306 0 20.138 5.05597 20.138 5.05597 
           C 20.138 5.05597 17.194 10.688 17.194 10.688
           C 19.953 33.412 20.416 32.513 20.416 32.513z"/>
<!-- Ancora altri dati relativi al percorso... -->
      </glyph>
      <hkern u1="W" u2="3" k="4.207"/>
    </font>
  </defs>

  <g id="w3clogo" transform="translate(10,10) scale(1.2)">
    <title id="logotitle">W3C</title>
    <rect class="w3crect" x="-2" y="0" width="80" height="59"/>
    <g transform="translate(0, 47)">
      <desc>W3C logo</desc>
      <text>
        <tspan class="bluetext">W3</tspan>
        <tspan class="shadowtext">C</tspan>
      </text>
    </g>
    <g transform="translate(-2,0)">
      <desc>line below and on top of W3C</desc>
      <path class="w3cline" d="M0,0H80"/>
      <path class="w3cline" d="M0,59H80"/>
    </g>
  </g>
</svg>

4.6 Definizione di Valori di Stile con Elementi SVG

Poiché la possibilità di controllare la presentazione dell’informazione è così importante in termini di accessibilità, quanto più facilmente gli autori potranno separare l’informazione dalla sua presentazione stilistica, tanto più ciò sarà meglio. SVG implementa questa separazione fornendo un numero di caratteristiche che vengono definite utilizzando gli elementi SVG, ma utilizzate sotto forma di proprietà stilistiche. Ad esempio, nei precedenti due esempi (4.9 e 4.10) abbiamo impiegato una maschera per creare un effetto di stile su di un font e quindi abbiamo dato dimostrazione di un’alternativa che può essere utilizzata come un’ottimizzazione in fase di creazione di un nuovo font. In SVG, possiamo anche definire modelli, profili di ritaglio ed effetti di filtro e quindi utilizzarli in un foglio di stile. Questi effetti, basati su SVG, non possono essere definiti all’interno del foglio di stile, poiché le definizioni richiedono la potenza grafica di SVG.

In questo modo, il ventaglio possibile di effetti stilistici può essere facilmente esteso. Allo stesso tempo, essi possono anche essere chiaramente separati, nell’interpretazione ed elaborazione, dall’informazione rappresentata, così come richiesto dal Punto di controllo 3.3 delle Linee Guida per l’Accessibilità dei Contenuti Web [WCAG10]. Nel seguente esempio (4.11), creiamo alcuni effetti stilistici per il computer definito nell’esempio 4.4, che sono scritti in SVG ma sono utilizzati da un foglio di stile nel processo di rappresentazione. Ciò significa che un utente può sovrascrivere questi effetti con un altro foglio di stile, se necessario, come precedentemente discusso. In quest’esempio abbiamo definito degli effetti gradiente in un documento separato, sebbene sia possibile definirli direttamente all’interno dell’immagine con la quale essi vengono per la prima volta impiegati. In entrambi i casi, essi possono essere riutilizzati in molti documenti, allo stesso modo in cui un foglio di stile o un componente grafico noto e un modello noto possono essere riutilizzati da un altro autore che potrebbe avere grosse difficoltà nella loro creazione.

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN"
  "http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">
<svg width="6in" height="4.5in" viewBox="0 0 600 450">
    <defs>
      <radialGradient id="screenGrad" cx="0" cy="0" r="200">
         <stop class="s100" offset="100%"/>
         <stop class="s0" offset="0%"/>
       </radialGradient>
       <linearGradient id="discGrad">
         <stop class="s100" offset="100%"/>
         <stop class="s0" offset="0%"/> 
       </linearGradient>
    </defs>
 </svg>

Il seguente esempio (4.12) è una versione estesa del foglio di stile presentato nell’Esempio 4.7 che utilizza i gradienti per fornire caratteristiche stilistiche addizionali al computer dell’Esempio 4.4.

/* Alcuni stili per il computer */

#screenGrad .s100 {stop-color:#AAA9A9 }
#screenGrad .s0 {stop-color:black }
#discGrad .s100 {stop-color:beige }
#discGrad .s0 {stop-color:black }

svg {
  /* Stili di default da ereditare */
  fill: white;
  stroke: black;
  stroke-width: 0.3}

.outline-only { visibility: none}
.computer { fill: beige}
.screen { fill: url(style-values.svg#screenGrad)}
.disc { fill: url(style-values.svg#discGrad)}
.light { fill:lightgreen}

5. Interazione Accessibile

Gli utenti devono essere in grado di utilizzare tutte le funzionalità disponibili di un documento multimediale indipendentemente dalle caratteristiche fisiche dell'agente utente o delle tecnologie assistive utilizzate. In particolare, le Linee Guida per l'Accessibilità degli Agenti Utente [UAAG10] richiedono che l'utente possa attivare tutti gli elementi attivi presenti all'interno di un documento. SVG fornisce l'utilizzo del Modello a Oggetti del Documento (DOM) e di eventi indipendenti da dispositivi, entrambi altamente raccomandati.

SVG fornisce inoltre la definizione dichiarativa delle animazioni. Questa offre agli utenti vie migliori per comprendere cosa viene cambiato e come rispetto all'utilizzo dei linguaggi di scripting, quali Javascript o ECMAscript. Ad esempio, è più facile assicurare che un utente possa disattivare le animazioni quando sono rappresentate insieme a contenuto appropriato, il che è importante in termini di accessibilità.

Infine, gli utenti dovrebbero essere in grado di interagire con i collegamenti e gli altri strumenti di navigazione inclusi nelle immagini SVG sia serialmente, mediante l'utilizzo di testi equivalenti, sia spazialmente, con maggior significato visivo.

5.1 Eventi indipendenti dai dispositivi

SVG utilizza il nuovo insieme di eventi fornito da DOM 2 [DOM2], che consente contenuti interattivi indipendenti dai dispositivi. Ciò consente agli autori di SVG di garantire che il contenuto interattivo non si basi sul fatto che l'utente disponga di una determinata tipologia di dispositivo. Delle buone pratiche di sviluppo faranno normalmente ricorso agli eventi focusin, focusout e activate piuttosto che ad eventi specifici, legati a dispositivi, per selezionare o deselezionare un elemento o ancora per attivarlo. Nel nuovo esempio (5.1), l'animazione è azionata da un evento di attivazione, utilizzando differenti parametri in funzione dei differenti tipi di attivazione. La creazione di script indipendenti dai dispositivi è richiesta dai Punti di controllo 9.3 e 6.4 delle Linee Guida per l'Accessibilità del Web [WCAG10].

Un agente utente accessibile consentirà che l'azionamento degli eventi sia generato da un mouse o da altri dispositivi di puntamento (laddove disponibili) così come da tastiera. In conformità alle Linee Guida per l'Accessibilità degli Agenti Utente [UAAG10], Linea guida 1 e specialmente Punto di controllo 1.1, gli agenti utente devono fornire delle modalità indipendenti dai dispositivi per l'attivazione di tutte le funzionalità dell'applicazione e indicare come queste funzionalità siano attivabili (ad esempio, un sistema basato su di un formato testuale potrebbe fornire un "menu contestuale" che elenchi le azioni disponibili per l'utente).

5.2 Animazione Accessibile

L'animazione può spesso rendere più chiara una presentazione in formato grafico o aggiungere un movimento che ne evidenzi, a colpo d'occhio, gli elementi importanti. Ma l'animazione può anche impedire agli utenti di prendere visione di informazioni che le siano adiacenti sulla pagina, così come animazioni con una certa frequenza di aggiornamento possono provocare malesseri o svenimenti in utenti affetti da epilessia fotosensibile. Gli utenti potrebbero inoltre avere problemi nell'effettuare selezioni abbastanza velocemente, se coinvolti dall'animazione. Di conseguenza, le animazioni dovrebbero essere progettate con cautela al fine di non interferire con l'accessibilità o l'usabilità della presentazione. Le Linee Guida per l'Accessibilità dei Contenuti Web richiedono che, fino a quando gli agenti utente non consentiranno agli utenti di bloccare o controllare la velocità di un'animazione, gli autori dovrebbero garantire agli utenti la possibilità di sospendere o arrestare il movimento dei contenuti (fare riferimento alle [WCAG10], Punti di controllo, 3.5, 3.6, 3.8 and 7.3, e Linee guida 3 e 7); le Linee Guida per l'Accessibilità degli Agenti Utente richiedono che le funzionalità a ciò necessarie siano fornite dagli agenti utente (fare riferimento alle [UAAG10] Punto di controllo 1.1, 7.3 e Linea guida 5). Prestare attenzione al fatto che la disponibilità di tali funzionalità è una responsabilità che viene posta principalmente a carico degli agenti utente, piuttosto che degli sviluppatori di contenuti. Anche SVG offre strumenti, quale l'elemento switch, per controllare la riproduzione di immagini contenenti animazioni su medium statici quali i dispositivi di stampa. Esamineremo gli switch nella successiva Sezione 6.

Il modello d'animazione di SVG è stato sviluppato congiuntamente dai gruppi di lavoro su SVG e sulla Multimedialità Sincronizzata (SYMM) ed è basato sulla specifica d'animazione SMIL-Boston [SMIL-animation]. Il modello offre un approccio dichiarativo per la creazione di contenuti dinamici per il Web. In molti casi, quando è richiesta una presentazione non grafica, quest'approccio si rivela più semplice da comprendere ed utilizzare rispetto al modello programmatico utilizzato nei linguaggi di scripting quali ECMAscript o Javascript. Il modello d'animazione ha lo scopo di consentire agli agenti utente di fornire informazioni riguardo a cosa ci si aspetti un'animazione faccia anche quando il dispositivo o l'ambiente di riproduzione non dispongano delle capacità multimediali immaginate dall'autore.

In virtù del fatto di essere basato su XML, SVG offre agli agenti utente un Modello a Oggetti del Documento (DOM), come discusso nella successiva Sezione 7. Gli elementi d'animazione sono inclusi nel DOM e sono di conseguenza direttamente accessibili per gli agenti utente. Poiché gli effetti dell'animazione non producono alcun cambiamento nel DOM, le presentazioni relative ad animazioni possono essere gestite separatamente. Un agente utente non visuale può interpretare la descrizione dichiarativa dell'animazione e rappresentarla nella maniera più adeguata. Le Linee Guida per l'Accessibilità degli Agenti Utente richiedono che un agente utente fornisca tecnologie assistive con accesso al DOM (fare riferimento alle [UAAG10], Punti di controllo 5.1, 5.4 e Linea guida 5 in generale), in maniera tale che le tecnologie assistive possano anche fornire una presentazione appropriata dell'effetto di animazione, quando utilizzate in abbinamento con un programma per la navigazione SVG.

Nell'esempio seguente, facciamo uso dell'animazione per evidenziare il percorso di un messaggio dal computer A verso il mondo esterno o fra il computer A e il computer B. Per alcuni componenti animeremo le proprietà stilistiche del componente stesso; per alcuni altri vorremo anche aggiornare gli equivalenti testuali, cosicché definiremo due simboli con differenti elementi desc e attibuti class, nonché l'effetto d'animazione di scambio fra di essi.

<?xml version="1.0"?>
<?xml-stylesheet href="svg-style.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN"
  "http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">
<svg width="6in" height="4.5in" viewBox="0 0 600 450">
  <title id="mainTitle">Rete</title>
  <desc>Un esempio di rete di computer basata su di un hub</desc>

<!-- Definisce le descrizioni da animare -->
  <defs>
    <symbol id="CableA">
      <desc> Un cavo ethernet 10BaseT</desc>
    <!-- Disegna il Cavo A. -->
      <path d="M107,88c100,140 50,140 -8,160"/>
    </symbol>
    <symbol id="activeCableA">
      <desc>Il cavo ethernet 10BaseT è attivo</desc>
    <!-- Disegna il Cavo A evidenziato -->
      <path class="highlight" d="M107,88c100,140 50,140 -8,160"/>
    </symbol>
<!-- (E analogamente per gli altri cavi) -->
  </defs>
  
<!-- Animazione che illustra i messaggi che viaggiano all'esterno della rete -->
  <animate xlink:href="#ComputerA" attributeName="class"
     to="highlight" begin="id(ComputerA).(activate(2))"
     dur="2s" fill="remove"/>
  <animate xlink:href="#CableAref" attributeName="xlink:href"
     to="#activeCableA" begin="id(ComputerA).(activate(2))(+2s)"
     dur="2s" fill="remove"/>
   <animate xlink:href="#hub" attributeName="class"
     to="highlight" begin="id(ComputerA).(activate(2))(+4s)" 
     dur="2s" fill="remove"/>
  <animate xlink:href="#CableNref" attributeName="xlink:href"
     to="#activeCableN" begin="id(ComputerA).(activate(2))(+6s)"
     dur="2s" fill="remove"/>
<!-- Illustra i messaggi che viaggiano fra il computer A e B -->
  <animate xlink:href="#ComputerA" attributeName="class"
     to="highlight" begin="id(ComputerA).(activate)" 
     dur="2s" fill="remove"/>
<!-- E così di seguito -->
  <!-- Disegna il testo. -->
  <text x="0" y="-10">
    <tref xlink:href="#mainTitle"/>
  </text>
  <!-- Usa l'immagine dello hub e le relative informazioni nel title e nella description. -->
  <g id="hub" transform="translate(180 200)">
    <image width="600" height="450" xlink:href="hub.svg"/>
  </g>
  <!-- Usa il simbolo di un computer esterno. Lo ridimensiona per adattarlo. -->
  <g id="ComputerA" transform="translate(20 170)">
    <title>Computer A</title>
    <use xlink:href="computer.svg#terminal" transform="scale(0.5)"/>
  </g>
<!-- (Usa ancora lo stesso simbolo di computer per il computer B) -->
  <g>
    <title>Cavo A</title>
    <use id="CableAref" xlink:href="#CableA" width="600" height="450"/>
  </g>
<!-- (E analogamente per gli altri cavi) -->
</svg>

5.3 Collegamenti e Navigazione

Con SVG è facile aggiungere collegamenti a varie parti dell'immagine. Ciò viene realizzato includendo il componente grafico all'interno di un elemento. L'elemento a dovrebbe includere un attributo xlink:title che illustra la destinazione di un collegamento; degli appropriati elementi title e desc dovrebbero inoltre descrivere l'oggetto grafico che viene collegato alla destinazione. Le spiegazioni testuali sono molto importanti per gli utenti affetti da cecità o da ipovisione poiché questi spesso navigano attraverso i documenti muovendosi da un collegamento all'altro e leggendo il testo del collegamento o il suo equivalente testuale. E' quindi importante che il collegamento (e il suo equivalente testuale) sia, di per sè, di senso compiuto (fare riferimento alle [WCAG10], Punto di controllo 13.3). Fino a quando gli Agenti Utente SVG non renderanno disponibile quest'informazione testuale, gli autori dovranno includere nel contenuto anche collegamenti basati sul testo (fare riferimento alle [WCAG10] Punto di controllo 1.5, sebbene questo non dovrebbe applicarsi agli agenti utente più nuovi, quali quelli progettati per SVG).

Gli utenti che si basano in maniera fondamentale sull'informazione visuale, quali alcune tipologie di utenti affetti da disabilità cognitive, potrebbero inoltre aver bisogno di collegamenti grafici che siano facilmente identificabili nel loro significato visivo. Per l'evidenziazione dei collegamenti grafici non esiste alcuna convenzione, quale la sottolineatura nel caso dei collegamenti testuali. Questi potrebbero essere evidenziati mediante l'aumento della dimensione o del colore del componente collegato, oppure aggiungendo un segno grafico vicino al componente. Inoltre, potremmo evidenziare il componente solamente nel caso in cui sia selezionato o quando l'utente richieda di esaminare i collegamenti. Gli autori e gli agenti utente dovrebbero avere per obiettivo la coerenza nell'offrire stili di evidenziazione di default. E' inoltre importante che gli utenti possano facilmente cambiare l'evidenziazione in funzione delle proprie necessità. Ciò può essere realizzato, negli agenti utente, implementando le caratteristiche rilevanti dei fogli di stile, per esempio di CSS [CSS2].

Poiché molti utenti, che non possono far uso di dispositivi di puntamento, navigano attraverso i collegamenti in maniera sequenziale, hanno bisogno di essere messi in condizione di potersi creare un buon modello mentale delle strutture e dei collegamenti che rendono la navigazione più efficace (fare riferimento alle [WCAG10], Punti di controllo13.4, 13.5, e alla Linea Guida 3 in generale). Questa tipologia di utenti trarrà beneficio dal fatto che i collegamenti possano essere esplorati in un ordine che corrisponde alla struttura grafica, oppure del fatto che i collegamenti, relativi ad una certa struttura (ad esempio, tutti i bottoni inclusi nel pannello radio di un abitacolo), siano raggruppati e possano essere saltati facilmente (fare riferimento alle [WCAG10], Punto di controllo 13.6).

6. Adattare il Contenuto all'Utente o alle Impostazioni del Sistema

In SVG è possibile offrire contenuti alternativi in funzione delle caratteristiche supportate (ad esempio, un'animazione). Ciò viene realizzato per mezzo dell'elemento switch, utilizzando gli attributi requiredFeatures o systemLanguage. Il seguente esempio (6.1) estende il precedente esempio animato (5.1). Fa uso dell'elemento switch per verificare se un determinato sistema supporti le animazioni e qualora non sia così, fornisce una spiegazione alternativa del modo in cui la rete veicola i messaggi. L'attributo systemLanguage può essere usato invece (o anche) per fornire versioni multiple del testo in funzione del linguaggio, o per fornire una versione in linguaggio grafico di un testo descrittivo.

<?xml version="1.0"?>
<?xml-stylesheet href="svg-style.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN"
  "http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">
<svg width="6in" height="4.5in" viewBox="0 0 600 450">
  <title id="mainTitle">Rete</title>
  <desc>Un esempio di rete di computer basata su di un hub</desc>
  <!-- Definisce i simboli da animare  -->
   <defs>
    <symbol id="CableA">
<!-- (e il resto dei simboli) -->
    </symbol>
  </defs>
 <switch>
    <g requiredFeatures="org.w3c.svg.dynamic">
<!-- Nel caso di un riproduttore dinamico usa un effetto di animazione -->
      <animate xlink:href="#ComputerA" attributeName="class"
       to="highlight" begin="id(ComputerA).(activate(2))"
       dur="2s" fill="remove"/>
<!-- (Il resto dell'animazione è tagliato) -->
    </g>
    <g x="0" y="450">
<!-- Diversamente fornisce una versione alternativa dello stesso contenuto -->
      <a xlink:href="desc51a.html" xlink:title="description">
        <text>Come funziona?</text>
      </a>
    </g>
  </switch>
  <!-- Disegna il testo.  -->
  <text x="0" y="-10">
    <tref xlink:href="#mainTitle"/>
  </text>
  <!-- Usa l'immagine dello hub e le relative informazioni nel title e nella description. -->
  <g id="hub" transform="translate(180 200)">
    <image width="600" height="450" xlink:href="hub.svg"/>
  </g>
<!-- (E il resto dell'immagine della rete) -->
  </g>
</svg>

7. Benefici d'Accessibilità derivanti da XML

Tutti i linguaggi di marcatura scritti in XML dispongono automaticamente di alcuni benefici in termini d'accessibilità. Ciò vale anche per SVG. Nella presente sezione illustriamo il modo in cui queste caratteristiche di XML possano essere utilizzate per aumentare l'accessibilità dei documenti SVG.

7.1 Fornire Informazione tramite i Metadata

Quanto maggiore è l'informazione che l'autore può fornire in relazione ad un'immagine SVG e ai suoi componenti, tanto migliore ciò sarà in termini di accessibilità. L'aggiungere i metadata ad un documento può, ad esempio, facilitare la ricerca di informazioni da parte dell'utente su documenti con un'idonea valutazione in termini di accessibilità. Nell'esempio seguente, ne facciamo utilizzo al fine di descrivere con maggiore precisione l'immagine - sebbene la lettura della struttura XML mostri che la rete consista di un hub, di alcuni cavi e di alcuni computer, non illustra infatti quali siano le connessioni fra questi. Abbiamo quindi incluso un'immagine delle relazioni, generata automaticamente, descritta per mezzo di metadata - la stessa informazione può essere generata da una tecnologia assistiva. La combinazione dell'informazione con gli equivalenti alternativi inclusi nell'immagine può essere impiegata al fine di fornire una descrizione navigabile della rete, in forma testuale, audio, o anche mediante l'utilizzo di icone sostitutive ( [WCAG10] il Punto di controllo 13.2 richiede i metadata, il 14.2 richiede l'illustrazione dell'informazione e la Linea guida 1 richiede gli equivalenti testuali). Il seguente esempio (7.1) utilizza i namespace [NAMESPACE] XML e il Resource Description Framework [RDF] per aggiungere alcuni metadata relativi alle connessioni che connettono i computer e lo hub nella precedente immagine della rete.

<?xml version="1.0"?>
<?xml-stylesheet href="svg-style.css" type="text/css"?>
<svg width="6in" height="4.5in" viewBox="0 0 600 450"
  xmlns="http://www.w3.org/2000/svg-20000802">
 <metadata>
    <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
      xmlns:connect="http://www.w3.org/1999/08/29-svg-connections-in-RDF">
      <rdf:Description about="#CableN">
        <connect:ends rdf:resource="#socket5"/>
        <connect:ends>Tutto</connect:ends>
      </rdf:Description>
      <rdf:Description about="#CableA">
        <connect:ends rdf:resource="#socket1"/>
        <connect:ends rdf:resource="#ComputerA"/>
      </rdf:Description>
      <rdf:Description about="#CableB">
        <connect:ends rdf:resource="#socket2"/>
        <connect:ends rdf:resource="#ComputerB"/>
      </rdf:Description>
      <rdf:Description about="#hub">
        <connect:ends rdf:resource="#socket1"/>
        <connect:ends rdf:resource="#socket2"/>
        <connect:ends rdf:resource="#socket3"/>
        <connect:ends rdf:resource="#socket4"/>
        <connect:ends rdf:resource="#socket5"/>
      </rdf:Description>
    </rdf:RDF>
  </metadata>
  <title id="mainTitle">Rete</title>
  <desc>Un esempio di rete di computer basata su di un hub</desc>
<!-- Disegna il testo. -->
  <text x="0" y="-10">
    <tref xlink:href="#mainTitle"/>
  </text>
<!-- Usa l'immagine dello hub e le relative informazioni nel title e nella description. -->
  <g id="hub" transform="translate(180 200)">
    <image width="600" height="450" xlink:href="hub.svg"/>
  </g>
  <!-- Usa il simbolo di un computer esterno. Lo ridimensiona per adattarlo. -->
  <g id="ComputerA" transform="translate(20 170)">
    <title>Computer A</title>
    <use xlink:href="computer.svg#terminal" transform="scale(0.5)"/>
  </g>
<!-- E così via, aggiunge il resto della rete... -->
</svg>

7.2 Utilizzo di SVG con gli Altri Linguaggi XML

La specifica SVG consente l'utilizzo dei namespace [NAMESPACE] XML per introdurre elementi da altri linguaggi XML. In particolare, gli elementi text, title e desc contengono contenuto strutturato, che può essere marcato utilizzando le estensioni del DTD SVG o utilizzando un altro namespace. Nel seguente esempio includiamo degli elementi SMIL [SMIL] per fornire una più ricca descrizione dell'immagine nella Figura 5.1 (l'esempio presuppone che un foglio di stile fornisca il posizionamento del flusso testuale).

<?xml-stylesheet href="http://www.w3.org/1999/09/SVG-access/svg-style" 
                 type="text/css"?>
<svg width="6in" height="4.5in" viewBox="0 0 600 450"
  xmlns="http://www.w3.org/2000/svg-20000802">
<!-- Definisce le descrizioni da animare -->
  <title id="mainTitle">Rete</title>
  <desc>Un esempio di rete di computer basata su di un hub</desc>
    <smil xmlns="http://www.w3.org/TR/REC-SMIL/">
      <par>
        <audio src="describe.au" title="Una descrizione audio della rete"/>
        <textstream src="describe.ts" title="Come funziona la rete"/>
      </par>
    </smil>
  </desc>
    <!-- Disegna il testo. -->
  <text x="0" y="-10">
    <tref xlink:href="#mainTitle"/>
  </text>
  <!-- Usa l'immagine dello hub e le relative informazioni nel title e nella description. -->
  <g id="hub" transform="translate(180 200)">
    <image width="600" height="450" xlink:href="hub.svg"/>
  </g>
  <!-- Il resto dell'esempio è tagliato. -->
</svg> 

7.3 Supporto alle Tecnologie Assistive - Modello a Oggetti del Documento

SVG implementa un Modello a Oggetti del Documento [DOM2] che fornisce un'interfaccia standard (Interfaccia di Programmazione dell'Applicazione o API) per l'esame e la modifica della struttura di un documento. Può essere utilizzata da differenti strumenti e tecnologie. In particolare, DOM è di beneficio per le tecnologie assistive che sono spesso utilizzate in combinazione con strumenti "standard" quali i comuni agenti utente. Ad esempio, un lettore di schermo, che garantisca la riproduzione vocale ad una varietà di applicazioni, può essere personalizzato al fine di avvantaggiarsi dell'interfaccia DOM. Ciò può consentire una migliore fruibilità di quanto sarebbe possibile, basandosi integralmente sul motore di rappresentazione standard (un editor grafico, o il plug-in di un browser), per ottenere i dati. Una tecnologia assistiva può inoltre sfruttare l'interfaccia DOM per adattare un'immagine SVG alle necessità dell'utente. Fare attenzione al fatto che le Linee Guida per l'Accessibilità degli Agenti Utente richiedono che gli agenti utente implementino le interfacce DOM e di esportazione verso le tecnologie assistive (fare riferimento a [UAAG10], Punto di controllo 1.3, e alle Linee guida 1 e 5). Vedere anche la Sezione 5.2 sugli eventi accessibili - che sono ereditati dalla specifica DOM 2 [DOM2].

8. Ulteriori Letture

SVG

La principale fonte d'informazione su SVG è rappresentata dalla stessa specifica [SVG]. La specifica favorisce l'accessibilità richiedendo la conformità alle linee guida per l'accessibilità quale parte della conformità degli strumenti. Vedere in particolare l'appendice sull'accessibilità. Inoltre, la pagina Web pubblica del gruppo di lavoro del W3C su SVG [SVG-page] costituisce una buone fonte d'informazione, compresi articoli e documenti su SVG, novità sulle implementazioni, ecc.

L'Iniziativa per l'Accessibilità del Web (WAI)

L'iniziativa per l'accessibilità del Web (WAI) del W3C indirizza le problematiche relative all'accessibilità del Web attraverso cinque attività complementari che:

1. assicurano che la tecnologia del Web offra supporto all'accessibilità;
2. sviluppano linee guida per l'accessibilità;
3. sviluppano strumenti per facilitare la valutazione e la correzione dei siti Web;
4. dirigono l'educazione e lo sviluppo;
5. si coordinano con la ricerca e lo sviluppo.

Il WAI International Program Office favorisce l'associazione di industrie, di organizzazioni di disabili, di organizzazioni per la ricerca sull'accessibilità e dei Governi interessati alla creazione del Web accessibile. I sostenitori della WAI includono la US National Science Foundation e il National Institute on Disability and Rehabilitation Research dello US Department of Education; la Commissione Europea DGXIII Telematics Applications Programme for Disabled and Elderly; il Governo del Canada, l'Industry Canada; l'IBM, la Lotus Development Corporation, la Microsoft, e la Verizon. Ulteriori informazioni sulla WAI sono disponibili all'indirizzo http://www.w3.org/WAI.

Il World Wide Web Consortium (W3C)

Il W3C è stato creato al fine di guidare il Web alla piena realizzazione del suo potenziale mediante lo sviluppo di protocolli comuni che ne promuovano l'evoluzione e ne garantiscano l'interoperabilità. È un consorzio internazionale di industrie gestito congiuntamente dal Laboratorio per le Scienze del Computer (LCS) all'Istituto di Tecnologia del Massacchusetts (MIT) negli USA, dall'Istituto Nazionale per la Ricerca sulle Scienze del Computer e il Controllo (INRIA) in Francia e dall'Univesità di Keio in Giappone. I servizi offerti dal Consorzio comprendono: un archivio delle informazioni sul World Wide Web per gli sviluppatori e gli utenti; codice di implementazioni di riferimento per l'applicazione e la promozione degli standard; vari prototipi ed esempi di applicazioni dimostrative dell'utilizzo delle nuove tecnologie. Nel Luglio del 2000, 433 organizzazioni erano diventate Membri del Consorzio. Per ulteriori informazioni sul World Wide Web Consortium, visitare: http://www.w3.org/.

9. Glossario

Elemento attivo

Un elemento attivo è un elemento con comportamenti che possono essere attivati (o "comandati") attraverso l'interfaccia utente o attraverso script. Gli elementi attivi dipendono dal linguaggio del documento e dalle caratteristiche implementate dall'agente utente. Nei documenti SVG, ad esempio, gli elementi attivi includono i collegamenti e le richieste di elementi tramite script (gestori d'eventi) esplicitamente associati ad essi (ad esempio, attraverso i vari attributi "on": onactivate ecc). La maggior parte dei sistemi utilizza il focus del contenuto per navigare fra gli elementi attivi e identificare quale debba essere attivato. Il comportamento di un elemento attivo può essere comandato attraverso un buon numero di meccanismi, inclusi il mouse, la tastiera, l'Interfaccia di Programmazione degli Applicativi (API), ecc. L'effetto dell'attivazione è funzionale all'elemento. Ad esempio, quando un collegamento viene attivato, l'agente utente richiama la risorsa collegata.

Tecnologia assistiva

Nel contesto di questo documento, per tecnologia assistiva si intende un agente utente che si interfacci con uno o più altri agenti utente al fine di aiutare persone affette da disabilità nell'interazione con un computer. Ad esempio, un programma di lettura dello schermo costituisce una tecnologia assistiva perchè si interfaccia con i programmi di navigazione o con altri programmi applicativi per consentire l'accesso al Web, particolarmente alle persone affette da disabilità visive o cognitive.

Esempi di tecnologie assistive, importanti nel contesto di questo documento, includono le seguenti:

• ingranditori di schermo, utilizzati da persone affette da disabilità visive per aumentare le dimensioni e cambiare i colori sullo schermo al fine di migliorare la lettura visiva di testo e immagini.
• lettori di schermo, utilizzati dalle persone affette da cecità o da disabilità nella lettura per leggere l'informazione testuale attraverso una voce sintetizzata o attraverso le barre Braille.
• programmi di riconoscimento vocale, che potrebbero essere utilizzati da persone affette da alcune tipologie di disabilità fisiche.
• tastiere alternative, utilizzate da persone, affette da alcune tipologie di disabilità, per simulare la tastiera.
• dispositivi di puntamento alternativi, utilizzati da persone affette da alcune tipologie di disabilità per simulare il puntamento tramite mouse e l'attivazione dei bottoni.

Al di là di questo documento, le tecnologie assistive consistono in programmi o dispositivi che siano stati specificamente progettati per assistere le persone affette da disabilità nell'assolvimento delle attività quotidiane, quali le sedie a rotelle, le macchine per la lettura, i dispositivi per impugnare, i telefoni testuali, i paginatori a vibrazione, ecc.

Alternative equivalenti per il contenuto

Poiché il contenuto rappresentato in alcune modalità non è sempre accessibile agli utenti affetti da disabilità, gli autori devono fornire equivalenti alternativi per il contenuto. Nel contesto di questo documento, l'equivalente deve essenzialmente assolvere alla medesima funzione per la persona affetta da disabilità (almeno per quanto sia possibile, data la natura della disabilità e lo stato della tecnologia), che il contenuto "primario" assolve per la persona non affetta da disabilità. Ad esempio, il testo "La Luna Piena" potrebbe trasmettere la stessa informazione di un'immagine di una luna piena, quando presentata agli utenti. Fare attenzione al fatto che l'informazione equivalente si focalizza nell'assolvimento della medesima funzione. Se l'immagine fa parte di un collegamento e la percezione dell'immagine è fondamentale per la comprensione della destinazione del collegamento, un equivalente deve fornire agli utenti anche un'idea della destinazione del collegamento.

Gli alternativi equivalenti del contenuto includono gli equivalenti testuali (lunghi e corti, sincronizzati e non sincronizzati) e gli equivalenti non testuali (ad esempio, una descrizione audio, o una traccia visuale che mostri una traduzione di un testo scritto in linguaggio gestuale, ecc.). Si prega di consultare anche le Linee Guida per l'Accessibilità del Web 1.0 [WCAG10].

Agente utente

Un agente utente è un'applicazione che richiama e rappresenta il contenuto Web, inclusi il testo, gli elementi grafici, i suoni, i video, le immagini, e altri tipologie di contenuti. Un agente utente può richiedere ulteriori agenti utenti che gestiscano alcune tipologie di contenuti, o potrebbe essere di questo tipo. Per esempio, un programma di navigazione potrebbe eseguire un programma separato o un plug-in per rappresentare un suono o un video. Gli agenti utenti includono i programmi di navigazione per i desktop grafici, i riproduttori multimediali, i programmi di navigazione testuale e audio, e le tecnologie assistive quali i lettori di schermo, gli ingranditori di schermo, i sintetizzatori vocali, le tastiere a schermo e i programmi di controllo vocale.

10. Riconoscimenti

Desideriamo ringraziare le seguenti persone che hanno contribuito sostanzialmente a questo documento:

Judy Brewer, Dan Brickley, Daniel Dardailler, Jon Ferraiolo, Ian Jacobs, Chris Lilley, Eric Prud'hommeaux, Ralph Swick, Dave Woolley, il Gruppo di Lavoro su SVG e il Gruppo di Lavoro della WAI sui Protocolli e i Formati.

11. Riferimenti

[ATAG10]

"Authoring Tool Accessibility Guidelines 1.0", J. Treviranus, C. McCathieNevile, I. Jacobs, e J. Richards, redattori, 3 Febbraio 2000. Questa Raccomandazione del W3C è all'indirizzo: http://www.w3.org/TR/2000/REC-ATAG10-20000203.

[CSS1]

"Cascading Style Sheets Level 1", H. Lie e B. Bos, redattori, 17 Dicembre 1996, riveduto l'11 Gennaio 1999. Questa Raccomandazione del W3C è all'indirizzo: http://www.w3.org/TR/1999/REC-CSS1-19990111.

[CSS2]

"Cascading Stylesheets Level 2", H. Lie, B. Bos, C. Lilley, e I. Jacobs, redattori, 12 Maggio 1998. Questa Raccomandazione del W3C è all'indirizzo: http://www.w3.org/TR/1998/REC-CSS2-19980512.

[CSS-access]

"Accessibility Features of CSS", I Jacobs e J. Brewer, redattori. Questa Raccomandazione del W3C è all'indirizzo: http://www.w3.org/1999/08/NOTE-CSS-access-19990804.

[DOM2]

"Document Object Model Level 2 Specification", L. Wood et al., redattori, 10 Maggio 2000. Questa Raccomandazione Candidata del W3C è all'indirizzo: http://www.w3.org/TR/2000/CR-DOM-Level-2-20000510; fare inoltre riferimento all'ultima versione di DOM 2.

[NAMESPACE]

"Namespaces in XML", T. Bray, D. Hollander, e A. Layman, redattori, 14 Gennaio 1999. Questa Raccomandazione del W3C è all'indirizzo: http://www.w3.org/TR/1999/REC-xml-names-19990114.

[RDF]

"Resource Description Framework (RDF) Model and Syntax", O. Lassila e R. Swick, redattori, 22 Febbraio 1999. Questa Raccomandazione del W3C è all'indirizzo: http://www.w3.org/TR/1999/REC-rdf-syntax-19990222.

[RUDOLF]

"Rudolf RDF Viz" uno strumento per la visualizzazione dei RDF. Disponibile all'indirizzo http://www.ilrt.bristol.ac.uk/discovery/rdf-dev/rudolf/rdfviz

[SMIL]

"Synchronized Multimedia Integration Language (SMIL) 1.0 Specification", P. Hoschka, redattore, 15 Giugno 1998. Questa Raccomandazione del W3C è all'indirizzo: http://www.w3.org/TR/1998/REC-smil-19980615.

[SMIL-animation]

"SMIL animation", P. Schmitz e A. Cohen, redattori. 31 Luglio 2000. Questa Bozza di Lavoro del W3C è all'indirizzo http://www.w3.org/TR/2000/WD-smil-animation-20000731; fare inoltre riferimentoall'ultima versione di SMIL animation.

[SMIL-access]

"Accessibility features of SMIL", M. Koivunen e I. Jacobs, redattori, 21 Settembre 1999. Questa Nota del W3C è all'indirizzo http://www.w3.org/TR/1999/NOTE-SMIL-access-19990921.

[SVG]

"Scalable Vector Graphics 1.0 Specification", J. Ferraiolo, redattore, 2 Agosto 2000. Questa Raccomandazione candidata del W3C è all'indirizzo http://www.w3.org/TR/2000/CR-SVG-20000802/; fare inoltre riferimento all'ultima versione della specifica di SVG, disponibile all'indirizzo http://www.w3.org/TR/SVG.

[SVG-page]

La pagina pubblica del gruppo di lavoro Scalable Vector Graphics costituisce l'archivio pubblico di informazioni del gruppo di lavoro. Disponibile all'indirizzo http://www.w3.org/Graphics/SVG

[UAAG10]

"User Agent Accessibility Guidelines", J. Gunderson e I. Jacobs, redattori, 28 Luglio 2000. Questa Bozza di Lavoro del W3C è all'indirizzo http://www.w3.org/WAI/UA/WD-UAAG10-20000728.

[USENOTE]

"How People with Disabilities Use the Web", J. Brewer e I. Jacobs, redattori. L'ultima versione di questa Bozza di Lavoro del W3C è disponibile all'indirizzo http://www.w3.org/WAI/EO/Drafts/WAI-access-profiles.

[WCAG10]

"Web Content Accessibility Guidelines 1.0", G. Vanderheiden, W. Chisholm, e I. Jacobs, redattori, 5 Maggio 1999. Questa Raccomandazione del W3C è all'indirizzo: http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505.

[XLINK]

"XML Linking Language", S. DeRose et al., redattori, 3 Luglio 2000. Questa Raccomandazione Candidata del W3C è all'indirizzo http://www.w3.org/TR/2000/CR-xlink-20000703; fare inoltre riferimento all'ultima versione della specifica di XLink.