Accessibilità del Web
Conducendo il Web alla sua piena potenzialità
W3C e WAI
Le "Web Content Accessibility Guidelines" - Linee Guida
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
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
Coordina le traduzioni delle nostre pubblicazioni
Si accerta che le nostre specifiche siano utilizzabili per tutto il
mondo
Il Web Accessibility Initiative a W3C
Come Lavoriamo nel WAI?
I gruppi di lavoro funzionano sotto il processo di W3C
C'e una proporzione elevata degli esperti invitati
Il lavoro viene svolto tramite:
Liste email (principalmente pubbliche)
Riunioni telefonichi (settimanale o ogni quindici giorni)
Riunioni fisiche (2 o 3 all' anno)
Che cose fa WAI?
Si accerta l' accessibilità del lavoro di W3C
Crea la guida di riferimento per accessibilità
Sviluppa gli programme per migliorare l' accessibilità
Raggiungere, condurre la formazione
1. Accertare l'accessibilità del nostro lavoro
WAI lavora con altri gruppi di W3C sull'accessibilità delle loro
specifichi
HTML 4.0 , CSS2 :
Seperazione del presentazione dell'informazione tra la
struttura
SMIL , SVG
XLink, XHTML, DOM, Schema, ed altri
Megliorare l' accessibilità del XML
2. Creare Linee Guida per l' Accessibilità
Più Linee Guida
User Agent Accessibility
Guidelines
Per creare agenti dell'utente (browsers, plugins, ...) accessibili
Accessibilità della programma
Communicazione con tecnologia di aiuto
"Last Call" Rifinita. "Recommendation" presto nel 2001?
XML Accessibility Guidelines
Come creare i linguaggi di XML che sostengono/permettono
l'accessibilità.
3. Coordinare Programme di Accessibilità
Il gruppo Evaluation and Repair Tools
coordina la ricerca e lo sviluppo di programmi per megliorare l'
accessibilità .
Valutazione dell' accessibilità degli pagine
Struomenti per riparare l'accessibilità delle pagine
Strumenti di conversione
4. Condurre la promozione e formazione
Education & Outreach Working Group coordina:
Materiale Promozionale, opuscoli, filmati...
Matriale semplifacto e di formazione, es. Quick Tips (Brevi
Consigli)
Promozione, presentazione (come questa), ecc
Inseguiono le politiche e leggi
Quick Tips - Consigli Brevi
Disponibile in più di 15 Lingue. Italiano:
Immagini ed animazioni . Utilizzare l'attributo
alt
per descrivere la funzione di ogni
elemento grafico
Immagini cliccabili . Utilizzare l'elemento
map
e descrivere le zone attive
Multimedia . Fornire sottotitoli e trascrizioni per
l'audio, e descrizione di filmati
Link ipertestuali . Utilizzare enunciati che conservino
il loro senso al di fuori del contesto. Per esempio, evitare «cliccare
qui»
Organizzazione . Utilizzare titoli, liste e una
struttura coerente. Utilizzare CSS per l'impaginazione
Figure e diagrammi . Descriverli all'interno della
pagina o utilizzare l'attributo
longdesc
Script, applet e plug-in . Fornire una pagina
alternativa quando tali funzionalitá sono inaccessibili o non
supportati
Cornici (frames). Utilizzare
noframes
e titoli sigificativi
Tabelle . Facilitare la lettura linea per linea.
Riassumere
Verificare il lavoro . Validare. Utilizzare gli
strumenti, la lista di controllo e le linee guida di:
www.w3.org/TR/WCAG
Fine della prima parte
Vi sono demande in generale sulle W3C and WAI?
Seconda parte - Web Content Accessibility Guidelines
Brevi Cenni Storici
Varie linee guida per l'accessibilità sviluppate da organizzazionni ed
esperti
Raggruppate in linee guida da Trace
Centre , quindi sottoposto a W3C
Gruppo di lavoro stato stabilito nel tardo
1997
La bozza pubblicata sviluppata, revista da esperti e organizzazione
Approvate come W3C Recommendation nel Maggio 1999
Structure of 1.0 Guidelines
Linee Guida (guidelines), Punti di Controllo (checkpoints), Techniche
(techniques)
Linee Guida : Principali generali di requisiti di
accesso
Punti di Controllo : requisiti specifici per le
pagine
Ogni punto ha uno dei tre livelli di priorità
La conformità e stabilita sulla base dei livelli di priorità
Tecniche : come sodisfare i punti di controllo (es: in
HTML)
Il documento di tecniche é più spesso aggiornato
Esempio de una linea guida
(Questo esempio è della traduzzione Italiana delle linee guida)
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:
Illustrare con immagini
Convalidare!!
Fare gruppi enormi di links "saltabili"
L'esempio Inaccessibile
Questa pagina è inventata, ma illustra accuratament alcune pratiche
comuni..
1: Assicurarsi che gli Scripts siano accessibili
Il contenuto non deve dipendere da scripts.
S'è possibile, utlizzare markup invece di scripts.
Non impedire l'accesso tramite selezione per browser specifici.
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:
Colori nelle immagini
Il background potrebbe essere uguale al foreground di default
dell'utente
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
Usare CSS per il background, invece di un immagino
Usare testo vero, invece di immagini di testo.
Fornire presentazione per la struttura con CSS invece di
FONT
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
Funziona con qualunque browser
Non necessita di immagini, colori, script, applet
È strutturata
È più simplice da mantenere
Fine Seconda Parte
Domande sulle Web Content Accessibility Guidelines?
Parte 3 - L'accessibilità in futuro
Web Content Accessibility Guidelines 2.0
XML Guidelines
Come vengono usate da SMIL e SVG
Come i metadata e il web semantico aiutano
Perchè una versione 2.0 di WCAG?
Più di formati XML nel Web
Broad range of skills and perspectives required
Definire i requisiti in un modo più astratto
Techniche più specifiche
Diversi utenti sono abituati a diverse aree
La situazione attuale
Bozze interne (ma disponibili al pubblico)
Sviluppos ad uno stadio iniziale
I requisiti sono basati sulla versione 1.0
Comparizione tra versione 1.0 e 2.0 già disponibile
Lista dei Requisiti
6 guida nella bozze corrente
Testi equivalenti: contenuti per modailtà diverse
Separazion di contenuto e struttura dalla presentazione
Design per agevolare la comprensione
Design per agevolare browsing and navigazione
Supporto per input diversi (tastiera, voce, ecc)
Compatibilità con browser e tecnologie di aiuto
Summario delle Linee Guida per XML
Simili alle Web Content Accessibility Guidelines
Per creare linguaggi XML accessibili
Ricche alternative per i contenuti
Struttura e significato nei markup
Supporto di presentazione
Independenza dei device
Control per utenti
Usare standard esistenti
Che cosa è SMIL?
Un linguaggio per presentazione syncronizzati
Descrive synchronizzazione dei parti
Immagini
Suttituli
Video (ecc)
L versione 1.0 è una W3C Recommendation (1998)
La versione 2.0 in "Last Call" - il gruppo ritiene sia terminata
Esempio: "car"
Che cosa è SVG?
Scalable Vector Graphics(Grafichi Vettori Scalabili)
Una linguaggio XML per immagini
È come Flash, ma più accessibile
Utilizza CSS per lo stilo della presentazione
Un esempio di SVG - Scalabile
Comparizione
Versione tradizionale
Versione SVG
Dopo língrandimento...
La versione tradizionale no è più clara
Ma con SVG...
Immagini vettori sono più clari
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
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?
Informazione che un computerpuo utilizzare...
quindi è molto semplice
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
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
Ricche alternative per i contenuti
Struttura e significato nei markup
Supporto di presentazione
Independenza dei device
Control per utenti
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.