Capitolo 3: Accessibilità Web3.3 Web Accessibility Initiative (WAI)

Con Web Accessibility Initiative (Iniziativa per il Web Accessibile in italiano) si intende il ramo del W3C che si occupa di migliorare l'accessibilità del World Wide Web. Questa iniziativa è stata pensata appositamente per garantire e tutelare l'accessibilità Web da parte di utenti con qualsiasi tipo di disabilità e, indirettamente, migliorarne anche la fruizione da parte di tutti gli utenti.

Scopo principale del WAI è sviluppare linee guida e tecniche per semplificare e direzionare il lavoro di chi sviluppa materiale per il Web.

Il W3C ha stilato una breve linea guida per facilitare la creazione di siti web accessibili mediante brevi consigli, il tutto si snoda su una lista di dieci punti:

1. Immagini ed animazioni

Utilizzare l'attributo alt per descrivere la funzione di ogni elemento grafico.

Quando ad esempio si inserisce un immagine all'intero di una pagina web lo si fa mediante il tag img. Per capire meglio questo punto è opportuno specificare nel dettaglio il funzionamento del tag img.

Il tag img ha una struttura molto semplice, per mostrare un immagine sarà solamente necessario impostare l'attributo src con l'indirizzo appunto dell'immagine:

    <img src="my_image.gif" alt="la mia immagine" />
        

L'attributo alt ha il compito di fornire al browser un testo alternativo qualora non fosse possibile la visualizzazione dell'immagine oppure nel caso la pagina venga letta da uno screen reader.

In questo esempio sono rappresentati solo gli attributi essenziali, ve ne sono altri ma non di rilevante importanza per l'accessibilità.

2. Immagini cliccabili

Utilizzare l'elemento map e descrivere le zone attive.

L'elemento map consente di definire un immagine con diverse aree cliccabili. Anche in questo caso, come già visto per le immagini, è opportuno aggiungere una descrizione alternativa ad ognuna delle aree cliccabili poste all'interno dell'immagine, per far questo sarà sufficiente l'uso dell'attributo alt.

3. Multimedia

Fornire sottotitoli e trascrizioni per l'audio, e descrizione di filmati.

Questo aspetto risulta fondamentale per quanto riguarda l'accessibilità dei contenuti multimediali presenti su pagine Web da parte di utenti con problemi visivi o uditivi. La presenza di trascrizioni e descrizioni consente la fruibilità di tali contenuti mediante strumenti di Assistive Technology quali ad esempio gli screen reader.

4. Link ipertestuali

Utilizzare enunciati che conservino il loro senso al di fuori del contesto. Per esempio, evitare «cliccare qui».

Link ipertestuali non propriamente definiti, come l'esempio precedente, possono creare ambiguità non indicando dove porta effettivamente il collegamento.

5. Organizzazione

Utilizzare titoli, liste e una struttura coerente. Utilizzare CSS^[1] per l'impaginazione.

CSS - Cascading Style Sheet (Fogli di stile a cascata) è un semplice meccanismo per l'aggiunta dello stile (per es. caratteri, colori, spaziatura) ai documenti Web. Praticamente sono file, contenenti appunto lo stile delle pagine Web, atti a descrive l'aspetto semantico, come appare e com'è formattato, di pagine web (HTML e XHTML).

Per un analisi più accurata dei CSS si rimanda ai capitoli successivi.

6. Figure e diagrammi

Descriverli all'interno della pagina o utilizzare l'attributo longdesc.

L'attributo longdesc consente di specificare un URL di una pagina che contiene una lunga descrizione di un immagine. Svolge un compito analogo ad alt con la sola differenza che ne amplia le capacità descrittive, consentendo appunto di collegare una pagina o un documento appositi per la descrizione dell'immagine.

        <img src="my_image.gif" alt="la mia immagine" longdesc="img.txt"/>
        

In questo esempio si può notare che è consigliabile definire l'attributo img con una brevissima descrizione dell'immagine, solitamente alcune parole sono sufficienti, e delegare all'attributo longdesc una descrizione più accurata.

7. Script, applet e plug-in

Fornire una pagina alternativa quando tali funzionalità sono inaccessibili o non supportati.

Non tutti i browser supportano script, applet o plug-in vari e, in alcuni casi, l'utente per svariati motivi può disabilitare il normale funzionamento di questi. Di conseguenza è sempre opportuno fornire delle descrizioni alternative agli elementi "esterni" inseriti all'interno delle pagine Web.

L'esempio seguente illustra il funzionamento con uno script e relativo tag noscript.

    <script type="text/javascript">
      document.write("Hello World!")
    </script>
    <noscript>Your browser does not support JavaScript!</noscript>
        

Lo script qui riportato ha il compito di stampare a video la frase Hello World!. Nel caso qualcosa non dovesse funzionare, al posto dello script, verrà visualizzato il testo contenuto nel tag noscript. Al suo interno può essere inserito qualsiasi elemento normalmente collocabile in una pagina HTML. Il contenuto del tag noscript verrà mostrato solamente nel qual caso gli script non siano supportati oppure siano stati disabilitati dall'utente.

8. Cornici (frames)

Utilizzare noframes e titoli significativi.

Il tag noframes ha un funzionamento analogo a noscript, con la sola differenza che viene usato quando un browser non supporta i frames.

I frames non sono altro che suddivisioni della pagina in parti a se stanti. Consentono di visualizzare differenti documenti, collegati con l'attributo src, contemporaneamente all'interno di una sola pagina Web.

    <frameset cols="25%,50%,25%">
      <frame src="frame_a.htm" />
      <frame src="frame_b.htm" />
      <frame src="frame_c.htm" />
      <noframes>
        Sorry, your browser does not handle frames!
      </noframes>
    </frameset>
        

Come mostrato nell'esempio se il browser non supporta i frame la pagina non verrà caricata e al suo posto apparirà il testo (o la pagina alternativa) contenuto nel tag noframe.

Chiaramente per motivi di accessibilità e portabilità di pagine Web l'uso dei frames è altamente consigliato.

9. Tabelle

Facilitare la lettura linea per linea. Riassumere.

10. Verificare il lavoro

Validare. Utilizzare gli strumenti, la lista di controllo e le linee guida di WCAG.

Sia la validazione del codice che la linea guida WCAG saranno trattati nei prossimi capitoli.