Como melhorar a acessibilidade da tabela HTML com marcação
A acessibilidade da Web refere-se ao design de aplicativos da Web de uma maneira que possa ser usada com facilidade por pessoas com deficiências visuais. Alguns desses usuários contam com leitores de tela para ler o conteúdo nas páginas da web. Os leitores de tela interpretar o código presente na página e leia o seu conteúdo para o usuário.
é um elemento HTML amplamente usado para exibir dados de maneira estruturada em páginas da Web. Seu design varia dos mais simples aos complexos, completos com cabeçalhos de linhas, cabeçalhos mesclados, etc..
Se uma tabela não for projetada com a acessibilidade em mente, será difícil para os leitores de tela traduzir os dados em tabelas complexas de maneira significativa para os usuários. Assim, para tornar as tabelas HTML complexas mais fáceis de entender, para acessibilidade, precisamos garantir que os cabeçalhos, grupos de colunas, grupos de linhas, etc. sejam claramente definidos. Vamos ver abaixo como isso é alcançado em marcação.
O atributo do escopo
Mesmo para uma mesa simples com
tag que define claramente os cabeçalhos, você pode melhorar a sua acessibilidade com o escopo atributo e não dar lugar a qualquer confusão que possa surgir de tipos semelhantes de dados nas células.
nome do empregado
Código de empregado
Código do projeto
Designação de Funcionário
John Doe
32456
456789
Diretor
Miriam Luther
78902
456789
Vice diretor
O que o atributo scope faz? De acordo com o W3C:
Em outras palavras, isso nos ajuda a associar as células de dados com suas células de cabeçalho correspondentes.
Por favor, note que no exemplo acima você pode mudar
para
. Enquanto o seu escopo tem o valor col, ele será interpretado como o cabeçalho da coluna correspondente.
o escopo atributo pode ter qualquer um desses quatro valores; col, linha, rowgroup, colgroup para se referir ao cabeçalho de uma coluna, ao cabeçalho de uma linha, ao cabeçalho de um grupo de colunas e a um grupo de linhas, respectivamente.
Tabelas Complexas
Agora vamos passar para uma mesa mais complexa.
Acima é uma tabela que lista os alunos em uma classe e suas notas em prática e teoria para três disciplinas.
Aqui está o código HTML para isso. A tabela tem usado fileiras e colspan criar cabeçalhos mesclados para as células de dados.
Nome do aluno
Biologia
Química
Física
Prático
Teoria
Prático
Teoria
Prático
Teoria
John Doe
UMA
UMA+
B
UMA
UMA
UMA-
Miriam Luther
UMA
UMA
C
C+
UMA
UMA-
Na tabela acima, cada célula de dados, que é cada uma das células da tabela exibindo o grau, está associado a três informações:
Para qual aluno essa nota pertence??
Qual assunto pertence a este grau??
Esta nota é para a seção Prática ou Teoria??
Essas três informações são definidas em três tipos diferentes de células de cabeçalho estrutural e visualmente:
Nome do aluno
Nome do tópico
Prático ou teoria
Vamos definir o mesmo para acessibilidade.
Nome do aluno
Biologia
Química
Física
Prático
Teoria
Prático
Teoria
Prático
Teoria
John Doe
UMA
UMA+
B
UMA
UMA
UMA-
Miriam Luther
UMA
UMA
C
C+
UMA
UMA-
Na marcação acima, adicionamos escopo para células que contêm informações de cabeçalho sobre as células de dados.
Grupo de colunas
Células de Biologia, Química e Física devem ser associadas a um grupo de duas colunas cada (Teoria e Prática). Apenas adicionando colspan = "2" não cria os grupos de colunas, apenas indica que a célula específica deve ocupar o espaço de duas células.
Para criar um grupo de colunas, você deve usar colgroup e adicione o período atribui a ele a indicação de quantas colunas esse grupo de colunas inclui.
o
Nome do aluno
marcação com scope = "col" ajuda a tecnologia assistiva a identificar que as células que seguem na mesma coluna são nomes de alunos.
Similarmente, células como
Biologia
contendo scope = "colgroup" ajuda os usuários a identificar que os dados nas células que seguem no grupo de colunas que ele ocupa estão associados a esse assunto específico.
Depois, há o
John Doe
marcação com scope = "row" que define que as células seguindo-o na mesma linha, contendo o “grau” informações sobre o nome desse aluno em particular.
Grupos de linhas
Agora vamos passar para outro exemplo, este exemplo terá quase a mesma tabela que a acima, exceto que trocaremos cabeçalhos de linha e coluna, então poderemos trabalhar com grupos de linhas.
Sujeito
John Doe
Miriam Luther
Biologia
Prático
UMA
UMA
Teoria
UMA+
UMA
Química
Prático
B
C
Teoria
UMA
C+
Física
Prático
UMA
UMA
Teoria
UMA-
UMA-
Agora que temos nossa amostra para trabalhar, vamos começar criando grupos de linhas como fizemos para os grupos de colunas no exemplo anterior.
No entanto, os grupos de linhas não podem ser criados usando uma tag como colgroup porque não há rowgroup elemento.
Linhas HTML são geralmente agrupadas usando , e elementos. Um único HTML
elemento pode ter um , 1 e múltiplos . Nós vamos usar vários tbody em nossa tabela para criar os grupos de linhas e adicionar o respectivo escopo às células de cabeçalho.
Sujeito
John Doe
Miriam Luther
Biologia
Prático
UMA
UMA
Teoria
UMA+
UMA
Química
Prático
B
C
Teoria
UMA
C+
Física
Prático
UMA
UMA
Teoria
UMA-
UMA-
Nós adicionamos as linhas “Prático” e “Teoria” em cada tbody criando grupos de linhas com duas linhas em cada. Nós também adicionamos o scope = "rowgroup" para as células que contêm as informações de cabeçalho sobre essas duas linhas (que é o nome do assunto ao qual as notas pertencem neste caso).
