Tutorial de Accesibilidad y el futuro de los elementos en HTML5 Tablas

Transcripción

1 Tutorial de Accesibilidad y el futuro de los elementos en HTML5 Tablas 1er Evento Internacional de Gobierno Electrónico 2011 en Uruguay 4 de mayo de 2011 Reinaldo Ferraz NIC.br

2 Quién se beneficia con la accesibilidad en la web?

3 Web para todos

4 Todos mismo!

5 Tablas para layout

6 Deje de usar tablas para diseño de página!

7 Las tablas no deben utilizarse para el diseño de página. Históricamente, algunos autores han hecho mal uso tablas web en HTML como una manera de controlar su diseño de página. Este uso no es correcto, porque las herramientas que intentan extraer datos tabulares a partir de dichos documentos obtienen resultados muy confusos. En particular, los usuarios de herramientas de accesibilidad como lectores de pantalla es probable que les resulta muy difícil navegar por las páginas con tablas utilizadas para diseño de página.

8 Atajos de teclado para navegación en las tablas - JAWS Fonte: Webaim

9

10

11 Usar CSS! La página se carga más rápido Modifica varias páginas al realizar cambios en un solo archivo Se separa la presentación de los contenidos

12 Estructura básica de una tabla <table> <tr> <td> Minha tabela </td> </tr> </table>

13 Estructura básica de una tabla <table> <tr> <th>minha tabela</th> </tr> <tr> <td>simples</td> </tr> </table>

14 Estructura básica de una tabla <table> - Tabla <th> - Table Header <tr> - Table Rows <td> - Table Data

15 Estructura básica de una tabla <table> <tr> <td> </td> <th>monday</th> <th>tuesday</th> <th>wednesday</th> </tr> <tr> <th>8:00-9:00</th> <td>meet with Sam</td> <td> </td> <td> </td> </tr> <tr> <th>9:00-10:00</th> <td> </td> <td> </td> <td>doctor Williams</td> </tr> </table>

16 Información acerca de la tabla

17 A5 - TIPO DE CONEXÃO PARA ACESSO À INTERNET NO DOMICÍLIO Percentual sobre o total de domicílios com acesso à Internet 1 Percentual (%) Modem Tradicional (acesso discado linha telefônica) Banda Larga 2 Outros NS/NR 3 TOTAL Banda Larga Modem digital via linha telefônica (tecnologia DSL) Modem via cabo Conexão via rádio Conexão via satélite TOTAL BRASIL ÁREA URBANA RURAL REGIÕES DO PAÍS SUDESTE NORDESTE SUL NORTE CENTRO-OESTE RENDA FAMILIAR Até R$ R$466-R$ R$931-R$ R$1396-R$ R$2326-R$ R$4651 ou mais CLASSE SOCIAL 4 A B C DE

18

19 <table summary=" Las dos primeras columnas de la tabla son las variables de cruce (por ejemplo, las regiones del país) y las subdivisiones de cada bloque (por ejemplo, en el sureste, sur, etc).. Las otras columnas son los porcentajes de cada indicador. Información adicional para la mejor lectura de los datos se encuentra en la parte inferior de cada cuadro. ">

20 <table cellspacing="0" cellpadding="0" summary=" Las dos primeras columnas de la tabla son las variables de cruce (por ejemplo, las regiones del país) y las subdivisiones de cada bloque (por ejemplo, en el sureste, sur, etc).. Las otras columnas son los porcentajes de cada indicador. Información adicional para la mejor lectura de los datos se encuentram en la parte inferior de cada cuadro."> <caption>a1 - PROPORÇÃO DE DOMICÍLIOS COM COMPUTADOR</caption> </table>

21

22 Todo el modo visual se puede cambiar a través de CSS

23

24

25

26 Bloques de contenido

27 <TABLE> <THEAD> <TR>...header information..</thead> <TFOOT> <TR>...footer information </TFOOT> <TBODY> <TR>...first row of block one data... <TR>...second row of block one data... </TBODY> </TABLE>

28 <TABLE> <THEAD> <TR>...header information..</thead> <TFOOT> <TR>...footer information </TFOOT> <TBODY> <TR>...first row of block one data... <TR>...second row of block one data... </TBODY> </TABLE>

29 TFOOT must appear before TBODY within a TABLE definition so that user agents can render the foot before receiving all of the (potentially numerous) rows of data. def-thead

30 <table> <thead> <tr><th>minha tabela</th> <th>percentuais</th></tr> </thead> <tfoot> <tr><th>total</th> <td>10%</td></tr> </tfoot> <tbody> </tbody> </table>

31 Las referencias entre las celdas

32

33 Usar el atributo scope para asociar celdas de encabezado y celdas de datos en tablas de datos. <table border="1"> <caption>contact Information</caption> <tr> <td></td> <td scope="col">name</td> <td scope="col">phone#</td> <td scope="col">city</td> </tr><tr> <td>1.</td> <td scope="row">joel Garner</td> <td> </td> <td>pittsburgh</td> </tr><tr> <td>2.</td> <td scope="row">clive Lloyd</td> <td> </td> <td>baltimore</td> </tr> </table>

34 Uso de los atributos ID y headers para asociar celdas de encabezado y celdas de datos en tablas de datos. <table> <tr> <th rowspan="2" id="h">homework</th> <th colspan="3" id="e">exams</th> <th colspan="3" id="p">projects</th> </tr> <tr> <th id="e1" headers="e">1</th> <th id="e2" headers="e">2</th> <th id="ef" headers="e">final</th> <th id="p1" headers="p">1</th> <th id="p2" headers="p">2</th> <th id="pf" headers="p">final</th> </tr> <tr> <td headers="h">15%</td> <td headers="e e1">15%</td> <td headers="e e2">15%</td> <td headers="e ef">20%</td> <td headers="p p1">10%</td> <td headers="p p2">10%</td> <td headers="p pf">15%</td> </tr> </table>

35

36 Creación de una tabla accesible

37

38 align bgcolor border cellpadding cellspacing frame rules width background HTML5 - Atributos obsoletos Elemento TABLE

39 HTML5 - Atributos obsoletos Elemento TABLE Atributo summary - Elemento details <table> <caption> <strong>characteristics with positive and negative sides.</strong> <details> <summary>help</summary> <p>characteristics are given in the second column, with the negative side in the left column and the positive side in the right column.</p> </details> </caption>

40 HTML5 - Atributos obsoletos em TH, TR e TD align en los elementos td y th bgcolor en los elementos td y th char en los elementos td y th charoff en los elementos td y th height en los elementos td y th nowrap en los elementos td y th valign en los elementos td y th width en los elementos td y th align en el elemento tr bgcolor en el elemento tr char en el elemento tr charoff en el elemento tr valign en el elemento tr

41 Probar y validar!

42 Utilice el atributo de summary para una breve explicación acerca de la tabla; En resumen: Utilice el elemento CAPTION por el título de la tabla; Utilice THEAD, TFOOT y TBODY para separar y contener los bloques de las tablas; Utilice el atributo scope para asociar las columnas y filas de una tabla sencilla;

43 En resumen: Para tablas complejas, utilice el atributo headers y ID para asociar columnas y filas; Utilice CSS para el formato visual de la tabla; Pruebe los resultados en varios navegadores y tecnologías de apoyo (tales como lectores de pantalla) Validar el código en el W3C; Y, por último

44 En resumen: No utilice tablas para layout Ellos no fueron creados para esta función

45 Gracias! Reinaldo Ferraz NIC.br