Accessibilità del Web

Web Accessibility Initiative      

Conducendo il Web alla sua piena potenzialità

  1. W3C e WAI
  2. Le "Web Content Accessibility Guidelines" - Linee Guida
  3. L'accessibilità nel futuro

Charles McCathieNevile - charles@w3.org

Questa Presentazione: http://www.w3.org/2000/Talks/1220-roma

(English version, versione di una pagina)

Il Web - migliore per tutti?

Description

The image being described:
http://www.w3.org/Talks/1999/11/4-5-wai-europe/edem.png

A cartoon I made. Somone in a wheelchair is at the bottom of the stairs. At the top of the stairs is a computer, showing a red and a green button and the word "VOTE!". A banner on the image proclaims "democracy"

Picture by Charles McCathieNevile, 1999.

Che cosa è il World Wide Web Consortium?

Che cosa facciamo a W3C?

Circa 65 impiegata da W3C lavorano con circa 50 gruppi

I gruppi sono impiegati dei membri, ed esperti invitati.

Creano e pubblicano gli standard del Web (HTML, XML, ecc)

La lingua ufficiale di W3C è inglese. L' attività di Internationalisation

Il Web Accessibility Initiative a W3C

Come Lavoriamo nel WAI?

Che cose fa WAI?

  1. Si accerta l' accessibilità del lavoro di W3C
  2. Crea la guida di riferimento per accessibilità
  3. Sviluppa gli programme per migliorare l' accessibilità
  4. Raggiungere, condurre la formazione

1. Accertare l'accessibilità del nostro lavoro

WAI lavora con altri gruppi di W3C sull'accessibilità delle loro specifichi

2. Creare Linee Guida per l' Accessibilità

Più Linee Guida

3. Coordinare Programme di Accessibilità

Il gruppo Evaluation and Repair Tools coordina la ricerca e lo sviluppo di programmi per megliorare l' accessibilità.

4. Condurre la promozione e formazione

Education & Outreach Working Group coordina:

Quick Tips - Consigli Brevi

Disponibile in più di 15 Lingue. Italiano:

Fine della prima parte

Vi sono demande in generale sulle W3C and WAI?

Seconda parte - Web Content Accessibility Guidelines

Brevi Cenni Storici

Structure of 1.0 Guidelines

Linee Guida (guidelines), Punti di Controllo (checkpoints), Techniche (techniques)

Esempio de una linea guida

(Questo esempio è della traduzzione Italiana delle linee guida)

Linea guida 2. Non fare affidamento sul solo colore.

Assicurarsi che il testo e la parte grafica siano comprensibili se consultati senza il colore.

Se viene usato il solo colore per veicolare informazione, le persone che non possono distinguere fra alcuni colori [ecc.]

Punti di controllo:

2.1 Assicurarsi che tutta l'informazione veicolata dal colore sia disponibile anche senza, per esempio grazie al contesto o ai marcatori. [Priorità 1]
Tecniche per il punto di controllo 2.1
2.2 Assicurarsi che le combinazioni fra colori dello sfondo e del primo piano forniscano un sufficiente contrasto se visti da qualcuno con deficit percettivi sul colore o se visti su uno schermo in bianco e nero. [Priorità 2 per le immagini, Priorità 3 per il testo].
Tecniche per il punto di controllo 2.2

Utilizzare le Linee Guida

Come riparare errori comuni in una pagina d'esempio.

Sono più cose non mostrato qua. es:

L'esempio Inaccessibile

Questa pagina è inventata, ma illustra accuratament alcune pratiche comuni..

1: Assicurarsi che gli Scripts siano accessibili

Fare altri scripts accessibili:

   <a href="javascript:popout('miles')" onmouseover="highlight()">
         <img src="blood.gif" alt="earn miles - donate blood"></a>

Diventa

   <a href="miles" target="_blank" onfocus="highlight()"
      onmouseover="highlight()"><img src="blood.gif" alt="earn miles - donate blood"></a>

Punti controllo di referimento: WCAG 6.3,6.4, UAAG 9.1

esempio migliorato

2: Fornire alternative equivalenti

