Resenha da acessibilidade web

A importância da semântica na acessibilidade

A semântica HTML ajuda aos sistemas de busca como o google a entenderem os principais assuntos de cada página e assim retornarem resultados de busca mais adequados e precisos. Mas uma boa semântica vai muito além, ela é fundamental para o entendimento dos conteúdos para pessoas que usam softwares leitores de tela.

Neste artigo vamos falar um pouco sobre semântica e como funciona o seu comportamento.

Cenários e exemplos

Vamos imaginar 3 cenários para ilustrar esse artigo:

1. Semântica adequada com todos os elementos devidamente identificados no HTML

Aqui podemos entender a hierarquia dos elementos e o “peso de cada informação”.
Este “peso” que temos visualmente para cada elemento é repassado para os softwares leitores de tela possibilitando que o usuário compreenda a hierarquia das informações.

Exemplo 01

2. Elementos sem nehuma semântica

Neste exemplo podemos ter uma ideia de como é navegar em uma página sem a semântica para ajudar a compreender a hierarquia.
É assim que as pessoas cegas, que não tem a referência visual, vão entender a sua página.
Todo o texto tem o mesmo tamanho e “peso” sem dar a devida hierarquia.

Exemplo 02

3. Simularemos alguns erros que encontramos com frequência em alguns sites que já analisamos

Neste exemplo mostramos o cenário mais comum, uma semântica feita sem o devido cuidado.
O programador utiliza recursos visuais de cor e tamanho de fonte para dar o peso as informações mas quando tiramos e essas informações de estilo CSS temos uma semântica que da um entendimento diferente ao conteúdo.

Com CSS ativo

Exemplo 03 com CSS

Com CSS inativo

Exemplo 03 sem CSS

Link para codepen com os exemplos: https://codepen.io/collection/XqqeMY/

Tags:, ,