Acessibilidade digital

  • 9 minutos

Existem vários conceitos, sintaxe e elementos a ter em conta para tornar as suas páginas Web acessíveis a pessoas de todas as capacidades. Esta unidade fornece uma visão geral dos assuntos essenciais. Para explorar completamente os detalhes sobre como tornar sites acessíveis, consulte os recursos recomendados.

HTML5 e ARIA

HTML5 é a versão mais recente do HTML (Hypertext Markup Language). O World Wide Web Consortium (W3C), uma comunidade internacional que desenvolve padrões web, recomenda-o. Para todos os efeitos, HTML5 é o padrão atual para a web, e deve ser usado para construir a estrutura básica para o seu site. Se você planeja criar sites acessíveis, você deve aprender a sintaxe e as tags para HTML5.

Accessible Rich Internet Applications (ARIA) é uma especificação técnica que pode trabalhar em conjunto com HTML5 para ajudar a tornar as páginas da Web e aplicativos mais acessíveis. O ARIA não faz parte do HTML5, mas seus atributos podem ser usados com elementos HTML5 em determinadas instâncias.

Para obter mais informações, saiba mais sobre o ARIA em HTML.

Títulos e pontos de referência

As pessoas que não conseguem ver as pistas visuais de uma página da Web dependem dos elementos de título e título para entender como a página está estruturada. HTML5 tem uma série de elementos de seccionamento que podem comunicar claramente a estrutura de uma página: <cabeçalho>, <navegação<>, principal> e <rodapé>. Se usados corretamente, esses elementos HTML5 ajudam as pessoas que usam leitores de tela a navegar em uma página da Web.

No entanto, para maximizar a acessibilidade, é melhor usar os elementos HTML5 com funções ARIA. As funções ARIA incluem: role="banner", role="navigation", role="main" e role="contentinfo". Essas funções ARIA criam uma estrutura de referência que permite que as pessoas que usam leitores de tela naveguem rápida e facilmente para uma parte desejada de uma página da Web. Por exemplo, em vez de ter que esperar que o leitor de tela narre cada elemento um a um, uma pessoa pode pular para um ponto de referência específico mais abaixo em uma página da Web imediatamente.

Para obter mais informações, explore o exemplo de pontos de referência do W3C ARIA.

Estrutura da página

Os sítios Web devem também incluir um título programático ou uma formatação adequada dos cabeçalhos. Páginas da Web que não têm um título ou usam elementos de título incorretamente, tornam difícil para as pessoas que usam leitores de tela saber onde eles estão em uma determinada página.

Para evitar estes problemas:

  • Certifique-se de que as páginas da Web forneçam um título de página informativo e apropriado ao contexto, usando o <elemento title> .
  • Certifique-se de que os cabeçalhos programáticos sejam usados sempre que apropriado e aninhados corretamente — por exemplo, um elemento h3> não deve seguir um elemento h1>, a menos que haja um <<<elemento h2> entre eles.  
  • Evite usar elementos de título apenas por razões estilísticas.

Cor

Tal como acontece com qualquer conteúdo digital, o uso de cores é uma consideração essencial ao criar uma página web. Você deve garantir que a cor não seja o único meio visual de transmitir informações, indicar uma ação, solicitar uma resposta ou distinguir um elemento visual. Quando apenas a cor é usada, as pessoas cegas ou daltônicas podem não ser capazes de dizer quais campos são necessários, quais itens são selecionados e assim por diante. Certifique-se de que o texto e as imagens de texto forneçam uma relação de contraste de cor de pelo menos 4,5 para 1. Vários analisadores de contraste de cor estão disponíveis on-line gratuitamente. Por exemplo, você pode usar o Analisador de Contraste de Cores em Informações de Acessibilidade no Windows para garantir taxas de contraste acessíveis.

 Algumas exceções a esta diretriz incluem:

  • Texto grande: texto em grande escala (regular de 18 pontos ou negrito de 14 pontos) e imagens de texto em grande escala podem ter uma relação de contraste de 3:1.
  • Incidentais: Não há nenhum requisito de contexto para texto ou imagens de texto que fazem parte de um componente de interface do usuário (UI) inativo. Ou, para texto ou imagens de texto que são pura decoração, não visíveis para ninguém, ou que fazem parte de uma imagem que contém outro conteúdo visual significativo.
  • Logótipos: O texto que faz parte de um logótipo ou nome de marca não tem requisitos mínimos de contraste.

People viewing large text on a computer screen.

Texto grande no ecrã para fins de acessibilidade

Tabelas de dados

