10 maneiras de tornar seu site mais acessível

Seu site é de fácil leitura para todos os visitantes?

21 de maio aconteceu o Global Accessibility Awareness Day, um dia para aumentar a conscientização sobre acesso e inclusão digital e melhorar a experiência na web para todos.

Este ano a WebAIM analisou um milhão de páginas iniciais em busca de problemas de acessibilidade e constatou que 98% dos sites tinham pelo menos uma falha de acessibilidade segundo a WCAG (Web Content Accessibility Guidelines – diretrizes de acessibilidade de conteúdo da web) em sua página inicial, como texto de baixo contraste, imagens sem texto alternativo e links vazios. Esses tipos de barreiras à acessibilidade tornam difícil ou impossível para alguns visitantes usarem seu site, como pessoas cegas, surdas ou com deficiência auditiva entre outras deficiências.

Nos te incentivamos a auditar seu site para garantir que seja acessível a todos os leitores; a WAVE Web Accessibility Evaluation Tool (ferramenta de avaliação de acessibilidade da web) pode identificar vários erros no seu site em segundos.

Neste artigo estão algumas dicas de acessibilidade na web para você começar e não deixe de explorar as diretrizes e os recursos no site da W3C Web Accessibility Initiative (WAI) (iniciativa de acessibilidade na web) para um aprendizado mais aprofundado.


Use um tema pronto para acessibilidade

Você pode escolher entre uma variedade de designs para o seu site, mas alguns temas têm recursos que aumentam a complexidade, dificultando o acesso de pessoas com deficiência ou visitantes que usam leitores de tela.

Quando estiver escolhendo um tema, considere um com accessibility-ready (pronto para acessibilidde), como o Balasana, um tema gratuito e minimalista para seu site de negócios; ou o Mayland, uma tema gratuito bastante visual que é ótimo para fotógrafos e criativos. Esses temas foram verificados pela equipe de revisão de temas e possuem os requisitos básicos de acessibilidade.

Exemplos de seis temas prontos para acessibilidade do WordPress.com (Barnsbury, Dalston, Mayland, Rivington, Maywood e Balasana)

Exiba o título e a descrição do seu site

Muitos temas permitem o upload de uma imagem de cabeçalho personalizada, que é uma maneira visual de destacar seu site, exibir o título do seu blog ou promover o nome da sua empresa. Mas alguns temas podem não suportar texto alternativo ou a descrição que aparece no lugar de uma imagem em uma página se a imagem não carregar na tela do visitante.

Em vez de colocar o título e descrição do site em uma imagem de cabeçalho, exiba o título e a descrição do site em formato texto. Vá em Gerenciar → Configurações e, na parte superior, em Perfil do site, preencha o Título do site e a Descrição do site. Em seguida, entre em Design → Personalizar, clique em Identidade do site e marque a caixa ao lado de Mostrar o título do site e a descrição.

O módulo em Meus Sites, onde você insere o Título e o Descrição do Site

Estruture suas páginas e postagens com títulos apropriados

Adicione títulos com o bloco de Título para organizar páginas e postagens e facilite o acompanhamento do conteúdo pelos leitores, o que é muito importante para páginas e post mais longos. Clique no ícone “i” na barra de ferramentas superior do editor de blocos para visualizar erros e tamanhos de cabeçalho incorretos.

Uma caixa pop-up que aparece no editor de blocos com informações sobre títulos e a estrutura de sua postagem ou página

Use fontes e cores legíveis

Fontes e cores são componentes essenciais no seu site, adicionam personalidade e estilo e fortalecem sua identidade visual online. Evite estilos e tamanhos de fonte e paletas de cores que dificultam a leitura do site e preste atenção ao contraste ou à diferença entre a escuridão do texto e a claridade do fundo de tela.

O editor de blocos exibirá uma mensagem de erro nas Configurações de cor quando detectar um contraste de cores ruim no bloco específico em que você estiver trabalhando.

Uma mensagem de erro exibida na barra lateral do editor de blocos quando um baixo contraste de cor é detectado

Descreva seus links com clareza

Ao criar um link para outra página ou publicação na web, descreva o texto linkado. Por exemplo, “clicar aqui” não é tão eficaz quanto “saiba como se inscrever na minha oficina de redação”.

A short paragraph with correctly linked text

Inclua legendas nas suas imagens

Ao adicionar uma imagem com o Bloco de Imagem, adicione uma descrição na legenda abaixo dela. Embora as legendas sejam opcionais, elas melhoram a experiência de todos os leitores, fornecendo mais contexto.

Uma foto de uma máquina de escrever vintage com uma legenda

Adicione texto alternativo às suas imagens

O texto alternativo é essencial para pessoas cegas ou que usam leitores de tela (elas podem ouvir o texto alternativo lido em voz alta) ou pessoas que desativaram imagens por motivos de velocidade ou largura de banda. O texto alternativo também é importante para o SEO do seu site, ele ajuda os mecanismos de pesquisa a entender sobre o que é o conteúdo do seu site

Ao adicionar o Bloco de Imagem, vá para as configurações do bloco à direita e adicione o texto alternativo na caixa Configurações da imagem.

Um exemplo de texto alternativo da imagem escrito no campo Texto alternativo nas configurações do bloco de imagens

Saiba mais sobre as diretrizes de acessibilidade de imagem do W3C.

Crie áreas de CTA facilmente clicáveis

Com o Bloco Botões, você pode adicionar botões de CTA (call to action) às suas páginas e posts rapidamente. Para aqueles que criam seus próprios botões com os Widgets de imagem, crie botões, ícones e outros elementos de CTA com áreas suficientemente amplas que sejam fáceis de clicar ou tocar em diferentes dispositivos.

Você também pode aplicar esta dica aos links de texto. Clicar em uma hashtag ou asterisco linkado em uma frase, por exemplo, especialmente em uma tela pequena, pode ser difícil para algumas pessoas.

Incluir legendas ou transcrições para conteúdo multimídia

Se o seu site possui conteúdo em vídeo, considere adicionar legendas ou incluir transcrições (documentando as falas, sons e ações vistas na tela). As transcrições de podcast também são incrivelmente úteis; aqui está uma transcrição de um episódio recente do Distributed com o neurocientista Adam Gazzaley.

É melhor que o conteúdo em vídeo e áudio não seja reproduzido automaticamente, mas se isso não for possível, as opções para pausar ou ajustar o volume devem ser óbvias na página.

Nunca pare de aprender e melhorar

Esta lista é apenas uma introdução a algumas boas práticas e diretrizes! Se você estiver interessado em aprender mais, explore os recursos no site da W3C Web Accessibility Initiative (WAI). Você também pode explorar maneiras de se envolver na melhoria da acessibilidade do WordPress.


Gostou dessas dicas? Que tal olhar alguns de nossos conteúdos para melhorar seu site ou blog:

cmparar-planos.png


Perdeu os últimos desenvolvimentos WordPress.com? Digite seu email abaixo para receber anúncios futuros diretos na sua caixa de entrada. Será enviado um email de confirmação antes de você receber as notificações - verifique a sua pasta spam, caso você não receba isto.

Junte-se aos outros seguidores de 2.033.551

Não use esses comentários para fazer perguntas, pedir suporte ou informar erros. Para isso, use os nossos fóruns ou o entre em contato com nossa equipe de suporte.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s

Crie seu novo blog ou site gratuitamente

Comece agora

%d blogueiros gostam disto: