10 maneiras de tornar seu site acessível

Todo dono de site quer atrair o maior número possível de visitantes. No entanto, poucos tomam as medidas necessárias para garantir que seu site possa ser usado por todos. Existem milhões de usuários por aí que confiam que os sites estão acessíveis e, se você não tiver tempo para entender suas necessidades, todos estarão perdendo.

Felizmente, a acessibilidade não é difícil de implementar. Você só precisa entender os problemas subjacentes que podem tornar um site difícil ou impossível de ser usado por certas pessoas. Depois disso, você pode tomar medidas para evitar esses erros e tornar seu site receptivo a todos os visitantes.

Neste artigo, veremos o que a acessibilidade do site realmente envolve e por que ela é tão importante. Também descreveremos as técnicas de acessibilidade mais importantes e mostraremos como implementá-las no seu site. Vamos indo!

Uma Breve Introdução à Acessibilidade na Web

 

Idealmente, todos devem poder usar qualquer site na internet. Não importa se eles têm uma condição que afeta seus recursos ou que hardware e software precisam usar. Este é o princípio principal por trás do conceito de acessibilidade na web .

O fato é que milhões de internautas têm necessidades especiais e deficiências que podem dificultar ou mesmo impossibilitar o uso de determinados tipos de sites. Ao projetar seu site com esses desafios em mente, você pode garantir que ele seja bem-vindo para o maior número de usuários possível.

Embora haja muitas deficiências e condições que possam afetar o modo como as pessoas usam sites, vamos dar uma olhada em algumas das categorias mais comuns de deficiências:

  • Visão : Isso inclui uma incapacidade parcial ou total de ver ou perceber contrastes de cores.
  • Audição : alguns usuários têm uma capacidade reduzida de ouvir.
  • Habilidades motoras : são pessoas com dificuldade de mover partes de seus corpos, inclusive fazendo movimentos precisos (como ao usar um mouse).
  • Convulsões fotossensíveis : Condições como a epilepsia podem causar convulsões que geralmente são desencadeadas por luzes piscantes.
  • Deficiências cognitivas : Existem também muitas condições que afetam a capacidade cognitiva, como demência e dislexia.

Para contornar esses problemas, muitas pessoas usam tecnologias assistivas para navegar na Internet. Isso inclui leitores de tela que vocalizam o texto em cada página, software de reconhecimento de fala que converte fala em texto, terminais em Braille e até teclados alternativos que acomodam necessidades especiais.

Como tal, é possível que quase qualquer pessoa navegue na web. Além disso, você pode melhorar significativamente suas experiências projetando seu site com a acessibilidade em mente.

Por que tornar seu site acessível deve ser uma prioridade

 

Como você pode imaginar, os benefícios para o usuário de tornar seu site acessível são enormes. Isso é uma coisa importante para se fazer simplesmente de uma perspectiva humanística, pois garante que você não exclua usuários com deficiência.

Claro, melhorando a acessibilidade em seu site fornece -lhe com uma série de benefícios também. Crucialmente, isso imediatamente expande seu público potencial . A matemática deve ser evidente aqui. Se mais usuários puderem usar seu site, você terá aumentado exponencialmente sua base de usuários em potencial. Isso poderia colocá-lo um passo à frente dos concorrentes que podem não ter dado os mesmos passos em direção à acessibilidade.

Pensando em termos de acessibilidade, você também pode beneficiar todos os visitantes, não apenas aqueles que se enquadram nas categorias que listamos anteriormente. Muitas das considerações envolvidas em tornar seu site mais acessível também melhorarão seu design e usabilidade gerais. Além disso, você estará tornando seu site mais flexível e “à prova do futuro” ao longo do caminho.

Por fim, é importante observar que muitos países têm leis relacionadas à acessibilidade da Web e de software. Como tal, você pode ser legalmente obrigado a corresponder aos padrões específicos de acessibilidade .

Felizmente, você não está sozinho. O projeto da Iniciativa de Acessibilidade à Web funciona desde 1997 para ajudar a melhorar a acessibilidade online. Da mesma forma, o WordPress tem sua própria equipe Make WordPress Accessible, que se concentra especificamente na plataforma. Há também inúmeros outros projetos voltados para a comunidade, como o A11Y , que fornecem orientação e recursos para ajudá-lo a criar sites altamente acessíveis.

10 maneiras de tornar seu site acessível

Agora vamos ver algumas maneiras de tornar seu site mais acessível imediatamente.

Primeiro, devemos mencionar que uma das coisas mais importantes que você precisa fazer é escolher o Sistema de Gerenciamento de Conteúdo (CMS) correto para executar o seu site.

Quando se trata de acessibilidade, poucos CMSs podem dominar o WordPress . Como tal, estaremos referenciando várias soluções específicas para a plataforma WordPress em todo este guia (embora você possa encontrar ferramentas de acessibilidade para praticamente qualquer CMS).

1. Verifique se o seu site é compatível com o teclado