Il testo è necessario auitare molti untenti, per che il può essere reso visivamente, o parlato, o come braille...

Fornire testi brevi, funzionalmente equivalenti tramite l'attributo alt:

   <IMG ... alt="Navigation Bar..." >
   <IMG ... alt="Advertising Information" >
   <AREA ... alt="More Articles" >
   <AREA ... alt="Health Topics" >

Fornire contenuti per i applets:

   <applet code="Lake.class">
     <param name="image" content="lh.gif">
     <img src="lh.gif" alt="Latest News">   </applet>

Fornire descripzione per contenuti complessi (tavole, grafici, illustrazione di idee complesse, ecc)

Punti controllo di referimento: WCAG 1.1,6.3 ATAG 3.1, 3.3, 3.5

esempio migliorato

3: Fare (Cornici) frames accessibili

Utilizzare noframes per fornire alternative di navigazioe, e assegnare titoli sigificativi:

   <FRAME ... name="TOC"              title="Table of Contents" >
   <FRAME ... name="Home"              title="Home Page" >
   <NOFRAMES>
      <BODY>
      <P><a href="a"><img src="vnav.gif" border=0 usemap="#map" alt="Navigation Bar..."></a>
      ...
      </BODY>
   </NOFRAMES>

Punto controllo di referimento: WCAG 12.1

esempio migliorato

4: Specificare i colori con attenzione

Specificare tutti i colori per uno schema

Assicurarsi che i colori siano in sufficiente contrasto per poter essere letti.

Ricordarsi di:

  body background=bg.gif

deviene

  body background="bg.gif" bgcolor="#8e0851" text="white" link="3fa" vlink="5f5"

Punto controllo di referimento: WCAG 2.2

esempio migliorato

5: Usare significativi testi per i link

Assicurarsi che i testi di link conservino il loro senso al di fuori del contesto:

  Coping With Asthma's Relentless 
  Attacks:<A HREF="a">Click Here</A>

deviene:

  <A href="a">
    Coping With Asthma's Relentless Attacks</A>

Punto controllo di referimento: WCAG 13.1

esempio migliorato

6: Aggiungare struttura

Per realizzare un modello logico non solo visivo, usare i markup correttamente:

  <B>9 May 1999</B> <IMG src="l1.gif">

deviene:

  <H1>9 May 1999 
      <IMG src="l1.gif" alt="Latest News"></H1>

Punti controllo di referimento: WCAG 3.5, 3.6, ATAG 3.2

esempio migliorato

7: Utilizzare stilo e struttura

Punti controllo di referimento: WCAG 3.1, 3.3, UAAG 4.17

Una version molto più accessibile

Accessible version [confrontate con la versione inaccessibile]

L'aspetto è lo stesso, ma

Fine Seconda Parte

Domande sulle Web Content Accessibility Guidelines?

Parte 3 - L'accessibilità in futuro

Perchè una versione 2.0 di WCAG?

La situazione attuale

Lista dei Requisiti

6 guida nella bozze corrente

  1. Testi equivalenti: contenuti per modailtà diverse
  2. Separazion di contenuto e struttura dalla presentazione
  3. Design per agevolare la comprensione
  4. Design per agevolare browsing and navigazione
  5. Supporto per input diversi (tastiera, voce, ecc)
  6. Compatibilità con browser e tecnologie di aiuto

Summario delle Linee Guida per XML

Simili alle Web Content Accessibility Guidelines

Per creare linguaggi XML accessibili

  1. Ricche alternative per i contenuti
  2. Struttura e significato nei markup
  3. Supporto di presentazione
  4. Independenza dei device
  5. Control per utenti
  6. Usare standard esistenti

Che cosa è SMIL?

Esempio: "car"

Che cosa è SVG?

Un esempio di SVG - Scalabile

Comparizione
Versione tradizionale Versione SVG
a small bit map image... looks like a small vector image

Dopo língrandimento...

La versione tradizionale no è più clara

Traditional bitmap images do not magnify well...

Ma con SVG...

Immagini vettori sono più clari

but vector images are much clearer

Testo in SVG: Struttura

HTML dentro SVG

