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

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

Web para todos

Todos mismo!

Tablas para layout

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

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. http://www.w3.org/TR/html5/tabular-data.html#the-table-element

Atajos de teclado para navegación en las tablas - JAWS

Fonte: Webaim

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

Estructura básica de una tabla

Minha tabela

Estructura básica de una tabla

Minha tabela
Simples

Estructura básica de una tabla

- Tabla - Table Rows

- Table Header

- Table Data Estructura básica de una tabla Monday Tuesday Wednesday 8:00-9:00 Meet with Sam 9:00-10:00 Doctor Williams Información acerca de la tabla 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 20 66 23 25 14 3 6 10 ÁREA URBANA 19 66 24 26 14 3 6 9 RURAL 21 55 17 14 20 5 8 16 REGIÕES DO PAÍS SUDESTE 22 65 21 30 11 3 4 10 NORDESTE 19 64 12 32 18 1 10 9 SUL 13 71 34 12 22 3 8 10 NORTE 31 49 23 11 11 5 14 7 CENTRO-OESTE 13 67 34 18 13 2 8 13 RENDA FAMILIAR Até R$465 16 51 14 20 14 3 12 21 R$466-R$930 22 61 18 24 15 4 4 14 R$931-R$1395 23 62 22 24 13 2 6 9 R$1396-R$2325 23 63 23 22 15 3 6 8 R$2326-R$4650 16 75 32 28 11 4 7 4 R$4651 ou mais 12 78 27 34 16 1 6 5 CLASSE SOCIAL 4 A 11 81 24 41 14 3 9 3 B 18 71 28 26 13 3 6 7 C 22 61 19 24 15 3 5 12 DE 26 41 10 15 15 2 3 29 A1 - PROPORÇÃO DE DOMICÍLIOS COM COMPUTADOR … Todo el modo visual se puede cambiar a través de CSS Bloques de contenido ...header information.. ...footer information… ...first row of block one data... ...second row of block one data... ...header information.. ...footer information… ...first row of block one data... ...second row of block one data... 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. http://www.w3.org/TR/html401/struct/tables.html#e def-THEAD … Minha tabela Percentuais Total 10% Las referencias entre las celdas Usar el atributo scope para asociar celdas de encabezado y celdas de datos en tablas de datos. Contact Information Name Phone# City 1. Joel Garner 412-212-5421 Pittsburgh 2. Clive Lloyd 410-306-5400 Baltimore Uso de los atributos ID y headers para asociar celdas de encabezado y celdas de datos en tablas de datos. Homework Exams Projects 1 2 Final 1 2 Final 15% 15% 15% 20% 10% 10% 15% Creación de una tabla accesible HTML5 - Atributos obsoletos – Elemento TABLE align bgcolor border cellpadding cellspacing frame rules width background HTML5 - Atributos obsoletos – Elemento TABLE Atributo summary - Elemento details Characteristics with positive and negative sides. Help Characteristics are given in the second column, with the negative side in the left column and the positive side in the right column. 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 Probar y validar! En resumen: •Utilice el atributo de summary para una breve explicación acerca de la tabla; •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; 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 … En resumen: No utilice tablas para layout Ellos no fueron creados para esta función Gracias! Reinaldo Ferraz NIC.br [email protected] Twitter: @reinaldoferraz × Report "Tutorial de Accesibilidad y el futuro de los elementos en HTML5 Tablas" Your name Email Reason -Select Reason- Pornographic Defamatory Illegal/Unlawful Spam Other Terms Of Service Violation File a copyright complaint Description Close Send About Us Privacy Policy Terms and Conditions Copyright Contact Us Get in touch Get monthly updates Submit Social © Copyright 2013 - 2024 MYDOKUMENT.COM - All rights reserved.