Tecniche per le Linee Guida 1.0 di Accessibilità dei Contenuti Web

NOTA W3C 5 - Maggio -1999

Titolo originale "Techniques for Web Content Accessibility Guidelines 1.0"

Questa versione:
http://www.w3.org/TR/1999/WAI-WEBCONTENT-TECHS-19990505
(testo ascii, postscript, pdf, file gzip tar HTML,archivio zip HTML)
Ultima versione:
http://www.w3.org/TR/WAI-WEBCONTENT-TECHS
Precedente versione:
http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990324/wai-paginaauth-tech
Ultima versione di "Linee Guida di accessibilità dei Contenuti Web 1.0"
http://www.w3.org/TR/WAI-WEBCONTENT
Editori:
Wendy Chisholm, Trace R & D Center, Università di Wisconsin -- Madison
Gregg Veerheiden, Trace R & D Center, Università di Wisconsin -- Madison
Ian Jacobs, W3C
Traduzione:
Giovanni Losacco
 
.

Abstract

Questo documento è un elenco di tecniche che implementano i checkpoints (punti di controllo) definiti nelle "Linee Guida dell'accessibilità dei Contenuti Web 1.0".

Questo documento è parte di una serie di documenti pubblicati dal Web Accessibility Initiative.

Stato di questo documento

Questo documento è una nota resa disponibile dal W3C solo ai fini didiscussione. La pubblicazione di questa Nota da parte di W3C non costituisce alcuna clausola aggiuntiva da parte di W3C o del W3C Team, o di alcun membro del W3C.

Poichè le Linee Guida dell 'accessibilità dei Contenuti Web 1.0 si sforzano di essere un documento stabile (come da indicazione W3C), ci si attende che il documento corrente evolva parallelamente ai cambiamenti delle tecnologie e che gli sviluppatori di contenuto mettano a punto tecniche più efficaci per la progettazione di pagine accessibili.

Questo documento è stato prodotto come parte del Web Accessibility Initiative. Lo scopo del Web Content Guidelines Working Group è discusso nel Working Group charter.

Un elenco delle attuali Indicazioni W3C e altri documenti tecnici possono esseretrovati presso http://www.w3.org/TR.

Si prega di inviare eventuali commenti dettagliati su questo documento a wai-wcag-editor@w3.org.

Quadro dei Contenuti


1 Priorità

Ciascun checkpoint (punto di controllo) ha un livello di priorità assegnato dal Working Group basato sull'impatto del checkpoint sull'accessibilità.

[Priorità 1]
Uno sviluppatore di contenuti Web deve soddisfare questo checkpoint. Altrimenti, uno o più gruppi (di navigatori utenti) saranno impossibilitati ad accedere all'informazione nel documento. La soddisfazione di questo checkpoint è un requisito fondamentale per alcuni gruppi affinchè siano in grado di utilizzare documenti Web.
[Priorità 2]
Uno sviluppatore di contenuti Web dovrebbe soddisfare questo checkpoint. Altrimenti, uno o più gruppi avranno difficoltà ad accedere alle informazioni nel documento. Soddisfare questo checkpoint rimuoverà barriere significative nell'accesso ai documenti Web.
[Priorità 3]
Uno sviluppatore di contenuti Web può perseguire questo checkpoint. In caso contrario, uno o più gruppi incontreranno alcune difficoltà nell 'accedere alle informazioni nel documento. Soddisfare questo checkpoint migliorerà l'accesso al documento Web.

Alcuni punti di controllo specificano un livello di priorità che può cambiare sotto determinate (indicate) condizioni.

I punti di controllo in questo documento sono numerati per abbinare la loro numerazione alle Linee Guida dell'accessibilità dei Contenuti Web 1.0.


2 Come sono organizzate le Tecniche

Questo documento è un elenco di tecniche che implementano i punti di controllo definiti nelle "Linee Guida dell'accessibilità dei Contenuti Web 1.0". Questo documento è organizzato come segue:

Temi di accessibilità
Questa sezione introduce alcune tecniche generali per promuovere l'accessibilità che è indipendente da qualunque specifico linguaggio di marcatura.
Tecniche HTML
Questa sezione spiega come implementare punti di controllo applicabili in HTML (Riferirsi a [HTML40], [HTML32]) e include numerosi esempi pratici . Per completare questa sezione, un indice di elementi e attributi HTML fornisce informazioni su tutti gli elementi di HTML 4.0 e tutti gli attributi che influenzano direttamente l'accessibilità . Per ciascun elemento, l'indice include i links alle tecniche che vi si riferiscono.
Tecniche CSS
Questa sezione spiega come implementare punti di controllo applicabili in CSS1 e CSS2 (Riferirsi a [CSS1], [CSS2]).

E' stata fornita una checkpoint map per la navigazione delle tecniche. Per ciascun checkpoint, la mappa include la sua definizione (come appare in "Linee Guida dell 'accessibilità dei Contenuti Web 1.0") e links a tecniche applicabili per il checkpoint. In aggiunta, l'inizio di ciascuna sezione di questo documento elenca i punti di controllo che sono trattati in quella sezione.

2.1 Esempi ed esempi deprecati

Questo documento contiene un numero di esempi che illustrano soluzioni accessibili in HTML, CSS, etc. ma anche esempi deprecati che illustrano ciò che non dovrebbero realizzare gli sviluppatori. Gli esempi deprecati sono in risalto e i lettori dovrebbero avvicinarli con attenzione -- sono riportati a puro scopo illustrativo.


3 Temi di accessibilità

La sezione seguente discute alcuni temi di accessibilità che gli sviluppatori di contenuti Web dovrebbero aver presenti quando progettano documenti e siti.

3.1 Struttura vs. Presentazione

Nel progetto di un documento o serie di documenti, gli sviluppatori di contenuto inizialmente dovrebbero sforzarsi di identificare la struttura voluta dei loro documenti prima di pensare a come saranno presentati tali documenti all'utente. La distinzione della struttura di un documento da come si presenta il suo contenuto offre dei vantaggi, incluso una migliorata accessibilità, maneggevolezza, e portabilità.