È possibile usare HTML oun altro linguaggio XML all'interno di un immagino SVG col fine di fornire un testo che abbia tutte le proprietà del linguaggio (link, struttura, ecc).

Alternative in SVG

The whole network

Lo stesso immagino con CSS è anche

(era scritto in inglese...)

Network An example of a computer network based on a hub

Hub A typical 10baseT/100BaseTX network hub

Computer A A common desktop PC

Computer B A common desktop PC

Cable A 10BaseT twisted pair cable

Cable B 10BaseT twisted pair cable

Cable N 10BaseT twisted pair cable

e con XSLT possiamo fare di meglio

Network:

An example of a computer network based on a hub

Con i seguenti componenti

Hub
A typical 10baseT/100BaseTX network hub
Computer A e Computer B
Common desktop PC
Cable A, Cable B e Cable N
10BaseT twisted pair cable

Captions (SMIL 1.0 and 2.0)

<!-- CAPTIONS --> 
  <switch> 
    <textstream src="carcaps.rt"
      region="textregion" system-captions="on"/> 
  </switch>

Informazione nel linguaggion di segni...

Descrizione di video (SMIL 2.0)

<!-- Audio Descriptions -->
 <audio src="card.au" systemAudioDesc="on"
    systemOverdubOrSubtitle="overdub"/>

<!-- Text Descriptions -->
 <textstream src="cardc.rt" systemAudioDesc="on"
    systemCaptions="on"/>

Controllo della lingua (SVG e SMIL)

<!-- AUDIO -->
  <switch> 
    <audio src="carnen.rm" systemLanguage="en"/> 
    <audio src="carnde.rm" systemLanguage="de"/> 
    <audio src="carnen.rm"/> 
  </switch>

Metadata...

Informazione dell'informazione?

Technologia vecchia: PICS

level è 0, health è 9, colour è 27

Funziona con facilità nei browser communi (spesso usata per controllo di accesso alla pornografia...)

Io voglio più di 3 sorrise, ma colore tra 12 a 14??

RDF - (un po') più potenza

Qualcosa

ha
Qualche relazione
a

Qualcosa d'altera

Di più con metadata

Usando RDF con SVG - la tazza è sopra per il tavolo

- c'è un browser di SVG solo nel testo!

Surprise A cartoon of an open-mouthed face

è forse un immagine della idea: sorpresa

Usando metadata per testare, o trovare accessibilità

Summario delle Linee Guida per XML

  1. Ricche alternative per i contenuti
  2. Struttura e significato nei markup
  3. Supporto di presentazione
  4. Independenza dei device
  5. Control per utenti
  6. Usare standard esistenti

Fonti

Grazie!

Presentazione di W3C sono disponibile sul Web: http://www.w3.org/Talks

Domande?

Are there certification schemes for accessible sites?
The WAI icons can be placed on pages. There is no certification of the claim that a page meets the requirements at the moment, but there is a quality assurance activity that might produce one in the future.

Afterthought: It is also possible to use RDF or PICS to provide a claim, in metadata.

Will there be tools for SVG like there are for Flash?
There are a number of tools already available, but SVG is not yet at Recommendation status. I would expect there will be a number of tools for using SVG.
In using style sheets to make SVG (for example) accessible, is this something that will be implemented in browsers, or by people supplying their own stylsheet?
Both. The ability to use a stylesheet is implemented in browsers/plugins. In some cases, a stylsheet might come with a browser, (like a template for an authoring tool) in some cases a user will have to download it, or write it for themselves. It would help if browsers included good stylesheet editing tools.
How large are SVG files?
It depends on the content. But they are comparable to bitmap images with similar amounts of information.
Do you work on mobile phones, and other devices, so that it will be possible to use them for the whole web?
There is a Device Independence activity being started at W3C, which includes the Voice browsing, Mobile, and TV groups already working. Clearly their work and ours are very closely related. We have worked together with those group, and I expect that will continue.
Can a page be tested for accessibility by a program?
Not completely. There are requirements that can only be tested by a person, and different tools test for different requirements, or do it in different ways.
Can RDF be used to describe relationships between pages?
Yes. Because it uses URI references, these can be objects in a page (like the examples I have given in this talk) or can be seperate pages.