Acessibilidade de tabelas com thead e tbody
•
0 gostou•149 visualizações
O documento descreve o uso das tags HTML <thead> e <tbody> para melhorar a acessibilidade de tabelas para usuários de leitores de tela como o NVDA. Ele fornece dois exemplos de tabelas com essas tags e explica como o NVDA lê corretamente o número de colunas e linhas em cada tabela.
Recomendados
Mais conteúdo relacionado
Destaque
Destaque (19)
Acessibilidade de tabelas com thead e tbody
- 1. Acessibilidade Diogo Garcia e Thais Cristina
- 2. Tabelas Nesse post iremos utilizar o as tags thead e tbody, para posteriormente testar no sintetizador de voz NVDA. 1º Tabela: thead <html> <body> <table border="1"> <thead> <caption>Nomes</caption> </thead> <tr><td>Diogo</td> <td>Garcia</td> </tr> <tr><td>Roger</td> <td>Federer</td> </tr> <tr><td>Rafael</td> <td>Nadal</td> </tr> <tr><td>Novak</td> <td>Djokovic</td> </tr> </table> </body> </html> 2º Tabela: tbody <Doctype!> <html> <body>
- 3. <table border="1"> <caption>Linguagens</caption> <thead> <tr><td>Tipos de linguagem</td></tr> </thead> <tbody> <tr><td>CSS</td> <td>Javascript</td></tr> <tr><td>HTML</td> <td>C </td> </tr> <tr><td>JavaScript</td> <td>C++</td> </tr> <tr><td>PHP</td> <td>Java</td> </tr> </tbody> </table> </body> </html> Quando utilizamos o NVDA no navegador, ouvimos quantas colunas e quantas linhas têm na tabela nos dois exemplos apresentados. Já quando exibimos o código fonte da página, obtivemos o seguinte resultado, o NDVA informa cada linha e tag do código HTML. Conclui-se que através de voz sintética, o NVDA permite que usuários cegos ou com deficiência visual possam acessar e interagir com qualquer página HTML5 e tabela utilizando as tags aqui apresentada. Teve uma dinâmica diferenciada pois propiciou uma experiência, como os usuários com deficiência passam quando utilizam a internet.