Acessibilidade na web: como desenhar para todos
Quer estejamos a falar de um website corporativo ou de uma loja online, o objetivo é, sempre, atrair e reter o maior número de visitantes possível e, para isso, é fundamental ter em conta a acessibilidade no nosso website.
Porquê?
Dados da Organização Mundial da Saúde estimam que 15% da população mundial vive com alguma forma de deficiência e, no entanto, segundo um estudo levado a cabo no Reino Unido, estima-se que cerca de 70% dos websites não seguem normas de usabilidade.
Garantir que o nosso website é acessível a todos é importante por vários motivos:
- É eticamente correto: é uma forma de contribuir para uma sociedade digital inclusiva e vai ao encontro do princípio da universalidade da internet;
- É vantajoso em termos de tráfego: dados das Nações Unidas de 2021 indicam que mais de um “1 bilhão de habitantes no mundo têm algum tipo de deficiência física ou intelectual” e, com o envelhecimento crescente da população, esse número tenderá a aumentar. É uma grande parcela da população que podemos estar a excluir! Para além disso, cumprir normas de acessibilidade é vantajoso em termos de SEO (Search Engine Optimization) o que, como sabemos, ajuda os websites a ter uma melhor classificação nas páginas de resultados dos mecanismos de pesquisa, aumentando o alcance;
- Vai ao encontro da lei: a 3 de maio de 2016, a Comissão Europeia apresentou uma proposta de lei que torna a acessibilidade obrigatória em todos os sites de instituições públicas dos estados-membros (como websites de hospitais, universidades, serviços legislativos, bibliotecas, etc.) e esta norma incluirá, no futuro, também o setor privado.
2. Para quem?
A acessibilidade não diz respeito apenas a pessoas com algum tipo de deficiência ou restrição física e intelectual, mas sim a um conjunto de normas que tornam os websites mais fáceis de usar por todos.
Antes de percebermos quais as guidelines para construir um website mais acessível, é importante perceber que tipo de deficiências existem e como podem afetar a navegação web:
Deficiência auditiva: podemos falar de vários graus de perda auditiva, de leve a profunda. Nestes casos, é importante que os conteúdos de áudio ou vídeo presentes no website incluam uma transcrição ou legendas.
Deficiência motora: pessoas com restrições motoras podem ter dificuldade em utilizar ratos ou trackpads e, nestes casos, a navegação baseada no teclado é fundamental.
Deficiência cognitiva: para garantir que não estamos a excluir visitantes com dificuldades de compreensão ou aprendizagem, é importante manter os layouts, a navegação e conteúdo simples e consistentes e incluir instruções de utilização para todas as funcionalidades que possam não ser tão intuitivas (como formulários de contacto ou processos de compra numa loja on-line).
Antes de percebermos quais as guidelines para construir um website mais acessível, é importante perceber que tipo de deficiências existem e como podem afetar a navegação web:
É importante referir que, ao falar de acessibilidade, não estamos apenas a incluir pessoas com deficiências graves ou permanentes, dificuldades podem surgir temporariamente, ser reflexo de idades mais avançadas ou, simplesmente, do contexto (já todos sentimos dificuldade a compreender como navegar num website ou estivemos numa situação com muito barulho a tentar ouvir um vídeo sem legendas!).
3. O que ter em conta?
1. Navegação com o teclado
Para validar este critério, deve ser possível navegar pelo website sem ser necessário utilizar o rato. Muitas tecnologias de assistência a pessoas com deficiências motoras assentam em “keyboard-only navigation”, ou seja, para cumprir este requisito deve ser possível aceder a todos os conteúdos e funcionalidades de um website apenas através do teclado – utilizando a tecla “Tab” para navegar entre secções.
Dica: a plataforma WebAIM (Web Acessibility in Mind) tem um conjunto de recursos, dicas e ferramentas que te podem ajudar a avaliar a acessibilidade do teu website e a corrigir potenciais erros. Para garantir que o teu website passa neste critério de navegação e descobrires como podes melhorar, consulta este link.
2. Atenção ao conteúdo dinâmico
O conteúdo dinâmico, ou seja, conteúdo que é carregado na página sem necessitar de reload (como, por exemplo, um banner animado) pode ser um desafio para os sistemas de leitura de ecrãs, já que o website não comunica ao software que esse conteúdo mudou.
Dica: Para resolver este problema, existem as “ARIA landmarks”: ARIA (Accessible Rich Internet Applications) designa um conjunto de atributos que podes adicionar ao código HTML para tornar o teu website mais acessível a utilizadores que usam tecnologias de assistência à navegação, como leitores de ecrã.
No fundo, são tags que adicionamos ao conteúdo para o definir com clareza o que estamos a apresentar na página. No caso de conteúdo dinâmico, podemos colocar a tag “live region” que comunica aos sistemas de leitura que se trata de conteúdo dinâmico.
3. Adicionar textos ALT em todas as imagens
Ao adicionar imagens a um website é importante inserir sempre o texto ALT (ou Alternative Text): este texto funciona como uma descrição da imagem, caso esta não carregue e também para que todos que sofram de limitações de visão possam ter conhecimento do que está ali representado. É também fundamental a nível de SEO!
Dica: Podes ler aqui as boas práticas a implementar ao criar o ALT nas imagens do teu website.
4. Escolher as cores cuidadosamente
A capacidade de percecionar as diferentes cores varia de pessoa para pessoa – na verdade, podemos dizer que a nossa capacidade de visualizar cor varia num espectro tão extenso como o das cores existentes! É, assim, fundamental, garantir que os vários elementos no nosso website tenham contraste suficiente para serem legíveis por todos, principalmente entre texto e fundo.
Dica: Utiliza o ContrastChecker da WebAIM para testar se as cores que estás a selecionar têm contraste suficiente.
5. Estruturar o conteúdo
Utilizar headers para definir títulos e estruturar conteúdos é fundamental para auxiliar na leitura do nosso conteúdo e possibilita aos leitores de ecrã perceberem a estrutura do nosso website e facilitar a navegação.
Visualmente, já sabemos que é importante distinguir títulos ou destaques através do tamanho do texto, cor, o uso do bold, etc. No caso de sistemas de assistência como leitores de ecrã (e mesmo como boa prática de SEO), é fundamental definir a hierarquia de conteúdo de uma página através das tags H1 e outros títulos com H2, H3, H4, etc., para passar corretamente o fluxo de leitura do nosso conteúdo.
Dica: Aprende mais sobre headings e como utilizá-los para estruturar informação aqui.
6. Evitar o uso de tabelas
Tabelas devem ser evitadas para estruturar conteúdos e layouts, já que são de difícil leitura em leitores de ecrãs. O seu uso deve ser restrito a situações em que o conteúdo realmente exige uma formatação tabelar.
Dica: Caso precises de utilizar tabelas no teu website, descobre mais sobre os standards de acessibilidade na sua construção neste link.
7. Permitir o redimensionamento do texto
Dica: Podes testar se o teu website está preparado para esta ampliação da fonte testando a função de zoom ou lupa do teu browser.
Para saber mais sobre fontes, tamanhos e como garantir que não representam um obstáculo à visualização do teu website, recomendamos as guidelines da WebAIM.
8. Cuidado com conteúdos multimédia
Entrar num website onde música começa a tocar automaticamente é irritante para todos os utilizadores, mas pode ser um verdadeiro desafio para utilizadores com deficiência: descobrir o botão para parar pode ser difícil sem o mouse ou em leitores de ecrãs.
Se incluíres vídeo no teu website, coloca legendas e garante que todos, mesmo com problemas auditivos, podem usufruir do teu conteúdo!
É recomendado evitar, também, carrosséis ou banners automáticos, já que alguns utilizadores podem necessitar de mais tempo para absorver a informação do que outros.
Dica: A Web Accessibility Initiative (WAI) do World Wide Web Consortium (W3C) fornece um conjunto alargado de dicas e boas práticas para tornares os teus conteúdos multimédia mais acessíveis que podes consultar aqui.
9. Tem atenção aos formulários
Formulários podem ser especialmente difíceis de utilizar por alguns visitantes do teu site e, no entanto, são uma ferramenta preciosa para criar um canal de comunicação. Garante que cada campo está claramente identificado (com a devida label e, idealmente, texto de exemplo), que todo o formulário é navegável por TAB, que as mensagens de erro / sucesso são claras e explicativas e, se necessário, inclui instruções para como preencher adequadamente o formulário.
Dica: Descobre aqui as guidelines para construíres formulários simples e acessíveis para todos.
10. Criar conteúdo acessível
Desenhar e estruturar um website acessível é fundamental e o mesmo se passa com o conteúdo. Criar conteúdo acessível pode passar por pequenas coisas, como definir sempre o significado de um acrónimo a regras de navegação como descrever o propósito / destino de um link.
Dica: Consulta as dicas da WebAIM sobre linguagem para descobrires como criar e estruturar conteúdo mais acessível.
4. Recursos úteis
1. WAVE
Com a extensão WAVE Evaluation Tool instalada no browser, podes avaliar a acessibilidade do teu site tendo em conta os padrões de acessibilidade estabelecidos pelo WCAG.
Esta ferramenta é um auxiliar importante para detetar o que está a falhar no teu website e o que pode ser corrigido / melhorado.
2. ARIA DevTools
A extensão ARIA DevTools para o browser é um recurso gratuito que te permite verificar como o teu website está estruturado e é lido por leitores de ecrã, para além de te ajudar a identificar onde deveriam ser colocados atributos ARIA para ajudar a navegação.
3. Recursos para WordPress
O WordPress é o CMS mais utilizado do mundo e, por isso, dispõe já de um conjunto de ferramentas próprias e plugins para melhor a acessibilidade do teu website. Basta procurar no diretório de plugins por “Accessibility” e escolher qual a melhor opção para as tuas necessidades.
4. Cursos
Se quiseres aprofundar o tema e aprender de uma forma mais estruturada, a Udacity disponibiliza um curso de Acessibilidade Web. É gratuito, mas requer algum conhecimento de HTML, CSS e Javascript. Para iniciados, na plataforma COURSERA encontras um curso de Introdução à Acessibilidade e Design Inclusivo, disponibilizado pela Universidade do Illinois, com legendas em português.
A acessibilidade do teu website importa. Para além de garantires que o teu website é de fácil consulta e navegação para todos, atraindo mais potenciais utilizadores, estás a contribuir para um mundo digital mais inclusivo e justo!