Este passo é também o mais importante. Simplificando: para um site ser acessível, ele deve funcionar sem o uso de um mouse. Isso ocorre porque muitas tecnologias assistivas dependem da navegação somente por teclado. Como tal, deve ser possível usar todos os principais recursos do seu site por meio de um teclado e nada mais. Isso inclui acessar todas as páginas, links, conteúdo e assim por diante.

A maneira mais comum de navegar usando um teclado é com a tecla Tab . Isso vai saltar entre as áreas em uma página que pode ter ‘foco do teclado’, que inclui links, botões e formulários. Portanto, seu objetivo deve ser garantir que todo o conteúdo e navegação possam ser acessados ​​usando a guia .

 

Isso é fácil de testar – basta usar seu próprio site sem mouse. Se você achar que não é possível acessar determinados elementos ou que a navegação é difícil, é possível identificar esses problemas e resolvê-los. Para ajudá-lo com isso, o WebAIM fornece um guia prático para o design de acessibilidade do teclado .

2. Certifique-se de que todo o conteúdo seja facilmente acessível

Além de tornar seu site amigável ao teclado, você também precisa garantir que todo o conteúdo da página esteja realmente acessível. Embora isso geralmente não seja um problema, pode ser um problema quando uma página contém conteúdo dinâmico .

Em suma, o conteúdo é dinâmico se puder ser alterado sem a página que está sendo recarregada. Isso pode se tornar um problema se o site não informar as ferramentas assistivas da alteração. Por exemplo, muitos leitores de tela só ‘lerão’ o site como aparece quando é carregado pela primeira vez. Como tal, você precisa torná-lo ciente quando algo muda ou o usuário perderá o novo conteúdo.

Uma maneira de fazer isso é usando os pontos de referência do ARIA . Estas são tags que você adiciona ao conteúdo para defini-lo claramente na página. Você pode marcar o conteúdo dinâmico como uma “região ativa”, que permite que leitores de tela e dispositivos semelhantes entendam o conteúdo à medida que ele é alterado.

O ARIA também é útil para tornar a navegação mais direta, pois permite que os usuários pule diretamente para um conteúdo específico. Dessa forma, eles não precisarão navegar por todos os itens de menu apenas para acessar seu conteúdo principal e passar facilmente por outras seções com links pesados. O mesmo efeito pode ser obtido usando os links “pular para a base” , que são links invisíveis que permitem que os usuários pulem menus. No entanto, o ARIA tende a ser mais flexível e eficiente.

O manual Make WordPress Accessible contém uma seção sobre pontos de referência ARIA que você pode querer verificar. Também vale a pena notar que todos os temas do WordPress com a tag de acessibilidade pronta terão pontos de referência ARIA adicionados por padrão.

3. Adicione texto alternativo a todas as imagens

Ao adicionar imagens ao WordPress , você provavelmente já percebeu esse campo.

alt

 

Aqui, você pode inserir o texto alternativo para uma imagem. Este texto age como um substituto para a imagem se não for carregado.

 

No entanto, o texto alternativo (às vezes chamado de atributos alt, descrições alt ou tags alt) também é acessado pelos leitores de tela para ‘ler’ a imagem. Você pode, portanto, usar este campo para descrever uma imagem , dando contexto a usuários que, de outra forma, a perderiam.

Como se isso não bastasse, o texto alternativo também pode ajudá-lo a melhorar o SEO do seu site . Apenas certifique-se de escrever resumos descritivos de cada imagem e tente incluir suas palavras-chave sempre que fizer sentido.

4. Escolha suas cores com cuidado

Muitas vezes falamos sobre daltonismo como se fosse um problema em preto e branco. No entanto, é mais um espectro desde que pessoas diferentes percebem as cores de formas únicas (lembre-se The Dress )? Assim, você precisa garantir que as cores selecionadas em seu site sejam bem contrastadas para garantir que todos possam distinguir vários elementos da página.

A questão mais premente é garantir que o texto se destaque em segundo plano. Idealmente, você deve definir uma cor escura contra uma luz, certificando-se de que eles não sangram um no outro.

Digamos que você queira usar um esquema de cores azul. Você gostaria de evitar a criação de uma paleta onde os tons são muito semelhantes em matiz e saturação.

 

Isso é muito difícil de ler. Em vez disso, um contraste mais claro funciona muito melhor.

 

Você também vai querer evitar cores conflitantes que possam causar fadiga ocular. Confira esta capa de álbum indutor de dor de cabeça se você não acredita em nós.

Há diversas ferramentas on-line que você pode usar para encontrar e testar combinações de cores. O WebAIM tem um , e também gostamos do Contrast Checker, pois ele fornece uma pontuação em tempo real. A última ferramenta também permite que você mude para monocromático para ter uma ideia aproximada de quão eficaz é qualquer combinação.

5. Use cabeçalhos para estruturar seu conteúdo corretamente

Outra tarefa importante para tornar seu site acessível é estruturar seu conteúdousando cabeçalhos com cuidado. Isso tornará seu conteúdo muito mais fácil de entender, digerir e melhorar o fluxo.

