[contents]   [html index]  

W3C

Tecniche HTML per una pagina Web accessibile

W3C Nota 6 Novembre 2000

Questo documento è una traduzione delle Tecniche HTML per una pagina Web accessibile.
Questo documento potrebbe contenere errori di traduzione.
La versione normativa, in lingua inglese, si trova a:

http://www.w3.org/TR/WCAG10-HTML-TECHS/
Questa versione italiana tradotta è:
http://accessibility.comune.prato.it/tradotte/TR/WCAG10-HTML-TECHS/
Traduttori:
Gruppo di lavoro U.O. Rete Civica del Comune di Prato (in particolare Denti Linda, Munastra Nadia, Nelli Enrico, Postiferi Vanessa)
This version:
http://www.w3.org/TR/2000/NOTE-WCAG10-HTML-TECHS-20001106/
(plain text, PostScript, PDF, gzip tar file of HTML, zip archive of HTML)
Latest version:
http://www.w3.org/TR/WCAG10-HTML-TECHS/
Previous version:
http://www.w3.org/TR/2000/NOTE-WCAG10-HTML-TECHS-20000920/
Editors:
Wendy Chisholm, W3C;
Gregg Vanderheiden, Trace R & D Center University of Wisconsin -- Madison;
Ian Jacobs, W3C

