SEO e Acessibilidade: Elementos básicos de SEO que tornam um site mais inclusivo.
Melhor do que um site otimizado para buscadores, é um site otimizado para pessoas.
De acordo com dados do Censo de 2010, disponibilizado pelo IBGE, cerca de 24% da população brasileira (quase 46 milhões de pessoas) declarou ter algum tipo de deficiência. A deficiência visual é a principal mencionada, sendo que 3,4% das pessoas tem grande dificuldade de enxergar ou não enxergam de modo algum. Na sequência, estão as dificuldades motoras com 2,3%, deficiência auditiva com 1,1% e deficiência intelectual com 1,4%.
Pensando nisso, separei algumas boas práticas de SEO que podem ser operadas focando na acessibilidade para pessoas, além dos mecanismos de busca.
Tenha um site operável em diferentes dispositivos
Seu site deve ser navegável em dispositivos móveis, tablets e computadores. Algumas práticas que auxiliam nesse ponto são:
- Garanta que seus textos são compreensíveis;
- Ofereça ações objetivas de navegabilidade;
- Desenvolva botões e links com tamanhos adaptados para cada dispositivo;
- Possibilidade o clique feito pelo teclado também;
Otimize o tempo de carregamento
Apenas 20% da população com acesso à internet no Brasil tem um conexão de qualidade. De acordo com o estudo “O abismo digital no Brasil”, realizado pela PwC, cerca de 13,5 milhões de domicílios possuem acesso à banda larga móvel por modem ou por chip, o que resulta em uma conexão lenta.
Pensar em pessoas com dispositivos antigos ou com internet limitada também é acessibilidade.
Otimize a acessibilidade para diferentes tecnologias
É fundamental que o site esteja funcionando em diferentes navegadores e possa ser lido por diferentes ferramentas de leitura de tela.
Utilize corretamente a semântica do HTML
O leitor de tela é uma ferramenta muito utilizada por deficientes visuais no uso de computadores e celulares.
Os leitores de tela acessam o conteúdo de uma página através da estrutura do HTML, como no <header>, <footer>, <labels> além de navegar por heading tags, botões, links e textos alternativos. Portanto, é imprescindível ter esses elementos otimizados.
Heading tags
As heading tags são marcações no HTML que separam e definem a importância de títulos e subtítulos de um texto. Elas seguem uma hierarquia de h1 a h6, sendo que h1 é o conteúdo mais importante.
<h1> heading 1 </h1>
<h2> heading 2 </h2>
<h3> heading 3 </h3>
<h4> heading 4 </h4>
<h5> heading 5 </h5>
<h6> heading 6 </h6>As heading tags devem ser utilizadas de forma lógica, seguindo sua hierarquia e fazendo sentido com o conteúdo da página.
- O h1 é o título mais importante. É ideal que cada página possua apenas uma marcação h1.
- As marcações h2 e h3 são normalmente utilizadas para subtítulos.
- As marcações h4, h5 e h6 são utilizadas para títulos de menor destaque, como itens de uma lista, separação de seções do texto ou destaques pequenos trechos.
Uma vez que leitores de tela utilizam as heading tags para navegar no conteúdo da página, não devemos pular hierarquias, como sair da tag h2 e ir para a tag h4, sem passar pela h3.
✅ Funciona:
<h2> heading 2 </h2>
<h2> heading 2 </h2>
<h3> heading 3 </h3>
<h4> heading 4 </h4>
<h2> heading 2 </h2>⚠️ Não funciona:
<h2> heading 2 </h2>
<h4> heading 4 </h4>
<h6> heading 6 </h6>Dica extra sobre Heading Tags:
Estas marcações facilitam a leitura dinâmica do texto. Por serem etiquetas que permitem a separação do texto em blocos de leitura, tornam-se um auxílio para pessoas com dificuldade de concentração.
Defina ações claras para os botões
Botões podem ser a última ação antes de uma grande conversão. Portanto, seu objetivo deve ser claro para a pessoa que navega no site.
Evite o uso do “clique aqui”.
- Se a ação for de comprar um produto, use “Adicionar ao carrinho”.
- Se a ação for para baixar um e-book, use “Baixar e-book em PDF”.
- Se a ação for compartilhar uma publicação, use “Compartilhar publicação”.
- Se a ação for cadastro em newsletter, use “Quero me cadastrar na newsletter”.
Além do conteúdo do botão, seu design também deve ser otimizado. O botão deve ter um bom tamanho para ser clicado em telas grandes e pequenas, além de poder ser clicado pelo teclado.
Dê contexto aos links
A troca de links entre páginas é fundamental para a navegação, para bom rastreamento e indexação nos mecanismos de busca. Evite o uso do “clique aqui” em links, sejam hyperlinks, links de menu ou breadcrumbs.
É importante contextualizar o link para a pessoa que está acessando o site. Se, no meu texto, pretendo incluir um link para outro artigo que explique a diferença entre pochetes e shoulder bags, devo incluir um link com o anchor text escrito “neste artigo, explicamos melhor a diferença entre pochetes e shoulder bags”.
Otimize corretamente o alt-text das imagens
Não é correto que o alt-text repita o título da página, não é correto que o alt-text seja o nome-do-arquivo.jpg, não é correto que o alt-text fique em branco (a não ser nos casos em que a imagem seja apenas decorativa).
Se a imagem for importante para o compreendimento do conteúdo, é importante que o texto alternativo seja detalhadamente descritivo. Até 130 caracteres são recomendados para o alt-text.
O texto alternativo de uma imagem deve contar quais são os elementos presentes na imagem, a disposição dos elementos, as cores dos elementos e qualquer outra informação que seja importante para a compreensão do conteúdo.
Se a imagem for um gráfico, o alt-text pode ser utilizado para explicar qual é o tipo de gráfico e quais informações estão sendo analisadas. Já a explicação dos números do gráfico deve ser inclusa no texto seguido da imagem.
Diminua a quantidade de cliques para realizar ações simples
Assim como o Googlebot não consegue ler elementos escondidos em menus dropdown ou accordions, os leitores de tela também não conseguem. Por isso, deve-se evitar elementos que aumentem a necessidade de cliques para acessar textos escondidos.
Pop-ups e modais também entram nesse tópico. Pode acontecer de leitores de tela “se perderem” ao encontrarem um pop-up e não conseguirem comunicar a pessoa usuária de que se trata de um modal, podendo atrapalhar toda a experiência de navegação.
Caso seja muito necessário incluir um modal, considere adicionar um botão de saída escrito “Fechar mensagem” ou “Fechar pop-up”.
Inclua formulários com etiqueta em cada campo
Sempre disponibilize a opção de contato por escrito. Formulários são uma boa opção.
Solicite apenas as informações essenciais alinhadas com o objetivo do formulário. Caso seja um cadastro em newsletter, apenas o e-mail da pessoa usuária já é o suficiente.
Caso seu formulário possua muitos campos, ou campos muito específicos, sempre forneça o formato de preenchimento. Um exemplo muito recorrente é o campo de data, que geralmente solicita o formato [DD-MM-AAAA].
Uma outra opção para formulários com datas, é incluir campos separados dia, mês e ano, conforme exemplo:
Se o formulário possuir mensagens de instrução de preenchimento que surgem ao passar o mouse por cima, garanta que seja possível acessá-las também pelo teclado.
Teste a acessibilidade do seu site
Existem ferramentas que permitem testar a acessibilidade diretamente pelo seu navegador.
Wave — Evaluation tool
A ferramenta Wave é bastante completa. Basta inserir o URL do site e ela faz uma auditoria, apontando erros de acessibilidade que podem ser corrigidos.
No caso de exemplo, que foi o site da Apple, os erros apontados foram: falta de label em diversos campos, problemas de contraste, textos pequenos demais e links vazios.
Google Lighthouse
O Lighthouse também oferece uma auditoria de acessibilidade e pode nos ajudar a encontrar possíveis erros. Entretanto, por ser uma auditoria superficial, recomendo utilizar outras ferramentas complementares.
Conclusão
Estes são apenas algumas otimizações básicas auxiliam no processo de otimização de um site focando não apenas em mecanismos de pesquisa, mas também na pessoa usuária.
Esse é um estudo que deve ser constante, pois cada dia temos ferramentas robustas e modernizadas que ajudam a tornar o ambiente digital mais inclusivo.
*
Fontes que utilizei para escrever esse artigo:
Big Hack — https://bighack.org
WebAim — https://webaim.org
