Ícone do LinkedIn Ícone do RSS Ícone do Lnk.Bio

08 Jan 2021 | 6 minutos • Dicas e recomendações

Melhorando a acessibilidade do blog

Deixando o conteúdo disponível para mais pessoas

Ingrid Machado

Ingrid Machado

Engenheira de computação, especialista em engenharia de software. Autora deste querido blog.

Image de capa do post Melhorando a acessibilidade do blog
Foto de Tamara Bitter, via Unsplash

Já faz um tempo que venho pensando em melhorar a acessibilidade do blog. Eu sempre coloco texto alternativo nas imagens, mas sei que as ferramentas de acessibilidade precisam de mais informações. Como a minha intenção principal é compartilhar conhecimento, não posso ignorar que alguns ajustes são necessários para que o conteúdo fique acessível para todos. Sendo assim, decidi fazer a análise e alterações necessárias no layout atual para deixar o conteúdo em conformidade com os padrões de acessibilidade.

Como melhorar a acessibilidade

Uma forma de melhorar a acessibilidade de um site é seguindo as recomendações da W3C. Eles possuem uma documentação com as Diretrizes de Acessibilidade para o Conteúdo da Web (WCAG), que é um bom ponto de partida. A W3C fornece esse checklist para verificar o quanto a página está em conformidade e assim é possível ter certeza da abrangência dos pontos de acessibilidade, sem deixar nenhum item importante de fora.

Níveis de conformidade

A W3C divide a conformidade de acessibilidade em 3 níveis:

A página de ajuda da ferramenta que utilizei para a análise de acessibilidade disponibiliza uma tabela com o mapeamento entre os erros encontrados e o nível de conformidade do W3C. Eu não cheguei a realizar esse mapeamento, mas pelos resultados que atingi, certamente não passei do nível A.

Ferramenta para avaliação

Para entender o nível de acessibilidade atual, usei a ferramenta online WAVE. A WAVE avalia o site para identificar erros de acessibilidade e de não conformidade com a WCAG, exibindo todos os pontos de atenção da página, além da estrutura HTML de forma gráfica e os elementos com acessibilidade. Como mencionei, a WCAG é um checklist de boas práticas, mas usar uma ferramenta como a WAVE facilita muito na análise e nos permite focar nos ajustes.

É possível fazer a avaliação online, incluindo o endereço da página a ser avaliada no formulário da home ou incluindo o plugin da WAVE no navegador.

Tela com o resultado da avaliação feita a partir da página da WAVE

Tela com o resultado da avaliação feita a partir da página da WAVE

Tela com o resultado da avaliação feita com o plugin no Chrome, no blog rodando localmente

Tela com o resultado da avaliação feita com o plugin no Chrome, no blog rodando localmente

O menu à esquerda mostra todos os itens de atenção e o conteúdo à direita marca onde cada um desses itens está na página. Ao clicar em algum item na aba “Details”, a localização do item é exibida. Clicando nessa localização, é possível ler a referência do ponto de atenção ou exibir o código fonte do elemento.

O resultado da análise é dividido em 5 partes:

Summary

A primeira aba exibe um resumo dos pontos de atenção encontrados na página. O teste inicial do blog, feito a partir da página da WAVE, encontrou:

Aba Summary

Details

Esta aba mostra em detalhes cada um dos itens exibidos na aba anterior. Clicando em cada ícone, a ferramenta exibe onde este erro está na página. Clicando nos ícones com um “i”, a aba “Reference” é aberta mostrando mais informações a respeito da categoria do item.

Aba Details

Reference

Descreve as informações do item selecionado na aba “Details”. São explicados os seguintes tópicos para cada item:

Aba Reference

Structure

Exibe a estrutura HTML do site de forma gráfica. Serve como apoio caso não tenha espaço suficiente nos elementos HTML para exibir todos os ícones dentro da página.

Aba Structure

Contrast

Aba com os resultados e detalhes da avaliação de contraste da página. Caso haja erro de contraste, ao clicar nos ícones do erro na página, essa aba é exibida e os resultados para o teste de contraste são mostrados conforme o seletor de cor é movido. Na imagem de exemplo, selecionei uma cor onde os dois testes (para o padrão AA e AAA) estão aprovados.

