Tecniche di accessibilità web Tabelle e form accessibili Le tabelle di dati WCAG 1.0, linea guida 5 Garantire che le tabelle abbiano.

Presentazione sul tema: "Tecniche di accessibilità web Tabelle e form accessibili Le tabelle di dati WCAG 1.0, linea guida 5 Garantire che le tabelle abbiano."— Transcript della presentazione:

1 luca.uliana84@gmail.com Tecniche di accessibilità web Tabelle e form accessibili Le tabelle di dati WCAG 1.0, linea guida 5 Garantire che le tabelle abbiano la necessaria marcatura per essere trasformate da browser accessibili e da altri programmi utente. 6 punti di controllo

2 luca.uliana84@gmail.com Tecniche di accessibilità web Tabelle e form accessibili Le tabelle di dati 5.1 [priorità 1] Per le tabelle di dati, identificare le intestazioni di riga e colonna. Usare il tag per le celle di intestazione Cella 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 dallalto e la prima colonna da sinistra) Usare lelemento per il titolo della tabella

3 luca.uliana84@gmail.com Tecniche di accessibilità web Tabelle e form accessibili Le tabelle di dati Esempio di tabella dati Intestazione colonna 1 Intestazione colonna 2 Intestazione riga 1 Col. 1 Riga 1 Col. 1 Riga 2 Intestazione riga 2 Col. 2 Riga 1 Col. 2 Riga 2

4 luca.uliana84@gmail.com Tecniche di accessibilità web Tabelle e form accessibili Le tabelle di dati 5.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,, per strutturare e raggruppare le righe rispettivamente in testa, corpo e piede della tabella.

5 luca.uliana84@gmail.com Tecniche di accessibilità web Tabelle e form accessibili Le tabelle di dati: attributo scope Indica lo scopo, lambito di raggruppamento di una cella di intestazione. Può avere quattro valori: –Row: se la cella fornisce informazioni dintestazione per il resto della riga di cui fa parte; –Col: se fornisce informazioni dintestazione 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

6 luca.uliana84@gmail.com Tecniche di accessibilità web Tabelle e form accessibili Le tabelle di dati: attributi header e id Usati in modo combinato per creare associazioni inequivocabili tra celle di tabelle complesse. Id: deve avere valore unico allinterno 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.

7 luca.uliana84@gmail.com Tecniche di accessibilità web Tabelle e form accessibili Le 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.

8 luca.uliana84@gmail.com Tecniche di accessibilità web Tabelle e form accessibili Le tabelle di dati Per strutturare una tabella, è possibile utilizzare anche i seguenti elementi: – : definisce il titolo di una tabella –,, : definiscono rispettivamente intestazione, corpo e piede della tabella.

9 luca.uliana84@gmail.com Tecniche di accessibilità web Tabelle e form accessibili Le tabelle di dati: esempio <table summary="Numero di studenti iscritti suddivisi per anno scolastico, numero classi, iscritti e ripetenti"> Alunni di una scuola anni di corso n° classi alunni iscritti alunni ripetenti M F totale M F totale [continua] 1° anno 4 0 4 5 0 5 2° anno 5 0 5 0 5

10 luca.uliana84@gmail.com Tecniche di accessibilità web Tabelle e form accessibili Le tabelle di dati: esempio

11 luca.uliana84@gmail.com Tecniche di accessibilità web Tabelle e form accessibili Le tabelle di dati 5.3 [priorità 2] Non usare le tabelle a scopo dimpaginazione, a meno che non abbiano senso quando linearizzate. Altrimenti, se la tabella non ha senso, fornire unalternativa equivalente (che può essere una versione linearizzata). È necessario che la lettura dei contenuti (che avviene riga per riga, da sinistra a destra, dallalto verso il basso) abbia un senso.

12 luca.uliana84@gmail.com Tecniche di accessibilità web Tabelle e form accessibili Le tabelle di dati 5.4 [priorità 2] Se una tabella è usata a scopo dimpaginazione, non usare alcuna marcatura strutturale per ottenere effetti di formattazione visuale. Non usare,, ecc..

13 luca.uliana84@gmail.com Tecniche di accessibilità web Tabelle e form accessibili Le tabelle di dati 5.5 [priorità 3] Fornire sommari per le tabelle Usare lattributo summary per fornire informazioni preventive sui contenuti e sulla loro organizzazione allinterno della tabella. Particolarmente utile per screen reader.

14 luca.uliana84@gmail.com Tecniche di accessibilità web Tabelle e form accessibili Le tabelle di dati 5.6 [priorità 3] Fornire abbreviazioni per le etichette delle celle dintestazione Usare lattributo 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.

15 luca.uliana84@gmail.com Tecniche di accessibilità web Tabelle e form accessibili 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.

16 luca.uliana84@gmail.com Tecniche di accessibilità web Tabelle e form accessibili I moduli (form) Punto di controllo 12.4 [priorità 2] Associare esplicitamente le etichette ai loro controlli.

17 luca.uliana84@gmail.com Tecniche di accessibilità web Tabelle e form accessibili 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). Letichetta 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. Letichetta testuale deve essere marcata con lelemento

18 luca.uliana84@gmail.com Tecniche di accessibilità web Tabelle e form accessibili I moduli (form) Es.1 – campo di testo Username: Es. 2 – radiobutton (e checkbox) Sì No

19 luca.uliana84@gmail.com Tecniche di accessibilità web Tabelle e form accessibili I moduli (form) Es.3 – select Mese Gennaio Febbraio Es. 4 – textarea Commenti Inserire qui i commenti

20 luca.uliana84@gmail.com Tecniche di accessibilità web Tabelle e form accessibili I moduli (form) L'attributo "for" permette di associare un elemento in modo esplicito ad un determinato elemento interno al modulo. Il valore dell'attributo "for" dell'elemento deve corrispondere al valore dell'attributo "id" dell'elemento interno al modulo. In questo modo la tecnologia assistiva associa letichetta ad un unico campo del modulo.

21 luca.uliana84@gmail.com Tecniche di accessibilità web Tabelle e form accessibili I moduli (form) Punto di controllo 9.4 [priorità 3] Creare un ordine logico di tabulazione fra i collegamenti, i controlli dei moduli, e gli oggetti.

22 luca.uliana84@gmail.com Tecniche di accessibilità web Tabelle e form accessibili 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 lattributo tabindex.

23 luca.uliana84@gmail.com Tecniche di accessibilità web Tabelle e form accessibili I moduli (form) Esempio Username Password

24 luca.uliana84@gmail.com Tecniche di accessibilità web Tabelle e form accessibili I moduli (form) Punto di controllo 9.5 [priorità 3] 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.

25 luca.uliana84@gmail.com Tecniche di accessibilità web Tabelle e form accessibili 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..)

26 luca.uliana84@gmail.com Tecniche di accessibilità web Tabelle e form accessibili I moduli (form) Esempio Username Password