Web Design Acessível em WordPress – Quão Importante é a Acessibilidade no Web Design?

Por: Joseph de Souza

O Que é a Acessibilidade no Web Design?

   De acordo com o W3C, “A acessibilidade web significa que websites, ferramentas e tecnologias são concebidos e desenvolvidos de forma a que pessoas com deficiência os possam utilizar. Mais especificamente, as pessoas conseguem: perceber, compreender, navegar e interagir com a Web.”
Isto significa que o website tem de ser acessível a todos, incluindo pessoas com deficiência e utilizadores de leitores de ecrã.

Desvantagens de um Website Muito Chamativo com Muita Interatividade

  Evite ter um website demasiado chamativo, com muitos elementos interativos como efeitos hover, slideshows, carrosséis, sliders de imagens e animações. Em primeiro lugar, o tempo de carregamento da página irá aumentar e isso irá, sem dúvida, reduzir as conversões. Se o seu website demorar mais de 3 segundos a carregar, existe uma forte probabilidade de o utilizador abandonar o site. De facto, de acordo com um estudo da Google de março de 2016, 53% das visitas são abandonadas se um site móvel demorar mais de 3 segundos a carregar.
No uso diário, o carregamento será ainda mais lento em dispositivos móveis, uma vez que as velocidades de internet móvel são geralmente inferiores. As animações presentes no website acabam por não produzir os resultados desejados.
Por exemplo, abaixo encontra-se uma captura de ecrã de um website WordPress: à esquerda, um site interativo com slideshow, efeitos flip box, carrossel e outros elementos interativos; à direita, um website simples concebido para acessibilidade.

O Problema com Sliders ou Carrosséis

A maioria dos proprietários de websites coloca informação valiosa dentro de sliders ou carrosséis. Esta informação só é revelada se o visitante clicar, o que é altamente improvável, uma vez que uma grande parte dos utilizadores não tem grande familiaridade com computadores. O mesmo acontece com os slides: estes mudam rapidamente e as pessoas não permanecem tempo suficiente para ler todo o texto.
Além disso, os slides aparecem muito pequenos em dispositivos móveis (como se pode ver na captura de ecrã acima). Os motores de busca irão ignorar o texto presente nos slides, pois este é tratado como imagem. Os motores de busca também podem ignorar texto que necessita de JavaScript para ser apresentado.
Estudos mostram que apenas 1% das pessoas clica num slider, e dessas, 98% clicam apenas no primeiro slide.
Pessoas com deficiência ou utilizadores de leitores de ecrã podem ter dificuldade em aceder a conteúdos apresentados principalmente através de slides, carrosséis, efeitos hover e animações. Se testar este tipo de conteúdo com leitores de ecrã, irá perceber que estes não leem o texto. Apenas leem texto em HTML simples. Mesmo texto oculto por JavaScript é ignorado. Isto não está em conformidade com as leis que garantem igualdade de acesso online para pessoas com deficiência.

Links Internos e Sliders

  Teste os links existentes nos sliders. A menos que tenha adicionado outro menu com links em HTML simples, é provável que os motores de busca os ignorem, pois não são acessíveis. O mesmo acontece com leitores de ecrã.
Ter links em texto simples também permite que todas as páginas sejam indexadas pelos motores de busca. Embora tudo o que foi referido se aplique a qualquer tipo de website, é importante salientar que sites do setor da saúde — como clínicas médicas, clínicas dentárias, dentistas, médicos e hospitais — têm uma necessidade ainda maior de cumprir as normas de acessibilidade.

Gráficos Feitos com Texto

  Se um gráfico for composto por texto (ver captura de ecrã abaixo), esse texto não será legível pelos motores de busca nem por leitores de ecrã.

Interatividade e Acessibilidade Web

  Não utilize demasiada interatividade, pois será difícil cumprir os requisitos de acessibilidade. Já existem leis neste âmbito nos EUA, Canadá, Reino Unido, Europa, Austrália e Nova Zelândia. Caso o seu website esteja abaixo de 90% de conformidade, poderá existir o risco de ações judiciais, especialmente se o website for do setor da saúde, como médicos, dentistas, hospitais, etc.
Existem também pop-ups que surgem no meio do ecrã e que são ainda mais irritantes em dispositivos móveis. Os pop-ups interrompem a experiência do utilizador e causam uma má impressão. Assim, a menos que sejam extremamente importantes e absolutamente necessários, evite utilizá-los.
De seguida, temos o chat ao vivo no WhatsApp, bem como botões de “marcar consulta”. A menos que consiga responder rapidamente, não utilize o botão de chat ao vivo. O botão de marcação de consulta só deve ser usado se estiver ligado a um software de marcações ou a um calendário. Estes botões não podem ser lidos por leitores de ecrã e não estão em conformidade com as leis de acessibilidade. Veja a captura de ecrã abaixo — à esquerda é apresentado um exemplo de pop-up num dispositivo móvel e à direita um slideshow.

Como Conceber para Acessibilidade Web

  A maioria dos websites melhor posicionados neste nicho são websites simples, com muito pouca interatividade. Por exemplo, limitam-se a listar todos os seus serviços num grande menu no topo da página, ou têm um menu principal e um menu lateral.
Os princípios principais são:
1. Todo o texto em formato HTML, com elevado contraste entre fundo e primeiro plano (mínimo de 4,5:1) — texto preto sobre fundo branco funciona melhor
2. Links de texto preferencialmente sublinhados e, novamente, com elevado contraste entre fundo e primeiro plano (mínimo de 4,5:1)
3. Texto ALT para todas as imagens que sejam importantes e não meramente decorativas
4. A organização do conteúdo deve ter uma estrutura clara de títulos e seguir uma ordem lógica (por exemplo, H1, H2, H3)
5. Os elementos de navegação devem ser consistentes em todas as páginas do website.

Website WordPress Simples e Acessível

  Segue-se a descrição de um exemplo de um website simples, facilmente indexável pelos motores de busca e totalmente acessível. Existem dois menus: um menu principal e um menu lateral. O menu principal pode estar abaixo do cabeçalho ou ao lado do logótipo.
O cabeçalho pode conter um logótipo seguido de um menu, mas também pode optar por um cabeçalho de largura total em vez do menu ao lado do logótipo. Este website de teste utiliza o tema gratuito Astra e é totalmente responsivo, incluindo menus responsivos.
Foi também utilizada uma família tipográfica personalizada alojada localmente. As fontes Google também podem ser alojadas localmente, bastando ativar essa opção no painel de controlo do Astra.
Pode escolher as combinações de cores e tipos de letra da sua preferência
O website acessível utiliza apenas alguns plugins: Classic Editor, Max Mega Menu, UpdraftPlus - Backup/Restore, Wpdevart vertical menu e Yoast SEO. Eu acrescentaria também o Wordfence Security. O WP Super Cache pode ser adicionado se existir um número considerável de visitantes no website.

Comparação entre um Website WordPress Chamativo e Interativo e um Website WordPress Simples

  E por fim, aqui está um vídeo para ilustrar os efeitos de um website WordPress chamativo, com muita interatividade e que não cumpre as diretrizes de acessibilidade, comparado com um website WordPress simples que é totalmente compatível.

Sobre o Autor

Joseph de Souza é um destacado consultor SEO freelance e desenvolvedor web em Goa, Índia, com mais de 18 anos de experiência em marketing na internet.
Tem um historial comprovado, ajudando várias empresas a aumentar significativamente o tráfego e, consequentemente, as receitas e lucros.
Além do inglês, Joseph otimizou com sucesso dois websites em alemão e um website em dinamarquês obtendo resultados excelentes.