Talvolta identificare qual'è la struttura e qual'è la presentazione può essere impegnativo. Ad esempio, molti sviluppatori di contenuto considerano che una horizontal rule (l'elemento HR ) comunichi una divisione strutturale. Questo può essere vero per utenti vedenti, ma per utenti non vedenti o utenti sprovvisti di browsers grafici, una horizontal rule non ha significato (si potrebbero"indovinare" che un elemento HR implica una divisione strutturale, ma senza altre informazioni, non se ne ha certezza). Nell'HTML, gli sviluppatori di contenuto dovrebbero usare gli elementi header HTML 4.0 (H1-H6) per identificare nuove sezioni. Questi possono essere completati da altri segnali come gli horizontal rules o visuali, ma non dovrebbero essere sostitutivi.

E' vero anche il contrario: gli sviluppatori di contenuto non dovrebbero usare elementi strutturali per ottenere effetti di presentazione. Ad esempio in HTML, anche se l'elemento BLOCKQUOTE può causare in alcuni browsers l'indentazione del testo, tale tag è stato progettato per identificare una citazione, non per creare una presentazione con "effetto di rientro laterale". Gli elementi BLOCKQUOTE usati per l'indentazione confondono analogamente utenti e motori di ricerca, che si aspettano che gli elementi siano stati usati per marcare indentazioni.

La separazione della presentazione dalla struttura è insita in un documento XML. Come indica Norman Walsh in "A Guide to XML" [WALSH],

I browsers HTML sono ampiamente "hardcoded". Un'intestazione di primo livello appare in tale maniera perchè viene riconosciuto il tag H1 . Ancora, dal momento che i documenti XML non hanno set di tag fissati, questo approccio non funziona. La presentazione di un documento XML dipende da un foglio di stile.

Quicktest! Per determinare se il contenuto è strutturale o di presentazione, create un profilo del vostro documento. Ciascun punto nella struttura gerarchica denota una variazione strutturale. Usate marcatori strutturali per evidenziare questi cambiamenti e marcatori di presentazione per renderli più visibili e comprensibili. Noterete che le horizontal rules non appaiono in questo profilo e quindi non sono strutturali, ma di presentazione. Nota. Questo quicktest è relativo alla struttura individuabile in un capitolo, sezione e paragrafo. Per determinare una struttura all'interno di frasi, cercate abbreviazioni, variazioni di linguaggio naturale, definizioni e voci di un elenco.

3.2 Equivalenti testuali

Punti di controllo in questa sezione: 1.1, 1.2, 1.5, 13.10, 3.3, e 12.1, e 12.2.

Il testo è considerato accessibile per quasi tutti gli utenti se può essere manipolato da lettori di schermo (screen readers), browsers non visuali, e lettori braille. Può essere rappresentato visivamente, ingrandito, sincronizzato con un video per creare una legenda, etc. Nel momento in cui si progetta un documento contenente informazioni non testuali (immagini, applets, suoni, presentazioni multimediali, etc.), pensate ad integrarle con l'equivalente testuale ogni volta sia possibile.

Un testo equivalente descrive la funzione o lo scopo del contenuto. Per contenuti complessi (cartine, grafici, etc.), il testo equivalente può essere più lungo e includere informazioni descrittive.

Il testo equivalente dovrebbe essere fornito per loghi, fotografie, bottoni di invio nelle form, applets, bullets negli elenchi, ascii art, e tutti i links dentro le immagini mappate così come per immagini invisibili usate per organizzare una pagina.

Quicktest! Un buon test per determinare se un testo equivalente è utile: immaginare di leggere il documento ad alta voce al telefono. Cosa direste quando incontrate questa immagine per rendere comprensibile la pagina a chi ascolta?

3.2.1 Vista di insieme (overview) di tecnologie

Come si specifica un testo equivalente dipende dal linguaggio del  documento.

Per esempio, a seconda dell 'elemento, HTML consente agli sviluppatori di contenuto di specificare testo equivalente mediante attributi ("alt" o "longdesc" ) o nel contenuto dell'elemento (l'elemento OBJECT).

Formati video, quali Quicktime, consentiranno agli sviluppatori di includere una varietà di tracce audio e video alternative. SMIL ([SMIL]), consente agli sviluppatori di sincronizzare clips audio e video alternative, e corrispondenti files di testo.

Creando DTDs XML, assicurarsi che gli elementi che potrebbero aver bisogno di una descrizione abbiano un modo di associare se stessi alla descrizione stessa.

Alcuni formati immagine consentono di incapsulare internamente del testo nei file dati insieme alle informazioni immagine. Se un formato immagine supporta tale testo (e.g., Portable Network Graphics, vedi [PNG]) gli sviluppatori di contenuto possono anche fornire tali informazioni.

3.2.2 Compatibilità verso il basso (indietro)

Gli sviluppatori di contenuto devono considerare la compatibilità verso il basso (indietro) quando sviluppano siti o pagine Web poichè:

Quindi, progettando per tecnologie più datate, considerare queste tecniche:

3.3 Pagine alternative

Punti di controllo in questa sezione: 11.4, e 6.5.

Sebbene sia possibile rendere la maggior parte del contenuto accessibile, può accadere che tutta o parte di una pagina rimanga inaccessibile. Tecniche aggiuntive per creare alternative accessibili includono:

  1. Consentire agli utenti di navigare verso una pagina distinta che sia accessibile ed aggiornata con la stessa frequenza con cui è aggiornata la pagina a richiesta.
  2. Invece di pagine alternative statiche, impostare script lato server che generino versioni accessibili della pagina a richiesta.
  3. Riferirsi agli esempi per Frame e Script.
  4. Fornire un recapito telefonico, fax, e-mail o indirizzo postale dove siano disponibili ed accessibili informazioni, preferibilmente 24 ore al giorno.

Ci sono due tecniche per il linking a una pagina alternativa accessibile:

  1. Fornire links all 'inizio di entrambe le pagine principale e alternativa per consentire all 'utente di muoversi avanti e indietro tra loro. Per esempio, alla sommità di una pagina grafica includere un link alla pagina di solo testo, e alla sommità della pagina di solo testo includere un link alla pagina grafica associata. Assicurarsi che questi links siano fra i primi che gli utenti tabuleranno sistemandosi alla sommità della pagina, prima di altri links.
  2. Usare meta informazioni per individuare documenti alternativi. I browsers dovrebbero caricare la pagina alternativa automaticamente in base al tipo di browser e preferenze degli utenti. Per esempio, in HTML, usare l'elemento LINK come segue:

    Esempio.

    Agenti utente che supportano LINK caricheranno la pagina alternativa per quegli utenti i cui browsers possano essere identificati tali da supportare la rappresentazione "aural","braille", o "tty".

            <HEAD>
            <TITLE>Benvenuti alla Virtual Mall!</TITLE>
            <LINK title="Versione solo testo"
                  rel="alternate"
                  href="solo_testo"
                  media="aural, braille, tty">
            </HEAD>
            <BODY><P>...</BODY>
            

    Fine esempio.

3.4 Accesso da tastiera

Punti di controllo in questa sezione: 9.2.

Non tutti gli utenti dispongono di un ambiente grafico con un mouse o altro dispositivo di puntamento. Alcuni utenti contano sulla tastiera, tastiera alternativa o input vocale per navigare attraverso links, attivare controlli di form, etc. Gli sviluppatori di contenuto dovrebbero sempre assicurare che gli utenti possano interagire con una pagina con altri dispositivi piuttosto che dispositivi di puntamento. Una pagina progettata per accesso da tastiera (in aggiunta all'accesso con mouse) generalmente dovrà essere accessibile agli utenti con altri dispositivi di input. In più, il progetto di una pagina per accesso da tastiera normalmente migliorerà il suo design complessivo.

L'accesso da tastiera ai links e controlli di form può essere specificato in alcune maniere:

Links di mappa immagine
Fornire testo equivalente per aree mappa immagine (image map) lato client, o fornire links di testo ridondanti per mappe immagine lato server. Riferirsi a lla sezione mappe immagine (image map) per esempi.
Scorciatoie da tastiera
Fornire scorciatoie (shortcuts) da tastiera così che gli utenti possano combinare la pressione di tasti per navigare attraverso links o controlli di form su una pagina. Nota. Le scorciatoie da tastiera -- cioè tasti usati per attivare la "scorciatoia"-- possono essere implementate diversamente da diversi sistemi operativi. Su macchine Windows, i tasti "alt" e "ctrl" sono quelli usati più comunemente mentre su un Macintosh, si usa il tasto apple o "clover leaf" (foglia di trifoglio). Riferirsi a lle sezioni accesso da tastiera per links e accesso da tastiera ai moduli (form) per esempi.
Ordine di tabulazione
l'ordine di tabulazione descrive un ordine (logico) per navigare da link a link o da un controllo di form ad un altro (usualmente premendo il tasto "tab", da cui il nome). Riferirsi a lla sezione accesso da tastiera ai moduli (form) per esempi.

3.4.1 Controlli indipendenti da dispositivo per interfacce incorporate

Alcuni elementi importano oggetti (e.g., applets o riproduttori multimediali) le cui interfacce non possono essere controllate per mezzo del linguaggio di marcatura. In tali casi, gli sviluppatori di contenuto dovrebbero fornire alternative equivalenti con interfacce accessibili se gli oggetti importati stessi non forniscono interfacce accessibili.

3.5 Navigazione

Punti di controllo in questa sezione: 14.3, 13.4, 13.5, 13.3, 13.7, e 13.2.

Uno stile di presentazione consistente per ciascun pagina consente agli utenti di localizzare più semplicemente i meccanismi di navigazione ma anche semplicemente di saltare tali meccanismi per trovare i contenuti importanti. Questo aiuta gli utenti con disabilità di lettura e apprendimento, inoltre rende la navigazione più semplice per tutti. La prevedibilità incrementerà la probabilità che si trovino informazioni sul sito, o lo si eviterà quando ciò sia desiderato.

Esempi di strutture che possono apparire nello stesso posto tra pagine:

  1. barre di navigazione
  2. il contenuto principale di una pagina
  3. pubblicità

Un meccanismo di navigazione crea un insieme di percorsi che un utente può seguire nel sito. Fornendo barre di navigazione, mappe del sito e funzioni di ricerca, tutto questo aumenterà la probabilità che l'utente raggiunga le informazioni che cerca presso tale sito. Se il sito ha una natura fortemente visuale, la struttura potrebbe risultare più difficoltosa da navigare se l'utente non riesce a definire una mappa mentale di dove stia andando o dove sia già stato. Per aiutarlo, gli sviluppatori di contenuto dovrebbe descrivere ogni meccanismo di navigazione . E' cruciale che le descrizioni e le guide del sito siano accessibili poichè chi si è "perso" nel sito vi farà forte affidamento.

Quando si forniscono funzioni di ricerca, gli sviluppatori di contenuto dovrebbero offrire meccanismi di ricerca che soddisfino diverse preferenze e livelli di competenza. La maggior parte dei motori di ricerca richiedono che l'utente digiti parole chiave per i termini di ricerca. Gli utenti con disabilità di spelling e utenti poco familiari con il linguaggio del vostro sito troveranno difficoltà cercando quello di cui hanno bisogno se la ricerca richiede uno spelling perfetto. I motori di ricerca potrebbero includere un controllore di spelling, offrire alternative di "miglior risultato" , ricerche di query-per-esempio, ricerche di somiglianza, etc.

3.6 Comprensione

Punti di controllo in questa sezione: 14.1, 13.8, e 14.2.

Le sezioni seguenti discutono tecniche per l'aiuto della comprensione di una pagina o sito.

3.6.1 Stile di scrittura

Le seguenti proposte di stile di scrittura dovrebbero aiutare a realizzare il contenuto del sito più semplice a leggersi per chiunque, in particolar modo per coloro che abbiano disabilità cognitive e/o di lettura. Diverse guide (incluso [HACKER]) discutono queste ed altre implicazioni sullo stile di scrittura più in dettaglio.

  1. Impegnarsi per intestazioni e links chiari ed accurati. Questo include l' uso di frasi di link che siano chiare e che diano senso quando lette fuori dal contesto o come parte di una serie di links (alcuni utenti navigano saltando da link a link e prestando attenzione solo ai link testuali). Usare intestazioni di informazione (headers) così che gli utenti possano scandire la pagina rapidamente per le informazioni piuttosto che leggerle in dettaglio.
  2. Situare la parte topica dell'enunciato o paragrafo all'inizio (questo è chiamato "front-loading"). Questo aiuterà sia coloro che selezionano visualmente, ma anche coloro che usano sintetizzatori vocali. "Selezionare" con vocalizzazione attualmente significa che l'utente salta da intestazione a intestazione, o da paragrafo a paragrafo e ascolta solo le parole necessarie a determinare se il pezzo di informazioni corrente (heading, paragraph, link, etc.) lo interessa. Se il senso principale del paragrafo è al centro o alla fine, gli utenti vocali potrebbero dover ascoltare la maggior parte del documento prima di trovare quello che desiderano. A seconda di quello che sta cercando l'utente e quanto conoscono rispetto la parte fondamentale, opportune caratteristiche di ricerca possono aiutare gli utenti a localizzare i contenuti più rapidamente.
  3. Limitare ciascun paragrafo all'idea principale.
  4. Evitare slang, dialetti, e significati particolari di parole familiari, a meno che non siano definite all'interno del documento.
  5. Favorire parole che sono usate comunemente. Per esempio, usare "iniziare" piuttosto che "principiare" o usare "tentare" piuttosto che "azzardare"
  6. Usare verbi attivi piuttosto che forme passive.
  7. Evitare strutture sintattiche complesse.

Per aiutare a determinare se il documento è di semplice lettura, considerare l'uso del misuratore di lettura Gunning-Fog (descritto in [SPOOL] con esempi e l'algoritmo on-line a [TECHHEAD]). Questo algoritmo generalmente produce un punteggio più basso quando il contenuto è più semplice da leggere. Come esempio, la Bibbia, Shakespeare, Mark Twain, risultano tutti avere un indice Fog di circa 6. Time, Newsweek, e il Wall St. Journal un indice Fog di circa 11.

3.6.2 Equivalenti multimediali

Per coloro che non leggono bene o non leggono affatto, gli equivalenti multimediali (non-testo) possono aiutare a semplificare la comprensione. Prestare attenzione perchè le presentazioni multimediali non sempre rendono il testo più semplice da comprendere. Talvolta, le presentazioni multimediali possono ingenerare confusione.

Esempi di multimedia che supplementano il testo:

  1. Una tabella di dati complessi, quali figure di vendita di un affare per il passato anno fiscale.
  2. Una traduzione di testo in una clip animata in Sign Language. Il Sign Language è un linguaggio molto diverso da quello parlato. Per esempio, alcuni che possano comunicare via American Sign Language potrebbero non essere in grado di leggere l'American English.
  3. Audio di musica preregistrato, linguaggio parlato o effetti di suono possono anche aiutare non vedenti che possono percepire presentazioni audio. Sebbene il testo possa essere generato come vocalizzato per mezzo di sintetizzatori vocali, cambi nella voce registrata dello speaker possono convogliare informazioni che fossero perse con il sintetizzatore.

3.7 Negoziazione del contenuto

Punti di controllo in questa sezione: 11.3.

  1. Invece di includere links quali "Ecco la versione in Francese di questo documento", usare la negoziazione del contenuto così che che la versione francese sia inviata ai clients con richiesta di tale versione dei documenti.
  2. Se non fosse possibile usare la negoziazione del contenuto, indicate il tipo di contenuto o linguaggio per mezzo di marcatori (e.g., in HTML usare "type" e "hreflang").

3.8 Refresh (aggiornamento) di pagina automatico

Punti di controllo in questa sezione: 7.4, e 7.5.

Gli sviluppatori di contenuto talvolta creano pagine che effettuano refresh (aggiornamento) o cambiano senza richiesta dell 'utente. Questo refresh automatico può essere per qualche utente molto disorientante. Invece, in ordine di preferenza, gli autori dovrebbero:

  1. Configurare il server per usare l'appropriato HTTP status code (301). L' uso degli headers HTTP è preferibile perchè: riduce il traffico Internet e i tempi di download, può essere applicato a documenti non-HTML e può essere usato da browsers che richiedono solo una richiesta di HEAD (e.g., link checkers). Inoltre, gli status codes del tipo 30x forniscono informazioni come "rimosso permanentemente" o "rimosso temporaneamente" che non possono essere dati con META refresh.
  2. Sostituire la pagina che dovrebbe essere ridiretta con una pagina statica contenente un link normale alla nuova pagina.

Nota. Sia il checkpoint 7.4 che il checkpoint 7.5 trattano problemi posti da legacy di browsers. I più recenti browsers dovrebbero disabilitare il refresh e sostituire con un link verso nuove informazioni all'inizio della pagina.

I seguenti sono esempi HTML deprecati . Il primo cambia la pagina utente a pagina a intervalli regolari. Gli sviluppatori di contenuto non dovrebbero usare questa tecnica per simulare la "push" technology. Gli sviluppatori non possono predire quanto tempo un utente richiederà per leggere una pagina: un refresh prematuro può disorientare gli utenti. Gli sviluppatori di contenuti dovrebbero evitare refresh periodici e consentire agli utenti di scegliere quando desiderano le informazioni più recenti.

Esempio deprecato.

<META http-equiv="refresh" content="60">
<BODY> 
<P>...informazioni...
</BODY>

Il seguente esempio HTML (usando l'elemento META ) sposta l'utente da una pagina ad un altra dopo un timeout. Comunque, gli utenti non dovrebbero ridirigere se stessi con questo marcatore poichè è un non-standard, disorienta gli utenti, e può distruggere la browser's history (cronologia) delle pagine visitate.

Esempio deprecato.

<HEAD>
<TITLE>Non usare questo!</TITLE>
<META http-equiv="refresh" content="5; 
         http://www.acme.com/newpagina">
</HEAD>
<BODY>
<P>Se il tuo broser supporta il refresh, 
sarai trasportato al nostro 
<A href="http://www.acme.com/newpagina">nuovo sito</A>
tra 5 secondi, altrimenti,seleziona il link manualmente.
</BODY>

3.9 Sfarfallìo dello schermo

Punti di controllo in questa sezione: 7.1.

Uno schermo che tremola o lampeggia può causare danni in utenti con epilessia fotosensibile e gli sviluppatori di contenuto dovrebbero perciò evitare di generare tremolii dello schermo. I danni menzionati possono essere triggerati con flickering o lampeggio (flashing) nella portata da 4 a 59 flashes per secondo (Hertz) con un picco di sensibilità a 20 flashes per secondo. Tali effetti possono essere determinati anche da rapidi cambiamenti dal buio alla luce (come nelle luci stroboscopiche).

3.10 Raccolta di documenti

Punti di controllo in questa sezione: 13.9.

Le raccolte di documenti possono facilitare la lettura off-line Per creare un contenitore congruo:

3.11 Validazione

Questa sezione tratta strategie e tecniche per testare documenti Web per determinarne le questioni di accessibilità che sono state risolte e quelle che non lo sono state. Questi tests dovrebbero evidenziare i maggiori problemi di accesso, sono validi nella riduzione di un buon numero di barriere di accessibilità. Comunque, alcuni di questi test di scenario replicano solo condizioni causate da una disabilità; non simulano l'esperienza completa che un utente potrebbe avere. Nella vita reale le vostre pagine possono essere meno usabili di quello che vi aspettiate. Perciò, una delle strategie consiglia che gli sviluppatori di contenuto osservino utenti con differenti disabilità quando questi tentino di usare una pagina o un sito.

Se, dopo aver completato i tests seguenti e aver adeguato conseguentemente il progetto, trovate che una pagina non è ancora accessibile, è probabile che dovreste creare una pagina alternativa che sia accessibile.

Nota. Il passaggio di questi tests non garantisce la conformità alle "Linee Guida dell'accessibilità dei Contenuti Web 1.0".

3.11.1 Validatori automatici

Un validatore può verificare la sintassi delle pagine (e.g., HTML, CSS, XML). La sintassi corretta aiuterà ad eliminare un numero di problemi di accessibilità poichè il software può processare documenti ben confezionati più semplicemente. Inoltre, alcuni validatori possono avvisare su alcuni problemi di accessibilità basati solo su sintassi (e.g., un documento manca di un un attributo o propietà che è importante per l'accessibilità). Nota. Comunque, la sintassi corretta non garantisce che un documento sarà accessibile. Ad esempio, pur fornendo un testo equivalente per un'immagine secondo le specificazioni del linguaggio, un testo può essere inaccurato o insufficiente. Alcuni validatori formuleranno quesiti conducendo l'autore attraverso le parti più importanti dell'analisi. Alcuni esempi di validatori automatici includono:

  1. Un tool di validazione di accessibilità automatizzato quale Bobby (Riferirsi a [BOBBY]).
  2. Un servizio di validazione HTML quale il W3C HTML Validation Service (Riferirsi a [HTMLVAL]).
  3. Un servizio di validazione di fogli di stile quale il W3C CSS Validation Service (Riferirsi a [CSSVAL]).

3.11.2 Tools di riparazione

I validatori usualmente riportano quali problemi risolvere e spesso danno esempi di come risolverli .Usualmente non aiutano un autore ad affrontare il singolo problema e a modificarlo interattivamente. Il WAI Evaluation e Repair Working Group ([WAI-ER]) ha il compito di sviluppare una suite di tools che aiuteranno gli autori non solo a identificare i problemi ma anche a risolverli interattivamente.

3.11.3 Scenari utente

Aver ben presente che la maggior parte debrowsers (browsers) e sistemi operativi consentono agli utenti di configurare parametri che cambiano l'aspetto di funzionamento dei software, suoni, e comportamenti. Con la varietà di browsers, utenti differenti avranno differenti esperienze col Web. Quindi:

  1. Testare le pagine con un browser di solo testo quale Lynx ([LYNX]) o un emulatore Lynx quali Lynx Viewer ([LYNXVIEW]) o Lynx-me ([LYNXME]).
  2. Usare browsers grafici multipli, con:
  3. Usare diversi browsers, vecchi e nuovi. Nota. Alcuni sistemi operativi o browsers non consentono installazioni multiple di browser sulla stessa macchina. Può essere anche difficile reperire software browser più vecchi.
  4. Usare altri tools quali browser vocali (e.g., [PWWEBSPEAK] e [HOMEPAGEREADER]), uno screen reader (e.g., [JAWS] e [WINVISION]), software di magnificazione, un piccolo display, una tastiera on screen , una tastiera alternativa , etc.

3.11.4 Pronuncia e controlli grammaticali

Una persona che legge una pagina con un sintetizzatore vocale può non essere in grado di decifrare il miglior risultato di una parola con un errore di spelling (pronuncia). I controllori grammaticali aiuteranno a garantire che il contenuto testuale della pagina sia corretto. Questo aiuterà i lettori per i quali il documento non è scritto nella loro lingua nativa, o coloro che cominciano a imparare la lingua con cui è stato scritto il documento. Così, aiuterete ad aumentare la comprensione della pagina.

3.12 Supporto del browser

Punti di controllo in questa sezione: 11.1.

Nota. Al momento di stesura di questo testo, non tutti i browsers supportano alcuni dei (nuovi) attributi ed elementi HTML 4.0 che possono aumentare significativamente l'accessibilità delle pagine Web .

Si prega di Riferirsi a l sito Web W3C ([WAI-UA-SUPPORT]) per informazioni sul supporto delle caratteristiche di accessibilità di browser e altri agenti utente.

In generale, si prega di notare che browsers HTML ignorano gli attributi che non supportano e visualizzano il contenuto degli elementi non supportati.


4 Tecniche HTML

Le sezioni che seguono illustrano alcune tecniche per progettare documenti HTML accessibili. Le sezioni sono suddivise per argomenti (e riflettono l'organizzazione delle specifiche dell'HTML 4.0, [HTML40]).

4.1 Struttura del documento e metadati

Punti di controllo in questa sezione: 3.2

Gli sviluppatori dovrebbero usare i marcatori di struttura ed usarli secondo le specifiche. Gli elementi di struttura e gli attributi (fare riferimento all'indice di elementi e attributi HTML per identificarli) permettono la compatibilità dei documenti e forniscono informazioni agli altri strumenti (ad es., strumenti di indicizzazione, motori di ricerca, programmi che estraggono tabelle dai database, strumenti di navigazione) che utilizzano gli elementi "header", e software di traduzione automatica che traducono il testo da una lingua ad un'altra.

4.1.1 Metadati

Punti di controllo in questa sezione: 13.2.

Alcuni elementi di struttura forniscono informazioni sul documento in sé. E' ciò che viene detto "metadato" del documento -- Il metadato è l'informazione sui dati. Un metadato scritto ad arte può fornire importanti informazioni agli utenti. Gli elementi HTML che forniscono informazioni utili sul documento comprendono:

4.1.2 Headers di sezione

Punti di controllo in questa sezione: 3.5.

Le sezioni dovrebbero cominciare con gli elementi HTML di intestazione "header" (H1-H6). Un altro marcatore può integrare questi elementi per migliorare la visualizzazione (ad es. l'elemento HR per creare una linea di divisione orizzontale), ma la rappresentazione visiva non è sufficiente per identificare le sezioni di un documento.

Poiché alcuni utenti sono soliti sfogliare rapidamente un documento navigando tra le intestazioni, è importante che queste vengano utilizzate in modo appriopriato per riflettere la struttura del documento. Gli utenti dovrebbero ordinare correttamente gli elementi di intestazione. Ad esempio, in HTML, gli elementi H2 dovrebbero seguire gli elementi H1, gli elementi H3 dovrebbero seguire gli elementi H2, ecc. Gli sviluppatori non dovrebbero "saltare" i livelli (ad esempio da H1 direttamente ad H3). Non si devono utilizzare le intestazioni per creare effetti di testo; si utilizzino, invece,ad esepio, i fogli di stile per cambiare lo stile dei caratteri.

Osserviamo che nell'HTML, gli elementi di intestazione (H1 - H6) iniziano esclusivamente le sezioni, non le contengono come elemento contenuto. L'esempio HTML seguente mostra come i fogli di stile possono essere usati per controllare la visualizzazione di un'intestazione e del contenuto successivo:

Esempio.

   <HEAD>
   <TITLE>Tecniche di cucina</TITLE>
   <style type="text/css">
      /* Indentare header e contenuto seguente  */
      DIV.sezione2 { margin-left: 5% }
   </style>
   </HEAD>
   <BODY>
   <H1>Tecniche di cucina</H1>
   ... del testo qui ...
   <DIV class="sezione2">
   <H2>Cucina con olio</H2>
   ... testo della sezione ...
   </DIV>
   <DIV class="sezione2">
   <H2>Cucina con burro</H2>
   ... testo della sezione ...
   </DIV>

Fine esempio.

4.1.3 Metadati di link e strumenti di navigazione

Punti di controllo in questa sezione: 13.2.

Gli sviluppatori dovrebbero utilizzare l'elemento LINK (collegamento) e i tipi di collegamento (fare riferimento a [HTML40], sezione 6.12) per descrivere i meccanismi di navigazione del documento e la sua organizzazione. Alcuni browsers possono sintetizzare gli strumenti di navigazione o permettere la stampa ordinata di un insieme di documenti basandosi su questi marcatori.

Esempio.

I seguenti elementi LINK potrebbero essere inclusi nell'intestazione del Capitolo 2 di un libro:

   <LINK rel="Successivo" href="capitolo3">
   <LINK rel="Precedente" href="capitolo1">
   <LINK rel="Inizio" href="copertina">
   <LINK rel="Glossario" href="glossario">

Fine esempio.

Vedere anche la sezione sui links.

4.1.4 Raggruppamento di strutture

Punti di controllo in questa sezione: 12.3.

I seguenti meccanismi HTML 4.0 raggruppano il contenuto e ne rendono più semplice la comprensione:

Tutti questi procedimenti di raggruppamento dovrebbero essere utilizzati quando servono e in modo naturale, per esempio quando le informazioni si suddividono esse stesse in gruppi logici. Gli sviluppatori non dovrebbero creare gruppi in maniera casuale perché ciò confonderebbe gli utenti.

4.2 Informazioni sulla lingua

Punti di controllo in questa sezione: 4.1, e 4.3.

Se su pagina si scrive del testo in lingue diverse, ci si deve assicurare che ogni cambiamento di lingua sia chiaramente identificato per mezzo dell'attributo " lang":

Esempio.

   <P>E con un certo <SPAN lang="fr">je ne sais quoi</SPAN>, 
   lei entrò nella stanza e nella sua vita, per sempre. <Q lang="en">
   My name is Natasha,</Q> disse. <Q lang="it">Piacere,</Q>
   lui rispose, chiudendo la porta, in un impeccabile italiano.

Fine esempio.

Riconoscere i cambi di lingua è importante per una serie di motivi:

  1. Gli utenti che leggono i documenti in braille saranno in grado di sostituire gli appropriati codici di controllo (markup) dove avvengono i cambi di lingua per assicurare che il software di traduzione braille generi i caratteri in modo corretto (per esempio, i caratteri accentati). Questi codici di controllo impediscono che vengano generate le abbreviazioni braille che potrebbero confondere gli utenti. Le abbreviazioni braille combinano i gruppi più comuni che di solito compaiono in più celle in un'unica cella. Per esempio, "ing" che di solito occupa tre celle (una per ogni singolo carattere) può essere abbreviato in una singola cella..
  2. Analogamente, i sintetizzatori di testo che "parlano" diverse lingue saranno in grado di leggere il testo con l'accento appropriato e la corretta pronuncia. Se questi cambiamenti non vengono segnalati, il sintetizzatore cercherà di leggere, al meglio, la parola utilizzando la lingua principale in cui opera. Così, il termine francese per auto, "voiture" verrà pronunciato dal traduttore, in italiano, nello stesso modo in cui la vediamo scritta.
  3. Utenti che non sono in grado di tradurre da lingue diverse, saranno in grado di avere i termini non familiari tradotti dai traduttori automatici.

È anche una buona norma identificare la lingua principale del documento, sia con il marcatore (come illustrato sotto) o tramite le intestazioni HTTP.

Esempio.

    <HTML lang="fr">
       ....parte di un documento HTML scritto in francese...
    </HTML>

Fine esempio.

4.3 Marcatura del testo

Le sezioni che seguono illustrano i modi di aggiungere una struttura a delle parti di testo.

4.3.1 Enfatizzazione

Punti di controllo in questa sezione: 3.3.

I corretti elementi HTML per evidenziare l'enfasi, sono: EM e STRONG. Gli elementi B e I non dovrebbero essere usati; sono usati per creare un effetto visivo di presentazione. Gli elementi EM e STRONG sono stati introdotti per indicare una struttura di enfasi che può, poi, essere resa in una varietà di modi (cambiamento dello stile dei caratteri, cambiamento dell'inflessione di pronuncia, ecc.)

4.3.2 Acronimi e abbreviazioni

Punti di controllo in questa sezione: 4.2.

Le abbreviazioni e gli acronimi vanno indicati con ABBR e ACRONYM e va utilizzato "title" per indicarne il significato esteso:

Esempio.

   <P>Benvenuti al <ACRONYM title="World Wide Web">WWW</ACRONYM>!</P>

Fine esempio.

4.3.3 Citazioni

Punti di controllo in questa sezione: 3.7.

Gli elementi Q e BLOCKQUOTE indicano delle citazioni, rispettivamente, sulla stessa riga oppure in un blocco di testo.

Esempio.

L'esempio evidenzia una lunga citazione con BLOCKQUOTE:

   <BLOCKQUOTE cite="http://www.shakespeare.com/loveslabourlost">
     <P>Remuneration! O! that's the Latin word for three farthings.
        --- William Shakespeare (Love's Labor Lost).
     </P>
   </BLOCKQUOTE>

Fine esempio.

4.3.4 Marcatori e fogli di stile piuttosto che immagini: l'esempio del testo matematico

Punti di controllo in questa sezione: 3.1.

L'uso dei marcatori (e dei fogli stile) dove sia possibile piuttosto che le immagini (ad esempio per le equazioni matematiche) favorisce l'accessibilità per i seguenti motivi :

Come esempio, consideriamo queste tecniche per inserire del testo matematico sul Web :

TeX viene comunemente utilizzato per creare documenti tecnici che successivamente vengono convertiti in HTML per la pubblicazione sul Web. Ad ogni modo, i convertitori tendono a generare immagini, utilizzare marcatori deprecati e ad utilizzare le tabelle per disegnare la pagina. Di conseguenza, i fornitori di contenuto, dovrebbero:

  1. Rendere il documento originale TeX (o LaTeX) disponibile sul Web. Esiste un sistema "AsTeR" ([ASTER]) in grado di creare una rappresentazione uditiva dei documenti TeX e LaTeX. Inoltre, IBM fornisce un plug-in per Netscape e Internet Explorer che legge i documenti TeX/LaTeX e alcuni di quelli MathML (Riferirsi a [HYPERMEDIA]).
  2. Assicurarsi che l'HTML creato dai processi di conversione sia accessibile. Fornire una descrizione singola dell'equazione (piuttosto che il testo "alt" su ogni immagine generata poiché ci potrebbero essere piccole immagini per piccole parti dell'equazione).

4.3.5 Miscellanea di marcatori di struttura

La specifica HTML 4.0 definisce i seguenti elementi di struttura per altri utilizzi necessari dei marcatori:

CITE
Contiene una citazione o un riferimento ad altre sorgenti .
DFN
Indica la presenza di una definizione del termine contenuto.
CODE
Indica un frammento di un codice sorgente di programmazione.
SAMP
Indica esempi di output di programmi, scritti, ecc..
KBD
Indica il testo che può essere introdotto dall'utente .
VAR
Indica l'occorrenza di una variabile o l'argomento di un programma .
INS
Indica del testo inserito in un documento .
DEL
Indica del testo rimosso dal documento.

4.4 Elenchi

Punti di controllo in questa sezione: 3.6.

Gli elementi HTML da utilizzare per creare gli elenchi sono: DL, UL, e OL non sono da utilizzare per creare degli effetti di formattazione come l'indentazione.

Gli elenchi ordinati aiutano la navigazione degli utenti non vedenti. Gli utenti non vedenti possono "smarrirsi" negli elenchi, specialmente negli elenchi annidati e in quelli dove non sono indicati i livelli specifici di annidamento per ogni singolo termine. A meno che il programma di lettura fornisca un metodo per identificare chiaramente il contenuto di un elenco (ad esempio, supportando lo pseudo-elemento ":before" del CSS2), gli sviluppatori dovrebbero includere delle tracce interne ai propri elenchi.

Nel caso degli elenchi numerati, i numeri composti sono più esplicativi dei singoli numeri. Così un elenco numerato "1, 1.1, 1.2, 1.2.1, 1.3, 2, 2.1" fornisce maggiori informazioni dello stesso elenco senza l'utilizzo dei numeri composti, quale potrebbe essere il seguente elenco formattato:

1.
  1.
  2.
    1.
  3.
2.
  1.

che verrebbe letto come "1, 1, 2, 1, 2, 3, 2, 1", senza riportare alcuna informazione circa la profondità nell'elenco.

[CSS1] e [CSS2] consentono agli utenti di controllare lo stile dei numeri (per ogni tipo di elenco, non solo quelli ordinati) attraverso l'utilizzo dei fogli di stile.

Esempio.

Il seguente foglio di stile CSS2 mostra come specificare i numeri composti per l'utilizzo degli elenchi annidati creati con gli elementi UL o OL. I termini vengono numerati come"1", "1.1", "1.1.1", ecc.

<style type="text/css">
   UL, OL { counter-reset: item }
   LI { display: block }
   LI:before { content: counters(item, "."); counter-increment: item }
</style>

Fine esempio.

Fino a quando il CSS2 non sarà largamente supportato o i browsers non forniscano il controllo degli elenchi attraverso altri modi, gli autori dovrebbero considerare l'eventualità di fornire del testo contestuale agli elenchi annidati e privi di numeri. Gli utenti non vedenti potrebbero avere delle difficoltà ad individuare dove un elenco cominci o finisca o dove cominci ciascun termine dell'elenco. Ad esempio, se un termine finisce sulla riga successiva, potrebbe apparire come costituito da due termini distinti dell'elenco. Ciò può porre dei problemi ai programmi che leggono lo schermo.

4.4.1 Utilizzo dei fogli di stile per cambiare i simboli degli elenchi

Per cambiare lo stile "bullet" (pallino) dei simboli per indicare i termini di un elenco non ordinato creato con l'elemento LI si devono utilizzare i fogli di stile. Nel CSS è possibile specificare uno stile di simbolo di "recupero" (ad esempio, un cerchio) qualora non sia possibile caricare l'immagine "bullet" del simbolo voluto.

Esempio.

<HEAD>
<TITLE>Usare i fogli di stile per cambiare i bullets</TITLE>
<stile type="text/css">
   UL { list-style: url(star.gif) disc }
</style>
</HEAD>
<BODY>
<UL>
   <LI>Audrey
   <LI>Laurie
   <LI>Alice
</UL>

Fine esempio.

Per essere più sicuri che gli utenti comprendano le differenze tra le voci degli elenchi rappresentate visivamente, gli sviluppatori dovrebbero fornire un'etichetta di testo prima o dopo ciascun termine della lista:

Esempio.

In questo esempio, le nuove informazioni vengono segnalate tramite il testo ("New"), lo stile dei caratteri (grassetto) e il colore (il pallino giallo, il testo rosso su sfondo giallo).

<HEAD>
<TITLE>Esempio di stile del "pallino"</TITLE>
<stile type="text/css">
   .new_testo { font-weight: bold;
             color: red;
             background-color: yellow }
   .new_pallino { list-style : url(yellow.gif) disc }
</style>
</HEAD>
<BODY>
<UL>
   <LI class="new_pallino">Roth IRA <SPAN class="new_testo">New</SPAN></LI>
   <LI> 401(k)</LI>
</UL>
</BODY>

Fine esempio.

Si dovrebbe evitare di utilizzare le immagini in sostituzione dei pallini creati negli elechi da DL, DT, e DD. Tuttavia, se si decide di utilizzare questa via, ci si deve assicurare di fornire un testo corrispondente alle immagini.

Esempio deprecato.

<HEAD>
<TITLE>Esempio deprecato sull'uso delle immagini negli elenchi DL</TITLE>
</HEAD>
<BODY>
<DL>
   <DD><IMG src="star.gif" alt="* ">Audrey
   <DD><IMG src="star.gif" alt="* ">Laurie
   <DD><IMG src="star.gif" alt="* ">Alice
</DL>

Gli sviluppatori di contenuto dovrebbero evitare gli stili di elenco laddove i pallini forniscono informazioni visive addizionali. Tuttavia, se ciò viene fatto, ci si assicuri di fornire del testo corrispondente che descriva il significato dei pallini:

Esempio deprecato.

<DL>
<DD><IMG src="red.gif" alt="New:">Roth IRA</DD>
<DD><IMG src="yellow.gif" alt="Old:">401(k)</DD>
</DL>

4.5 Tabelle

In questa sezione si discute dell'accessibilità delle tabelle e di quegli elementi che possono essere inseriti nell'elemento TABLE. Vengono analizzati due tipi di tabelle: le tabelle utilizzate per organizzare i dati e le tabelle create per creare l'organizzazione visuale della pagina.

4.5.1 Tabelle di dati

Punti di controllo in questa sezione: 5.5, 5.1, 5.2, e 5.6.

Gli sviluppatori di contenuto possono rendere più accessibili le tabelle di dati HTLM 4.0 in vari modi:

Questo marcatore permetterà ai browser accessibili e ad altri programmi utenti di ristrutturare o di navigare le tabelle i modi non visivi.

Per informazioni sulle intestazioni di tabella, fare riferimento all'algoritmo e all'analisi dell'intestazione delle tabelle presenti nelle Raccomandazioni HTML 4.0 ([HTML40], sezione 11.4.3).

Esempio.

Questo esempio mostra come associare le celle dei dati (create con TD) con le intestazioni corrispondenti per mezzo dell'attributo " headers". L'attributo "headers" specifica un elenco di intestazioni di celle (etichette di righe e di colonne) associate alla corrente cella di dati. Ciò richiede che ciascuna intestazione di cella abbia un attributo "id".

   <TABLE border="1" 
          summary="questa tabella riporta il numero di tazze di caffè
                   bevute da ogni senatore, il tipo di caffè (decaffeinato
                   o normale)e se consumate con lo zucchero.">
     <CAPTION>Tazze di caffè bevute da ciascun senatore</CAPTION>
     <TR>   
         <TH id="header1">Nome</TH>
         <TH id="header2">Tazze</TH>     
         <TH id="header3" abbr="Tipo">Tipo di caffè</TH>   
         <TH id="header4">Zucchero?</TH>
     </TR>  
         <TD headers="header1">A. Rossi</TD>  
         <TD headers="header2">10</TD>
         <TD headers="header3">Espresso</TD>
         <TD headers="header4">No</TD>  
     </TR>  
         <TD headers="header1">B. Verdi</TD> 
         <TD headers="header2">5</TD>
         <TD headers="header3">Decaffeinato</TD>
        <TD headers="header4">Si</TD>
  </TABLE>

Fine esempio

Un sintetizzatore vocale potrebbe rendere questa tabella come segue:

  Caption: Tazze di caffe consumate da ciascun senatore
  Summary: questa tabella riporta il numero di tazze di caffè
           consumate da ciascun senatore, il tipo di caffè
          (decaffeinato o normale), e se preso con zucchero.
  Nome: A. Rossi, Tazze: 10, Tipo: Espresso, Zucchero: No
  Nome: B. Verdi, Tazze: 5, Tipo: Decaffeinato, Zucchero: Sì

Un programma utente visuale la potrebbe rappresentare come segue:

[Descrizione della tabella caffé]

L'esempio successivo associa le stesse celle intestazione (TH) e data (TD) di prima, ma questa volta utilizza l'attributo "scope" (estensione, ambito) invece di "headers". "Scope" deve avere uno dei seguenti valori: "row", "col", "rowgroup", o"colgroup". Scope specifica l'insieme delle celle dei dati da associare con la corrente intestazione di cella. Questo metodo è particolarmente utile nel caso di semplici tabelle. Si dovrebbe osservare che la resa "parlata" di questa tabella dovrebbe essere identica a quella dell'esempio precedente. Una scelta tra gli attributi "headers" e "scope" dipende dalla complessità della tabella.

Esempio.

   <TABLE border="1" 
          summary="questa tabella riporta ...">  
      <CAPTION>Tazze di caffè bevute da ciascun senatore</CAPTION>
      <TR>  
           <TH scope="col">Nome</TH>
           <TH scope="col">Tazze</TH>
           <TH scope="col" abbr="Tipo">Tipo di caffè</TH>  
           <TH scope="col">Zucchero?</TH></TR>
      <TR>  
           <TD>A. Verdi/TD>  
	   <TD>10</TD>
           <TD>Espresso</TD>   
           <TD>No</TD></TR>
      <TR>  
           <TD>B. Rossi</TD>  
	   <TD>5</TD>
           <TD>Decaffeinato</TD;>
	   <TD>Si</TD></TR>
     </TABLE>

Fine esempio.

L'esempio successivo mostra come creare delle categorie all'interno di una tabella utilizzando l'attributo " axis".

 

Esempio.

   <TABLE border="1">
     <CAPTION>Rendiconto delle spese di viaggio</CAPTION>
     <TR>  
          <TH></TH>  
          <TH id="header2" axis="spese">Pasti
          <TH id="header3" axis="spese">Alberghi
          <TH id="header4" axis="spese">Trasporti
          <TD>subtotale</TD>    
     <TR>  
          <TH id="header6" axis="localita">San Jose
          <TH> <TH> <TH> <TD> 
     <TR>  
         <TD id="header7" axis="data">25 Agosto 97
         <TD headers="header6 header7 header2">37.74
         <TD headers="header6 header7 header3">112.00
         <TD headers="header6 header7 header4">45.00
         <TD>
     <TR>  
         <TD id="header8" axis="data">26 Agosto 97
         <TD headers="header6 header8 header2">27.28
         <TD headers="header6 header8 header3">112.00
         <TD headers="header6 header8 header4">45.00 
         <TD>
     <TR>  
         <TD>subtotale
         <TD>65.02
         <TD>224.00
         <TD>90.00
         <TD>379.02
     <TR>   
         <TH id="header10" axis="localita">Seattle
         <TH> <TH> <TH> <TD>
     <TR>  
         <TD id="header11" axis="data">27 Agosto 97
         <TD headers="header10 header11 header2">96.25
         <TD headers="header10 header11 header3">109.00
         <TD headers="header10 header11 header4">36.00
         <TD>
     <TR>  
         <TD id="header12" axis="data">28 Agosto 97
         <TD headers="header10 header12 header2">35.00
         <TD headers="header10 header12 header3">109.00
         <TD headers="header10 header12 header4">36.00 
         <TD>
     <TR>  
         <TD>subtotale
         <TD>131.25
         <TD>218.00
         <TD>72.00
         <TD>421.25
     <TR>   
         <TH>Totale
         <TD>196.27
         <TD>442.00
         <TD>162.00
         <TD>800.27
   </TABLE>

Fine esempio.

Questa tabella elenca le spese di viaggio in due località: Roma e Milano per data e tipologia (pasti, alberghi e trasporti). L'immagine successiva mostra come la potrebbe rappresentare un browser visuale. [Descrizione della Tabella Viaggi]

Tabella delle Spese di Viaggio rappresentata da un browser visuale.

4.5.2 Evitare le tabelle per l'impaginazione

Punti di controllo in questa sezione: 5.3 e 5.4.

Gli autori dovrebbero usare i fogli di stile per l'impaginazione e il posizionamento. Quando, tuttavia, è necessario utilizzare una tabella per l'impaginazione, questa deve linearizzarsi in modo leggibile. Quando una tabella viene linearizzata, il contenuto delle celle diviene una successione di paragrafi (ad esempio, in verticale nella pagina). Le celle dovrebbero avere senso quando lette in ordine (per riga o per colonna) e dovrebbero contenere gli elementi strutturali (per creare paragrafi, intestazioni, elenchi, ecc.) così che la pagina abbia senso dopo la linearizzazione.

Inoltre quando si usano le tabelle per creare un'impaginazione, non si devono utilizzare i marcatori strutturali per creare una formattazione visiva. Ad esempio, l'elemento TH (intestazione di tabella), di solito è mostrato centrato sul video e in grassetto. Se una cella non è in realtà una intestazione di riga o colonna di dati, si usino i fogli di stile oppure gli attributi di formattazione dell'elemento.

4.5.3 Testo a capo nelle tabelle

Punti di controllo in questa sezione: 10.3.

Le tabelle usate per disporre  pagine e alcune  tabelle di dati  in cui il testo delle celle va a capo, pongono problemi per gli screen readers più vecchi che non  interpretano il sorgente  HTML o browsers che non consentono la navigazione di celle di tabelle individuali. Questi screen readers procederanno attraverso la pagina leggendo, come fosse un'unico enunciato, gli enunciati di diverse colonne colonne sulla stessa riga.

Per esempio, se una tabella è resa così sullo schermo:

C'é un 30% probabilitá di               Classi alla Universitá di Wisconsin 
rovesci questa mattina,                 ma  riprenderanno il 3 Settembre. 
dovrebbe fermarsi prima del weekend.

Questo potrebbe essere letto da uno screen reader come:

C'e un 30% di probabilitá di Classi alla University of Wisconsin
rovesci questa mattina,ma riprenderanno il 3 Settembre. 
dovrebbero cessare prima del weekend.

Gli Screen readers che leggono il sorgente HTML riconosceranno la  struttura di ciascuna cella, ma per gli screen readers più vecchi, gli sviluppatori di contenuto possono minimizzare il rischio di mandare a capo una parola (word wrapping) limitando la quantità di testo in ciascuna cella. Inoltre, i blocchi di testo più corposi dovrebbero essere tutti nell'ultima colonna (per tabelle da sinistra a destra la più a destra). In questo modo, se si verifica un a capo, la lettura potrà essere ancora coerente. Gli sviluppatori di contenuto dovrebbero testare le  tabelle per il wrapping (a capo) con una risoluzione per il  browser di "640x480".

Poichè il marcatore di tabella è strutturale, e noi suggeriamo di separare struttura da presentazione, si consiglia di usare i fogli di stile per creare layout, allineamento, ed effetti di presentazione. Quindi, le due colonne nell'esempio summenzionato potrebbero essere create usando i fogli di stile. Si prega di riferirsi alla sezione sui fogli di stile per maggiori informazioni.

Quicktest! Per ottenere una migliore comprensione su come uno screen reader leggerebbe una tabella, prendete un pezzo di carta, ponetelo adeguatamente sulla pagina e leggete la tabella linea per linea.

4.5.4 Problemi di compatibilità verso il basso (indietro) per le tabelle 

Nei browsers HTML 3.2, le righe di un elemento TFOOT appariranno prima del corpo della tabella.

4.6 Links

Punti di controllo in questa sezione: 13.1, e 13.6.

Un buon  link di testo non dovrebbe essere troppo generico; non usare "clicca qui" o "click here". Non solo questa frase è dipendente dal dispositivo (implica un dispositivo di puntamento, mouse ad esempio) ma, inoltre, non dice niente circa quello sarà trovato se si segue il link stesso. Invece di "clicca qui", il testo del link dovrebbe indicate la natura del target del link stesso, come in "maggiori  informazioni circa i leoni di mare" o " versione di solo testo di questo pagina". Notare che per  l'ultimo caso (e altri documenti con formato o linguaggi specifici), gli sviluppatori di contenuto sono invece incoraggiati all'uso di negoziazione di contenuto , così che gli utenti che preferissero una  versione di  testo sarebbero automaticamente serviti.

In aggiunta alla chiarezza di testo per il link, gli sviluppatori di contenuto possono specificare un valore dell'attributo "title" che descriva chiaramente  e accuratamente il  target del link.

Se più di un link su una pagina condivide lo stesso testo del link, tutti quei links dovrebbero puntare alla stessa risorsa. Tale consistenza aiuterà il progetto della pagina design così come l'accessibilità.

Se due o più links si riferiscono a differenti targets ma condividono lo stesso testo di link, distinguete i links specificando un diverso valore per l'attributo "title" di ciascun elemento A.

Gli "utenti udibili" --cioè utenti non vedenti, con difficoltà di vista, o che usino dispositivi con visualizzatori piccoli o non disponibili -- non sono in grado di  scandire la pagina rapidamente con i loro occhi. Per ottenere una vista di insieme di una pagina o per trovare rapidamente un link, questi utenti spesso tabuleranno da un  link al successivo o rivisiteranno un elenco di links disponibili sulla pagina.

Perciò, per una serie di links tra loro in relazione, includere informazioni introduttive nel primo link, distinguendo quindi le informazioni nei links che seguiranno. Questo fornirà informazioni di contesto per gli utenti che li leggeranno in sequenza.

Esempio.

  <A href="my-doc.html">Il mio documento é disponibile in HTML</A>,
  <A href="my-doc.pdf" title="Il mio documento in PDF">PDF</A>,
  <A href="my-doc.txt" title="Il mio documento in testo">testo semplice</A>

Fine esempio.

Quando è usata una immagine come contenuto di un link, specificare un testo equivalente per l'immagine.

Esempio.

  <A href="routes.html">
     <IMG src="topo.html" 
          alt="Percorsi per la Boulders Climbing Gym">
  </A>

Fine esempio.

4.6.1 Raggruppamento  e (bypass) salto di links

Quando i links sono raggruppati in gruppi logici (per esempio, in una barra di navigazione che appare su ogni pagina in un sito) dovrebbero essere marcati come una unità. Le barre di navigazione usualmente sono la prima cosa che si incontra su una pagina. Per utenti con sintetizzatore vocale, questo significa dover udire un numero di links su ogni pagina prima di raggiungere il contenuto di interesse della pagina. Ci sono diversi modi che consentono agli utenti di bypassare (saltare) gruppi di links (come fanno gli utenti con visione quando vedono lo stesso set su ciascuna pagina):

In futuro, i browsers consentiranno agli utenti di saltare elementi come le barre di navigazione.

Nell'HTML, usare gli  elementi  DIV, SPAN, P, o FRAME per raggruppare i links. Quindi identificare il gruppo con gli attributi " id" o " class".

Esempio.

In questo esempio, l'elemento P raggruppa un set di links, l'attributo "class" lo identifica come barra di navigazione (e.g., per i fogli di stile), " tabindex" è fissato su una anchor che segue il gruppo, e un link all'inizio del gruppo di links, si collega all'anchor dopo il gruppo.

   <HEAD>
   <TITLE>Come usare il nostro sito</TITLE>
   </HEAD>
   <BODY>     
     <P class="nav">    
       [<A href="#come">Bypassare (saltare) la barra di navigazione</A>]
       [<A href="home.html">Home</A>]
       [<A href="ricerca.html">Ricerca</A>]
       [<A href="novita.html">Novità e in risalto</A>]
       [<A href="sitomap.html">mappa sito</A>]
     </P>     
     <H1><A name="come" tabindex="1">Come usare il nostro sito</A></H1>
   <!-- contenuto della pagina -->     
   </BODY>     

Fine esempio.

4.6.2 Accesso da tastiera

L'accesso da tastiera per attivare gli elementi di una pagina è importante per molti utenti che non possono usare un dispositivo di puntamento. Gli agenti utente (i browsers) possono includere caratteristiche che consentano agli utenti di collegare la pressione di tasti a certe azioni. Inoltre l'HTML 4.0 consente agli sviluppatori di contenuti di specificare scorciatoie (shortcuts) da tastiera in documenti con l'attributo " tabindex".

Esempio.

In questo esempio, se l'utente attiva il tasto "C" , sarà seguito il link.

   <A accesskey="C" href="doc.html" hreflang="en"
      title="Home pagina azienda XYZ">
         Home pagina azienda XYZ</A>

Fine esempio.

4.7 Immagini e mappe imagini

Le seguenti sezioni discutono l'accessibilità delle immagini (incluso semplici animazioni quali GIF animate) e mappe immagini.

Per  informazioni circa il linguaggio matematico rappresentato con immagini, Riferirsi a lla sezione su  usare marcatori di testo e fogli di stile piuttosto che immagini.

4.7.1 Equivalenti di testo per le immagini

Punti di controllo in questa sezione: 1.1.

Quando si usa IMG, specificare un breve testo equivalente con l'attributo " alt". Nota. Il valore di questo attributo è riferito come "alt-text".

Esempio.

   <IMG src="lente_ingrandimento.gif" alt="Ricerca">     

Fine esempio.

Quando si usa OBJECT, specificare un testo equivalente nel body (corpo) dell'elemento OBJECT:

Esempio.

   <OBJECT data="lente_ingrandimento.gif" type=" immagini/gif">
      Ricerca 
   </OBJECT>

Fine esempio.

Quando un breve testo equivalente non è sufficiente  a trasmettere adeguatamente  la funzione o il ruolo di una immagine, fornire informazioni aggiuntive in un file designato con l'attributo " longdesc":

Esempio.

      <IMG src="vendite97.gif" alt="Vendite per il 1997" 
        longdesc="vendite97.html">

In vendite97.html:

Un grafico mostra come sono cresciute le vendite nel 1997. Il grafico
è un istogramma che mostra la percentuale che cresce nelle vendite per mese. Le vendite in gennaio sono aumentate del 10% da dicembre 1996,
le vendite in febbraio sono calate del 3%, ..

Fine esempio.

Per i browsers che non supportano "longdesc", fornire un link di descrizione vicino al grafico:

Esempio.

   <IMG src="vendite97.gif" alt="Vendite per il 1997" longdesc="vendite.html">
   <A href="vendite.html" title="descrizione delle figure di vendite 1997 ">[D]</A>

Fine esempio.

Quando si usa OBJECT, specificare il testo equivalente più lungo dentro il contenuto dell'elemento:

Esempio.

   <OBJECT data="vendite97.gif" type=" immagine/gif">
          Le vendite nel 1997 sono diminuite in seguito a
          <A href="anticipa.html">anticipato 
          acquisto</A> ...
   </OBJECT>

Fine esempio.

Notare che il contenuto OBJECT , diversamente al testo "alt" , può includere marcatori. Perciò, gli sviluppatori di contenuto possono fornire un link a informazioni aggiuntive dall'elemento OBJECT:

Esempio.

   <OBJECT data="vendite97.gif" type=" immagine/gif">
          Grafico delle nostre vendite nel 1997.
          E'disponibile <A href="desc.html">la descrizione testuale</A> . 
  </OBJECT>

Fine esempio.

4.7.2 D-links invisibili

Nota. I d-links invisibili sono deprecati in favore dell'attributo "longdesc".

Un d-link invisibile è un'immagine piccola (1-pixel) o trasparente il cui valore di attributo " alt" è "D-link" o "D" ed è parte del contenuto di un elemento A . I d-links, si riferiscono al testo equivalente dell'immagine associata. Come per gli altri links, gli utenti possono tabularli. I d-links invisibili quindi forniscono una (temporanea) soluzione per i progettisti che desiderino evitare per ragioni di stile d-links visibili.

4.7.3 Ascii art

Punti di controllo in questa sezione: 13.10.

Evitare le ascii art (figure di caratteri) ed usare invece immagini reali poichè è più semplice fornire un testo equivalente per le immagini. Comunque, se deve essere usata una ascii art fornire un link per saltare la ASCII art stessa, come segue.

Esempio.

<P>
<a href="#post-art">salta la ASCII art</a>
<!-- ASCII art va qui -->
<a name="post-art">legenda per la ASCII art</a>

Fine esempio.

Una ASCII art può anche essere marcata come segue saltare una figura ascii o consultare la descrizione della ascii art:

Esempio.

 title="Figura che mostra la percentuale di pazienti 
fotosensibili in cui è stata provocata una risposta fotoconvulsiva 
con un treno di due secondi di flashes con occhi aperti e chiusi."> 
  %   __ __ __ __ __ __ __ __ __ __ __ __ __ __   
100 |             *                             |
 90 |                *  *                       |
 80 |          *           *                    |
 70 |             @           *                 |
 60 |          @                 *              |
 50 |       *        @              *           |
 40 |                   @              *        |
 30 |    *  @              @  @           *     |
 20 |                                           |
 10 |    @                       @  @  @  @     |
      0  5 10 15 20 25 30 35 40 45 50 55 60 65 70
      Flash frequency (Hz)

Fine esempio.

Un'altra opzione per piccole ascii art è usare un elemento ABBR con "title".

Esempio.

<P><ABBR title="smiley in ascii art">:-)</ABBR>

Fine esempio.

Se la ASCII art è complessa, assicurare che il testo equivalente la descriva adeguatamente.

Un altro modo per sostituire le ascii art è quello di usare sostitutivi del linguaggio umano. Per esempio, <occhiolino> potrebbe sostituire uno smiley "occhiolino":  ;-). O, la parola  "quindi" può sostituire frecce costituite di lineette e maggiore invece dei segni (e.g., -->), e la parola "grande" al posto dell'abbreviazione poco comune "gr8"(gr_eight).

4.7.4 Mappe immagine

Una mappa immagine è una  immagine che ha "regioni attive". Quando l'utente seleziona una delle regioni, avvengono alcune azioni -- può essere seguito un link, possono essere inviate informazioni ad un server, etc. Per rendere accessibile una mappa immagine, gli sviluppatori di contenuto devono assicurare che ciascuna azione associata ad una regione visiva possa essere attivata senza un dispositivo di puntamento.

Le mappe immagine sono create con l'elemento MAP . HTML consente due tipi di mappe immagine: lato client (il browser utente che processa un URL) e lato server (il server processa le coordinate del click ). Per tutte le mappe immagine, gli sviluppatori di contenuto devono fornire un testo equivalente.

Gli sviluppatori di contenuto dovrebbero creare mappe immagine lato client (con " usemap") piuttosto che mappe immagine lato server (con " ismap") poichè le mappe immagine lato server richiedono uno specifico dispositivo di input. Se devono essere usate mappe immagine lato server, le (e.g., perchè la geometria di una regione non può essere rappresentata con valori dell' attributo shape ), gli autori devono fornire la stessa funzionalità o le stesse informazioni in un formato alternativo accessibile. Un modo per ottenere questo è fornire un link di testo per ciascuna regione attiva così che ciascun link sia navigabile con la tastiera. Se si deve usare una mappa immagine lato server, si prega di consultare la sezione sulle mappe immagine lato server.

4.7.5 Mappe immagine lato client

Punti di controllo in questa sezione: 1.5, 9.1, e 10.5.

Fornire testo equivalente per le mappe immagine poichè convogliano informazioni visive.

Se si usa AREA per creare la mappa, usare l'attributo " alt":

Esempio.

   <IMG src="welcome.gif" alt="Mappa immagine di aree nella biblioteca"
        usemap="#map1">
   <MAP name="map1">
     <AREA shape="rect" coords="0,0,30,30"
           href="Reference.html" alt="Riferimenti">
     <AREA shape="rect" coords="34,34,100,100"
           href="media.html" alt="Laboratorio audio video">
   </MAP>

Fine esempio.

L'esempio seguente illustra la stessa idea, ma usa OBJECT invece di IMG per inserire l'immagine al fine di dare più informazioni circa l'immagine stessa:

Esempio.

   <OBJECT data="welcome.gif" type=" immagini/gif" usemap="#map1">
       Ci sono diverse aree nella biblioteca incluso
       la sezione <A href="Reference.html">Riferimenti</A>
       e la sezione <A href="media.html">Laboratorio audio video</A>.
   </OBJECT>
   <MAP name="map1">
     <AREA shape="rect" coords="0,0,30,30"
           href="Reference.html" alt="Riferimenti">
     <AREA shape="rect" coords="34,34,100,100"
           href="media.html" alt="Laboratorio audio video">
   </MAP>

Fine esempio.

In aggiunta al testo equivalente, fornire links di testo ridondanti. Se si usa l'elemento A invece di AREA, lo sviluppatore di contenuto può descrivere regioni attive e fornire links ridondanti allo stesso tempo:

Esempio.

   <OBJECT data="navbar1.gif" type=" immagini/gif" usemap="#map1">
   <MAP name="map1">
     <P>Navigare il sito.
     [<A href="guida.html" shape="rect"
        coords="0,0,118,28">Guida di accesso</A>]
     [<A href="shortcut.html" shape="rect"
        coords="118,0,184,28">Vai</A>]
     [<A href="search.html" shape="circle"
        coords="184.200,60">Cerca</A>]
     [<A href="top10.html" shape="poly"
        coords="276,0,276,28,100,200,50,50,276,0">
          I dieci più richiesti</A>]
   </MAP>
   </OBJECT>

Fine esempio.

Notare che nell'esempio precedente, l'elemento MAP è il contenuto dell'elemento OBJECT così che i links alternativi dovranno essere visualizzati solo se non lo è la mappa immagine (navbar1.gif).

Notare anche che i links devono essere separati da parentesi quadre ([]). Questo per impedire che i screen readers (lettori di schermo) più vecchi leggano come un singlo link diversi links adiacenti. Questo inoltre aiuta gli utenti normovedenti a distinguere visivamenti i links.

Gli sviluppatori di contenuto dovrebbero assicurarsi di includere i caratteri stampabili (quali parentesi quadre o una barra verticale (|) circondati da spazi tra links adiacenti.

4.7.6 Mappe immagine lato server

Punti di controllo in questa sezione: 1.2.

Quando deve essere usata una mappa immagine lato server, gli sviluppatori di contenuti dovrebbero fornire un elenco di scelte alternative. Ci sono tre tecniche:

Le mappe immagine lato server e lato client possono essere usate come bottoni di invio (submit buttons) nei moduli. Per maggiori informazioni, Riferirsi a lla sezione bottoni grafici.

4.8 Applets e altri oggetti di programmazione

Mentre le applets possono essere incluse in un documento sia con l'elemento APPLET che con OBJECT , il metodo preferito è OBJECT.

4.8.1 Equivalenti di testo per applets e oggetti di programmazione

Se si usa OBJECT, fornire un testo equivalente nel contenuto dell'elemento:

Esempio.

  <OBJECT classid="java:Press.class" width="500" height="500">
        All'aumentare della temperatura,le molecole nel pallone...
  </OBJECT>

Fine esempio.

Un esempio più complesso si avvantaggia del fatto che gli elementi OBJECT possono essere incorporati per fornire rappresentazioni di informazioni alternative:

Esempio.

  <OBJECT classid="java:Press.class" width="500" height="500">          
     <OBJECT data="Pressure.mpeg" type="video/mpeg">
        <OBJECT data="Pressure.gif" type=" images/gif">
           All'aumentare della temperatura,le molecole nel pallone...
		</OBJECT>
     </OBJECT>
  </OBJECT>

Fine esempio.

Se si usa APPLET, fornire un testo equivalente, con l'attributo " alt" e nel contenuto dell'elemento APPLET. Questo permette al contenuto di trasformarsi gradevolmente per quei browsers che supportano solo uno dei due meccanismi ("alt" o content).

Esempio deprecato.

   <APPLET code="Press.class" width="500" height="500"
           alt="Java applet: come la temperatura influenza la pressione">
         All'aumentare della temperatura,le molecole nel pallone...
   </APPLET>

4.8.2 Applets direttamente accessibili

Punti di controllo in questa sezione: 8.1

Se una applet (creata o con OBJECT o con APPLET) richiede l'interazione con l'utente (e.g., la capacità di manipolare una azione fisica) che non può essere duplicata in un formato alternativo, rendete la applet direttamente accessibile.

Per maggiori informazioni rispetto allo sviluppo di applets accessibili, ci si riferisca a [JAVAACCESS] e [IBMJAVA]. Queste aziende stanno sviluppando una API per l'accessibilità così come stanno realizzando le classi Java Swing accessibili.

4.8.3 Audio e Video prodotti da oggetti dinamici

Punti di controllo in questa sezione: 8.1 e 1.4.

Fornire un testo equivalente sia per immagini che per descrizioni audio di informazioni visive e legende quando necessarie. Se una applet crea movimento, gli sviluppatori dovrebbero fornire un meccanismo per bloccare questo movimento (per un esempio, Riferirsi a [TRACE]). Inoltre, ci si riferisca alla successiva sezione per informazioni sulla realizzazione di presentazione audio e video accessibili.

4.9 Audio e video

4.9.1 Informazioni audio

Le presentazioni uditive devono essere accompagnate da trascrizioni di testo , testuali equivalenti di eventi uditivi. Quando queste trascrizioni sono presentate sincronamente con una presentazione video sono definite legende e sono usate da coloro che non possono sentire la traccia audio del materiale video.

Alcuni formati mediali (e.g., QuickTime 3.0 e SMIL) consentono di aggiungere legende e descrizioni video alle clip multimediali. SAMI consente di aggiungere legende. L'esempio seguente dimostra che le legende dovrebbero includere parlato e anche altri suoni nell'ambiente per aiutare a comprendere quello che accade.

Esempio.

Legende per una scena da "E.T." Il telefono squilla tre volte, quindi c'è la risposta.

[telefono che squilla]

[squilla]

[squilla]

"Pronto?"

Fine esempio.

Fino a che il formato che si usa non supporta tracce alternative, potrebbero essere rese disponibili due versioni del film, una con legende e video descrittivo , e una senza. Alcune tecnologie, quali SMIL e SAMI, consentono di combinare files separati audio/video e files con testo mediante un file di sincronizzazione per creare audio e film con legende (sottotitolati).

Inoltre, alcune tecnologie consentono all'utente di scegliere da sets multipli di legende per abbinare le proprie capacità di lettura. Per maggiori informazioni vedere le specificazioni SMIL 1.0 ([SMIL]).

Possono essere forniti equivalenti per i suoni nella forma di una frase di testo sulla pagina che si colleghi ad una trascizione di un testo o una descrizione del file di suono. Il link alla trascrizione dovrebbe apparire in una posizione altamente visibile come all'inizio della pagina. Comunque, se uno script carica automaticamente un suono, dovrebbe anche essere in grado di caricare automaticamente una indicazione visiva che informi che il suono è correntemente in riproduzione e di fornire una descrizione o trascrizione del suono stesso.

Nota. Queste tecniche sono oggetto di controversia perchè il browser dovrebbe caricare la forma visiva delle informazioni invece di quella udibile se le preferenze delll'utente sono così impostate. Comunque, le strategie devono funzionare anche con i browsers moderni.

Per maggiori informazioni, Riferirsi a [NCAM].

4.9.2 Informazioni visive e movimento

Punti di controllo in questa sezione: 1.3, e 7.3.

Le descrizioni udibili della traccia visiva forniscono il racconto degli elementi visivi chiave senza interferire con l'audio o il dialogo di un film. Gli elementi visivi chiave includono azioni, impostazioni, linguaggio del corpo, grafica e testo visualizzato. Le descrizioni udibili sono usate fondamentalmente da chi non può seguire l'azione e altre informazioni non-udibili nel materiale video.

Esempio.

Ecco un esempio di una testo trascrizione di testo correlata di una clip da "The Lion King" (disponibile in [DVS]). Notare che il descrivente sta fornendo la descrizione udibile della traccia video e che la descrizione è stata integrata nella trascrizione.

Simba: Yeah!

Descrivente: Simba salta fuori, seguito dai genitori. Sarabi sorride e sgomita lievemente Simba verso suo padre. I due siedono fianco a fianco, guardando l'alba dorata.

Mufasa: Guarda Simba, tutto quello che è toccato dalla luce è il nostro regno.

Simba: Wow.

Fine esempio.

Nota. Se non ci sono informazioni visive importanti, per esempio, una intestazione animata che descrive (attraverso vocalizzazione preregistrata) come usare il sito, allora non è necessaria una descrizione udibile.

Per i films, fornire descrizioni udibili che siano sincronizzate con l'audio originale. Riferirsi a lla sezione su informazioni audio per maggiori informazioni sui formati multimediali.

4.9.3 Trascrizioni di testo correlate

Le trascrizioni di testo correlate consentono l'accesso ad utenti con disabilità sia visive che uditive. Inoltre forniscono a tutti la capacità di indicizzare e cercare le informazioni contenute nei materiali audio/video.

Le trascrizioni di testo correlate includono dialoghi parlati e qualunque altro suono significativo incluso suoni on-screen e off-screen, musica, risate, applausi, etc. In altre parole, tutto il testo che appare nelle legende così come tutte le descrizioni fornite nelle descrizioni udibili.

4.9.4 Equivalenti di testo per multimedia

Quando necessario, dovrebbe essere fornito un testo equivalente per informazioni visive per rendere la pagina comprensibile. Per esempio, si consideri una animazione ripetitiva che mostra copertura nuvolosa e precipitazioni come parte di uno status report meteorologico. Poichè l'animazione sta supplendo il resto del report meteorologico (che è presentato in liguaggio naturale), è necessaria una descrizione meno prolissa dell'animazione. Però, se l'animazione appare in un contesto pedagogico dove gli allievi stanno apprendendo informazioni sulla formazione delle nuvole in relazione alle masse terrestri, allora l'animazione deve essere descritta per quelli che non possono vedere l'animazione ma che vogliono imparare la lezione.

Vedere anche la sezione su stilizzazione del testo per controllare il lampeggio (blinking).

4.9.5 Incapsulamento di oggetti multimediali

Altri oggetti, come quelli che richiedono un plug-in, dovrebbero usare anche l'elemento OBJECT. Comunque, per la compatibiltà verso il basso (indietro) con i browsers Netscape, usare l'elemento proprietario EMBED dentro l'elemento OBJECT come segue:

Esempio deprecato.

  <OBJECT classid="clsid:A12BCD3F-GH4I-56JK-xyz"
  codebase="http://sito.com/content.cab" width=100 height=80> 
  <PARAM name="Movie" value="moviename.swf"> 
      <EMBED src="moviename.swf" width=100 height=80 
      pluginspage="http://www.macromedia.com/shockwave/download/"> 
      </EMBED>
      <NOEMBED> 
          <IMG alt="Fermo immagine dal Film"
                  src="moviename.gif" width=100 height=80> 
      </NOEMBED> 
  </OBJECT>

Fine esempio.

Per maggiori informazioni Riferirsi a [MACROMEDIA].

4.10 Frame

Per gli utenti normovedenti, i frame possono organizzare una pagina in zone differenti. Per gli utenti non-vedenti, le relazioni tra il contenuto nei frame (e.g., un frame ha una tabella di contenuti, un altro i contenuti stessi) deve essere trasmesso attraverso altri mezzi.

I frame come implementati oggi (con gli elementi FRAMESET, FRAME, e IFRAME ) sono problematici per diverse ragioni:

Nelle seguenti sezioni, discutiamo come rendere i frame più accessibili. Forniamo anche una alternativa ai frame che usa l'HTML 4.0 e i CSS e fissa molte delle limitazioni delle implementazioni dei frame attualmente.

4.10.1 Titolare i frame per un orientamento semplice

Punti di controllo in questa sezione: 12.1.

Esempio.

Usare l'attributo "title" per identificare i frame.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
<TITLE>Un semplice documento frameset </TITLE>
</HEAD>
<FRAMESET cols="10%, 90%"
          title="La nostra biblioteca di documenti elettronici">  
    <FRAME src="nav.html" title="navigazione bar">  
    <FRAME src="doc.html" title="documenti">
    <NOFRAMES>
       <A href="lib.html" title="Link biblioteca">   
             Selezionare per andare alla biblioteca elettronica</A>  
    </NOFRAMES>
</FRAMESET>

Fine esempio.

4.10.2 Equivalenti di testo per i frame

Punti di controllo in questa sezione: 12.2.

Esempio.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
  <HEAD>
    <TITLE>Notizie di oggi</TITLE>
  </HEAD>
  <FRAMESET cols="10%,*,10%">

  <FRAMESET rows="20%,*">
    <FRAME src="promo.html" name="promo" title="Offerte">
    <FRAME src="sitonavbar.html" name="navbar" 
       title="Barra di navigazione generale" longdesc="frameset-desc.html#navbar">
  </FRAMESET>
  <FRAME src="story.html" name="story" title="Storia selezionata - contenuto principale" 
     longdesc="frameset-desc.html#story">
  <FRAMESET rows="*,20%">
    <FRAME src="headlines.html" name="indice" title="Indice di altre testate nazionali"
				longdesc="frameset-desc.html#headlines">
    <FRAME src="ad.html" name="adspace" title="Pubblicità">
  </FRAMESET>
  <NOFRAMES>
    <p><a href="ndirames.html">Versione no frames</a></p>
    <p><a href="frameset-desc.html">Descrizione dei frames.</a></p>
  </NOFRAMES>
  </FRAMESET>
</HTML>

frameset-desc.html potrebbe dire qualcosa come:

#Navbar - questo frame fornisce links alle sezioni 
          maggiori del sito:  World News, National News,
          Local News, Technological News,
          e Entertainment News.
#Story  - questo frame visualizza la storia selezionata corrente.
#index  - questo frame fornisce links alle intestazioni delle
          storie di oggi dentro questa sezione.  

Fine esempio.

Notare che se i contenuti di un frame cambiano, l'equivalente di testo non concorderà più. Inoltre dovrebbero essere forniti links alle descrizioni di un frame insieme ad altro contenuto alternativo nell'elemento NOFRAMES di un FRAMESET.

4.10.3 Assicurare che i documenti siano leggibili senza frame

Esempio.

In questo esempio, se l'utente legge "top.html":

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
<TITLE>Questo è top.html</TITLE>
</HEAD>
<FRAMESET cols="50%, 50%" title="Il nostro documento grande">
    <FRAME src="main.html" title="Dove è visualizzato il contenuto">
    <FRAME src="tabella_dei_contenuti.html" title="Tabella dei Contenuti">
    <NdiRAMES>
        <A href="tabella_dei_contenuti.html">Tabella dei Contenuti.</A>
     <!-- altri links di  navigazione che sono disponibili in main.html
          sono disponibili anche qui . -->
    </NOFRAMES>
</FRAMESET>
</HTML>

e l'agente utente non visualizza i frame, l'utente avrà accesso (via un link) a una versione senza frame delle stesse informazioni.

Fine esempio.

4.10.4 Rendere sempre il sorgente di un frame come documento HTML

Punti di controllo in questa sezione: 6.2.

Gli sviluppatori di contenuto devono fornire equivalenti di testo di frame così che i loro contenuti e le relazioni tra frame abbiano senso. Notare che se i contenuti di un frame cambiano, così deve cambiare ogni descrizione. Questo non è possible se un IMG è inserito direttamente in un frame. Perciò, gli sviluppatori di contenuto dovrebbero sempre rendere il sorgente ("src") di un frame come un file HTML. Le immagini possono essere inserite nel file HTML e le relative alternative di testo evolveranno correttamente.

Esempio.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
<TITLE>Un documento frameset corretto</TITLE>
</HEAD>
<FRAMESET cols="100%" title="Evoluzione del frameset">
<FRAME name="goodframe" src="mele.html" title="Mele">
</FRAMESET>
</HTML>
   <!-- In mele.html -->
   <P><IMG src="mele.gif" alt="Mele">

Fine esempio.

Il seguente esempio deprecato dovrebbe essere evitato poichè inserisce IMG direttamente in un frame:

Esempio deprecato.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
<TITLE>Un cattivo documento frameset</TITLE>
</HEAD>
<FRAMESET cols="100%" title="Frameset statico">
   <FRAME name="badframe"
          src="mele.gif" title="Mele">
</FRAMESET>
</HTML>

Notare che se, per esempio, un link provoca l'inserimento di una nuova immagine nel frame:

  <P>Visita un bel boschetto di 
  <A target="badframe" href="aranci.gif" title="Aranci">aranci</A>

il titolo iniziale del frame ("Mele") non concorderà più con il contenuto corrente del frame ("Aranci").

4.10.5 Evitare l'apertura di una nuova finestra come target (obiettivo) di un frame

Punti di controllo in questa sezione: 10.1.

Gli sviluppatori di contenuto dovrebbero evitare di specificare una nuova finestra come il target di un frame con target="_blank".

4.10.6 Alternative ai frame

Uno dei più comuni usi dei frame è quello di suddividere la finestra del browser utente in due parti: una finestra di navigazione e una finestra di contenuto. Come alternativa ai frame, incoraggiamo a provare quanto segue:

  1. creare un documento per il meccanismo di navigazione (denominatelo "nav.html"). Un documento separato significa che il meccanismo di navigazione può essere condiviso da più di un documento.
  2. In ciascun documento che richiede il meccanismo di navigazione, includerlo al fondo del documento con Il seguente (o simile) marcatore OBJECT:

    Esempio.

    <P>
    <OBJECT data="nav.html">
    Vai alla <A href="nav.html">tabella di contenuti</A>
    </OBJECT>
    

    Sistemare il meccanismo di navigazione alla fine del documento significa che quando i fogli di stile sono disabilitati, gli utenti hanno accesso prima alle informazioni importanti del documento.

  3. Usare i fogli di stile per posizionare il meccanismo di navigazione dove si vuole sullo schermo. Per esempio, Il seguente CSS regola fluttuante la barra di navigazione alla sinistra della pagina e e la rende fini al 25% dello spazio orizzontale disponibile:
       OBJECT { float: left; width: 25% }
    

    La seguente regola (rule) CSS fissa il meccanismo di navigazione all'angolo in basso a sinistra della pagina e lo tiene lì anche se l'utente scrolla giù la pagina:

       OBJECT { position: fixed; left: 0; bottom: 0 }
    

Note. Meccanismi di navigazione o altro contenuto possono essere inseriti in un documento per mezzo di inclusioni lato server.

4.11 Moduli (Form)

Questa sezione discute l'ccessibilità di moduli e controlli di form che si possono inserire in un elemento FORM.

4.11.1 Rendere accessibili i controlli da tastiera

Punti di controllo in questa sezione: 9.4 e 9.5.

Riferirsi a lla sezione su accesso da tastiera per maggiori informazioni.

4.11.2 Raggruppamento controlli dei moduli

Gli sviluppatori di contenuto dovrebbero raggruppare le informazioni quando naturale e appropriato. Quando i controlli di form possono essere raggruppati in unità logiche, usare l'elemento FIELDSET e identificare quelle unità con l'elemento LEGEND :

Esempio.

<FORM action="http://unsito.com/agg_utente" method="post">
   <FIELDSET>
   <LEGEND>Informazioni personali</LEGEND>
   <LABEL for="nome">Nome: </LABEL>
   <INPUT type="text" id="nome" tabindex="1">
   <LABEL for="cognome">Cognome: </LABEL>
   <INPUT type="text" id="cognome" tabindex="2">
   ...altre informazioni personali...
   </FIELDSET>
   <FIELDSET>
   <LEGEND>Storia medica</LEGEND>
   ...informazioni sulla storia medica...
   </FIELDSET>
</FORM>

Fine esempio.

4.11.3 Identificare esplicitamente i controlli dei moduli

Punti di controllo in questa sezione: 12.4 e 10.2. Un esempio di LABEL usata con " for" in HTML 4.0 è data nella precedente sezione.

4.11.4 Opzioni di menu di gruppo

Gli sviluppatori di contenuto dovrebbero raggruppare le informazioni quando naturale e appropriato. Per lunghi elenchi di selezione di menu (che possono essere difficili da tracciare), gli sviluppatori di contenuto dovrebbero raggruppare le voci SELECT (definite da OPTION) in una gerarchia usando l'elemento OPTGROUP. Tale elemento specifica una etichetta per il gruppo di opzioni con l'attributo label sul OPTGROUP.

Esempio.

<FORM action="http://unsito.com/prog/unprog" method="post">
 <P>
 <SELECT name="ComOS">
     <OPTGROUP label="PortMaster 3">
       <OPTION label="3.7.1" value="pm3_3.7.1">PortMaster 3 con ComOS 3.7.1
       <OPTION label="3.7" value="pm3_3.7">PortMaster 3 con ComOS 3.7
       <OPTION label="3.5" value="pm3_3.5">PortMaster 3 con ComOS 3.5
     </OPTGROUP>
     <OPTGROUP label="PortMaster 2">
       <OPTION label="3.7" value="pm2_3.7">PortMaster 2 con ComOS 3.7
       <OPTION label="3.5" value="pm2_3.5">PortMaster 2 con ComOS 3.5
     </OPTGROUP>
     <OPTGROUP label="IRX">
       <OPTION label="3.7R" value="IRX_3.7R">IRX con ComOS 3.7R
       <OPTION label="3.5R" value="IRX_3.5R">IRX con ComOS 3.5R
     </OPTGROUP>
 </SELECT>
</FORM>

Fine esempio.

4.11.5 Accesso da tastiera ai moduli

Nel successivo esempio, specifichiamo un ordine di tabulazione tra elementi (in ordine, "campo1", "campo2", "invia") con " tabindex":

Esempio.

   <FORM action="submit" method="post">
   <P>
   <INPUT tabindex="1" type="text" name="campo1">
   <INPUT tabindex="2" type="text" name="campo2">
   <INPUT tabindex="3" type="submit" name="invia">
   </FORM>

Fine esempio.

Questo esempio assegna "U" come la accesskey (via " accesskey"). Digitando "U" dà il focus alla label, che a sua volta dà il focus al controllo input, così che l'utente possa immettere il testo.

Esempio.

 
   <FORM action="submit" method="post">
   <P>
         <LABEL for="utente" accesskey="U">Nome</LABEL>
         <INPUT type="text" id="utente">
   </FORM>

Fine esempio.

4.11.6 Bottoni grafici

L'uso di immagini per decorare bottoni consente agli sviluppatori di rendere i loro moduli unici e più semplici a capirsi. L'uso di una immagine per un bottone (e.g., con l'elemento INPUT o BUTTON) non è insitamente inaccessibile - assumendo che sia fornito un testo equivalente per l'immagine.

Comunque, un bottone submit con forma grafica creato con INPUT, type=" image" crea un tipo di mappa immagine lato server. Ogni volta che il bottone è cliccato con un mouse, le coordinate x , y del click del mouse sono inviate al server come parte dell'invio (submission) del form.

Nella sezione immagine e mappa immagine , discutiamo perchè devono essere evitate le immagini lato server, e proponiamo invece di usare le mappe immagine lato client. In HTML 4.0, i bottoni grafici possono essere ora mappe immagine lato client. Per conservare le funzioni forrnite dal server, gli autori hanno le seguenti opzioni, come stabilito nelle HTML 4.0 Recommendation ([HTML40], sezione 17.4.1):

Se il server intraprende diverse azioni a seconda delle locazione cliccata, gli utenti di browsers non-grafici saranno svantaggiati.
Per questa ragione, gli autori dovrebbero considerare approcci alternativi:

4.11.7 Tecniche per controlli specifici

Punti di controllo in questa sezione: 10.4.

Esempio.

Alcune tecnologie assistive legacy richiedono testo iniziale nei controlli di form quali TEXTAREA per funzionare correttamente.

<FORM action="http://unsito.com/prog/text-read" method="post">
     <P>
     <TEXTAREA name=tuonome rows="20" cols="80">
    Digita qui il tuo nome.
     </TEXTAREA>
     <INPUT type="submit" value="Invia"><INPUT type="reset">
     </P>
</FORM>

Fine esempio.

Fornire un testo equivalente per immagini usate come bottoni "submit" :

Esempio.

<FORM action="http://unsito.com/prog/text-read" method="post">
<P>
<INPUT type="image" name=invia src="button.gif" alt="Invia">
</FORM>

Fine esempio.

Riferirsi a nche alla sezione su accesso da tastiera poichè questa tecnica si applica ai controlli di form.

4.11.8 Problemi di compatibilita verso il basso (indietro) per i moduli

In alcuni browsers HTML 3.2 ,

4.12 Script

Questa sezione discute l'accessibilità di script inclusi in un documento per mezzo dell'elemento SCRIPT.

4.12.1 Trasformazione gradevole di script

Punti di controllo in questa sezione: 6.3.

Gli sviluppatori di contenuto dovrebbero assicurare che le pagine siano accessibili con gli script disabilitati o in browsers che non supportano gli script.

4.12.2 Manipolatori di evento indipendenti dal dispositivo

Punti di controllo in questa sezione: 9.3 e 6.4.

Un manipolatore di evento è uno script che è invocato quando avviene un determinato evento (e.g, i movimenti del mouse , è premuto un tasto , il documento è caricato, etc.). In HTML 4.0, i manipolatori di evento sono collegati agli elementi per mezzo degli attributi del manipolatore di evento (gli attributi cominciano con "on", come in "onkeyup").

Alcuni manipolatori di evento, quando invocati, producono effectti puramente decorativi quali il risalto di un immagine o il cambio di colore del testo di un elemento. Altri manipolatori di evento producono effectti molto più sostanziali, quali la produzione di un calcolo, fornendo informazioni importanti all'utente, o inviando un form. Per i manipolatori di evento che fanno più che cambiare solo la presentazione di un elemento, gli sviluppatori di contenuto dovrebbero fare quel che segue:

  1. Usare intercettazioni di evento application-level (a livello di applicazione) piuttosto che intercettazioni interaction-level (a livello di interazione utente). In HTML 4.0, gli attributi di evento application-level sono "onfocus", "onblur" (l'opposto di "onfocus"), e "onselect". Notare che questi attributi sono progettati per essere indipendenti dal dispositivo, ma sono implementati come specifici eventi tastiera nei browsers attuali.
  2. Altrimenti, se si devono usare attributi device-dependent (dipendenti dal dispositivo), fornire meccanismi di input ridondanti (i.e., specificare due manipolatori per lo stesso elemento):
  3. Notare che non c'è equivalente da tastiera al doppio click ("ondblclick") in HTML 4.0.
  4. Non scrivere manipolatori di evento che facciano affidamento sulle coordinate mouse poichè questo impedisce input indipendenti da dispositivo.

4.12.3 Presentazione alternativa di script

Una modo per ottenerlo è l'utilizzo dell'elemento NOSCRIPT . Il contenuto di questo elemento viene rappresentato quando gli script non sono abilitati.

Esempio.

<SCRIPT type="text/tcl">
 ...alcuni Tcl script per mostrare una bacheca di risultati sportivi...  
</SCRIPT>
<NOSCRIPT>     
   <P>Risultati delle partite di ieri:</P> 
   <DL>
      <DT>Bulls 91,  Sonics 80.
      <DD><A href="bullsonic.html">In rilievo la partita Bulls vs. Sonics</A> 
      ...altri punteggi...  
   </DL>
</NOSCRIPT>

Fine esempio.


5 Tecniche CSS

Punti di controllo in questa sezione: 3.3.

Le seguenti sezioni elencano alcune tecniche per l'uso dei CSS per progettare documenti accessibili e alcune tecniche per la scrittura di fogli di stile efficaci. In HTML, i fogli di stile possono essere specificati esternamente per mezzo dell'elemeto LINK , nell'intestazione del documento con l'elemento STYLE , o con uno specifico elemento con l'attributo style.

CSS1 ([CSS1]) e CSS2 ([CSS2]) consentono agli sviluppatori di contenuto di replicare la maggior parte delle capacità di presentazione HTML 4.0 e offrono più efficienza a minor costo. Comunque, fino a che la maggior parte degli utenti non avrà browsers che supportino i fogli di stile, non tutti linguaggi di presentazione potranno essere espressi in modo soddisfacente con i fogli di stile. Forniamo anche esempi di come usare le caratteristiche HTML 4.0 (e.g., tabelle, testo bitmap) più accessibili quando devono essere usati.

Vedi anche la sezione sulla marcatura del testo.

5.1 Linee guida per creare fogli di stile

Punti di controllo in questa sezione: 6.1 e 3.4.

Ecco le linee guida per creare fogli di stile che promuovano l'accessibilità:

Seguono alcuni esempi.

Esempio.

Usare em per regolare i font sizes, come in:

   H1 { font-size: 2em }
piuttosto che:
   H1 { font-size: 12pt }

Fine esempio.

Esempio.

Usare unità di lunghezza e percentuali relative.

   BODY { margin-left: 15%; margin-right: 10%}

Fine esempio.

Esempio.

Usare solo unità di lunghezza assolute quando sono note le caratteristiche fisiche del medium di output.

   .businesscard { font-size: 8pt }

Fine esempio.

Esempio.

Specificare sempre un font generico di default:

   BODY { font-family: "Gill Sans", sans-serif }

Fine esempio.

Esempio.

Usare numeri, non nomi, per i colori:

   H1 {color: #808000}
   H1 {color: rgb(50%,50%,0%)}

Fine esempio.

5.2 Fonts

Invece di usare elementi di presentazione e attributi deprecati , usare le molte proprietà dei CSS per controllare le caratteristiche del font : 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-stile', 'font-variant', e 'font-weight'.

Le seguenti proprietà dei CSS2 possono essere usate per controllare le informazioni del font : 'font', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-stile', 'font-variant', e 'font-weight'.

Usarle invece dei seguenti elementi e attributi di font deprecati in HTML: FONT, BASEFONT, "face", e "size".

Se devono essere usati elementi HTML per controllare informazioni di font , usare BIG e SMALL, che non sono deprecati.

Esempio.

<style type="text/css">
   P.importante { font-weight: bold }
   P.meno-importante { font-weight: lighter; font-size: smaller }
   H2.subsezione { font-family: Helvetica, sans-serif }
</style>

Fine esempio.

5.3 Stilizzazione del testo

Punti di controllo in questa sezione: 7.2.

Le seguenti proprietà dei CSS2 possono essere usate per stilizzare il testo:

5.3.1 Testo invece di immagini

Gli sviluppatori di contenuto dovrebbero usare fogli di stile per stilizzare il testo piuttosto che rappresentare testo in immagini. Usare testo invece di immagini significa che le informazioni saranno disponibili per un numero di utenti più grande (con sintetizzatori vocali, displays braille, displays grafici, etc.). L'uso dei fogli di stile inoltre consentirà agli utenti di sovrapporsi agli stili dell'autore e cambiare colori o dimensioni dei fonts più agevolmente.

Se fosse necessario usare un bitmap per creare un effetto di testo (font speciale, trasformazione, ombre, etc.) il bitmap deve essere accessibile (vedi le sezioni su equivalenti di testo e pagine alternative).

Esempio.

In questo esempio, l'immagine inserita mostra il grande carattere rosso "Esempio", ed è commentato dal valore dell'attributo "alt" .

<P>questo é un 
   <IMG src="esempio_grande_rosso.gif" alt="Esempio"> 
   di quello che intendevamo.
</P>

Fine esempio.

5.4 Formattazione del testo

Le seguenti proprietà dei CSS2 possono essere usate per controllare formattazione e posizione del testo:

Il seguente esempio mostra come usare i fogli di stile per creare un effetto di capolettera.

Esempio.

<HEAD>
<TITLE>Capolettera</TITLE>
<style type="text/css">
      .capolettera { font-size : 120%; font-family : Helvetica } 
</style>
</HEAD>
<BODY>
<P><SPAN class="capolettera">C</SPAN>'era una volta...
</BODY>

Nota. Nella scrittura di questo documento, lo pseudo-elemento CSS ':first-letter', che consente agli sviluppatori di contenuto di riferirsi alla prima lettera di un blocco di testo, non è ampiamente supportato.

5.5 Colori

Punti di controllo in questa sezione: 2.1 e 2.2.

Usare queste proprietà dei CSS per specificare i colori:

Assicurarsi che l'informazione non sia convogliata solo attraverso il colore. Per esempio, in caso di richiesta di input dell'utente, non scrivere "Per favore selezionare una voce da quelle elencate in verde". Invece, assicurarsi che l'informazione sia disponibile mediante altri effetti di stile (e.g., un effetto font ) e attraverso il contesto (e.g,. links di testo comprensibili).

Ad esempio, in questo documento, gli esempi sono stilizzati per default (attraverso fogli di stile) come segue:

Quicktest! Per testare se il documento funziona ancora senza colori, esaminatelo con un monitor monocromatico o con i colori del browser disabilitati. Inoltre, tentate di regolare uno schema di colori nel browser che usi solo nero, bianco, e i quattro toni di grigio browser-safe e osservate come appare la pagina.

Quicktest! Per verificare se il contrasto di colore è sufficiente per essere letto da persone daltoniche o da utenti di monitors a bassa risoluzione, stampare pagine con una stampante in bianco e nero (con backgrounds e colori in scala di grigio). Inoltre proporre la stampa e la copia per due o tre volte per vedere come degrada. Questo evidenzierà dove fosse necessario aggiungere ulteriori battute (esempio: i collegamenti ipertestuali sono usualmente sottolineati sulle pagine Web), o se le battute sono due piccole o indistinte da trattenere .

Per ulteriori informazioni su colori e contrasto, Riferirsi a [LIGHTHOUSE].

5.6 Layout, posizionamento, layering, e allineamento

Layout (organizzazione degli elementi), posizionamento, layering (organizzazione a livelli) ed allineamento dovrebbero essere ottenuti con i fogli di stile (usando considerevolmente il posizionamento float e absolute dei CSS ):

5.6.1 Se si devono usare immagini per produrre spazi

Fornire testo equivalente per tutte le immagini, incluso immagini invisibili o trasparenti.

Se gli sviluppatori di contenuto non possono usare i fogli di stile e devono usare immagini invisibili o trasparenti (e.g., con IMG) per disporre immagini sulla pagina, dovrebbero specificare per loro l'attributo alt="".

Esempio deprecato.

Gli autori non dovrebbero usare spazi per il valore di " alt" per prevenire che le parole si carichino insieme all'immagine quando questa non sia caricata:

   il mio poema richiede un grande spazio<IMG src="10pttab.gif" alt="&nbsp;&nbsp;&nbsp;">qui

In questo esempio successivo, è usata un immagine per forzare la comparsa di un grafico in una determinata posizione:

   <IMG src="spaziatore.gif" alt="spaziatore">
   <IMG src="ruotacolorata.gif" alt="La ruota della fortuna">

Fine esempio.

5.7 Righe e bordi

Righe e bordi possono connotare il concetto di "separazione" per gli utenti normovedenti ma senza che i contenuti siano interpretati diversamente fuori dal contesto visivo.

Usare queste proprietà CSS per specificare gli stili dei bordi:

Gli autori dovrebbero usare i fogli di stile per creare righe e bordi.

Esempio.

In questo esempio, l'elemento H1 ha un bordo superiore dello spessore di 2px , rosso e separato dal contenuto di 1em:

   <HEAD>
   <TITLE>Linea rossa con fogli di stile</TITLE>
   <STYLE type="text/css">
        H1 { padding-top: 1em; border-top: 2px red }
   </STYLE>
   </HEAD>
   <BODY>
   <H1>Capitolo 8 - Displays uditivi e tattili</H1>
   </BODY>

Fine esempio.

Se si usa una riga (es. l'elemento HR) per indicare una struttura, assicurarsi di indicare tale struttura anche in maniera non visuale (es. usando un markup strutturale).

Esempio.

In questo esempio, l'elemento DIV è usato per creare una barra di navigazione, che include un separatore orizzontale.

   <DIV class="navigation-bar">
      <HR>
      <A rel="Prossima" href="succ.html">[Pagina successiva]</A>
      <A rel="Precedente" href="prec.html">[Pagina precedente]</A>
      <A rel="Prima" href="prima.html">[Prima pagina]</A>
   </DIV>

Fine esempio .


Mappa dei checkpoint (punti di controllo)

Questo indice elenca ogni checkpoint (punto di controllo) e le sezioni in questo documento dove è trattato. Inoltre ciascun numero di linea guida è collegato alla sua definizione nel documento delle linee guida.

Linea guida 1:

1.1 Fornire un testo equivalente per ogni elemento non testuale (es. tramite "alt" "longdesc", o nel contenuto dell'elemento). Ciò include: immagini, rappresentazioni grafiche del testo (inclusi i simboli), mappe, animazioni (es. GIF animate), applet e oggetti di programmazione, ascii art, frame, script, immagini usate come elementi di lista puntata, spaziatori, bottoni grafici, suoni (riprodotti con o senza comando dell'utente), file audio indipendenti, tracce sonore di video e video. [Priorità 1] (Checkpoint 1.1 nelle linee guida)
Riferirsi a 3.2 Testo equivalente e
4.7.1 Testo equivalente per immagini
1.2 Fornire collegamenti testuali ridondanti per ciascuna regione attiva di una mappa immagine lato server. [Priorità 1] (Checkpoint 1.2 nelle linee guida)
Riferirsi a 3.2 Testo equivalente e
4.7.6 Mappe immagine lato server
1.3 Fino a quando i dispositivi di rendering delle pagine non saranno in grado di leggere automaticamente in modo appropriato il testo equivalente di una traccia visiva, fornire una descrizione udibile delle informazioni importanti di una traccia visiva o di una presentazione multimediale. [Priorità 1] (Checkpoint 1.3 nelle linee guida)
Riferirsi a 4.9.2 Informazione visiva e movimento
1.4 Per ogni presentazione multimediale cronometrata, (es. film o animazione) sincronizzare le alternative corrispondenti (es. legende o descrizioni udibili della traccia visiva) alla presentazione. [Priorità 1] (Checkpoint 1.4 nelle linee guida)
Riferirsi a 4.8.3 Audio e Video prodotto da oggetti dinamici
1.5 Fino a quando i dispositivi non saranno in grado di visualizzare testo equivalente per i collegamenti delle mappe immagine lato client, fornire collegamenti testuali ridondanti per ciascuna regione attiva di una mappa immagine lato client. [Priorità 3] (Checkpoint 1.5 nelle linee guida)
Riferirsi a 3.2 Testo equivalente e 4.7.5 Mappe immagine lato client

Linea guida 2:

2.1 Assicurarsi che tutte le informazioni fornite con il colore siano anche disponibili anche senza colore, per esempio, tramite il contesto o con marcatori. [Priorità 1] (Checkpoint 2.1 nelle linee guida)
Riferirsi a 5.5 Colori
2.2 Assicurarsi che le combinazioni di colori di sfondo e primo piano forniscano sufficiente contrasto quando viste da persone con deficit nella percezione del colore o quando visualizzate su dispositivi in bianco e nero. [Priorità 2 per immaigni, Priorità 3 per testo]. (Checkpoint 2.2 nelle linee guida)
Riferirsi a 5.5 Colori

Linea guida 3:

3.1 Quando esiste un appropriato marcatore nel linguaggio, usare il marcatore anzichè l'immagine per fornire l'informazione. [Priorità 2] (Checkpoint 3.1 nelle linee guida)
Riferirsi a 4.3.4 Marcatori e fogli di stile piuttosto che le immagini: l'esempio della matematica
3.2 Creare documenti che seguano la validazione di una sintassi formale pubblicata. [Priorità 2] (Checkpoint 3.2 nelle linee guida)
Riferirsi a 4.1 Struttura dei documenti e metadati
3.3 Usare fogli di stile per controllare il layout e la presentazione. [Priorità 2] (Checkpoint 3.3 nelle linee guida)
Riferirsi a 3.2 Testo equivalente e
4.3.1 Enfasi e
5 Tecniche CSS
3.4 Usare unità relative piuttosto che assolute nei valori degli attributi dei marcatori del linguaggio e nelle proprietà dei valori dei fogli di stile. [Priorità 2] (Checkpoint 3.4 nelle linee guida)
Riferirsi a 5.1 Linee guida per creare fogli di stile
3.5 Usare elementi header per conferire la struttura ai documenti e usarli secondo le specifiche. [Priorità 2] (Checkpoint 3.5 nelle linee guida)
Riferirsi a 4.1.2 Intestazioni di sezione
3.6 Marcare appropriatamente gli elenchi e le voci degli elenchi. [Priorità 2] (Checkpoint 3.6 nelle linee guida)
Riferirsi a 4.4 Elenchi
3.7 Marcare le citazioni (quotations). Non usare marcatori di citazione per effetti di formattazione come l'indentazione. [Priorità 2] (Checkpoint 3.7 nelle linee guida)
Riferirsi a 4.3.3 Citazioni (quotations)

Linea guida 4:

4.1 Identificare chiaramente le modifiche di linguaggio naturale nel testo del documento e in ogni testo equivalente (es. legende). [Priorità 1] (Checkpoint 4.1 nelle linee guida)
Riferirsi a 4.2 Informazioni della lingua
4.2 Specificare l'espansione di ogni abbreviazione o acronimo nel documento nel punto in cui compare la prima istanza. [Priorità 3] (Checkpoint 4.2 nelle linee guida)
Riferirsi a 4.3.2 Acronimi e abbreviazioni
4.3 Identificare il linguaggio naturale fondamentale del documento. [Priorità 3] (Checkpoint 4.3 nelle linee guida)
Riferirsi a 4.2 Informazioni della lingua

Linea guida 5:

5.1 Per le tabelle di dati, identificare le intestazioni di riga e colonna. [Priorità 1] (Checkpoint 5.1 nelle linee guida)
Riferirsi a 4.5.1 Tabella di dati
5.2 Per le tabelle di dati che abbiano due o più livelli logici di intestazioni di righe e colonne, usare marcatori che associno le celle di dati con le celle di intestazione. [Priorità 1] (Checkpoint 5.2 nelle linee guida)
Riferirsi a 4.5.1 Tabelle di dati
5.3 Non usare tabelle per i layout a meno che la tabella abbia senso quando linearizzata. In alternativa, se la tabella non risulta linearizzabile, fornire un equivalente alternativo (Che può essere una versione linearizzata). [Priorità 2] (Checkpoint 5.3 nelle linee guida)
Riferirsi a 4.5.2 Evitare tabelle per i layout
5.4 Se una tabella è usata per il layout, non usare nessun marcatore strutturale con lo scopo di formattazione visuale. [Priorità 2] (Checkpoint 5.4 nelle linee guida)
Riferirsi a 4.5.2 Evitare tabelle per i layout
5.5 Fornire sommari per le tabelle. [Priorità 3] (Checkpoint 5.5 nelle linee guida)
Riferirsi a 4.5.1 Tabelle di dati
5.6 Fornire abbreviazioni per le etichette degli header. [Priorità 3] (Checkpoint 5.6 in Linee guida)
Riferirsi a 4.5.1 Tabelle di dati

Linea guida 6:

6.1 Organizzare i documenti in modo che possano essere letti senza i fogli di stile. Per esempio, quando un doumento HTML è visualizzato senza fogli di stile associati, deve essere ancora possibile leggere il documento. [Priorità 1] (Checkpoint 6.1 in Linee guida)
Riferirsi a 5.1 Linee guida per la creazione di fogli di stile
6.2 Assicurarsi che le alternative per i contenuti dinamici siano aggiornate quando il contenuto dinamico cambia. [Priorità 1] (Checkpoint 6.2 nelle linee guida)
Riferirsi a 4.10.4 Creare sempre come documento HTML la sorgente di una frame
6.3 Assicurarsi che le pagine siano usabili quando script, applet, o altri programmi sono disattivati o non supportati. Se non è possibile, fornire informazioni equivalenti su una pagina accessibile alternativa. [Priorità 1] (Checkpoint 6.3 nelle linee guida)
Riferirsi a 4.12.1 Trasformazione gradevole di script
6.4 Per gli script e gli applet, assicurarsi che i manipolatori di eventi siano indipendenti dai dispositivi di input. [Priorità 2] (Checkpoint 6.4 nelle linee guida)
Riferirsi a 4.12.2 Manipolatori di eventi indipendenti dai dispositivi
6.5 Assicurarsi che il contenuto dinamico sia accessibile o fornire una pagina o una presentazione alternativa. [Priorità 2] (Checkpoint 6.5 nelle linee guida)
Riferirsi a 3.3 Pagine alternative

Linea guida 7:

7.1 Fino a quando i browsers non consentiranno agli utenti di controllare lo sfarfallìo dello schermo (flickering), evitare di lo sfarfallìo dello schermo. [Priorità 1] (Checkpoint 7.1 nelle linee guida)
Riferirsi a 3.9 Sfarfallìo
7.2 Fino a quando i browsers non potranno controllare il lampeggiamento, evitare di far lampeggiare lo schermo (p.es.., cambiare la presentazione a frequenza regolare, come accendere e spegnere). [Priorità 2] (Checkpoint 7.2 nelle linee guida)
Riferirsi a 5.3 Stilizzazione del testo
7.3 Fino a quando i browsers non consentiranno agli utenti di bloccare il movimento dei contenuti delle pagine, evitare movimenti nelle pagine. [Priorità 2] (Checkpoint 7.3 nelle linee guida)
Riferirsi a 4.9.2 Informazioni visuali e moto
7.4 Fino a quando i browsers non consentiranno di fermare il refresh (aggiornamento), non creare pagine che si aggiornino automaticamente. [Priorità 2] (Checkpoint 7.4 nelle linee guida)
Riferirsi a 3.8 Aggiornamento pagine automatico
7.5 Fino a quando i browsers non saranno in grado di fermare l'auto-redirect (redirezione automatica), non usare marcatori per reindirizzare pagine automaticamente. Invece, configurare il server per effettuare i reindirizzamenti. [Priorità 2] (Checkpoint 7.5 nelle linee guida)
Riferirsi a 3.8 Aggiornamento pagine automatico

Linea guida 8:

8.1 Rendere gli elementi di programmazione quali script e applet direttamente accessibili o compatibili con le tecnologie assistive [Priorità 1] se la funzionalità è importante e non presentata altrove, altrimenti [Priorità 2.] (Checkpoint 8.1 in Linee guida)
Riferirsi a 4.8.2 Applet direttamente accessibili e
4.8.3 Audio e Video prodotti da oggetti dinamici

Linea guida 9:

9.1 Fornire mappe immagine lato client invece di mappe immagine lato server tranne dove le aree non possano essere definite con una forma geometrica disponibile. [Priorità 1] (Checkpoint 9.1 nelle linee guida)
Riferirsi a 4.7.5 Mappe immagine lato client
9.2 Assicurarsi che ogni elemento che ha la sua interfaccia possa operare in maniera indipendente dal dispositivo. [Priorità 2] (Checkpoint 9.2 nelle linee guida)
Riferirsi a 3.4 Accesso da tastiera
9.3 Per gli script, specificare manipolatori di eventi logici piuttosto che manipolatori di eventi legati al dispositivo. [Priorità 2] (Checkpoint 9.3 nelle linee guida)
Riferirsi a 4.12.2 Manipolatori di eventi indipendenti al dispositivo
9.4 Creare un ordine logico di tabulazione tramite link, controlli di form e oggetti. [Priorità 3] (Checkpoint 9.4 nelle linee guida)
Riferirsi a 4.11.1 Rendere accessibile il controllo da tastiera
9.5 Fornire scorciatoie da tastiera ai link importanti (inclusi quelli nelle mappe immagine lato client), nei controlli di form e nei gruppi di controlli di form. [Priorità 3] (Checkpoint 9.5 in Linee guida)
Riferirsi a 4.11.1 Rendere accessibile il controllo da tastiera

Linea guida 10:

10.1 Fino a che i browsers non consentiranno agli utenti di disabilitare la generazione di finestre suddivise, non permettere di generare e far apparire altre finestre e finestre di pop-up (cioè finestre di schermo in sovrapposizione n.d.t.) e non cambiare la finestra corrente senza informare l'utente. [Priorità 2] (Checkpoint 10.1 nelle linee guida)
Riferirsi a 4.10.5 Evitare l'apertura di una nuova finestra come target (obiettivo) di una frame
10.2 Fino a che i browsers non supporteranno associazioni esplicite tra labels e controlli di form, per tutti i controlli di form con labels implicitamente associate, assicurare che la label sia posizionata appropriamente . [Priorità 2] (Checkpoint 10.2 nelle linee guida)
Riferirsi a 4.11.3 Identificare esplicitamente i controlli dei moduli
10.3 Fino a che i browsers (incluso le tecnologie assistive ) non rappresenteranno correttamente il testo side-by-side (da una estremità all'altra dello schermo), fornire un testo alternativo lineare (sulla pagina corrente o altra) per tutte le tabelle che dispongono il testo in parallelo, colonne con testo a capo. [Priorità 3] (Checkpoint 10.3 nelle linee guida)
Riferirsi a 4.5.3 Testo a capo nelle tabelle
10.4 Fino a che i browsers non gestiranno correttamente i controlli vuoti, incluso il default, i caratteri di place-holding (mantenimento di spazio) nelle edit boxes (caselle di inserimento testo) e aree di testo. [Priorità 3] (Checkpoint 10.4 nelle linee guida)
Riferirsi a 4.11.7 Tecniche per controlli specifici
10.5 Fino a che i browsers (incluso le tecnologie assistive) non rappresenteranno distintamente links adiacenti, incluso non-link, caratteri stampabili (circondati da spazi) tra links adiacenti. [Priorità 3] (Checkpoint 10.5 nelle linee guida)
Riferirsi a 4.7.5 Mappe immagine lato client

Linea guida 11:

11.1 Usare le tecnologie W3C quando sono disponibili e appropriate per un compito specifico e usare le ultime versioni quando supportate. [Priorità 2] (Checkpoint 11.1 nelle linee guida)
Riferirsi a to 3.12 Supporto del browser
11.2 Evitare caratteristiche deprecate di tecnologie W3C . [Priorità 2] (Checkpoint 11.2 nelle linee guida)
11.3 Fornire informazioni così che gli utenti possano ricevere documenti secondo le loro preferenze (e.g., linguaggio, tipo di contenuto, etc.) [Priorità 3] (Checkpoint 11.3 nelle linee guida)
Riferirsi a to 3.7 Negoziazione del contenuto
11.4 Se, dopo i migliori tentativi, non si riesce a creare una pagina accessibile, fornire un link a una pagina alternativa che: usi tecnologie W3C , sia accessibile, abbia informazioni (o funzioni) equivalenti e sia aggiornata così frequentemente come la pagina non accessibile (originale). [Priorità 1] (Checkpoint 11.4 nelle linee guida)
Riferirsi a to 3.3 Pagine alternative

Linea guida 12:

12.1 Titolare ciascun frame per facilitare l'identificazione e la navigazione del frame. [Priorità 1] (Checkpoint 12.1 nelle linee guida)
Riferirsi a to 3.2 Equivalenti di testo e
4.10.1 Titolazione dei frame per facile orientamento
12.2 Descrivere lo scopo dei frame e come i frame si relazionano l'un l'altro se non è ovvio leggendone soltanto i titoli. [Priorità 2] (Checkpoint 12.2 nelle linee guida)
Riferirsi a to 3.2 Equivalenti di testo e
4.10.2 Equivalenti di testo per frame
12.3 Dove naturale e opportuno dividere grandi blocchi di informazioni in gruppi più maneggevoli . [Priorità 2] (Checkpoint 12.3 nelle linee guida)
Riferirsi a to 4.1.4 Raggruppamento strutturale
12.4 Associare esplicitamente le labels con i loro controlli. [Priorità 2] (Checkpoint 12.4 nelle linee guida)
Riferirsi a to 4.11.3 Controlli label dei form espliciti

Linea guida 13:

13.1 Identificare chiaramente il target di ciascun link. [Priorità 2] (Checkpoint 13.1 nelle linee guida)
Riferirsi a 4.6 Links
13.2 Fornire metadati per aggiungere informazioni semantiche alle pagine e i siti. [Priorità 2] (Checkpoint 13.2 nelle linee guida)
Riferirsi a 3.5 Navigazione e
4.1.1 Metadati e
4.1.3 Metadatidi link e tools di navigazione
13.3 Fornire informazioni circa il layout generale di un sito (e.g., una mappa del sito o una tabella di contenuti). [Priorità 2] (Checkpoint 13.3 nelle linee guida)
Riferirsi a 3.5 Navigazione
13.4 Usare meccanismi di navigazione in maniera consistente. [Priorità 2] (Checkpoint 13.4 nelle linee guida)
Riferirsi a 3.5 Navigazione
13.5 Fornire barre di navigazione per dare risalto e accesso al meccanismo di navigazione. [Priorità 3] (Checkpoint 13.5 nelle linee guida)
Riferirsi a 3.5 navigazione
13.6 Raggrupare links tra loro in relazione, identificare il gruppo (per i browsers), e, fino a che i browsers non lo faranno, fornire un modo per bypassare (saltare) il gruppo. [Priorità 3] (Checkpoint 13.6 nelle linee guida)
Riferirsi a 4.6 Links
13.7 Se sono fornite funzioni di ricerca, abilitare differenti tipi di ricerca per differenti livelli di abilità e preferenze. [Priorità 3] (Checkpoint 13.7 nelle linee guida)
Riferirsi a 3.5 Navigazione
13.8 Inserire informazioni di distinzione all'inizio di headings, paragrafi, elenchi, etc. [Priorità 3] (Checkpoint 13.8 nelle linee guida)
Riferirsi a 3.6 Comprensione
13.9 Fornire informazioni su raccolte di documenti (i.e., documenti comprendenti pagine multiple.). [Priorità 3] (Checkpoint 13.9 nelle linee guida)
Riferirsi a 3.10 Raccolte di documenti
13.10 Fornire un significato per saltare ASCII art su multilinee. [Priorità 3] (Checkpoint 13.10 nelle linee guida)
Riferirsi a 3.2 Equivalenti di testo e
4.7.3 Ascii art

Linea guida 14:

14.1 Usare il linguaggio più chiaro e semplice, appropriato per il contenuto del sito. [Priorità 1] (Checkpoint 14.1 nelle linee guida)
Riferirsi a 3.6 Comprensione
14.2 Integrare il testo con presentazioni grafiche o audio se facilitano la comprensione della pagina. [Priorità 3] (Checkpoint 14.2 nelle linee guida)
Riferirsi a 3.6 Comprensione
14.3 Creare uno stile di presentazione che sia congruo attraverso le pagine. [Priorità 3] (Checkpoint 14.3 nelle linee guida)
Riferirsi a 3.5 Navigazione

Indice degli elementi ed attributi HTML

Punti di controllo in questa sezione: 11.2.

Elementi

Versione lineare dell'indice di elementi HTML 4.0 .

Questo indice elenca tutti gli elementi in HTML 4.0. La prima colonna di questa tabella si collega alla definizione dell'elemento nella specifica HTML 4.0 ([HTML40]). Gli elementi che sono deprecati in HTML 4.0 sono seguiti da un asterisco (*). Gli elementi che sono obsoleti in HTML 4.0 o non esistono in una specifica W3C di HTML (2.0, 3.2, 4.0) non appaiono in questa tabella.

La seconda colonna indica altre specifiche W3C per HTML che hanno incluso ciascun elemento. La terza colonna indica il ruolo dell'elemento.

L'ultima colonna elenca le sezioni nel documento corrente dove l'elemento è discusso. Una annotazione di "N/A" significa che l'elemento non è trattato in questo documento.

Nome elemento Definito anche in Ruolo Tecniche
A 2.0, 3.2 Struttura 4.6 Links, 4.7.2 D-links invisibili , 4.7.5 Mappe immagini lato client
ABBR   Struttura 4.3.2 Acronimi e abbreviazioni, 4.7.3 Ascii art
ACRONYM   Struttura 4.3.2 Acronimi e abbreviazioni
ADDRESS 2.0, 3.2 Metadati 4.1.1 Metadati
APPLET* 3.2 Sostituito 4.8 Applets e altri oggetti di programmazione, 4.8.1 Equivalenti di testo per applets e oggetti di programmazione, 4.8.2 Applets direttamente accessibili
AREA 3.2 Struttura 4.7.5 Mappe immagini lato client
B 2.0, 3.2 Presentazione4.3.1 Enfasi
BASE 2.0, 3.2 Trattamento N/A
BASEFONT* 3.2 Presentazione 5.2 Fonts
BDO   Trattamento N/A
BIG 3.2 Presentazione 5.2 Fonts
BLOCKQUOTE 2.0, 3.2 Struttura 3.1 Struttura vs. presentazione, 4.3.3 Quotations (citazioni), 5.4 Formattazione di testo
BODY 2.0, 3.2 Struttura N/A
BR 2.0, 3.2 Presentazione N/A
BUTTON   Struttura 4.11.6 Bottoni grafici, 4.11.8 Problemi di compatibilità per i moduli verso il basso (indietro)
CAPTION 3.2 Struttura 4.1.4 Raggruppamento strutturale, 4.5.1 Tabelle di dati
CENTER* 3.2 Presentazione 5.6 Layout, posizionamento, layering, e allineamento
CITE 2.0, 3.2 Struttura 4.3.5 Miscellanea di marcatori strutturali
CODE 2.0, 3.2 Struttura 4.3.5 Miscellanea di marcatori strutturali
COL   Struttura 4.5.1 Tabelle di dati
COLGROUP   Struttura 4.1.4 Raggruppamenti strutturali, 4.5.1 Tabelle di dati
DD 2.0, 3.2 Struttura 4.4.1 Usare i fogli di stile per cambiare i punti di elenco
DEL   Metadati 4.3.5 Miscellanea di marcatori strutturali
DFN 3.2 Struttura 4.3.5 Miscellanea di marcatori strutturali
DIR* 2.0, 3.2 Struttura N/A
DIV 3.2 Struttura 4.6.1 Raggruppamenti e derivazioni di links
DL 2.0, 3.2 Struttura 4.1.4 Raggruppamenti strutturali, 4.4 Elenchi, 4.4.1 Usare i fogli di stile per cambiare i punti di elenco
DT 2.0, 3.2 Struttura 4.4.1 Usare i fogli di stile per cambiare i punti di elenco
EM 2.0, 3.2 Struttura 4.3.1 Enfasi
FIELDSET   Struttura 4.1.4 Raggruppamenti strutturali, 4.11.2 Controlli per gruppi di moduli
FONT* 3.2 Presentazione 5.2 Font
FORM 2.0, 3.2 Struttura 4.11 Moduli (Form)
FRAME   Sostituito 4.6.1 Raggruppamenti e derivazioni di links, 4.10 Frame
FRAMESET   Presentazione 4.10 Frame, 4.10.2 Equivalenti di testo per frame
H1 2.0, 3.2 Struttura 3.1 Struttura vs. presentazione, 4.1.2 Sezione headers, 4.1.4 Raggruppamenti strutturali
HEAD 2.0, 3.2 Struttura N/A
HR 2.0, 3.2 Presentazione 3.1 Struttura vs. presentazione, 4.1.2 Sezione headers
HTML 2.0, 3.2 Struttura N/A
I 2.0, 3.2 Presentazione 4.3.1 Enfasi
IFRAME   Sostituito 4.10 Frame
IMG 2.0, 3.2 Sostituito 4.7.1 Equivalenti di testo per immagini, 4.7.6 Mappe immagini lato server, 4.10.4 Realizzare sempre il sorgente di un frame di un documento HTML , 5.6.1 Se si devono usare immagini come spaziatori
INPUT 2.0, 3.2 Struttura 4.11.6 Bottoni grafici, 4.11.8 Problemi di compatibilità per forms verso il basso
INS   Metadati 4.3.5 Miscellanea di marcatori strutturali
ISINDEX* 2.0, 3.2 Struttura N/A
KBD 2.0, 3.2 Struttura 4.3.5 Miscellanea di marcatori strutturali
LABEL   Struttura 4.11.3 Controlli espliciti di label di moduli
LEGEND   Struttura 4.1.4 Raggruppamenti strutturali, 4.11.2 Controlli per gruppi di moduli
LI 2.0, 3.2 Struttura 4.4.1 Usare i fogli di stile per cambiare i punti di elenco
LINK 2.0, 3.2 Metadati 3.3 Pagine alternative, 4.1.1 Metadati, 4.1.3 Metadati di link e tools di navigazione , 5 Tecniche CSS
MAP 3.2 Struttura 4.7.4 Mappe immagini
MENU* 2.0, 3.2 Struttura N/A
META 2.0, 3.2 Metadati 3.8 Refresh (aggiornamento) automatico di pagina , 4.1.1 Metadati
NOFRAMES   Alternativo 4.10.2 Equivalenti di testo per frame
NOSCRIPT   Alternativo 4.12.3 Presentazione alternativa di script
OBJECT   Sostituito 3.2.1 Vista di insieme (overview) di tecnologie, 4.7.1 Equivalenti di testo per immagini, 4.7.5 Mappe immagini lato client, 4.7.6 Mappe immagini lato server, 4.8 Applets e altri oggetti di programmazione, 4.8.1 Equivalenti di testo per applets e oggetti di programmazione, 4.8.2 Applets direttamente accessibili, 4.9.5 Oggetti multimediali incapsulati, 4.10.6 Alternative alle frame
OL 2.0, 3.2 Struttura 4.1.4 Raggruppamenti strutturali, 4.4 Elenchi
OPTGROUP   Struttura 4.1.4 Raggruppamenti strutturali, 4.11.4 Opzioni di menu di gruppo
OPTION 2.0, 3.2 Struttura 4.11.4 Opzioni di menu di gruppo
P 2.0, 3.2 Struttura 4.1.4 Raggruppamenti strutturali, 4.6.1 Raggruppamento e bypass (salto) links
PARAM 3.2 Trattamento N/A
PRE 2.0, 3.2 Presentazione 4.5.1 Tabelle di dati
Q   Struttura 4.3.3 Quotations (citazioni)
S*   Presentazione N/A
SAMP 2.0, 3.2 Struttura 4.3.5 Miscellanea di marcatori strutturali
SCRIPT 3.2 (DTD) Processing 4.12 Script
SELECT 2.0, 3.2 Struttura 4.11.4 Opzioni di menu di gruppo
SMALL 3.2 Presentazione 5.2 Fonts
SPAN   Struttura 4.6.1 Raggruppamento e bypass (salto) di links
STRIKE* 3.2 Presentazione N/A
STRONG 2.0, 3.2 Struttura 4.3.1 Enfasi
STYLE 3.2 (DTD) Trattamento 5 Tecniche CSS
SUB 3.2 Presentazione N/A
SUP 3.2 Presentazione N/A
TABLE 3.2 Struttura 4.5 Tabelle
TBODY   Struttura 4.1.4 Raggruppamenti strutturali, 4.5.1 Tabelle di dati
TD 3.2 Struttura 4.5.1 Tabelle di dati
TEXTAREA 2.0, 3.2 Struttura 4.11.7 Tecniche per controlli specifici
TFOOT   Struttura 4.1.4 Raggruppamenti strutturali, 4.5.1 Tabelle di dati, 4.5.4 Problemi di compatibilità verso il basso (indietro) per tabelle
TH 3.2 Struttura 4.5.1 Tabelle di dati
THEAD   Struttura 4.1.4 Raggruppamenti strutturali, 4.5.1 Tabelle di dati
TITLE 2.0, 3.2 Metadati 4.1.1 Metadati
TR 3.2 Struttura N/A
TT 2.0, 3.2 Presentazione N/A
U* 3.2 Presentazione N/A
UL 2.0, 3.2 Struttura 4.1.4 Raggruppamenti strutturali, 4.4 Elenchi
VAR 2.0, 3.2 Struttura 4.3.5 Miscellanea di marcatori strutturali

Attributi

Versione lineare dell'indice di attributi di HTML 4.0.

Questo indice elenca alcuni attributi in HTML 4.0 che influenzano l'accessibilità e quali a elementi si applicano. La prima colonna di questa tabella si collega alla definizione dell'attributo nella specifica HTML 4.0 ([HTML40]). Gli attributi ed elementi che sono deprecati in HTML 4.0 ([HTML40]) sono seguiti da un asterisco (*). Gli attributi ed elementi che sono obsoleti in HTML 4.0 o non esistono in una specifica W3C di HTML (2.0, 3.2, 4.0) non appaiono in questa tabella. Gli attributi che si applicano alla maggior parte degli elementi HTML 4.0 sono indicati come tali; si prega di consultare la specifica HTML 4.0 per l'elenco esatto di elementi con questo attributo.

La seconda colonna indica altre specifiche W3C per HTML che ha incluso ciascun attributo. La terza colonna indica gli elementi che prende ciascun attributo. La quarta colonna indica il ruolo dell'attributo.

L'ultima colonna elenca le sezioni nel documento corrente dove l'attributo è discusso. Una notazione di "N/A" significa che l'attributo non è discusso in questo documento.

Nome attributo Si applica agli elementi Ruolo Tecniche
abbr TD, TH Alternativo 4.5.1 Tabelle di dati
accesskey A, AREA, BUTTON, INPUT, LABEL, LEGEND, TEXTAREA Interfaccia utente 4.11.5 Accesso ai moduli da tastiera
alt APPLET, AREA, IMG, INPUT Alternativo 3.2.1 Vista di insieme (overview) di tecnologie, 4.7.1 Equivalenti di testo per immagini, 4.7.2 D-links invisibili, 4.7.5 Mappe immagini lato client, 4.7.6 Mappe immagini lato server, 4.8.1 Equivalenti di testo per applets e oggetti di programmazione, 5.6.1 Se si devono usare immagini come spaziatori
axis TD, TH Struttura 4.5.1 Tabelle di dati
class La maggior parte degli elementi Struttura 4.6.1 Raggruppamento e bypass (salto) di links
dir La maggior parte degli elementi Trattamento 4.5.1 Tabelle di dati
for LABEL Struttura 4.11.3 Esplicitazione di controlli dei moduli
headers TD, TH Struttura 4.5.1 Tabelle di dati, 4.5.1 Tabelle di dati
hreflang A, LINK Metadati 3.7 Negoziazione di contenuto
id La maggior parte degli elementi Struttura 4.6.1 Raggruppamento e bypass (salto) links
label OPTION Alternativo 4.11.4 Opzioni di menu di gruppo
lang La maggior parte degli elementi Metadati 4.2 Informazioni di lingua
longdesc IMG, FRAME, IFRAME Alternativo 3.2.1 Vista di insieme (overview) di tecnologie, 4.7.1 Equivalenti di testo per immagini
scope TD, TH Struttura 4.5.1 Tabelle di dati
style La maggior parte degli elementi Trattamento 5 Tecniche CSS
summary TABLE Alternative 4.5.1 Tabelle di dati
tabindex A, AREA, BUTTON, INPUT, OBJECT, SELECT, TEXTAREA Interfaccia utente 4.6.1 Raggruppamento e bypass (salto) di links, 4.6.2 Accesso da tastiera, 4.11.5 Accesso da tastiera ai moduli
title La maggior parte degli elementi Metadati 3.2.2 Compatibilità verso il basso (indietro), 4.1.1 Metadati, 4.3.2 Acronimi e abbreviazioni, 4.6 Links, 4.7.3 Ascii art
usemap IMG, INPUT, OBJECT Trattamento 4.7.4 Mappe Immagini

Il seguente è l'elenco di attributi HTML 4.0 non direttamente collegati all'accessibilità. Gli sviluppatori di contenuto dovrebbero usare i fogli di stile invece degli attributi di presentazione. Anche per gli attributi dei manipolatori di eventi, si prega di riferirsi alla sezione su manipolatori di eventi indipendenti dal device (dispositivo) per maggiori dettagli.

Altri attributi strutturali:
start*, value*, rowspan, colspan, span
Altri attributi di presentazione:
align*, valign*, clear*, nowrap*, char, chardif, hspace*, vspace*, cellpadding, cellspacing, compact*, face*, size*, background*, bgcolor*, color*, testo*, link*, alink*, vlink*, border, noshade*, rules, size (deprecated according to element), marginheight, marginwidth, frame, frameborder, rows, cols
Altri attributi per il trattamento dell'istruzione:
ismap, coords, shape
Altri attributi per l'interfaccia utente:
target, scrolling, noresize
Altri attributi per metadati:
type, cite, datetime
Attributi per manipolatore di evento:
onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onload, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselect, onsubmit, onunload

Riconoscimenti

Web Content Guidelines Working Group Co-Chairs:
Chuck Letourneau, Starling Access Services
Gregg Veerheiden, Trace Research e Development
Contati W3C Team :
Judy Brewer e Daniel Dardailler
Vogliamo ringraziare le seguenti persone che hanno messo a disposizione il loro tempo e i loro commenti per disegnare queste Linee Guida:
Harvey Bingham, Kevin Carey, Chetz Colwell, Neal Ewers, Geoff Freed, Al Gilman, Larry Goldessererg, Jon Gunderson, Eric Hansen, Phill Jenkins, Leonard Kasday, George Kerscher, Marja-Riitta Koivunen, Josh Krieger, Scott Luebking, William Loughborough, Murray Maloney, Charles McCathieNevile, MegaZone (Livingston Enterprises), Masafumi Nakane, Mark Novak, Charles Oppermann, Mike Paciello, David Pawson, Michael Pieper, Greg Rosmaita, Liam Quinn, Dave Raggett, T.V. Raman, Roesserert Savellis, Jutta Treviranus, Steve Tyler, Jaap van Lelieveld, e Jason White.

La bozza originale di questo documento è basato su "The Unified Web Site Accessibility Guidelines" ([UWSAG]) compilato dal Trace R & D Center at the University of Wisconsin. Quel documento include un elenco di collaboratori aggiuntivi.

Specifiche di riferimento

Per l'ultima versione di qualunque specifica W3C si prega di consultare l'elenco dei W3C Technical Reports.

[CSS1]
"CSS, level 1 Recommendation", B. Bos, H. Wium Lie, eds., 17 Dicembre 1996, revisionato 11 Gennaio 1999. The CSS1 Recommendation è: http://www.w3.org/TR/1999/REC-CSS1-19990111.
L'ultima versione di CSS1 è disponibile a: http://www.w3.org/TR/REC-CSS1.
[CSS2]
"CSS, level 2 Recommendation", B. Bos, H. Wium Lie, C. Lilley, e I. Jacobs, eds., 12 Maggio 1998. La CSS2 Recommendation è: http://www.w3.org/TR/1998/REC-CSS2-19980512.
L'ultima versione di CSS2 è disponibile a: http://www.w3.org/TR/REC-CSS2.
[DOM1]
"Document Object Model (DOM) Level 1 Specification", V. Apparao, S. Byrne, M. Champion, S. Isaacs, I. Jacobs, A. Le Hors, G. Nicol, J. Robie, R. Sutor, C. Wilson, e L. Wood, eds., 1 Ottobre 1998. Il DOM Level 1 Recommendation è: http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001.
L'ultima versione di DOM Level 1 è disponibile a: http://www.w3.org/TR/REC-DOM-Level-1
[HTML40]
"HTML 4.0 Recommendation", D. Raggett, A. Le Hors, e I. Jacobs, eds., 17 Dicembre 1997, revisionato 24 Aprile 1998. Il HTML 4.0 Recommendation è: http://www.w3.org/TR/1998/REC-html40-19980424.
L'ultima versione di HTML 4.0 è disponibile a: html401.
[HTML32]
"HTML 3.2 Recommendation", D. Raggett, ed., 14 Gennaio 1997. L'ultima versione di HTML 3.2 è disponibile a: http://www.w3.org/TR/REC-html32.
[MATHML]
"Mathematical markup language", P. Ion e R. Miner, eds., 7 Aprilr 1998. The MathML 1.0 Recommendation è: http://www.w3.org/TR/1998/REC-MathML-19980407.
L'ultima versione di MathML 1.0 è disponibile a: http://www.w3.org/TRREC-MathML.
[PNG]
"PNG (Portable Network Graphics) Specification", T. Boutell, ed., T. Lane, contributing ed., 1 Ottobre 1996. L'ultima versione di PNG 1.0 è: http://www.w3.org/TR/REC-png.
[RDF]
"Resource Description Framework (RDF) Model and Syntax Specification", O. Lassila, R. Swick, eds., 22 Febbraio 1999. La RDF Recommendation è: http://www.w3.org/TR/1999/REC-rdf-syntax-19990222.
L'ultima versione di RDF 1.0 è disponibile a: http://www.w3.org/TR/REC-rdf-syntax
[RFC2068]
"HTTP Version 1.1", R. Fielding, J. Gettys, J. Mogul, H. Frystyk Nielsen, e T. Berners-Lee, Gennaio 1997.
[SMIL]
"Synchronized Multimedia Integration Language (SMIL) 1.0 Specification", P. Hoschka, ed., 15 Giugno 1998. The SMIL 1.0 Recommendation è: http://www.w3.org/TR/1998/REC-smil-19980615
L'ultima versione di SMIL 1.0 è disponibile a: http://www.w3.org/TR/REC-smil
[TECNICHE]
"Techniques for Web Content Accessibility Guidelines 1.0", W. Chisholm, G. Vanderheiden, I. Jacobs, eds. Questo documento spiega come implementare i punti di controllo definiti in "Web Content Accessibility Guidelines 1.0". L'ultima bozza delle tecniche è disponibile a: http://www.w3.org/TR/WAI-WEBCONTENT-TECHS/
[WAI-AUTOOLS]
"Authoring Tool Accessibility Guidelines", J. Treviranus, J. Richards, I. Jacobs, C. McCathieNevile, eds. L'ultimo Working Draft (Bozza di Lavoro) di queste Linee guida per tools di authoring per progettazione accessibile è disponibile a: http://www.w3.org/TR/WAI-AUTOOLS/
[WAI-UA-SUPPORT]
Questa pagina documenta il supporto noto da parte dei browsers (includendo tecnologie assistive) di alcune caratteristiche di accessibilità elencate in questo documento. La pagina è disponibile a: http://www.w3.org/WAI/Resources/WAI-UA-Support
[WAI-USERAGENT]
"User Agent Accessibility Guidelines", J. Gunderson e I. Jacobs, eds. L'ultimo Working Draft (Bozza di Lavoro) di queste Linee Guida per il progetto di agenti utente accessibili è disponibile a: http://www.w3.org/TR/WAI-utenteAGENT/
[WCAG-ICONS]
Informazioni su icone di conformità per questo documento e come usarle è disponibile a: http://www.w3.org/WAI/WCAG1-Conformance.html
[UWSAG]
"The Unified Web Site Accessibility Guidelines", G. Vanderheiden, W. Chisholm, eds. Le Linee Guida Unificate per i Siti Web sono state compilate dal Trace R & D Center alla University of Wisconsin sotto il patrocinio del National Institute on Disability and Rehabilitation Research (NIDRR),  U.S. Dept. of Education. Questo documento è disponibile a: http://www.tracecenter.org/docs/html_Linee guida/version8.htm
[XML]
"Extensible Markup Language (XML) 1.0.", T. Bray, J. Paoli, C.M. Sperberg-McQueen, eds., 10 Febbraio 1998. La XML 1.0 Recommendation è: http://www.w3.org/TR/1998/REC-xml-19980210.
L'ultima versione di XML 1.0 è disponibile a: http://www.w3.org/TR/REC-xml

Servizi

Nota. W3C non può mantenere stabilità per alcuno dei seguenti riferimenti fuori dal suo controllo. Questi riferimenti sono inclusi per convenienza.

[ASTER]
For informazioni su ASTER, un "Audio System For Technical Readings", consultare T. V. Raman's home page.
[BOBBY]
Bobby è un tool automatico di validazione di accessibilità sviluppato da Cast.
[BROWSERCAPS]
BrowserCaps.
[CSSVAL]
Il W3C CSS Validation Service Servizio di validazione dei CSS W3C.
[DVS]
DVS Descriptive Video Services.
[HACKER]
Hacker, Diana. (1993). A Pocket Style Manual. St. Martin's Press, Inc. 175 Fifth Avenue, New York, NY 10010.
[HOMEPAGEREADER]
IBM's Home pagina Reader.
[HTMLVAL]
The W3C HTML Validation Service Servizio di validazione HTML del W3C.
[HYPERMEDIA]
IBM's techexplorer Hypermedia Browser.
[IBMJAVA]
IBM Linee guida for Writing accessibile Applications Using 100% Pure Java sono dispobibili presso IBM Special Needs Systems.
[JAVAACCESS]
informazioni su Java Accessibility and Usability è disponibile presso il Trace R&D Center.
[JAWS]
Henter-Joyce's Jaws lettore di schermo (screen reader).
[LIGHTHOUSE]
The Lighthouse fornisce informazioni su colori e contrasti accessibili.
[LYNX]
Lynx è un browser di solo testo.
[LYNXME]
Lynx-me è un emulatore Lynx.
[LYNXVIEW]
Lynx Viewer è un emulatore Lynx.
[MACROMEDIA]
Flash OBJECT e EMBED Tag Syntax da Macromedia.
[NCAM]
Il National Center for Accessible Media include informazioni su didascalia e descrizione audio sul Web.
[PWWEBSPEAK]
Il Productivity Works' pwWebSpeak.
[SPOOL]
Spool, J.M., Sconlong, T., Schroeder, W., Snyder, C., DeAngelo, T. (1997). Web Site Usability: A Designer's Guide User Interface Engineering, 800 Turnpike St, Suite 101, North Andover, MA 01845.
[TECHHEAD]
Tech Head fornisce alcune informazioni circa il Fog index indice Fog descritto in [SPOOL].
[TRACE]
Il Trace Research & Development Center. Consultare questo sito per una varietà di informazioni sull'accessibilità, incluso una scrolling Java applet che può essere bloccata dall'utente.
[WAI-ER]
Il WAI Evaluation e Repair Working Group
[WALSH]
Walsh, Norman. (1997). "A Guide to XML." In "XML: Principles, Tools, and Techniques." Dan Connolly, Ed. O'Reilly & Associates, 101 Morris St, Sebastopol, CA 95472. pp 97-107.
[WEBREVIEW]
webreview.com Tabelle di compatibilità dei browser con i fogli di stile.
[WINVISION]
Artic's WinVision.