O guia completo de acessibilidade web

A acessibilidade web é a prática de construir sites que todos podem usar, incluindo pessoas com deficiência. Isso abrange um leque alargado de pessoas: alguém que navega com o teclado em vez do rato, um utilizador de leitor de ecrã que ouve a página em vez de a ver, uma pessoa com baixa visão que precisa de contraste forte e qualquer pessoa que vê um vídeo sem som. Este guia explica o que significa a acessibilidade, porque merece a sua atenção e como lá chegar sem o jargão.

O que a acessibilidade significa realmente

A referência internacional são as Web Content Accessibility Guidelines, conhecidas como WCAG. A versão atual é a WCAG 2.2, e a maioria das organizações visa o nível AA, que é o nível referenciado por leis como a Lei Europeia da Acessibilidade. Não precisa de memorizar as diretrizes, mas ajuda conhecer os quatro princípios em que assentam. Uma página deve ser:

• Percetível. As pessoas conseguem captar o conteúdo, quer o vejam, o ouçam ou o sintam. As imagens têm alternativas de texto, o vídeo tem legendas e o texto tem contraste suficiente.
• Operável. As pessoas conseguem usar a página com o que tiverem, um rato, apenas o teclado, um manípulo ou a voz. Nada as prende e nada depende de um sentido ou de uma ação que não conseguem executar.
• Compreensível. O conteúdo lê-se com clareza e a interface comporta-se de forma previsível, para que as pessoas não sejam surpreendidas nem confundidas.
• Robusta. A página é construída de modo a que os navegadores e as tecnologias de apoio, agora e no futuro, a consigam interpretar com fiabilidade.

Quase tudo o que é prático neste guia remete para uma destas quatro ideias.

Para quem é

É tentador imaginar um pequeno grupo de utilizadores, mas a acessibilidade é mais ampla do que isso. Cerca de uma em cada seis pessoas vive com uma deficiência significativa, e muitas mais beneficiam do design acessível sem se identificarem como pessoas com deficiência: um cliente mais velho, alguém com uma lesão temporária, uma pessoa numa ligação lenta ou qualquer pessoa a usar o telemóvel sob luz solar intensa. Construir para as margens torna a experiência melhor também para o centro. As legendas ajudam numa sala ruidosa, o contraste forte ajuda num ecrã barato e uma ordem de foco clara ajuda quem prefere o teclado.

As fundações que mais importam

A boa notícia é que o trabalho de maior impacto é estrutural, não decorativo. Acerte nestas fundações e já percorreu a maior parte do caminho até ao AA.

Use o elemento HTML correto

Um botão verdadeiro, uma ligação verdadeira e uma lista verdadeira trazem comportamento e significado incorporados, de graça. Reconstrua-os a partir de caixas genéricas estilizadas e terá de repor à mão o foco, o suporte de teclado e o anúncio correto, e a maioria das equipas deixa escapar uma peça. Este é o hábito com maior retorno em acessibilidade. Tratamos o tema em detalhe em porque o HTML semântico ainda importa.

Faça tudo funcionar a partir do teclado

Muitas pessoas nunca usam um rato. Todos os controlos devem ser alcançáveis e operáveis apenas com o teclado, numa ordem lógica, com um contorno de foco que se veja de facto. É também o teste manual mais rápido que pode fazer no seu próprio site. Veja navegação por teclado, o teste em que a maioria dos sites falha.

Escolha cores que todos consigam ler

O texto precisa de contraste suficiente em relação ao fundo, e a cor nunca pode ser a única forma de sinalizar significado. Esta é uma das falhas mais comuns e uma das mais fáceis de corrigir quando se conhecem os valores alvo. O nosso guia para escolher contraste de cor acessível percorre os números.

Escreva alternativas de texto reais

As imagens que transmitem significado precisam de texto alternativo para que os utilizadores de leitores de ecrã recebam a mesma informação, e as imagens decorativas devem ser marcadas como decorativas para serem ignoradas. Um bom texto alternativo também ajuda os motores de busca a compreender as suas imagens. Veja texto alternativo para SEO e acessibilidade.

Construa formulários que as pessoas consigam concluir

Os formulários são o lugar onde muitos visitantes decidem tornar-se clientes, pelo que um formulário confuso ou inacessível custa-lhe diretamente. Campos etiquetados, erros claros e um agrupamento sensato ajudam toda a gente a terminar. Explicamos como em formulários acessíveis ganham mais contactos.

Porque é boa para o seu negócio

A acessibilidade é muitas vezes enquadrada como conformidade, mas é antes de mais uma audiência maior e uma experiência melhor. Um site acessível chega a mais clientes, converte mais deles e expõe-no a menos risco legal à medida que as leis de acessibilidade apertam na União Europeia e não só. Apresentamos o argumento comercial em acessibilidade é boa para o negócio.

Há também um bónus discreto. A mesma estrutura que ajuda a tecnologia de apoio, cabeçalhos com significado, marcos reais, ligações descritivas e alternativas adequadas, é exatamente o que os motores de busca leem para compreender uma página. A acessibilidade e o SEO assentam nas mesmas fundações, pelo que o trabalho compensa duas vezes.

Uma nota sobre comércio eletrónico

As lojas online têm pontos de pressão específicos: galerias de produtos, filtros, seletores de variantes e um checkout que não pode perder ninguém. Um checkout inacessível é uma venda abandonada. Se vende online, a lista de verificação de acessibilidade para lojas online cobre as partes que mais importam.

Como testar

Não precisa de um laboratório para começar. Uma rotina curta e repetível apanha a maioria dos problemas:

1. Ponha o rato de lado e percorra a página inteira com a tecla Tab. Consegue alcançar e usar tudo, e consegue ver sempre onde está?
2. Corra um verificador automático como o axe ou o Lighthouse. Não apanha tudo, mas assinala depressa as falhas óbvias.
3. Verifique o contraste das suas cores em relação aos valores alvo do nível AA.
4. Experimente um leitor de ecrã durante dez minutos. Na maioria dos sistemas já vem um incorporado.

As ferramentas automáticas encontram talvez um terço dos problemas, por isso combine-as com as verificações manuais acima. O objetivo não é uma pontuação perfeita, é um site que uma pessoa real consiga de facto usar.

Por onde começar

Se isto parece muito, comece pelas fundações: HTML correto, uma ordem de teclado funcional e contraste suficiente. Só esses três removem a maioria das barreiras. A partir daí, trabalhe o texto alternativo, os formulários e o resto como um hábito constante em vez de um projeto pontual.

Se quiser uma ajuda, a acessibilidade está integrada em tudo o que fazemos, e também a oferecemos como serviço dedicado. Veja acessibilidade web, ou inicie um projeto e diga-nos em que ponto está o seu site hoje.