Pagina inicial » Codificação » Como melhorar a acessibilidade da tabela HTML com marcação

    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

    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

    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

    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.

     
    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 Biologia John Doe
    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).

    Agora leia: Altura da coluna igual com CSS