Ultima modifica: 4 Marzo 2010
Home > Newsletter > 3. Ottobre 07 > 5 – Bricioleweb

5 – Bricioleweb

di Michele Basile, IPC Verri di Busto Arsizio (VA)

Sviluppare pagine web accessibili vuol dire permettere a tutti, a prescindere dalla tecnologia utilizzata, la fruizione dei loro contenuti. Gli standard a cui fare riferimento sono le “Web Content Accessibility Guidelines 1.0” (http://www.w3.org/TR/WCAG10/), realizzate dal WAI e, per chi opera nella Pubblica Amministrazione Italiana, i 22 requisiti di verifica tecnica che fanno riferimento alla legge n°4 del 9 gennaio 2004 (Legge Stanca). In questo numero vedremo come, applicando piccoli accorgimenti, si possono rendere maggiormente accessibili le pagine web.

Salta menu

Come può un utente che utilizza tecnologie assistive (es. screen reader) saltare alcuni elementi ripetitivi presenti nella pagina web?

Se in una pagina web siamo in presenza di elementi ripetitivi (es. menù di navigazione) è buona norma offrire al visitatore che utilizza tecnologie assistive, la possibilità di poter saltare questi elementi andando subito al contenuto della pagina (Requisito 19 L.4/2004 e WCAG 1.0: punto 13.6). La tecnica è quella di inserire un collegamento ipertestuale nascosto.

Codice (X)HTML

Inserire il seguente codice prima di un menù che si desidera nascondere:

<div class=”nascosto”>
<a href=”contenutoprincipale” title=”salta al contenuto principale”>salta direttamente ai contenuti</a>
</div>

Alla classe “.nascosto” sarebbe sufficiente associare la regola CSS

.nascosto {display: none;}

Molti screen reader però non riescono ad interpretare correttamente questa regola e quindi non sono in grado di leggere il contenuto nascosto.
Per superare questo problema è stata sviluppata una tecnica senza l’utilizzo della proprietà “display”:

.nascosto {
position:absolute; left:0px; top:-500px; width:1px; height:1px; overflow:hidden;
}

Cambi di lingua

Premessa

Per quale motivo è importante segnalare i cambi di lingua?

Gli screen reader impostano la lingua di lettura della pagina web in base al modo in cui è impostato l’attributo lang dato al tag <html>:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">

L’esempio mostra che la lingua impostata è l’italiano. Affinché lo screen reader possa pronunciare correttamente le eventuali parole scritte in un’altra lingua, queste vanno opportunamente segnalate nel codice di marcatura.

Esempio

<p>
La figura del <span lang=”en” xml:lang=”en”>web design</span> è di fondamentale importanza per ...
</p>

Nel caso si utilizzi il Media type application/xhtml+xml, è sufficiente usare solo xml:lang=”en”.




Link vai su