Copyright ©1999 - 2000 W3C® (MIT, INRIA, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply.

Abstract

Questo documento descrive le tecniche per realizzare pagine HTML (Hypertext Markup Language) accessibili (refer to HTML 4.01 [HTML4]). "Tecniche HTML per una pagina web accessibile" è stato progettato per aiutare gli autori di contenuti web che desiderano adeguarsi alle conformità di "Tecniche per le linee guida dell'accessibilità web 1.0" ([WCAG10]). Anche se le tecniche in questo documento dovrebbero aiutare gli autori HTML a conformarsi alle "Tecniche per le linee guida dell'accessibilità web 1.0", non sono né una garanzia di conformità, né l'unico modo in cui l'autore possa produrre contenuti conformi.

Questo documento è parte di una serie di documenti sulle tecniche di realizzazione di contenuti Web accessibili. Per informazioni su altri documenti della serie, si prega di fare riferimento a "Tecniche per le linee guida dell'accessibilità web 1.0" [WCAG10-TECHS].

Nota: Questo documento contiene numerosi esempi che illustrano soluzioni accessibili con CSS, ma contiene anche esempi deprecati che illustrano cosa gli sviluppatori non dovrebbero fare. Gli esempi deprecati sono evidenziati e i lettori devono leggerli con cautela, tenendo presente che sono presenti solo per scopo illustrativo.

Stato del documento

Questa versione è stata pubblicata per correggere alcuni link rotti nella versione precedente

La versione di questo documento del 6 Novembre 2000 è una Nota in una serie di Note prodotte e approvate dal Web Content Accessibility Guidelines Working Group (WCAG WG). Questa Nota non è stata rivista o approvata dai Membri del W3C. La serie di documenti sostituisce il singolo documento 5 May 1999 W3C Note Techniques for Web Content Accessibility Guidelines 1.0. Gli argomenti dei documenti iniziali sono stati separati in documenti riguardanti tecnologie specifiche che si possono evolvere indipendentemente. I documenti sulle tecnologie specifiche permettono all'autore di focalizzarsi su una particolare tecnologia.

Mentre le "Tecniche per le linee guida dell'accessibilità web 1.0" Raccomandazione [WCAG10] è un documento stabile, per la serie dei manuali è prevista una evoluzione attraverso l'aggiunta di nuove tecnologie e di molte tecniche per la creazione di contenuti Web accessibili scoperte dagli sviluppatori.

La storia dei cambiamenti fatti ai documenti così come la lista di problemi aperti e chiusi sono disponibili. Incoraggiamo i lettori ad inviare commenti sul documento o proposte per risolvere attuali problemi. Si prega di inviare commenti dettagliati su questo documento al Gruppo di Lavoro al w3c-wai-gl@w3.org; archivi pubblici sono disponibili.

La versione Inglese di queste specifiche è la sola versione normativa. La traduzione di questo documento potrebbe essere disponibile all'indirizzo http://www.w3.org/WAI/GL/WAI-WEBCONTENT-TRANSLATIONS.

La lista degli errori conosciuti in questo documento è disponibile all' "Errata in Web Content Accessibility Guidelines." Si prega di riferire eventuali errori nel documento all'indirizzo e-mail wai-wcag-editor@w3.org.

La Web Accessibility Initiative (WAI) del World Wide Web Consortium (W3C) crea una varietà di risorse sull'accessibilità del Web. WAI Accessibility Guidelines sono prodotte come parte del WAI Technical Activity. Gli obiettivi del Web Content Accessibility Guidelines Working Group sono descritti nella lettera.

Una lista di attuali raccomandazioni e altri documenti tecnici del W3C è disponibile all'indirizzo http://www.w3.org/TR/.

Indice

1 Struttura del documento e meta data

Gli sviluppatori dovrebbero utilizzare marcatori strutturali secondo la specifica. Elementi e attributi strutturali (riferimento all'indice degli elementi e degli attributi HTML per identificarli) promuovono la consistenza nei documenti e forniscono informazioni sugli altri strumenti (per esempio, indicizzazione degli strumenti, motori di ricerca, programmi che estraggono tabelle dai database, barre di navigazione che usano elementi dell'intestazione, e software per la traduzione automatica di testo da una lingua ad un'altra).

1.1 Metadata

Punti di controllo:

Alcuni elementi strutturali forniscono informazioni sul documento. Questi sono detti "metadata" riguardanti il documento -- un metadata è un informazione sui dati. Un metadata ben utilizzato è importante per orientare l'utente. Gli elementi HTML che forniscono informazioni utili sul documento sono:

1.1.1 TITLE: Il titolo del documento.

Nota che l'elemento TITLE (obbligatorio), che appare solo una volta in un documento HTML, è diverso dall'attributo "title", che si applica a quasi ogni elemento HTML 4.01. Gli sviluppatori dovrebbero utilizzare l'attributo "title" in accordo con le specifiche HTML 4.01. Per esempio, "title" dovrebbe essere usato con links per fornire informazioni sul bersaglio del link.

1.1.2 Elemento ADDRESS

Questo elemento può essere utilizzato per fornire informazioni sul creatore della pagina.

1.1.3 Elemento META

Punti di controllo:

Questo elemento può specificare metadata per un documento includendo parole chiave e informazioni sull'autore. Fare riferimento alla sezione aggiornamento automatico delle pagine per informazioni sul perchè i META non dovrebbero essere utilizzati per reindirizzare o aggiornare periodicamente le pagine.

I seguenti esempi HTML sono deprecati. Il primo cambia la pagina dell'utente ad intervalli regolari. Gli sviluppatori non dovrebbero usare questa tecnica per simulare tecnologia "push". I web-designers non possono predirre quanto tempo impiegherà l'utente per leggere la pagina; quindi un prematuro refresh potrebbe disorientare gli utenti. Si dovrebbero evitare periodici refresh e permettere agli utenti di scegliere quando vogliono avere le informazioni più recenti.

Esempio deprecato.

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

Fine esempio.

Il seguente esempio HTML (usando l'elemento META) inoltra l'utente da una pagina all'altra dopo una pausa. Comunque questo marcatore non dovrebbe essere utilizzato per creare le pagine poichè non è standard e potrebbe disorientare gli utenti ed interrompere la storia delle pagine visitate in un browser.

Esempio deprecato.

<HEAD>
<TITLE>Don't use this!</TITLE>
<META http-equiv="refresh" content="5;
         http://www.example.com/newpage">
</HEAD>
<BODY>
<P>If your browser supports Refresh,
you'll be transported to our
<A href="http://www.example.com/newpage">new site</A>
in 5 seconds, otherwise, select the link manually.
</BODY>

Fine esempio.

1.1.4 La dichiarazione !DOCTYPE

Punti di controllo:

Rispettando una grammatica formale pubblicata e dichiarandola all'inizio del documento si ha la possibilità di far capire la struttura del documento all'utente. Inoltre, in questo modo si fa sapere all'user agent dove può trovare informazioni semantiche, in caso ne abbia bisogno. Il Servizio di Validazione del W3C valida i documenti sulla base di un'intera lista di grammatiche pubblicate.

È preferibile validare attraverso il W3C le grammatiche. Riferimento a Technologies Reviewed for Accessibility.

1.1.5 L'elemento LINK e la barra di navigazione

Punti di controllo:

Gli sviluppatori dovrebbero usare l'elemento LINK e i tipi di collegamento (riferimento a [HTML4], sezione 6.12) per descrivere i meccanismi di navigazione e organizzazione di un documento. Alcuni user agents possono sintetizzare gli strumenti di navigazione o permettere di ordinare le stampe di una gamma di documenti basati su tale marcatore.

Esempio.

Il seguente elemento LINK potrebbere essere incluso nell'intestazione del capitolo 2 di un libro:

   <LINK rel="Next" href="chapter3">
   <LINK rel="Prev" href="chapter1">
   <LINK rel="Start" href="cover">
   <LINK rel="Glossary" href="glossary">

Fine esempio.

1.1.6 L'elemento LINK e testi alternativi

Punti di controllo:

L'elemento LINK può anche essere usato per designare documenti alternativi. I browser dovrebbero caricare la pagina alternativa automaticamente basandosi sul tipo di browser dell'utente e le preferenze. Per esempio, usare l'elemento LINK come segue:

Esempio.

L'user agents che supporta LINK caricherà la pagina alternativa per gli utenti con browser che possono essere identificati come supportanti "aural", "braille", o interpreti "tty".

        <HEAD>
        <TITLE>Welcome to the Virtual Mall!</TITLE>
        <LINK title="Text-only version"
              rel="alternate"
              href="text_only"
              media="aural, braille, tty">
        </HEAD>
        <BODY><P>...</BODY>

Fine esempio.

1.2 Raggruppamenti strutturali

Punti di controllo:

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

Tutti questi meccanismi di raggruppamento dovrebbero essere utilizzati quando è appropriato e naturale, per esempio, quando le informazioni si dividono in gruppi logici. Gli sviluppatori dovrebbero evitare di creare gruppi casuali, poichè confonderebbero gli utenti.

1.2.1 Intestazione delle sezioni

Punti di controllo:

I documenti lunghi sono spesso divisi in una grande varietà di capitoli, i capitoli hanno dei sottotitoli e i sottotitoli sono divisi in sezioni, le sezioni in paragrafi, ecc. Queste "parti semantiche" delle informazioni compongono la struttura del documento.

Le sezioni dovrebbero essere introdotte con gli elementi di intestazione HTML (H1-H6). Altri marcatori complementari possono migliorare la presentazione (per esempio l'elemento HR che crea una linea divisoria orizzontale), ma la rappresentazione visuale non è sufficiente ad identificare le sezioni del documento.

Poichè alcuni utenti scorrono il documento attraverso le intestazioni, è importante usarle appropriatamente per comunicare la struttura del documento. Gli utenti dovrebbero ordinare correttamente le intestazioni. Per esempio, nell'HTML, l'elemento H2 dovrebbe seguire l'elemento H1, l'elemento H3 dovrebbe seguire l'elemento H2, etc. I web-developer non dovrebbero saltare i livelli (per esempio saltare dall'H1 all'H3). Non usare intestazioni per creare effetti di font; usare fogli di stile per cambiare gli stili dei font per esempio.

Notare che in HTML, gli elementi di intestazione (H1 - H6) iniziano solo una sezione, non possono contenere a loro volta altri elementi. Il seguente codice HTML mostra come i fogli di stile possano essere utilizzati per controllare la visualizzazione dell'intestazione e del contenuto che segue:

Esempio.

   <HEAD>
   <TITLE>Cooking techniques</TITLE>
   <STYLE type="text/css">
      /* Indent heading and following content */
      DIV.section2 { margin-left: 5% }
   </STYLE>
   </HEAD>
   <BODY>
   <H1>Cooking techniques</H1>
   ... some text here ...
   <DIV class="section2">
   <H2>Cooking with oil</H2>
   ... text of the section ...
   </DIV>

   <DIV class="section2">
   <H2>Cooking with butter</H2>
   ... text of the section ...
   </DIV>

Fine esempio.

Vedi anche la sezione sui link.

2 Informazioni sul linguaggio

2.1 Identificare i cambiamenti di linguaggio

Punti di controllo:

Se si usa più di una lingua in una pagina, ogni volta che c'è un cambiamento lo si deve identificare con l'attributo "lang".

Esempio.

   <P>And with a certain <SPAN lang="fr">je ne sais quoi</SPAN>, 
   she entered both the room, and his life, forever. <Q>My name
   is Natasha,</Q> she said. <Q lang="it">Piacere,</Q>
   he replied in impeccable Italian, locking the door.

Fine esempio.

Identificare i cambiamenti di lingua è importante per un vasto numero di ragioni:

  1. Gli utenti che stanno leggendo il documento in braille potranno sostituire i codici di controllo adatti (marcatori) quando c'è un cambiamento di lingua, accertandosi così che il software di traduzione del braille generi i caratteri corretti (caratteri accentati, per esempio). Questi codici di controllo prevengono la generazione di contrazioni braille, che potrebbero confondere ulteriormente l'utente. Le contrazioni braille combinano in una singola cella dei gruppi di caratteri usati spesso, che in genere appaiono invece in celle separate. Per esempio, "ing" che di solito prende tre celle (una per ogni carattere) può essere contratto in una singola cella.
  2. Allo stesso modo, i sintetizzatori di voce che "parlano" molte lingue dovranno essere capaci di generare il testo con gli accenti appropriati e con pronuncia opportuna. Se i cambiamenti non sono contrassegnati, i sintetizzatori cercheranno di fare del loro meglio per pronunciare le parole nella lingua principale alla quale sono stati impostati. Così la parola Francese per macchina, "voiture" sarà pronunciata "voter" da un sintetizzatore vocale che usa l'Inglese come lingua primaria.
  3. Gli utenti che non sono in grado di tradurre linguaggi, potranno ottenere traduzioni da traduttori automatici.

2.2 Identificare il linguaggio primario

Punti di controllo:

È buona normaidentificare il linguaggio primario di un documento, sia con marcatori (come mostrato in seguito) sia attraverso le intestazioni HTTP.

Esempio.

    <HTML lang="fr">
       ....rest of an HTML document written in French...
    </HTML>

Fine esempio.

3 Marcatori di testo

Le seguenti sezioni mostrano modi per aggiungere struttura a porzioni di testo.

3.1 Enfasi

Punti di controllo:

Gli elementi HTML appropriati per enfatizzare sono EM e STRONG. Gli elementi B e I non dovrebbero essere utilizzati; sono usati per creare un effetto visuale di presentazione. Gli elementi EM e STRONG sono designati per indicare enfasi strutturale che può essere resa in vari di modi (cambiamenti degli stili dei font, cambiamenti nel tono della voce del sintetizzatore vocale, ecc.)

3.2 Acronimi e abbreviazioni

Punti di controllo:

Marcare abbreviazioni e acronimi con ABBR e ACRONYM ed usare l'attributo "title" per indicare l'espansione:

Esempio.

   <P>Benvenuto nel <ACRONYM title="World Wide Web">WWW</ACRONYM>!

Fine esempio.

Questo è anche applicato a frasi abbreviate utilizzate come intestazioni per righe o colonne di tabella. Se un'intestazione è già abbreviata fornisce l'espansione ABBR. Se l'intestazione è lunga, se lo desiderate potete fornire un'abbreviazione, come descritto in Data Tables.

Esempio.

  ...
  <TH>First name</TH>
  <TH><ABBR title="Social Security Number">SS#</ABBR>
  ...

Fine esempio.

3.3 Citazioni

Punti di controllo:

Gli elementi Q e BLOCKQUOTE rispettivamente sono marcatori di linea e di blocchi di citazioni.

Esempio.

Questo marca una lunga citazione con BLOCKQUOTE:

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

Fine esempio.

3.4 Delimitatori e fogli di stile piuttosto che immagini (l'esempio della matematica)

Punti di controllo:

Utilizzare marcatori (e fogli di stile) ove possibile piuttosto di immagini (e.g. una equazione matematica) promuove l'accessibilità per i seguenti motivi:

Ad esempio, considera queste tecniche per inserire formule matematiche sul Web:

TeX è comunemente usato per creare relazioni tecniche che vengono convertite in HTML per la pubblicazione sul Web. Comunque, i convertitori tendono a generare immagini, usano tag deprecati, e usano tabelle per il layout. Di conseguenza, gli autori dovrebbero:

  1. Rendere disponibile il TeX (o LaTeX) originale sul Web. C'è un sistema chiamato "AsTeR" ([ASTER]) che può creare una resa uditiva di documenti TeX e LaTeX. Inoltre, IBM ha un plug-in per Netscape e Internet Explorer che legge documenti TeX/LaTeX e alcuni di MathML (riferirsi a [HYPERMEDIA]). Nota. Questi strumenti lavorano principalmente nell'ambiente inglese e possono non funzionare altrettanto bene con i sintetizzatori vocali che non hanno come linguaggio primario l'Inglese.
  2. Assicurarsi che l'HTML generato dal processo di conversione si accessibile. Fornire un'unica descrizione dell'equazione (piuttosto utilizzare del testo nell' "alt" in ogni immagine generata poichè ci possono essere piccole immagini per parti dell'equazione).

3.5 Altri otto elementi strutturali (per identificare citazioni, frammenti di codifica, cancellare testo e altri)

La specifica HTML 4.01 definisce i seguenti elementi strutturali per varie necessità:

CITE
Contiene una citazione o un riferimento ad altre fonti.
DFN
Indica che questa è l'istanza definitiva del termine incluso.
CODE
Designa un frammento di codice del computer.
SAMP
Designa un esempio di output prodotto dai programmi, dagli scripts, etc.
KBD
Indica il testo che deve essere inserito dall'utente.
VAR
Indica l'istanza di una variabile o dell'argomento di un programma.
INS
Indica il testo inserito in un documento.
DEL
Indica il testo cancellato da un documento.

4 Liste

Punti di controllo:

Gli elementi HTML di lista DL, UL, e OL dovrebbero solo essere usati per creare liste, non per dare effetti di formattazione come un'indentazione. Riferimento a informazioni su CSS e tabelle per il layout nelle CSS Techniques [WCAG10-CSS-TECHNIQUES].

Le liste ordinate aiutano gli utenti non vedenti a navigare. I non vedenti possono "perdersi" nelle liste, specialmente nelle liste annidate e quelle che non indicano lo specifico livello di annidamento per ogni elemento della lista. Fino a quando gli user agent non forniranno mezzi per identificare chiaramente il contesto della lista (per esempio, supportando lo pseudo-elemento ':before' nei CSS 2), i content developers dovrebbero includere indizi contestuali nelle loro liste.

Per le liste numerate, i numeri composti sono molto più informativi dei semplici numeri. Così, una lista numerata "1, 1.1, 1.2, 1.3, 2, 2.1," fornisce più informazioni contestuali rispetto alla stessa lista fatta senza usare numeri composti, che potrebbe essere formattata così:

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

e verrebbe letta come "1, 1, 2, 1, 2, 3, 2, 1", senza informazioni sulla profondità della lista.

[CSS1] e [CSS2] permettono agli utenti di controllare gli stili dei numeri (in tutte le liste, non solo in quelle ordinate) attraverso i fogli di stile.

Esempio.

Il seguente foglio di stile CSS2 mostra come specificare numeri composti per liste annidate create sia con OL che con UL. Gli articoli sono numerati come "1", "1.1", "1.1.1", etc.

<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 i CSS2 saranno largamente supportati o gli user agents permetteranno agli utenti di controllare la rappresentazione delle liste attraverso altri mezzi, gli autori dovrebbero fornire indizzi di tipo contestuale in liste annidate non numerate. Gli utenti non vedenti potrebbero avere difficoltà a capire dove comincia e dove finisce una lista e dove cominciano gli oggetti della lista. Per esempio, se un elemento della lista continua nella linea successiva, può sembrare che ci siano due elementi separati nella lista. Questo può essere un problema per gli screen reader.

4.1 Usare fogli di stile per cambiare i punti delle liste

Per cambiare lo stile dei "punti" delle informazioni di una lista non ordinata con elemento LI, usare fogli di stile. Nel CSS, è possibile specificare lo stile da utilizzare per il puntino (es, 'tondo') nel caso in cui l'immagine usata come punto non possa essere caricata.

Esempio.

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

Fine esempio.

Per accertarsi ulteriormente che gli utenti distinguano gli elementi della lista, gli sviluppatori di contenuti dovrebbero fornire un'etichetta di testo prima o dopo ciascun elemento della lista:

Esempio.

In questo esempio, le nuove informazioni sono comunicate attraverso testo ("New"), font style (bold), e colore (punto giallo, testo rosso su background giallo).

<HEAD>
<TITLE>Bullet styles example</TITLE>
<STYLE type="text/css">
   .newtxt { font-weight: bold;
             color: red;
             background-color: yellow }
   .newbullet { list-style : url(yellow.gif) disc }
</STYLE>
</HEAD>
<BODY>
<UL>
   <LI class="newbullet">Roth IRA <SPAN class="newtext">New</SPAN></LI>
   <LI> 401(k)</LI>
</UL>
</BODY>

Fine esempio.

4.1.1 Immagini usate come punti di lista

Punti di controllo:

Evitare di usare immagini come punti di lista nelle liste DL, DT, e DD. Comunque, se si usa questo metodo, fornire testo equivalente.

Esempio deprecato.

<HEAD>
<TITLE>Deprecated example using image in DL lists</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>

Fine esempio.

Gli sviluppatori di contenuto dovrebbero evitare che i puntini forniscano informazioni visuali addizionali. Comunque, se si usa questo metodo, assicurarsi di fornire testo equivalente che descriva il significato del puntino:

Esempio deprecato.

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

Fine esempio.

5 Tabelle

Questa sezione discute l'accessibilità delle tabelle e gli elementi che possono essere messi nell'elemento TABLE. Sono presi in considerazione due tipi di tabelle: tabelle usate per organizzare i dati e tabelle usate per creare un layout nella pagina.

5.1 Tabelle di dati

Gli sviluppatori possono rendere le tabelle di dati fatte in HTML 4.01 accessibili in molti modi:

5.1.1 Fornire un riassunto delle informazioni

Punti di controllo:

5.1.2 Identificare le informazioni delle righe e delle colonne

Punti di controllo:

Esempio.

Questo esempio mostra come associare celle di dati (creato con TD) con le loro corrispondenze attraverso l'attributo "headers". L'attributo "headers" specifica una lista di celle di intestazione (etichette di riga e colonna) associate alla corrente cella di dati. Questo richiede che ogni intestazione di cella debba avere un attributo "id".

   <TABLE border="1" 
          summary="Questa tabella contiene il numero di
                   tazze di caffè consumato da ogni senatore,
                   il tipo di caffè (decaffeinato o normale),
                   e se ci mette lo zucchero.">
     <CAPTION>Tazze di caffè consumate da ogni 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">T. Sexton</TD>  
         <TD headers="header2">10</TD>
         <TD headers="header3">Espresso</TD>
         <TD headers="header4">No</TD>  
     <TR>  
         <TD headers="header1">J. Dinnen</TD> 
         <TD headers="header2">5</TD>
         <TD headers="header3">Decaffeinato</TD>
        <TD headers="header4">si</TD>
  </TABLE>

Fine esempio.

Un sintetizzatore vocale potrebbe restituire queste tabelle come segue:

  Caption: Tazze di caffè consumate da ogni senatore
  Summary: Questa tabella conta il numero di tazze di caffè
           consumate da ogni senatore, il tipo di caffè
          (decaffeinato o normale), e se preso con zucchero.
  Nome: T. Sexton, Tazze: 10, Tipo: Espresso, Zucchero: No
  Nome: J. Dinnen, Tazze: 5, Tipo: Decaffeinato, Zucchero: Si

Un user agent visuale potrebbe restituire questa tabella come segue:

Illustration of coffee table rendering [Descrizione della tabella del caffè]

Il prossimo esempio associa le celle di intestazione (TH) a celle di dati (TD), ma questa volta usando l'attributo "scope" al posto degli "headers". "Scope" deve avere uno dei seguenti valori: "row", "col", "rowgroup", o "colgroup". Scope specifica il set di celle di dati che devono essere associate alla corrente intestazione della cella. Questo metodo è particolarmente utile per le tabelle semplici. Dovrebbe essere notato che la rappresentazione parlata di questa tabella sarà identica a quella dell'esempio precedente. La scelta tra gli attributi "headers" e "scope" dipende dalla complessità della tabella. Non influenza l'output, a condizione che i rapporti fra intestazioni e celle di dati siano definite nel codice.

Esempio.

   <TABLE border="1" 
          summary="Questa tabella contiene ...">  
      <CAPTION>Tazze di caffè consumate da ogni senatore</CAPTION>
      <TR>  
           <TH scope="col">Nome</TH>
           <TH scope="col">Tazze</TH>
           <TH scope="col" abbr="Type">Tipo di caffè</TH>  
           <TH scope="col">Zucchero?</TH>
     <TR>  
           <TD>T. Sexton</TD>  <TD>10</TD>
           <TD>Espresso</TD>   <TD>No</TD>
     <TR>  
           <TD>J. Dinnen</TD>  <TD>5</TD>
           <TD>Decaf</TD>       <TD>Si</TD>
  </TABLE>

Fine esempio.

Il seguente esempio mostra come creare categorie in una tabella usando l'attributo "axis".

Esempio.

   <TABLE border="1">
     <CAPTION>Travel Expense Report</CAPTION>
     <TR>  
          <TH></TH>  
          <TH id="header2" axis="expenses">Meals
          <TH id="header3" axis="expenses">Hotels
          <TH id="header4" axis="expenses">Transport
          <TD>subtotals</TD>    
     <TR>  
          <TH id="header6" axis="location">San Jose
          <TH> <TH> <TH> <TD> 
     <TR>  
         <TD id="header7" axis="date">25-Aug-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="date">26-Aug-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>subtotals 
         <TD>65.02
         <TD>224.00
         <TD>90.00
         <TD>379.02
     <TR>   
         <TH id="header10" axis="location">Seattle
         <TH> <TH> <TH> <TD>
     <TR>  
         <TD id="header11" axis="date">27-Aug-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="date">28-Aug-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>subtotals
         <TD>131.25
         <TD>218.00
         <TD>72.00
         <TD>421.25
     <TR>   
         <TH>Totals
         <TD>196.27
         <TD>442.00
         <TD>162.00
         <TD>800.27
   </TABLE>

Fine esempio.

Questa tabella presenta le spese di viaggio in due luoghi: San Jose e Seattle, divise per date e categorie (pasti, hotels, e trasporto). La seguente immagine mostra come la restituisce un user agent visuale. [Descrizione tabella di viaggio]

Come viene resa da un user agent visuale la Tabella del Rapporto di spese di viaggio

5.2 Tabelle di layout

Punti di controllo:

Gli autori dovrebbero utilizzare fogli di stile per impaginazione e posizionamento. Comunque, quando è necessario usare una tabella per il layout, la tabella deve essere linearizzabile con un ordine leggibile. Quando una tabella è linearizzata, il contenuto delle celle diventa una serie di paragrafi uno dopo l'altro. Le celle dovrebbero avere senso quando vengono lette nell'ordine di riga e dovrebbero includere elementi strutturali (che creano paragrafi, intestazioni, liste, etc.) così che la pagina abbia un senso dopo la linearizzazione.

Anche quando si usano le tabelle per creare l'impaginazione, non usare marcatori strutturali per creare una formattazione visuale. Per esempio, l'elemento TH (table header), di solito è visualizzato centrato e grassetto. Se una cella non è realmente un'intestazione per una fila o una colonna dei dati, usare fogli di stile o attributi per la formattazione degli elementi.

5.3 Tabelle lineari

Punti di controllo:

Le tabelle usate per l'impaginazione danno problemi ai vecchi screen reader che non interpretano la sorgente HTML o ai browser che non permettono la navigazione di celle di tabelle individuali. Questi screen readers leggeranno le frasi nella stessa riga da diverse colonne come se fossero un'unica frase.

Per esempio, se una tabella è resa a schermo come segue:

There is a 30% chance of               Classes at the University of Wisconsin 
rain showers this morning, but they    will resume on September 3rd. 
should stop before the weekend.

Potrebbe essere resa da uno screen reader come:

There is a 30% chance of Classes at the University of Wisconsin
rain showers this morning, but they will resume on September 3rd. 
should stop before the weekend.

Di solito è semplice linearizzare una tabella usata per l'impaginazione - semplicemente togliendo i tag di table dalla tabella. Ci sono molti tool che fanno questo, e sta diventando più comune il fatto che screen reader e browser rendano lineari le tabelle.

Comunque, linearizzare tabelle di dati richiede una diversa strategia. Poichè le celle di dati contano sulle informazioni fornite dalle celle di intestazione e dalle celle circostanti, le informazioni di rapporto che visivamente sono comprensibili devono essere tradotte nelle tabelle lineari.

Per esempio, specificare l'ordine del layout delle colonne. Il senso di scrittura del linguaggio naturale può interessare la disposizione delle colonne e così l'ordine di una tabella linearizzata. L'attributo "dir" specifica l'ordine del layout delle colonne (es, dir="rtl" specifica l'impaginazione da destra a sinistra).

Questo marcatore aiuterà anche i browser a linearizzare le tabelle ("serializzazione" della tabella). Una versione linearizzata row-based (cioè basata sulle linee) può essere creata leggendo l'intestazione della linea e facendo poi precedere ad ogni cella l'intestazione della colonna a cui appartiene. Oppure, la linearizzazione potrebbe essere column-based (cioè basata sulle colonne). I futuri browser e tecnologie assistive saranno in grado di tradurre automaticamente le tabelle in sequenze lineari o navigare tra le celle di una tabella se i dati sono etichettati appropriatamente. Il Gruppo di lavoro di Valutazione e Riparazione del WAI, segue il progresso degli strumenti e sta sviluppando un tool che permetterà agli utenti di linearizzare o navigare le tabelle cella per cella. Riferimento a [WAI-ER].

Test veloce! Per capire meglio come uno screen reader legge una tabella, fate scorrere un pezzo di carta lungo la pagina e leggete la vostra tabella riga per riga.

5.4 Problemi di retrocompatibilità per le tabelle

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

6 Links

6.1 Link testuali

Punti di controllo:

Il testo non dovrebbe mai essere generico; non usare "clicca qui". Non solo questa frase è device-dependent (implica l'utilizzo di un dispositivo), non dice neanche niente riguardo che cosa verrà trovato se il collegamento viene seguito. Invece di "clicca qui", i testi dei link dovrebero indicare la natura della destinazione del link, come in "molte altre informazioni su i leoni marini" o "versione solo testo di questa pagina". Si noti che in quest'ultimo caso (e per altri documenti specifici, in altri formati o lingue), sarebbe meglio che gli autori usassero le negoziazioni di contenuto (ossia fornire informazioni cosicché gli utenti ricevanoi documenti in base alle loro preferenze; N.D.T.), così gli utenti che preferiscono la versione di testo la riceveranno automaticamente.

Oltre ad usare un testo chiaro per i link, gli sviluppatori possono specificare un valore per l'attributo "title" che descriva chiaramente e accuratamente la destinazione del link.

Se più di un link sulla stessa pagina hanno lo stesso testo, dovrebbero puntare tutti alla stessa risorsa. Tale consistenza contribuirà a migliorare il design e l'accessibilità.

Se due o più collegamenti hanno destinazioni diverse ma hanno lo stesso testo, bisogna renderli distinguibili specificando un valore differente per l'attributo "title" di ogni elemento A.

Gli "utenti uditivi" - persone con cecità, che hanno seri prolemi di vista, o che usano dispositivi con display piccolo o assente - non sono capaci di esplorare rapidamente le pagine in modo visuale. Per ottenere una panoramica della pagina o per trovare rapidamente un collegamento, questi utenti spesso dovranno passare da un collegamento al seguente o rivedere una lista dei collegamenti disponibili nella pagina.

Quindi, per una serie di link correlati, includere informazioni introduttive nel primo collegamento e poi informazioni identificative nei link che seguono, in modo da renderli distinguibili. Questo fornirà informazioni contestuali agli utenti che li leggono in sequenza.

Esempio.

  <A href="my-doc.html">My document is available in HTML</A>,
  <A href="my-doc.pdf" title="My document in PDF">PDF</A>,
  <A href="my-doc.txt" title="My document in text">plain text</A>

Fine esempio.

6.1.1 Testo per immagini usate come links

Punti di controllo:

Quando un immagine è usata come link, specificare un testo alternativo per l'immagine.

Esempio.

  <A href="routes.html">
     <IMG src="topo.html" 
          alt="Current routes at Boulders Climbing Gym">
  </A>

Fine esempio.

O, se si usa anche un testo per il link, usare uno spazio come valore dell'attributo "alt" dell'elemento IMG. Notare che questo testo sarà visualizzato accanto all'immagine.

Esempio.

  <A href="routes.html">
     <IMG src="topo.html" alt=" ">
        Current routes at Boulders Climbing Gym
  </A>

Fine esempio.

6.2 Raggruppamento ed esclusione di link

Punti di controllo:

Quando i link sono raggruppati in un set logico (per esempio, in una barra di navigazione che appare in tutte le pagine in un sito), dovrebbero essere marcati come un'unità. Le barre di navigazione sono solitamente le prime cose che si trovano nella pagina. Ci sono svariati modi per permettere a tutti gli utenti di escludere gruppi di link (come fanno normalente i vedenti):

In futuro, gli user agents potranno permettere agli utenti di saltare elementi attraverso la barra di navigazione.

Esempio.

In questo esempio, l'elemento MAP raggruppa una serie di collegamenti, l'attributo "title" lo identifica come barra di navigazione, e un collegamento all'inizio del gruppo si collega all'ancoraggio dopo il gruppo. Si noti anche che i collegamenti sono separati da una porzione di testo non linkata formata da caratteri stampabili (circondati da spazi).

   <BODY>     
     <MAP title="Navigation Bar">    
       <P>
       [<A href="#how">Bypass navigation bar</A>]
       [<A href="home.htm#l">Home</A>]
       [<A href="search.html">Search</A>]
       [<A href="new.html">New and highlighted</A>]
       [<A href="sitemap.html">Site map</A>]
       </P>
     </MAP>     
     <H1><A name="how">How to use our site</A></H1>
   <!-- content of page -->     
   </BODY>

Fine esempio.

6.3 Accesso da tastiera

Punti di controllo:

L'accesso da tastiera ad elementi attivi di una pagina è importante per molti utenti che non possono usare un dispositivo di puntamento. Gli user agents possono includere caratteristiche che permettano agli utenti di associare ad un tasto o a una combinazione di tasti, una determinata azione. HTML 4.01 permette agli sviluppatori di contenuto di specificare nel documento scorciatoie da tastiera attraverso l'attributo "accesskey".

Esempio.

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

   <A accesskey="C" href="doc.html" hreflang="en"
      title="XYZ company home page">
         XYZ company home page</A>

Fine esempio.

Nota: Fino a che gli user agents non forniranno una panoramica delle scorciatoie attive, fornire informazioni a riguardo.

6.4 Ancore e destinazioni

Punti di controllo:

7 Immagini e mappe immagine

La seguente sezione riguarda l'accessibilità delle immagini (incluso le semplici animazioni come le GIF animate) e delle mappe immagine.

Per informazioni sulla rappresentazione grafica di espressioni matematiche, riferirsi alla sezione usare markup testuale e fogli di stile al posto delle immagini.

7.1 Brevi testi descrittivi delle immagini ("alt-text")

Punti di controllo:

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

Esempio.

   <IMG src="magnifyingglass.gif" alt="Cerca">

Fine esempio.

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

Esempio.

   <OBJECT data="magnifyingglass.gif" type="image/gif">
      Search 
   </OBJECT>

Fine esempio.

7.2 Lunghe descrizioni delle immagini

Punti di controllo:

Quando un breve testo equivalente non è sufficiente per descrivere la funzione o il ruolo di un'immagine, fornire informazioni aggiuntive in un altro file collegandolo attraverso l'attributo "longdesc":

Esempio.

   <IMG src="97sales.gif" alt="Sales for 1997" 
        longdesc="sales97.html">

Nel file sales97.html:

A chart showing how sales in 1997 progressed. The chart
is a bar-chart showing percentage increases in sales
by month. Sales in January were up 10% from December 1996,
sales in February dropped 3%, ..

Fine esempio.

Per gli user agents che non supportano il "longdesc", fornire una descrizione del link accanto al grafico:

Esempio.

   <IMG src="97sales.gif" alt="Vendite per il 1997" longdesc="sales.html">
   <A href="sales.html" title="Descrizione delle vendite del 1997">[D]</A>

Fine esempio.

Quando si usa OBJECT, specificare un testo equivalente più lungo nel contenuto dell'elemento stesso:

Esempio.

   <OBJECT data="97sales.gif" type="image/gif">
          Sales in 1997 were down subsequent to our
          <A href="anticipated.html">anticipated 
          purchase</A> ...
   </OBJECT>

Fine esempio.

Nota che il contenuto di OBJECT, a differenza dal testo dell' "alt", può includere il markup. Quindi, gli sviluppatori di contenuto possono fornire un collegamento a informazioni supplementari all'elemento OBJECT:

Esempio.

   <OBJECT data="97sales.gif" type="image/gif">
          Chart of our Sales in 1997.
          A <A href="desc.html">textual description</A> is available. 
  </OBJECT>

Fine esempio.

7.2.1 D-link invisibili

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

Un d-link invisibile è un'immagine piccola o trasparente (1-pixel) la quale ha come valore dell'attributo "alt" "D-link" o "D" ed è una parte del contenuto di un elemento A. Come altri d-link, si riferisce al testo equivalente dell'immagine associata. Come gli altri link, gli utenti possono saltarlo. I d-link invisibili forniscono una soluzione (temporanea) per i designers che desiderano evitare d-link per ragioni stilistiche.

7.3 Ascii Art

Punti di controllo:

Evitare le ASCII art (illustrazioni con caratteri) ed usare preferibilmente immagini reali poichè è più semplice fornire testo equivalente per le immagini. Comunque, se l'ASCII art deve essere usata fornire un link per saltarla, come segue.

Esempio.

<P>
<a href="#post-art">salta l'arte ASCII</a>
<!-- ASCII art goes here -->
<a name="post-art">titolo per l'arte ASCII</a>

Fine esempio.

L'ASCII art può anche essere marcata come segue [saltare oltre la figura ASCII o consultare una descrizione]:

Esempio.


 
  %   __ __ __ __ __ __ __ __ __ __ __ __ __ __   
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 immagini ascii art è usare un elemento ABBR con "title".

Esempio.

<P><ABBR title="sorriso in ASCII art">:-)</ABBR>

Fine esempio.

Se l'immagine fatta con i caratteri ASCII è complessa, assicurarsi che il testo equivalente sia adeguato a descriverla.

Un altro modo per sostituire l'ASCII art è usare al suo posto un linguaggio umano. Per esempio, <wink> potrebbe sostituire il sorriso con l'occhiolino: ;-). O, la parola "quindi" può rimpiazzare delle frecce fatte con trattini e segni più grandi come (e.g., -->), e la parola "great" per la non comune abbreviazione "gr8".

7.4 Mappe immagine

Una mappa immagine è un'immagine che ha "regioni attive". Quando l'utente seleziona una delle regioni, avviene una certa azione - può essere seguito un link, le informazioni possono essere trasmesse ad un server, ecc. Per fare una mappa immagine accessibile, gli sviluppatori di contenuto devono assicurare che ogni azione associata ad una zona della mappa possa essere attivata senza un dispositivo di puntamento.

Le mappe immagine sono create con l'elemento MAP. L'HTML permette due tipi di mappe immagine: client-side (i browser degli utenti processano un URI) e server-side (il server processa le coordinate del click). Per tutte le mappe immagine, gli sviluppatori di contenuti dovrebbero fornire un testo equivalente.

Gli autori dovrebbero creare mappe immagine client-side (con "usemap") piuttosto che server-side (con "ismap") perchè quest'ultime richiedono uno specifico dispositivo di input. Se le mappe immagine server-side devono essere usate (per esempio, perchè la geometria di una regione non può essere rappresentata con valori dell'attributo shape), gli autori dovrebbero fornire le stesse funzionalità o informazioni in un formato alternativo accessibile. Un modo per realizzare questo è fornire un link testuale per ogni regione così che ogni collegamento sia navigabile con la tastiera. Se si deve usare una mappa immagine server-side, consultare la sezione su mappe immagine server-side.

7.4.1 Testo equivalente per mappe immagine client-side

Punti di controllo:

Fornire un testo equivalente per mappe immagine poichè trasportano informazioni visive. Come altri collegamenti, il testo del link dovrebber avere senso anche nel momento in cui viene tolto da un contesto. Riferimento alla sezione sul Testo dei Link per informazioni su come scrivere buoni testi per i link. Gli utenti possono anche volere scorciatoie da tastiera per accedere ai link utilizzati più frequentemente. Riferimento alla sezione sull'accesso da tastiera ai collegamenti.

Se AREA è usato per creare la mappa, usare l'attributo "alt":

Esempio.

   <IMG src="welcome.gif" alt="Image map of areas in the library"
        usemap="#map1">
   <MAP name="map1">
     <AREA shape="rect" coords="0,0,30,30"
           href="reference.html" alt="Reference">
     <AREA shape="rect" coords="34,34,100,100"
           href="media.html" alt="Audio visual lab">
   </MAP>

Fine esempio.

Il seguente esempio illustra la stessa idea, ma usa OBJECT invece di IMG per inserire l'immagine per fornire molte più informazioni sull'immagine:

Esempio.

   <OBJECT data="welcome.gif" type="image/gif" usemap="#map1">
       There are several areas in the library including
       the <A href="reference.html">Reference</A> section and the
       <A href="media.html">Audio Visual Lab</A>.
   </OBJECT>
   <MAP name="map1">
     <AREA shape="rect" coords="0,0,30,30"
           href="reference.html" alt="Reference">
     <AREA shape="rect" coords="34,34,100,100"
           href="media.html" alt="Audio visual lab">
   </MAP>

Fine esempio.

7.4.2 Testo dei collegamenti per le mappe immagine client-side

Punti di controllo:

In aggiunta alla fornitura di testo equivalente, fornire collegamenti testuali ridondanti. Se l'elemento A è usato al posto di AREA, lo sviluppatore può descrivere le regioni attive e fornire collegamenti ridondanti nello stesso tempo:

Esempio.

   <OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
   <MAP name="map1">
     <P>Navigate the site.
     [<A href="guide.html" shape="rect"
        coords="0,0,118,28">Access Guide</A>]
     [<A href="shortcut.html" shape="rect"
        coords="118,0,184,28">Go</A>]
     [<A href="search.html" shape="circle"
        coords="184.200,60">Search</A>]
     [<A href="top10.html" shape="poly"
        coords="276,0,276,28,100,200,50,50,276,0">
          Top Ten</A>]
   </MAP>
   </OBJECT>

Fine esempio.

Notare che nel precedente esempio, l'elemento MAP è il contenuto dell'elemento OBJECT quindi i collegamenti alternativi saranno mostrati solo se non c'è la mappa immagine (navbar1.gif).

Notare anche che i collegamenti sono stati separati da parentesi quadre ([]). Questo viene fatto per prevenire la lettura da parte dei vecchi screen readers di svariati collegamenti adiacenti come un singolo link e per aiutare gli utenti a distinguere i vari link visualmente.

Gli sviluppatori dovrebbero assicurarsi di includere caratteri stampabili (come parentesi o barra verticale (|)) circondati da spazi tra collegamenti testuali adiacenti. Il problema non si pone se sono state utilizzate delle immagini come collegamenti; il testo nell'alt non sarà letto come un singolo link grazie alla capacità dei browser grafici di sostituire le immagini con il testo alternativo quando esse non sono caricate. Per ulteriori informazioni riferirsi alla sezione Raggruppamento ed esclusione dei link.

7.4.3 Mappe immagine client-side contro mappe immagine server-side

Punti di controllo:

7.4.4 Mappe immagine lato server

Punti di controllo:

Quando si deve usare una mappa immagine lato server, gli sviluppatori dovrebbero fornire una lista alternativa di scelte. Ci sono tre tecniche:

Mappe immagine lato server e lato client potrebbero essere usate come bottoni invio nei Forms. Per altre informazioni fare riferimento alla sezione Bottoni grafici.

7.5 Colori e immagini

Punti di controllo:

7.6 Immagini animate

Punti di controllo:

8 Applets e altri oggetti programmati

Anche se gli applets possono essere inclusi in un documento sia con l'elemento APPLET che con OBJECT, OBJECT è il metodo preferito.

8.1 Testo e non-testo equivalente per applets e oggetti programmati

Punti di controllo:

Se è usato OBJECT, fornire un testo equivalente nel contenuto dell'elemento.

Esempio.

  <OBJECT classid="java:Press.class" width="500" height="500">
        As temperature increases, the molecules in the balloon...
  </OBJECT>

Fine esempio.

Un esempio più comlesso mostra i vantaggi del fatto che gli elementi OBJECT possano essere incastonati per fornire una rappresentazione alternativa delle informazioni:

Esempio.

  <OBJECT classid="java:Press.class" width="500" height="500">          
     <OBJECT data="Pressure.mpeg" type="video/mpeg">
        <OBJECT data="Pressure.gif" type="image/gif">
           As temperature increases, the molecules in the balloon...
        </OBJECT>
     </OBJECT>
  </OBJECT>

Fine esempio.

Se si usa APPLET, fornire un testo equivalente con l'attributo "alt" e nel contenuto nell'elemento APPLET. Questo permette di trasformare il contenuto in modo elegante per gli user agents che supportano solo uno di questi due meccanisci ("alt" o testo).

Esempio deprecato.

   <APPLET code="Press.class" width="500" height="500"
           alt="Java applet: how temperature affects pressure">
         As temperature increases, the molecules in the balloon...
   </APPLET>

Fine esempio.

8.2 Applets direttamente accessibili

Punti di controllo:

Se un applet (creato sia con OBJECT o APPLET) richiede l’interazione di un utente che non può essere duplicato in
formato alternativo, rendere l’applet direttamente accessibile .

Se un applet crea un movimento, gli sviluppatori dovrebbero fornire un meccanismo per bloccarlo (per un esempio, riferimento a [TRACE]). Riferirsi anche alla prossima sezione per informazioni per fare presentazioni audio e video accessibili.

Per ulteriori informazioni sullo sviluppo di aplet accessibili, vedere le sezioni [JAVAACCESS] e [IBMJAVA]. Queste società stanno sviluppando un API accessibile e rendendo accessibili le classi di Java Swing.

Punti di controllo relativi:

9 Audio e video

9.1 Informazioni audio

9.2 Testi equivalenti per multimedia

Punti di controllo:

Quando necessario, dovrebbe essere fornito un testo equivalente alle informazioni visuali, per rendere la pagina comprensibile. Ad esempio, quando l’animazione è parte integrante di un rapporto meteo (rapporto testuale) non è necessario utilizzare una descrizione troppo dettagliata in quanto il testo del rapporto è già sufficientemente esplicativo. Se invece è usata in un ambiente pedagogico, in cui gli studenti stanno imparando la formazione delle nuvole in relazione con la massa della terra, l’animazione deve essere descritta in modo esauriente per le persone che non possono vederla ma che, comunque, hanno il diritto e il desiderio di comprendere la lezione.

9.3 Incorporare oggetti multimediali

Anche altri oggetti, come quelli che richiedono un plug-in, dovrebbero utilizzare l'elemento OBJECT. Comunque, per una retro compatibilità con i browsers Netscape, usare l'elemento EMBED nell'elemento OBJECT come segue:

Esempio deprecato.

  <OBJECT classid="clsid:A12BCD3F-GH4I-56JK-xyz"
  codebase="http://example.com/content.cab" width=100 height=80> 
  <PARAM name="Movie" value="moviename.swf"> 
      <EMBED src="moviename.swf" width=100 height=80 
      pluginspage="http://example.com/shockwave/download/"> 
      </EMBED>

      <NOEMBED> 
          <IMG alt="Still from Movie"
                  src="moviename.gif" width=100 height=80> 
      </NOEMBED> 

  </OBJECT>

Fine esempio.

Per ulteriori informazioni riferirsi a [MACROMEDIA].

10 Frame

Per gli utenti vedenti, le frame possono organizzare una pagina in diverse zone. Per gli utenti non vedenti, le relazioni tra i contenuti delle frame (per esempio una frame che ha una tabella di contenuti, una tabella che contiene un'altra tabella) devono essere comunicate attraverso altri mezzi.

Le frame, per come sono implementate al momento (con gli elementi FRAMESET, FRAME, e IFRAME), sono problematiche per svariati motivi:

Nella sezione seguente si parla di come rendere le frames più accessibili. Forniamo inoltre un'alternativa alle frame usando HTML 4.01 e CSS.

10.1 Fornire un titolo alle frames

Punti di controllo:

Esempio.

Usare l'attributo "title" per nominare le frames.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<HTML>
<HEAD>
<TITLE>Un semplice documento con un frameset</TITLE>
</HEAD>
<FRAMESET cols="10%, 90%"
          title="La nosra libreria di documenti elettronici">  
    <FRAME src="nav.html" title="Barra di navigazione">  
    <FRAME src="doc.html" title="Documenti">
    <NOFRAMES>
       <A href="lib.html" title="Link libreria">   
             Seleziona per andare alla libreria elettronica</A>  
    </NOFRAMES>
</FRAMESET>

Fine esempio.

10.2 Descrizione delle relazioni tra frames

Punti di controllo:

Esempio.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<HTML>
  <HEAD>
    <TITLE>Le novità di oggi</TITLE>
  </HEAD>

  <FRAMESET cols="10%,*,10%">

  <FRAMESET rows="20%,*">
    <FRAME src="promo.html" name="promo" title="promozione">
    <FRAME src="sitenavbar.html" name="barra di navigazione" 
       title="Salta la barra di navigazione" longdesc="frameset-desc.html#navbar">
  </FRAMESET>

  <FRAME src="story.html" name="story" title="seleziona storia - contenuto principale" 
     longdesc="frameset-desc.html#story">

  <FRAMESET rows="*,20%">
    <FRAME src="headlines.html" name="index" title="Indice di altre
      intestazioni nazionali" longdesc="frameset-desc.html#headlines">
    <FRAME src="ad.html" name="adspace" title="Pubblicità">
  </FRAMESET>

  <NOFRAMES>
    <p><a href="noframes.html">Versione no frames</a></p>
    <p><a href="frameset-desc.html">Descrizione delle frames.</a></p>
  </NOFRAMES>

  </FRAMESET>
</HTML>

frameset-desc.html potrebbe dire qualcosa come:

#Navbar - questa frame fornisce collegamenti alle più importanti
          sezioni del sito: World News, National News,
          Local News, Technological News,
          e Entertainment News.

#Story  - questa frame mostra la storia attualmente selezionata.

#Index  - questa frame fornisce collegamenti all'intestazione della 
		  storia del giorno con questa sezione.

Fine esempio.

Notare che se il contenuto di una frame cambia, il testo equivalente non potrà essere applicato. I collegamenti alle descrizioni di una frame dovrebbero essere forniti insieme ad altri contenuti alternativi nell'elemento NOFRAMES di un FRAMESET.

10.3 Scrivere per browser che non supportano le FRAME

Punti di controllo:

Esempio.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<HTML>
<HEAD>
<TITLE>Questo è top.html</TITLE>
</HEAD>
<FRAMESET cols="50%, 50%" title="Il nostro grande documento">
    <FRAME src="main.html" title="Where the content is displayed">
    <FRAME src="table_of_contents.html" title="Table of Contents">
    <NOFRAMES>
        <A href="table_of_contents.html">Tabella dei contenuti.</A>
     <!-- altri collegamenti navigabili che sono adatti in main.html
          sono adatti anche qui. -->
    </NOFRAMES>
</FRAMESET>
</HTML>

e il browser non visualizza le frames, l'utente avrà accesso attravero un link ad una versione senza frame con le stesse informazioni.

Fine esempio.

10.4 Sorgente delle frame

Punti di controllo:

Gli sviluppatori devono fornire testo equivalente alle frames così che i loro contenuti e le relazioni tra di esse abbiano senso. Nota che come il contenuto di una frame cambia, deve cambiare ogni descrizione. Questo non è possibile se un'immagine viene inserita direttamente in un frame. Gli sviluppatori dovrebbero sempre usare come sorgente dei frame ("src") un file HTML. Le immagini possono essere inserite nel file HTML e i loro testi alternativi si evolveranno correttamente.

Esempio.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<HTML>
<HEAD>
<TITLE>Un corretto documento con frameset</TITLE>
</HEAD>
<FRAMESET cols="100%" title="Evolving frameset">
<FRAME name="goodframe" src="apples.html" title="Apples">
</FRAMESET>
</HTML>

   <!-- In apples.html -->
   <P><IMG src="apples.gif" alt="Apples">

Fine esempio.

Il seguente esempio deprecato dovrebbe essere evitato, perché sono inseriti i tag IMG direttamente in una frame:

Esempio deprecato.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<HTML>
<HEAD>
<TITLE>Un documento con frameset fatto male</TITLE>
</HEAD>
<FRAMESET cols="100%" title="Static frameset">
   <FRAME name="badframe"
          src="apples.gif" title="Apples">
</FRAMESET>
</HTML>

Nota che se, per esempio, un collegamento produce l'inserimento di una nuova immagine nel frame:

  <P>Visit a beautiful grove of 
  <A target="badframe" href="oranges.gif" title="Oranges">oranges</A>

il titolo iniziale di una frame ("Apples") non sarà più unito all'attuale contenuto della frame ("Oranges").

Fine esempio.

10.5 Usare FRAME target

Punti di controllo:

Gli sviluppatori dovrebbero evitare di aprire una nuova finestra come target di una frame con target="_blank".

10.6 Alternative alle frame

Uno dei più comuni usi delle frames è dividere la finestra di un browser in due parti: una finestra di navigazione e una finestra di contenuto. Come alternativa alle frames, incoraggiamo a provare il seguente metodo:

  1. Creare un documento per il meccanismo di navigazione (chiamandolo "nav.html"). Usare un documento separato significa che il meccanismo può essere condiviso da più documenti.
  2. Ogni documento che richiede il meccanismo di navigazione, lo include alla fine della pagina con il seguente markup OBJECT (o con qualcosa di simile):

    Esempio.

    <P>
<OBJECT data="nav.html">
Go to the <A href="nav.html">table of contents</A>
</OBJECT>

    Mettere il meccanismo di navigazione alla fine del documento fa sì che quando i fogli di stile non sono disponibili, gli utenti hanno accesso alle informazioni importanti del documento in primo luogo.

  3. Usare fogli di stile per posizionare il meccanismo di navigazione dove si desidera. Per esempio, la seguente regola CSS mette la barra di navigazione alla sinistra della pagina e le fa occupare il 25% dello spazio orizzontale disponibile: 
       OBJECT { float: left; width: 25% }

    La seguente regola CSS mette il meccanismo di navigazione nell'angolo in fondo a sinistra della pagina e lo mantiene fermo anche se l'utente prosegue la lettura della pagina attraverso lo scroll:

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

Nota. I meccanismi di navigazione o altri contenuti possono essere inseriti in un documento per mezzo di un inclusione lato server.

10.6.1 Misurare le frame con unità relative

Punti di controllo:

Notare che nell'esempio precedente, le grandezze delle frame sono specificate in percentuale. Quando un utente ridimensiona la finestra, le frames si aggiusteranno e rimarranno leggibili.

11 Form

Questa sezione discute l'accessibilità delle form e controlli dei form che si possono mettere in un elemento FORM.

11.1 Accesso ai form tramite tastiera

Punti di controllo:

Nel prossimo esempio, specifichiamo un'ordine di tabbing tra elementi (in ordine, "field2", "field1", "submit") con "tabindex":

Esempio.

   <FORM action="submit" method="post">
   <P>
   <INPUT tabindex="2" type="text" name="field1">
   <INPUT tabindex="1" type="text" name="field2">
   <INPUT tabindex="3" type="submit" name="submit">
   </FORM>

Fine esempio.

Questo esempio assegna "U" come chiave di accesso (attraverso "accesskey"). Digitando "U" si dà il fuoco alla label (etichetta), che a rotazione passa il fuoco all'input, così che l'utente possa inserire il testo.

Esempio.

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

Fine esempio.

11.2 Raggruppamento di controlli

Punti di controllo:

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

Esempio.

<FORM action="http://example.com/adduser" method="post">
   <FIELDSET>
   <LEGEND>Personal information</LEGEND>
   <LABEL for="firstname">First name: </LABEL>
   <INPUT type="text" id="firstname" tabindex="1">
   <LABEL for="lastname">Last name: </LABEL>
   <INPUT type="text" id="lastname" tabindex="2">
   ...more personal information...
   </FIELDSET>
   <FIELDSET>
   <LEGEND>Medical History</LEGEND>
   ...medical history information...
   </FIELDSET>
</FORM>

Fine esempio.

11.2.1 Raggrupamento delle opzioni dei menu

Gli sviluppatori dovrebbero raggruppare informazioni dove naturale e appropriato. Per lunghe liste di opzioni selezionabile in un menu, gli sviluppatori dovrebbero raggruppare elementi SELECT (definiti da OPTION) in ordine gerarchico usando l'elemento OPTGROUP. Specificare un'etichetta per un gruppo di opzioni con l'attributo label nell'elemento OPTGROUP.

Esempio.

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

Fine esempio.

11.3 Etichettare controlli form

Punti di controllo:

Un esempio di LABEL usato con "for" in HTML 4.01 è dato nella precedente sezione.

Un'etichetta è implicitamente associata con un altro controllo del form attraverso il markup o il posizionamento nella pagina. Il seguente esempio mostra come un'etichetta e controllo form possono essere implicitamente associati dal markup.

Esempio.

   <LABEL for="firstname">First name: 
     <INPUT type="text" id="firstname" tabindex="1">
   </LABEL>

Fine esempio.

11.4 Bottoni grafici

Punti di controllo:

Usare immagini per decorare bottoni permette agli sviluppatori di fare i loro form unici e semplici da capire. Usare un'immagine per un bottone (per esempio, con l'elemento INPUT o BUTTON) non è inaccessibile - se viene fornito un testo equivalente per l'immagine.

Comunque, un bottone di invio creato con INPUT, type="image" crea un tipo di mappa immagine lato server. Quando un punto qualunque del bottone sarà cliccato, le coordinate x e y del click del mouse saranno inviate al server come parte della presentazione del form.

Nella sezione Imaggine e Mappe Immagine, discutiamo perchè le immagini lato server dovrebbero essere evitate, e suggeriamo di utilizzare invece mappe immagine lato client. Nel HTML 4.01, i bottoni grafici possono ora essere mappe immagini lato client. Per preservare le funzionalità fornite dal server, gli autori hanno le seguenti opzioni, come dichiarato nelle Raccomandazioni HTML 4.01 ([HTML4], sezione 17.4.1):

Se il server svolge azioni diverse in base alla locazione cliccata, gli utenti che hanno un browser che non supporta le immagini saranno svantaggiati.
Per questa ragione, gli autori dovrebbero considerare approcci alternativi:

11.5 Tecniche per controlli specifici

Punti di controllo:

Esempio.

Alcune tecnologie assistive richiedono testo iniziale nei form come TEXTAREA per funzionare correttamente.

<FORM action="http://example.com/prog/text-read" method="post">
     <P>
     <TEXTAREA name=yourname rows="20" cols="80">
     Inserire il nome qui.
     </TEXTAREA>
     <INPUT type="submit" value="Send"><INPUT type="reset">
     </P>
</FORM>

Fine esempio.

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

Esempio.

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

Fine esempio.

Riferirsi anche alla sezione su accesso da tastiera poichè questo si applica ai comandi della form.

11.6 Problemi di retrocompatibilità per forms

In alcuni browsers HTML 3.2,

12 Script

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

12.1 Trasformazione elegante degli script

Punti di controllo:

Gli sviluppatori devono assicurare che le pagine siano accessibili con script disabilitati o in browser che non supportano gli script.

12.2 Script che causano tremolio

Punto di controllo in questa sezione:

12.3 Script che causano movimenti e lampeggii

Punto di controllo in questa sezione:

12.4 Script direttamente accessibili

Punto di controllo in questa sezione:

Un gestore di evento è uno script che è invocato quando accade un certo evento (es., il movimento del mouse, la pressione di un tasto, il documento è caricato, ecc.). In HTML 4.01, i gestori degli eventi sono collegati agli elementi attraverso attributi event handler (l'attributo inizia con "on", come in "onkeyup").

Alcuni gestori di eventi, quando invocati, producono effetti puramente decorativi come evidenziare un'immagine o cambiare il colore di un elemento di testo. Altri eventi producono effetti molto più sostanziali, come fare un calcolo, fornire informazioni importanti all'utente, o inviare un form. Per i gestori di eventi che non cambiano soltanto la presentazione di un elemento, gli sviluppatori dovrebbero fare le seguenti cose:

  1. Far innescare l'evento a livello di applicazione piuttosto che a livello di interazione. Nell'HTML 4.01, gli attributi applicabili all'evento livello-applicazione sono "onfocus", "onblur" (l'opposto di "onfocus"), e "onselect". Notare che questi attributi sono stati disegnati per essere indipendenti da dispositivi, ma sono implementati per rispondere a specifici tasti nei browser attuali.
  2. Altrimenti, se si deve utilizzare un attributo device-dependent, creare meccanismi di input alternativi (i.e., specificare due gestori per lo stesso elemento):

    Notare che non c'è un testo equivalente al doppio click ("ondblclick") in HTML 4.01.

  3. Non scrivere gestori di evento che si basino sulle coordinate del mouse poiché questo impedisce l'input device-independent.

12.5 Presentazione alternativa degli script

Punti di controllo:

L'unico modo per fare questo è utilizzare l'elemento NOSCRIPT. Il contenuto di questo elemento è reso quando gli scripts non sono permessi.

Esempio.

<SCRIPT type="text/tcl">
 ...some Tcl script to show a billboard of sports scores...  
</SCRIPT>
<NOSCRIPT>     
   <P>Results from yesterday's games:</P> 
   <DL>
      <DT>Bulls 91,  Sonics 80.
      <DD><A href="bullsonic.html">Bulls vs. Sonics game highlights</A> 
      ...more scores...  
   </DL>
</NOSCRIPT>

Fine esempio.

12.6 Aggiornamento delle pagine e nuove finestre

Punti di controllo:

13 Indice degli elementi e attributi HTML

Punto di controllo in questa sezione:

Elementi

Versione lineare dell'indice degli elementi HTML 4.01.

Questo indice elenca tutti gli elementi in HTML 4.01. La prima colonna di questa tabella linka alle definizioni dell'elemento nelle specifiche HTML 4.01 ([HTML4]). Gli elementi che sono deprecati in HTML 4.01 sono seguiti da un asterisco(*). Gli elementi che sono obsoleti in HTML 4.01 o non esistono nelle specifiche W3C dell' HTML (2.0, 3.2, 4.01) non appaiono in queta tabella

La seconda colonna indica altre specifiche W3C dell' HTML che includono ciascun elemento. La terza colonna indica il ruolo dell'elemeneto.

L'ultima colonna elenca le sezioni del corrente documento in cui si parla dell'elemento citato. "N/A" significa che l'elemento non è discusso in questo documento.

Nome dell'elemento Definito anche in Ruolo Tecniche
A 2.0, 3.2 Strutturale N/A
ABBR   Strutturale N/A
ACRONYM   Strutturale N/A
ADDRESS 2.0, 3.2 Metadata N/A
APPLET* 3.2 Replaced N/A
AREA 3.2 Strutturale N/A
B 2.0, 3.2 Presentazione N/A
BASE 2.0, 3.2 Processuale N/A
BASEFONT* 3.2 Presentazione N/A
BDO   Processuale N/A
BIG 3.2 Presentazione N/A
BLOCKQUOTE 2.0, 3.2 Strutturale N/A
BODY 2.0, 3.2 Strutturale N/A
BR 2.0, 3.2 Presentazione N/A
BUTTON   Strutturale N/A
CAPTION 3.2 Strutturale N/A
CENTER* 3.2 Presentazione N/A
CITE 2.0, 3.2 Strutturale N/A
CODE 2.0, 3.2 Strutturale N/A
COL   Strutturale N/A
COLGROUP   Strutturale N/A
DD 2.0, 3.2 Strutturale N/A
DEL   Metadata N/A
DFN 3.2 Strutturale N/A
DIR* 2.0, 3.2 Strutturale N/A
DIV 3.2 Strutturale N/A
DL 2.0, 3.2 Strutturale N/A
DT 2.0, 3.2 Strutturale N/A
EM 2.0, 3.2 Strutturale N/A
FIELDSET   Strutturale N/A
FONT* 3.2 Presentazione N/A
FORM 2.0, 3.2 Strutturale N/A
FRAME   Replaced N/A
FRAMESET   Presentazione N/A
H1 2.0, 3.2 Strutturale N/A
HEAD 2.0, 3.2 Strutturale N/A
HR 2.0, 3.2 Presentazione N/A
HTML 2.0, 3.2 Strutturale N/A
I 2.0, 3.2 Presentazione N/A
IFRAME   Replaced N/A
IMG 2.0, 3.2 Replaced N/A
INPUT 2.0, 3.2 Strutturale N/A
INS   Metadata N/A
ISINDEX* 2.0, 3.2 Strutturale N/A
KBD 2.0, 3.2 Strutturale N/A
LABEL   Strutturale N/A
LEGEND   Strutturale N/A
LI 2.0, 3.2 Strutturale N/A
LINK 2.0, 3.2 Metadata N/A
MAP 3.2 Strutturale N/A
MENU* 2.0, 3.2 Strutturale N/A
META 2.0, 3.2 Metadata N/A
NOFRAMES   Alternative N/A
NOSCRIPT   Alternative N/A
OBJECT   Replaced N/A
OL 2.0, 3.2 Strutturale N/A
OPTGROUP   Strutturale N/A
OPTION 2.0, 3.2 Strutturale N/A
P 2.0, 3.2 Strutturale N/A
PARAM 3.2 Processuale N/A
PRE 2.0, 3.2 Presentazione N/A
Q   Strutturale N/A
S*   Presentazione N/A
SAMP 2.0, 3.2 Strutturale N/A
SCRIPT 3.2 (DTD) Processuale N/A
SELECT 2.0, 3.2 Strutturale N/A
SMALL 3.2 Presentazione N/A
SPAN   Strutturale N/A
STRIKE* 3.2 Presentazione N/A
STRONG 2.0, 3.2 Strutturale N/A
STYLE 3.2 (DTD) Processuale N/A
SUB 3.2 Presentazione N/A
SUP 3.2 Presentazione N/A
TABLE 3.2 Strutturale N/A
TBODY   Strutturale N/A
TD 3.2 Strutturale N/A
TEXTAREA 2.0, 3.2 Strutturale N/A
TFOOT   Strutturale N/A
TH 3.2 Strutturale N/A
THEAD   Strutturale N/A
TITLE 2.0, 3.2 Metadata N/A
TR 3.2 Strutturale N/A
TT 2.0, 3.2 Presentazione N/A
U* 3.2 Presentazione N/A
UL 2.0, 3.2 Strutturale N/A
VAR 2.0, 3.2 Strutturale N/A

Attributi

Versione lineare dell'indice degli attributi HTML 4.01

Questo indice elenca alcuni attributi di HTML 4.01 che influiscono sull'accessibilità e a quali elementi essi si applicano. La prima colonna di questa tabella linka alle nozioni dell'attributo nelle specifiche HTML 4.01 ([HTML4]). Gli attributi e gli elementi che sono deprecati nell' HTML 4.01 ([HTML4]) sono seguiti da un asterisco (*). GLi attributi e gli elementi che sono obsoleti in HTML 4.01 o non esistono nelle specifiche del W3C di HTML (2.0, 3.2, 4.01) non compaiono in questa tabella. Attributi che si applicano a più elementi dell' HTML 4.01 sono indicati come tali; consultare le specifiche HTML 4.01 per l'esatta lista di elementi con questi attributi.

La seconda colonna indica altre specifiche W3C per HTML che includono ciascun attributo. La terza colonna indica gli elementi che prendono ogni attributo. La quarta colonna indica il ruolo dell'attributo.

L'ultima colonna elenca le sezioni del corrente documento in cui si parla dell'attributo citato. "N/A" significa che l'attributo non è discusso in questo documento.

Nome dell'atributo Si applica all'elemento Ruolo Tecniche
abbr TD, TH Alternativo N/A
accesskey A, AREA, BUTTON, INPUT, LABEL, LEGEND, TEXTAREA User Interface N/A
alt APPLET, AREA, IMG, INPUT Alternativo N/A
axis TD, TH Strutturale N/A
class Più elementi Strutturale N/A
dir Più elementi Processuale N/A
for LABEL Strutturale N/A
headers TD, TH Strutturale N/A
hreflang A, LINK Metadata N/A
id Più elementi Strutturale N/A
label OPTION Alternativo N/A
lang Più elementi Metadata N/A
longdesc IMG, FRAME, IFRAME Alternativo N/A
scope TD, TH Strutturale N/A
style Più elementi Processuale N/A
summary TABLE Alternativo N/A
tabindex A, AREA, BUTTON, INPUT, OBJECT, SELECT, TEXTAREA User Interface N/A
title Più elementi Metadata N/A
usemap IMG, INPUT, OBJECT Processing N/A

Quella che segue è la lista degli attributi HTML 4.01 non direttamente relazionati all'accessibilità. Gli sviluppatori dovrebbero usare fogli di stile invece di attributi di presentazione. Per maggiori dettagli sugli attributi dei gestori degli eventi, fare riferimento alla sezione di device-independent event handlers.

Altri attributi strutturali
start*, value*, rowspan, colspan, span
Altri attributi di presentazione:
align*, valign*, clear*, nowrap*, char, charoff, hspace*, vspace*, cellpadding, cellspacing, compact*, face*, size*, background*, bgcolor*, color*, text*, link*, alink*, vlink*, border, noshade*, rules, size (deprecated according to element), marginheight, marginwidth, frame, frameborder, rows, cols
Altri attributi processuali
ismap, coords, shape
Altri attributi per uso interfacciale
target, scrolling, noresize
Altri atributi metadata:
type, cite, datetime
Attributi per gestione di eventi
onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onload, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselect, onsubmit, onunload

14 Riferimenti

Per l'ultima versione di ogni specifica W3C, prego consultate la lista di W3C Technical Reports at http://www.w3.org/TR.

[CSS1]
"CSS, level 1 Recommendation", B. Bos, H. Wium Lie, eds., 17 December 1996, revised 11 January 1999. This CSS1 Recommendation is http://www.w3.org/TR/1999/REC-CSS1-19990111. The latest version of CSS1 is available at http://www.w3.org/TR/REC-CSS1.
[CSS2]
"CSS, level 2 Recommendation", B. Bos, H. Wium Lie, C. Lilley, and I. Jacobs, eds., 12 May 1998. This CSS2 Recommendation is http://www.w3.org/TR/1998/REC-CSS2-19980512/. The latest version of CSS2 is available at http://www.w3.org/TR/REC-CSS2.
[HTML4]
"HTML 4.01 Recommendation", D. Raggett, A. Le Hors, and I. Jacobs, eds., 24 December 1999. This HTML 4.01 Recommendation is http://www.w3.org/TR/1999/REC-html401-19991224/.
[MATHML]
"Mathematical Markup Language", P. Ion and R. Miner, eds., 7 April 1998, revised 7 July 1999. This MathML 1.0 Recommendation is http://www.w3.org/TR/1998/REC-MathML-19990707/. The latest version of MathML 1.0 is available at http://www.w3.org/TR/REC-MathML.
[WCAG10]
"Web Content Accessibility Guidelines 1.0", W. Chisholm, G. Vanderheiden, and I. Jacobs, eds., 5 May 1999. This WCAG 1.0 Recommendation is http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/.
[WCAG10-CSS-TECHNIQUES]
"CSS Techniques for Web Content Accessibility Guidelines 1.0", W. Chisholm, G. Vanderheiden, and I. Jacobs, eds. The latest version of this document is available at csstec.htm.
[WCAG10-TECHS]
"Techniques for Web Content Accessibility Guidelines 1.0", W. Chisholm, G. Vanderheiden, I. Jacobs, eds. This document explains how to implement the checkpoints defined in "Web Content Accessibility Guidelines 1.0". The latest draft of the techniques is available at http://www.w3.org/TR/WCAG10-TECHS/.

15 Risorse

Nota: Il W3C non garantisce la stabilità di nessuno dei seguenti riferimenti fuori dal suo controllo. Queste referenze sono incluse per convenienza. Il riferimento ad un prodotto non rappresenta l'approvazione dello stesso.

15.1 Altre lineeguida

[IBMJAVA]
IBM Guidelines for Writing Accessible Applications Using 100% Pure Java are available from IBM Special Needs Systems.
[JAVAACCESS]
Information about Java Accessibility and Usability is available from the Trace R&D Center.
[MACROMEDIA]
Flash OBJECT and EMBED Tag Syntax from Macromedia.
[UWSAG]
"The Unified Web Site Accessibility Guidelines", G. Vanderheiden, W. Chisholm, eds. The Unified Web Site Guidelines were compiled by the Trace R & D Center at the University of Wisconsin under funding from the National Institute on Disability and Rehabilitation Research (NIDRR),  U.S. Dept. of Education.

15.2 User agents e altri strumenti

Una lista di Web browsers alternativi (tecnologie assistive e altri user agents designati per l'accessibilità) è disponibile al sito Web del WAI.

[ASTER]
Per informazioni su ASTER, an "Audio System For Technical Readings", consult T. V. Raman's home page.
[HYPERMEDIA]
IBM's techexplorer Hypermedia Browser.

15.3 Risorse d'accessibilità

[TRACE]
The Trace Research & Development Center. Consultare questo sito per una vasta gamma di informazioni sull'accessibilità, incluso uno scrolling Java applet che può essere bloccato dall'utente.
[WAI-ER]
The WAI Evaluation and Repair Working Group

16 Ringraziamenti

Web Content Guidelines Working Group Co-Chairs:
Jason White, University of Melbourne
Gregg Vanderheiden, Trace Research and Development
W3C Team contact:
Wendy Chisholm
Desideriamo ringraziare le seguenti persone per aver contribuito con il loro tempo e con preziosi commenti alla realizzazione di queste lineeguida:
Harvey Bingham, Kevin Carey, Chetz Colwell, Neal Ewers, Geoff Freed, Al Gilman, Larry Goldberg, Jon Gunderson, Eric Hansen, Phill Jenkins, Leonard Kasday, George Kerscher, Marja-Riitta Koivunen, Josh Krieger, Chuck Letourneau, 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, Robert Savellis, Jutta Treviranus, Steve Tyler, and Jaap van Lelieveld

Level Triple-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0

contents   html index