Acessibilidade – como melhorar o seu webdesign

Autor

Quando falamos de webdesign, há muitas coisas envolvidas que são essenciais para o desenvolvimento de uma plataforma online, e uma delas em específico é a acessibilidade, mas que é pouco explorado.

De modo a entregar alta qualidade de conteúdo e uma boa experiência online, precisamos pensar em cenários diversificados de usabilidade, usufruindo de ferramentas de acessibilidade.

Então, para o post de hoje, nós estaremos navegando por algumas boas práticas e ferramentas valiosas para um webdesign mais amigável.

Boas Práticas de Acessibilidade

Podemos identificar as boas práticas como sendo as essenciais para a conexão com o seu usuário. Utilizando tamanhos ideais de fontes, textos alternativos em imagens, contrastes de cores e afins.

Tamanhos tipográficos legíveis

O tamanho das letras importa! E não apenas em telas de computador, celulares e tablet também devem ser tratados individualmente.

Seja utilizando uma ferramenta de construção de tema como o Elementor, ou de layouts como o Figma, você precisa pensar o seu site/app para diferentes tamanhos de dispositivos. Configurando os tamanhos de forma particular em cada um deles.

Por exemplo, em telas mobile, o texto legível recomendado é de 14px para cima, funcionando para a maioria dos usuários.

comparação de tamanho de fontes

Particularmente, eu utilizo 14px ou 15px para celulares e e 16px para tablet. Pois consegui perceber uma melhor leitura com esses tamanhos de texto, quando comparado com textos menores.

Então não se esqueça de dar atenção para isso, pois os usuários não permanecerão no seu site/app se estes não conseguirem consumir o seu conteúdo.

Hierarquia coerente de títulos – Tag HTML

As tags HTML são as chamadas hierarquias de texto, como H1 (heading 1 – ou – título 1), H2, H3.. e assim por diante.

Estas tags são utilizadas para guiar a leitura e melhorar o SEO.

Elas possuem uma ordem que deve ser seguida, por ordem decrescente, sendo H1, H2, H3 e por diante. Pois assim, usuários com dificuldades em enxergar conseguem ler o seu conteúdo com a ajuda de suas ferramentas costumeiras.

utilização hierárquica para acessibilidade tag html

De modo que, uma página ou conteúdo, deve conter apenas um H1, e no máximo de dois à três H2. As demais tags – H3, H4 – não possuem limite de uso.

Contraste de cores

Utilize a combinação de cores correta!

Fazer o uso das cores certas em botões e links pode mudar a forma como o seu usuário te visualiza. Ter uma boa pontuação em contraste de leitura pode fazer a diferença para pessoas com daltonismo.

Abaixo podemos ver alguns exemplos bons (como o da esquerda) e outros nem tão bons (à direita) de utilização de cores.

contraste de cores chart de visibilidade

Além disso, mudar o formato de link com interação de mouse – como por exemplo, utilizando um sublinhado para destacar – ajuda ainda mais na navegação.

Texto alternativo para Imagens

Popularmente conhecido como Alt Text, os textos alternativos em imagens permitem que pessoas com problema de visão, consigam utilizar programas de leitura para descrever imagens para elas.

Então, é importante que você descreva o máximo possível de uma imagem, como no exemplo abaixo.

pacote vermelho de doritos sabor queijo nacho

Ferramentas de acessibilidade

Para te auxiliar nessa jornada de melhorar a acessibilidade do seu site/app, vou listar abaixo algumas ferramentas que têm me ajudado a manter uma pontuação de 90% no Web Vitals.

Bom, essas foram algumas das dicas e ferramentas para que você possa melhorar o seu site/app e ser inclusivo com mais de seus usuários.

Faça você mesmo alguns testes na sua plataforma com o Lighthouse e veja como se saiu. Precisa melhorar? Então vamos lá!


Não se esqueça de ler também nossos conteúdos sobre Criatividade e Design aqui no blog da Aztec.

Te vejo na próxima!

Facebook
Twitter
LinkedIn

Leia também

Utilizamos cookies para qualificar sua experiência nesta página e aperfeiçoar nosso site. Ao clicar em “ok, entendi”, você concorda com esta utilização. Mais informações podem ser obtidas em nossa Política de cookies.

💬 Precisa de ajuda?