As tabelas de dados podem ser difíceis para algumas aplicações de tecnologia assistiva (AT), como leitores de tela. Para tornar as tabelas de dados o mais acessíveis possível, ao usar tabelas em seu site, siga as seguintes etapas:

  • Use elementos de tabela HTML nativos (table, , , theadtrtbody, the ).td
  • Identifique corretamente os cabeçalhos da tabela (use o th elemento ).
  • Com tabelas complexas (mais de uma linha de cabeçalhos), verifique se os cabeçalhos estão associados aos dados corretos.
  • Use o atributo scope para identificar se a célula é um cabeçalho para uma linha, coluna ou grupo de linhas ou colunas (usando os valores row, col, rowgroup ou colgroup).
  • Adicione um atributo a qualquer célula usada como cabeçalho para outras células e, em seguida, faça referência ao valor apropriado id usando um idheaders atributo em cada célula de dados.

Data table and its corresponding native HTML table elements.

Se essas etapas não forem tomadas, as pessoas que usam tecnologia assistiva podem ter dificuldade em entender as tabelas de dados em seu site.

Tempo limite e feedback do formulário

Se as mensagens de erro não forem claramente identificadas, as pessoas que usam tecnologia assistiva podem não conseguir preencher um formulário com precisão em um site. As respostas cronometradas podem impedir que as pessoas que utilizam tecnologia de apoio possam preencher um formulário ou utilizar uma aplicação Web.

Após a validação, você pode indicar claramente as mensagens de erro:

  • Usando um método consistente para apontar mensagens de erro.
  • Identificação do(s) campo(s) em erro.
  • Identificação de campos de erro no início do formulário.
  • Identificação de campos de erro no rótulo para cada campo.

Sempre que possível, devem ser apresentadas sugestões de contributos alternativos. No entanto, essa abordagem não é necessária quando isso derrotaria o propósito do formulário. Por exemplo, quando o formulário faz parte de um teste, uma sugestão de entradas alternativas pode potencialmente fornecer uma pista ou resposta a uma pergunta, o que pode não ser apropriado.

Deve prever-se a prevenção de erros nas transações legais ou financeiras. Uma opção é permitir que as pessoas revejam suas contribuições antes de fazer um envio final.

As pessoas que usam leitores de tela podem navegar em uma página da Web exibindo uma lista de links da página da Web.

Se vários links em uma página da Web tiverem o mesmo nome, mas apontarem para URLs diferentes, as pessoas podem ficar confusas. Certifique-se de que os nomes dos links sejam significativos, exclusivos e descritivos, dentro ou fora do contexto.

Evite nomes de links genéricos e não descritivos que aparecem fora de contexto, como em uma lista de "Recursos adicionais". Uma pessoa que está usando um leitor de tela não tem nenhum contexto ou compreensão sobre o que é o link, ou por que ele está lá. Estes exemplos mostram uma lista com nomes de links genéricos e inacessíveis e uma lista com nomes de links acessíveis e descritivos.

Exemplo de links acessíveis:

Web page with a series of three descriptive link names.

Série de nomes de links descritivos

Exemplo de links inacessíveis:

Web page with a series of three generic, non-descriptive link names

Série de nomes de links genéricos e não descritivos

Imagens

As pessoas cegas não conseguem ver imagens e confiam nos desenvolvedores de sites e autores de conteúdo para descrevê-las.

As pessoas que têm baixa visão podem ter dificuldade em ler uma imagem de texto porque ela pixeliza quando ampliada. Outras dificuldades ocorrem quando o contraste não é forte o suficiente ou a imagem é muito pequena.

Forneça texto alternativo breve, específico e informativo para imagens, como fotos e botões.  

Exemplo de imagem inacessível:

<img src="MSFTlogo.jpg" alt="logotipo" />

Exemplo de imagem acessível:

<img src="MSFTlogo.jpg" alt="Logotipo da Microsoft" />

Embora o exemplo inacessível descreva a imagem como um logotipo, ele não especifica o tipo de logotipo, portanto, não é útil para alguém que depende de texto alternativo. Com a adição do qualificador no exemplo acessível, um usuário sabe exatamente o que é o logotipo.

Outro elemento não textual a considerar são as imagens decorativas. Por exemplo, se uma página da Web incluir uma borda estilizada, não há necessidade de descrevê-la em detalhes no texto alternativo. Você pode indicar que ele está decorativo no código adicionando um atributo alt em branco.

Example of nontext elements requiring and not requiring descriptive alternative text attributes.

Exemplo de imagem e borda decorativa

Exemplo inacessível:

<img src="fronteira.gif" />

Exemplo acessível:

<img src="borda.gif" alt="" />

O exemplo acessível não inclui nenhum texto. No entanto, o fato de o alt atributo estar incluído, mas não mostrar texto, indica a alguém que usa um leitor de tela que a imagem é decorativa e não contém informações críticas.

Para obter mais informações sobre como melhorar a acessibilidade, explore a página inicial inacessível do W3C antes e depois da demonstração.