[email protected] Tecniche di accessibilità web Tabelle e form accessibili Le tabelle di dati...

Tabelle e form [email protected]

Tecniche di accessibilità webTecniche di accessibilità web

Le tabelle di datiLe tabelle di dati

WCAG 1.0, linea guida 5Garantire che le tabelle abbiano la necessaria marcatura per essere trasformate da browseraccessibili e da altri programmi utente.

6 punti di controllo



Le tabelle di datiLe tabelle di dati5.1 [priorità 1]Per le tabelle di dati, identificare le intestazioni di riga e colonna.Usare il tag <th> per le celle di intestazioneCella di intestazione: rappresenta la categoria sotto la quale vengono catalogati gli individui o gli oggetti che fanno parte della medesima riga o colonna (solitamente la prima riga dall’alto e la prima colonna da sinistra)Usare l’elemento <caption> per il titolo della tabella



Le tabelle di datiLe tabelle di dati<table>

<caption>Esempio di tabella dati</caption>

<tr>

<td></td>

<th>Intestazione colonna 1</th>

<th>Intestazione colonna 2</th>

</tr>

<tr>

<th>Intestazione riga 1</th>

<td>Col. 1 Riga 1</td>


</tr>

<tr>

<th>Intestazione riga 2</th>



</tr>

</table>



Le tabelle di datiLe tabelle di dati5.2 [priorità 1]Per tabelle di dati che hanno due o più livelli logici di intestazioni di righe o colonne, usare marcatori per associare le celle di dati e le celle di intestazione.Per descrivere relazioni più complesse tra i dati, usare gli attributi:

– Scope– Headers e id– Axis

Utilizzare gli elementi <thead>, <tbody>, <tfoot> per strutturare e raggruppare le righe rispettivamente in testa, corpo e piede della tabella.



Le tabelle di dati: attributo scopeLe tabelle di dati: attributo scopeIndica lo scopo, l’ambito di raggruppamento di una cella di intestazione.Può avere quattro valori:

– Row: se la cella fornisce informazioni d’intestazione per il resto della riga di cui fa parte;

– Col: se fornisce informazioni d’intestazione per il resto della colonna

– Rowgroup: per il resto del gruppo di righe di cui fa parte;– Colgroup: per il resto del gruppo di colonne di cui fa parte.

Scarso supporto da parte di alcuni screen reader



Le tabelle di dati: attributi header e idLe tabelle di dati: attributi header e idUsati in modo combinato per creare associazioni inequivocabili tra celle di tabelle complesse.Id: deve avere valore unico all’interno del documento.Header: usato per associare una cella ad una intestazione con particolare id.Per ottenere un ordine di lettura corretto, è necessario inserire i valori di headers in una sequenza significativa.



Le tabelle di dati: attributo axisLe tabelle di dati: attributo axis

Usato per creare associazioni tra celle che non sono in relazione diretta tra loro, cioè che non hanno un rapporto intestazione/dati, gestibile per mezzo degli attributi scope, headers, id.Scarso supporto da parte di browser e screen reader.



Le tabelle di datiLe tabelle di datiPer strutturare una tabella, è possibile utilizzare anche i seguenti elementi:

– <caption>: definisce il titolo di una tabella– <thead>, <tbody>, <tfoot>: definiscono rispettivamente

intestazione, corpo e piede della tabella.



Le tabelle di dati: esempioLe tabelle di dati: esempio<table summary="Numero di studenti iscritti

suddivisi per

anno scolastico, numero classi, iscritti e

ripetenti">

<caption>

Alunni di una scuola

</caption>

<thead>

<tr>

<th rowspan="2" id="t1">anni di corso</th>

<th rowspan="2" id="t2">n° classi</th>

<th colspan="3" id="t3">alunni iscritti</th>

<th colspan="3" id="t4">alunni ripetenti</th>

</tr>

<tr>

<td id="a4" headers="t3" class="int">M</td>

<td id="a5" headers="t3" class="int">F</td>

<td id="a6" headers="t3" class="int">totale</td>

<td id="a7" headers="t4" class="int">M</td>

<td id="a8" headers="t4" class="int">F</td>

<td id="a9" headers="t4" class="int">totale</td>

</tr>

</thead>

[continua]

<tbody>

<tr>

<td class="int">1° anno</td>

<td headers="t2" axis=”quantità”>4</td>

<td headers="t3 a4" axis=”quantità”>4</td>






</tr>

<tr>

<td class="int">2° anno</td>

<td headers="t2" axis=”quantità”>5</td>







</tr>

</tbody>

</table>



Le tabelle di dati: esempioLe tabelle di dati: esempio



Le tabelle di datiLe tabelle di dati5.3 [priorità 2]Non usare le tabelle a scopo d’impaginazione, a meno che non abbiano senso quando linearizzate.Altrimenti, se la tabella non ha senso, fornire un’alternativa equivalente (che può essere una versione linearizzata).È necessario che la lettura dei contenuti (che avviene riga per riga, da sinistra a destra, dall’alto verso il basso) abbia un senso.




5.4 [priorità 2]Se una tabella è usata a scopo d’impaginazione, non usare alcuna marcatura strutturale per ottenere effetti di formattazione visuale.

Non usare <th>, <tbody>, ecc..




5.5 [priorità 3]Fornire sommari per le tabelle

Usare l’attributo “summary” per fornire informazioni preventive sui contenuti e sulla loro organizzazione all’interno della tabella.

Particolarmente utile per screen reader.




5.6 [priorità 3]Fornire abbreviazioni per le etichette delle celle d’intestazione

Usare l’attributo “abbr” per th e td, in maniera da ridurre i tempi di lettura in caso di contenuti molto lunghi.

In realtà, si cerca di rendere sintetici ma significativi i contenuti delle celle.



I moduli (form)I moduli (form)

Punto di controllo 10.2 [priorità 2]Fino a quando gli interpreti non supporteranno esplicite associazioni fra etichette e controlli dei moduli, assicurare, per tutti i controlli dei moduli che hanno etichette associate implicitamente, che l'etichetta sia posizionata correttamente.



I moduli (form)I moduli (form) Punto di controllo 12.4 [priorità 2]

Associare esplicitamente le etichette ai loro controlli.



I moduli (form)I moduli (form)L'etichetta deve precedere il proprio controllo immediatamente sulla stessa riga (permettendo più di un controllo/etichetta per riga) oppure essere nella riga precedente il controllo (con una sola etichetta e un solo controllo per riga). L’etichetta permette di ottenere informazioni chiare su quali dati sono richiesti e contemporaneamente consente con maggior facilità il posizionamento da parte di utenti con disabilità motorie. L’etichetta testuale deve essere marcata con l’elemento <label>



I moduli (form)I moduli (form)Es.1 – campo di testo

<label for=“user">Username:</label><input type="text“ value=“Username" id=“user" />

Es. 2 – radiobutton (e checkbox)<input type=“radio“ value=“Sì" id=“si”

checked="checked" /><label for=“si">Sì</label><input type=“radio“ value=“No" id=“no” /><label for=“no">No</label>



I moduli (form)I moduli (form) Es.3 – select

<label for=“mese”>Mese</label><select id=“mese”><option value=“Gennaio” selected=“selected”>Gennaio</option><option value=“Febbraio”>Febbraio</option></select>

Es. 4 – textarea<label for=“commenti”>Commenti</label><textarea id=“commenti” >Inserire qui i commenti</textarea>



I moduli (form)I moduli (form)L'attributo "for" permette di associare un elemento <label> in modo esplicito ad un determinato elemento interno al modulo. Il valore dell'attributo "for" dell'elemento <label> deve corrispondere al valore dell'attributo "id" dell'elemento interno al modulo. In questo modo la tecnologia assistiva associa l’etichetta ad un unico campo del modulo.




Creare un ordine logico di tabulazione fra i collegamenti, i controlli dei moduli, e gli oggetti.



I moduli (form)I moduli (form)L'ordine di tabulazione descrive un ordine logico per la navigazione da un link all'altro o da un form all'altro (di solito usando il tasto "tab").Si può anche specificare un ordine di tabbing fra gli elementi con l’attributo tabindex.




Esempio<form action="submit" method="post">

<label for=“user”>Username</label>

<input tabindex="1" type="text" id=“user“ />

<label for=“pwd”>Password</label>

<input tabindex="2" type="text" id=“pwd“ />

<input tabindex="3" type="submit" id="submit“ />

</form>




Fornire scorciatoie da tastiera per i collegamenti importanti (compresi quelli nelle immagini sensibili sul lato client), per i controlli dei moduli, e per i gruppi di controlli dei moduli.



I moduli (form)I moduli (form) Utilizzare scorciatoie da tastiera attraverso

l'attributo "accesskey". L'accesso da tastiera ad elementi attivi di una

pagina è importante per 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.

Utile per form usate spesso (login, mail, ecc..)




Esempio<form action="submit" method="post">

<label for=“user” accesskey=“8”>Username</label>

<input tabindex="1" type="text" id=“user“ />

<label for=“pwd”>Password</label>

<input tabindex="2" type="text" id=“pwd“ />

<input tabindex="3" type="submit" id="submit“ />

</form>

[email protected] Tecniche di accessibilità web Tabelle e form accessibili Le tabelle di dati...

Documents

Transcript of [email protected] Tecniche di accessibilità web Tabelle e form accessibili Le tabelle di dati...