Como saber se seu site é acessível?

F. Henrique
Todas as Letras
Published in
5 min readMay 18, 2022
Arte digital com fundo claro, com destaque para ilustração de pessoa sentada em uma cadeira, usando um computador do tipo Desktop. Ao lada direito da ilustração, título e subtítulo com letras pretas, com a seguinte frase: “Título: HTML Semântico; Subtítulo: Seguindo as boas prática de codificação HTML.”.

Um dos primeiros passos para garantir a acessibilidade no seu site é através da validação do seu HTML.

O HTML (Hyper Text Markup Language), é a linguagem de marcação que permite estruturar e apresentar nosso conteúdo web.

Além disso, o HTML dá aos mecanismos de busca o contexto necessário de que precisam para entender o que está contido em uma página web.

A falta desse contexto também impacta diretamente os algoritmos dos motores de busca e consequentemente pode afetar a experiência dos usuários.

Web Semântica — Integração homens-máquinas

A Web Semântica é um assunto muito importante, embora ainda bastante desconhecido (e até negligenciado).

A semântica, de um modo geral, é o estudo do significado das coisas (do conteúdo das “formas”).

No contexto do desenvolvimento web, podemos afirmar que é algo crucial para que a equipe de desenvolvimento (DEVS, Engenheiros e Designers) saibam precisamente o que as instruções de uma linguagem fazem, que é descrever o significado dos modelos, ao nível de entendimento (clareza, objetividade, detalhamento, coesão etc.) de alguma coisa.

O termo “Web Semântica” refere-se à visão do W3C (World Wide Web Consortium) da Web dos Dados Conectados.

Segundo a W3C, “A Web semântica é uma extensão da web atual que permite aos computadores e humanos trabalharem em cooperação.”[1] Ela interliga significados de palavras e, neste âmbito, tem como finalidade conseguir atribuir um significado (sentido) aos conteúdos publicados na Internet de modo que seja compreensível tanto pelo humano como pelo computador.

A ideia da Web semântica surgiu em 2001, quando Tim Berners-Lee, James Hendler e Ora Lassila publicaram um artigo na revista Scientific American, intitulado: “Web Semântica: um novo formato de conteúdo para a Web que tem significado para computadores vai iniciar uma revolução de novas possibilidades” (The Semantic Web — A new form of Web content that is meaningful to computers will unleash a revolution of new possibilities).”[2]

Em outras palavras podemos dizer que, a Web Semântica nada mais é, que uma web com toda sua informação organizada de forma que os computadores conseguem entender o sentido dos conteúdos que os humanos publicam na web.

Assim como na gramática, em programação a semântica trata da análise do significado das expressões, das informações e das unidades de programa, sendo importante para que os engenheiros de software saibam precisamente o que as instruções de uma linguagem fazem, que é descrever o significado de um programa ao executar suas atribuições em uma máquina, real ou simulada.

Seguindo as boas práticas de codificação HTML.

Montagem com os personagens Buzz lightyear e Wood da animação Toystore. Acima da imagem os dizeres “Div Tags” e na parte inferior da imagem a frase “Div Tags Everywhere” (tradução livre ”Div Tags em todos os lugares”). O Buzz está apontando para o horizonte enquanto o Wood observa a direção que está sendo apontada.

É comum encontrar muitas páginas web que ainda fazem uso de elementos <div> para a divisão de áreas de site e apps. O problema com o uso de elementos <div> é que o elemento por si só não tem sentido. Não adiciona valor semântico ou dá algum contexto para o que está dentro dele.

O uso correto das tags semânticas do HTML5 permite expressar melhor o que está em uma página web. Isso ajuda a melhorar a segmentação da página web de forma que diferentes partes — como o cabeçalho, rodapé, área de conteúdo principal, etc — podem facilmente ser distinguidos um do outro.

Mas o que isso tem a ver com acessibilidade?

Horas, tem tudo a ver com acessibilidade. Às vezes, o impacto de um código inválido ou sem semântica pode ser mínimo na acessibilidade. Outras vezes, pode ser grave, como quando há valores de IDs conflitantes na mesma página, levando um leitor de tela a identificar incorretamente um rótulo ou uma descrição de um elemento.

Por isso, os IDs devem ser exclusivos em uma página web. Se houver dois elementos na mesma página com o mesmo ID, os leitores de tela poderão ler as informações incorretamente. Por exemplo, eles podem ler o rótulo errado para um campo de entrada de texto, fazendo com que o usuário insira as informações erradas.

Nós não temos um problema de acessibilidade. Nós temos um problema de falta de conhecimento básico em HTML. Nicolas Steenhout.

Desde 2019, anualmente, a WebAIM (Web Accessibility In Mind), uma das principais organizações fornecedoras de experiência em acessibilidade da Web, tem realizado avaliações de acessibilidade nas páginas iniciais dos 1.000.000 principais sites da web.

Montagem dividida em dois quadros. No quadro de cima, destaque para a seguinte frase “a triste verdade”, com uma pessoa adulta(representando os Dibblers) ajudando uma criança (que representar a User Interface) a nadar enquanto outra criança (representando a experiência do usuário) está se afogando. No quadro de baixo, destaca a seguinte frase “a mais triste verdade” com um esqueleto (representando a acessibilidade) sentado em uma de cadeira no fundo do mar.

Erros detectados

Em um milhão de páginas iniciais, 50.829.406 erros distintos de acessibilidade foram detectados — superior a 50 erros por página. A tabela na figura abaixo mostra as 6 falhas mais comuns da WCAG 2, encontradas nesses últimos 4 anos, segundo o relatório da pesquisa da WebAIM.[3]

Print de tabela contendo os níveis de falhas, e as 6 falhas mais comuns da WCAG 2. Para visualizar a versão original dessa tabela, acesse o site: https://webaim.org/projects/million/#intro

Considerar para quem você está projetando é fundamental. Os sites são projetados para as pessoas e, infelizmente, as pessoas têm problemas.

Talvez eles não se identifiquem como deficientes, ou sua deficiência seja apenas temporária. Por essas razões, é cada vez mais urgente que tenhamos uma internet mais igualitária e equitativa, sendo fundamental desenvolver sites observando as diretrizes da W3C para proporcionar melhorias práticas e objetivas para todas as pessoas, além de ganhos consideráveis em usabilidade, acessibilidade, SEO e muito mais.

Em função disso, é sempre uma boa ideia validar seu HTML.

Mas calma, não criemos pânico. Validar páginas HTML não é uma tarefa difícil. Existem algumas ferramentas que podem nos auxiliar nessa tarefa, uma delas é o validador de HTML oficial do W3C. Basta acessar o validador de HTML oficial do W3C, escolher umas das três opções que a ferramenta oferece: (Validate by URL; Validate by file Upload; Validate by Direct input.) em seguida, basta mandar validar e conferir o resultado.

Se existirem erros, a ferramenta irá mostrar os detalhes de cada um com as instruções de como corrigir.

Se você chegou até aqui, meu muito obrigado, espero que esse conteúdo tenha sido útil e que tenha gostado, se gostou, me ajude na divulgação, compartilhando nas redes sociais para que esse conteúdo possa chegar a mais pessoas e assim promover uma web mais inclusiva.

Se tiver qualquer dúvida ou sugestão, entre em contato comigo.

Referências

  1. Semantic Web Frequently Asked Questions. World Wide Web Consortium (em inglês).
  2. The Semantic Web. Scientific American (em inglês).
  3. Páginas iniciais com as falhas mais comuns do WCAG 2. Pesquisa WEBAIM.
  4. O que é valor semântico e qual sua importância para a programação?

--

--