Além disso, cabeçalhos claros também ajudam os leitores de tela a interpretar suas páginas. Isso facilita muito a navegação na página . Também é simples de fazer, pois você só precisa garantir que você use os níveis de cabeçalho corretos em seu conteúdo.

Por exemplo, você deve usar apenas um H1 por página – geralmente como o título da página. Isto pode ser seguido por subposições começando com H2, que pode então ser aninhado com H3, seguido por H4. Estes devem sempre ser usados ​​em ordem, então você deve evitar usar um H4 diretamente após um H2 (e assim por diante).

6. Projete seus formulários para acessibilidade

Os formulários são um complemento útil para a maioria dos sites, mas devem ser projetados com cuidado. O mais importante é garantir que cada campo seja claramente rotulado . Você também deve procurar colocar os rótulos adjacentes aos respectivos campos. Embora um usuário com visão possa facilmente corresponder um rótulo ao campo ou opção correspondente, isso pode não ser óbvio para alguém que usa um leitor de tela.

Você também deve procurar fornecer instruções e informações de maneira clara que o usuário possa entender facilmente. Para criar formulários acessíveis no WordPress, você pode usar uma ferramenta como o construtor Caldera Forms . Este é um plugin especificamente focado em acessibilidade, o que tornará o seu trabalho muito mais fácil.

7. Não use tabelas para nada, exceto dados tabulares

Quando se trata de exibir dados, as tabelas são úteis. Eles tornam muito mais fácil para todos os usuários, incluindo aqueles que usam tecnologia assistiva, analisar uma grande quantidade de dados. Para obter o máximo benefício, no entanto, você vai querer manter suas mesas o mais simples possível .

Além disso, é melhor evitar o uso de tabelas apenas para dados tabulares. Por exemplo, você nunca deve usar uma tabela para layouts, listas ou qualquer outra coisa. Isso pode ser confuso para leitores de tela e dispositivos semelhantes.

Se você não precisa criar tabelas mais complexas, você pode seguir este guia de W3 . Ele mostra como codificar uma tabela enquanto mantém os padrões de acessibilidade.

8. Ativar texto redimensionável que não quebra seu site

A maioria dos dispositivos e navegadores permite que os usuários redimensionem o texto, o que pode ser útil para pessoas com deficiências visuais. No entanto, se você não criar seu site para oferecer suporte a esse recurso, redimensionar o texto poderá prejudicar seu design ou dificultar a interação com seu site.

Uma boa prática é evitar unidades absolutas , como especificar o tamanho do texto usando pixels. Em vez disso, use tamanhos relativos, que permitem que o texto seja dimensionado dependendo de outro conteúdo e tamanho da tela.

Você também nunca deve desativar a escalabilidade do usuário, pois isso dificultará o redimensionamento do texto pelos usuários.

Para garantir que seu site atenda a esses critérios, teste seus tamanhos de fonte detalhadamente, aumentando o nível de zoom em seu próprio navegador. Se você perceber que o conteúdo se torna difícil de ler ou navegar, confira este guia do WebAIM que discute os tamanhos das fontes.

9. Evite Mídia Automática e Navegação

Os arquivos de mídia que reproduzem automaticamente têm sido uma ruína dos usuários da Internet desde os tempos do MySpace . Por mais irritante que seja a música ou os vídeos começarem quando uma página é carregada, essa é uma questão ainda maior em termos de acessibilidade .

Por exemplo, descobrir como desligar a mídia pode ser difícil quando se usa um leitor de tela, enquanto outros usuários podem simplesmente ficar confusos ou mesmo assustados com o ruído repentino. Portanto, você deve evitar incluir elementos que iniciem sem que o usuário os avise primeiro.

Também é melhor evitar a navegação automática, como carrosséis e controles deslizantes . Isso pode ser incrivelmente frustrante se o espectador precisar de mais tempo para absorver todas as informações antes de passar para o próximo slide ou seção.

10. Crie conteúdo com acessibilidade em mente

Finalmente, chegamos ao núcleo do seu site: seu conteúdo . Embora o design do seu site para acessibilidade seja extremamente importante, você deve ter as mesmas considerações em mente ao criar conteúdo.

Isso significa prestar atenção a coisas relativamente pequenas, como sempre escrever acrônimos, para pontos mais importantes, como garantir que você forneça a todos os seus links nomes e texto âncora exclusivos e descritivos .

Se você leu todo este tutorial, você já tem uma ideia clara dos possíveis problemas que podem causar alguns problemas aos usuários. Tenha em mente que, assim como seu site deve ser usado por qualquer pessoa, seu conteúdo deve ser acessível e legível, independentemente de quem o descubra.

Websites para todos

Certificar-se de que seu site seja receptivo ao maior número possível de pessoas deve ser uma das principais prioridades. Não há razão para excluir ninguém, especialmente porque é relativamente fácil evitar fazê-lo. Seus usuários não apenas agradecerão, mas você também verá benefícios na forma de aumento de tráfego e conversões.

Ao dedicar um tempo para entender as possíveis falhas em seu design e conteúdo, você pode garantir que seu site esteja otimizado para acessibilidade hoje.