Luca.uliana84@gmail.com Tecniche di accessibilità web Tabelle e form accessibili Le tabelle di dati...

Tabelle e form accessibililuca.uliana84@gmail.com

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>

<th>Intestazione colonna 1</th>

<th>Intestazione colonna 2</th>

<th>Intestazione riga 1</th>

<th>Intestazione riga 2</th>

</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">

Alunni di una scuola

</caption>

<thead>

<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>

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

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

</thead>

[continua]

<tbody>

</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>

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

</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>

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

</form>

Luca.uliana84@gmail.com Tecniche di accessibilità web Tabelle e form accessibili Le tabelle di dati...

Documents

Transcript of Luca.uliana84@gmail.com Tecniche di accessibilità web Tabelle e form accessibili Le tabelle di dati...

Produzione di documenti accessibili · In appendice sono infine riportati riferimenti a normativa e strumenti di accessibilità e ... motoria e, in tendenza crescente, dislessia.

Cts Europa Accessibilità Del Web

Accessibilità del Web Tecnologie assistive Accessibilità e disabilità – visiva – motoria – uditiva – cognitiva Richiedono particolari accorgimenti nella progettazione ogni

BISP 2017 WS del 25 maggio 2017 Buone pratiche delle città … · 2019. 4. 15. · Umbria Associazione Festival per le Città Accessibili si 4 Turilli Bagnetti Marco Chiara ** Accessibilità,

Accessibilità di Siti Web di Interesse Pubblicoelite.polito.it/files/thesis/fulltext/puggioni.pdf · perché i siti Web dell’amministrazione pubblica siano accessibili.” ...

Accessibilità in Regione Emilia-Romagna

Diritti accessibili

Progetto O.T.R.A. Itinerari Accessibili

Accessibilità 2.0

Accessibilità e trasparenza nella scuola

Venezia accessibile Accessibilità aree

Accessibilità, tra etica e business

ARREDI ACCESSIBILI come progettarli e realizzarli?

Indicatore di accessibilità summer 2015

Accessibilità universale

Dematerializzazione, trasparenza, accessibilità e scrivere ... · Dematerializzazione, trasparenza, accessibilità e scrivere per il web Accessibilità: L’evoluzione normativa

Accessibilità dei siti web

Lezione1 Accessibilità

2017.06.09 Dolomiti accessibili - Maniago ok · Dolomiti accessibili mappa work in progress Fondazione Dolomiti Dolomiten Dolomites Dolomitis UNESCO Loredana Ponticelli . fornire

Approfondimento accessibilità