Aba Contrast

Resultado após melhorias

Os principais itens de atenção do blog eram relacionados com o idioma, o modal de cadastro na newsletter e erros estruturais. Também precisei mudar as cores dos elementos mais claros na página inicial para corrigir os erros de contraste.

Rodando no site da WAVE e com o plugin, notei uma diferença no número de erros encontrados. Como localmente foram exibidos mais erros, fiz os ajustes no blog seguindo o relatório de erros gerado localmente.

Resultado da análise na página inicial do blog rodando localmente, antes das alterações

Resultado da análise na página inicial do blog rodando localmente, antes das alterações

Resultado da análise na página inicial do blog rodando localmente, após as alterações

Resultado da análise na página inicial do blog rodando localmente, após as alterações

Com os ajustes, atingi os seguintes resultados na página inicial:

Os alertas são principalmente pelos links iguais que ficam bem próximos (imagem e título do card do post). Pelo jeito que o layout foi feito, a imagem é um background na div, então a sugestão da WAVE não serviu no meu caso e vou precisar pesquisar melhor.

Como foi uma alteração inicial, já sabia que não conseguiria zerar os erros e alertas, mas já foi uma grande mudança.

Resultado da análise na página de post do blog rodando localmente, antes das alterações

Resultado da análise na página de post do blog rodando localmente, antes das alterações

Resultado da análise na página de post do blog rodando localmente, após as alterações

Resultado da análise na página de post do blog rodando localmente, após as alterações

Na página dos posts em si, eu corrigi 2 erros e adicionei 4 especificações ARIA. Uma recorrência no item de elementos estruturais é o meu uso de H1 para iniciar o conteúdo do texto. Como o título no Markdown já adiciona a tag H1, o correto seria iniciar os textos com a tag H2. Para que os inscritos no RSS não recebam um email gigantesco avisando que todos os posts do blog foram alterados, eu vou manter o padrão para os posts seguintes, começando por esse.


A ferramenta é bem simples de utilizar e as alterações foram bem tranquilas de fazer. As informações na aba “Reference” foram suficientes para a maioria das alterações e as dúvidas que tive foram resolvidas com uma pesquisa no Google.

Espero que esses ajustes facilitem a vida de quem utiliza ferramentas de acessibilidade para navegar na internet e estou sempre aberta a sugestões de melhorias.

Caso tenha interesse em fazer essas melhorias no seu blog/site, recomendo a leitura da documentação da W3C sobre a WCAG e a documentação da WAVE.

Até a próxima!


  1. Accessible Rich Internet Applications, especificação para aumentar a acessibilidade das páginas ↩︎

O link do post foi copiado com sucesso!

Mais conteúdos de Ingrid Machado

Imagem de capa do post FutureMe

04 Mar 2024 • Dicas e recomendações

FutureMe

Já faz algum tempo que comecei a escrever cartas no FutureMe. Falo sobre elas na newsletter, mas reparei que nunca comentei a respeito no blog. Por ser uma ferramenta muito legal e que pode ser usa...

2 minutos

Imagem de capa do post Como acessar as notas e destaques do Kindle online

30 Out 2023 • Dicas e recomendações

Como acessar as notas e destaques do Kindle online

Uma dica muito útil para quem usa Kindle é o acesso online das notas e destaques. Quando acessamos esse conteúdo dentro do próprio Kindle, ele fica com uma visualização bem simples, muito parecida ...

0 minutos

Imagem de capa do post Vantagens do Kindle

27 Fev 2023 • Dicas e recomendações

Vantagens do Kindle

Demorei um bom tempo para me render ao Kindle quando conheci ele. Principalmente, porque fazia parte do grupo que valoriza a experiência do livro: tirar da embalagem, sentir o cheio de novo impregn...

4 minutos

linkedin icon
LINKEDIN
Twitter icon
TWITTER
RSS icon
RSS
Lnk.Bio icon
LNK.BIO

Ingrid Machado © 2019 - 2024

• Ingrid Machado © 2019 - 2024

• Layout por Victoria Facundes • Desenvolvido por Cristhian Rodrigues

VOLTAR AO TOPO

voltar para o topo