Criar um site acessível não é apenas uma questão de tecnologia. É uma forma de garantir que mais pessoas possam navegar, compreender e interagir com um conteúdo digital, independentemente de suas limitações visuais, auditivas, motoras, cognitivas ou de outras características.

Com o crescimento da presença digital, a acessibilidade na web passou a ser um aspecto cada vez mais importante para empresas, profissionais, instituições, lojas virtuais, portais de conteúdo e desenvolvedores.

As WCAG 2.2 — Web Content Accessibility Guidelines apresentam recomendações internacionais para tornar conteúdos e aplicações web mais acessíveis.

Mas como aplicar essas diretrizes na prática?

Neste guia da Fonte do Conhecimento, você vai entender o que são as WCAG 2.2, quais são seus princípios fundamentais e como aplicar boas práticas de acessibilidade no desenvolvimento e na manutenção do seu site.

O que são as WCAG 2.2?

WCAG significa Web Content Accessibility Guidelines, ou, em português, Diretrizes de Acessibilidade para Conteúdo Web.

As WCAG são desenvolvidas pelo W3C — World Wide Web Consortium, organização responsável por diversos padrões utilizados na web.

A versão WCAG 2.2 amplia as orientações das versões anteriores e apresenta critérios destinados a melhorar a acessibilidade de sites e aplicações.

As diretrizes podem ser aplicadas a:

• sites institucionais;
• blogs;
• lojas virtuais;
• sistemas web;
• plataformas educacionais;
• aplicativos web;
• portais de notícias;
• páginas de serviços;
• landing pages;
• áreas administrativas.

O objetivo é tornar o conteúdo mais acessível para uma variedade maior de usuários.

Por que criar sites acessíveis?

Imagine uma pessoa que utiliza um leitor de tela tentando acessar seu site.

Se as imagens não possuem textos alternativos, os botões não têm nomes claros ou a estrutura da página não está organizada corretamente, a navegação pode se tornar extremamente difícil.

Agora imagine uma pessoa com limitações motoras utilizando apenas o teclado.

Se o site não permite navegar adequadamente sem o mouse, determinadas funcionalidades podem ficar inacessíveis.

Esses são apenas alguns exemplos.

A acessibilidade busca reduzir essas barreiras.

Um site acessível pode beneficiar:

• pessoas com deficiência visual;
• pessoas com deficiência auditiva;
• pessoas com limitações motoras;
• pessoas com dificuldades cognitivas;
• pessoas com baixa visão;
• pessoas com dificuldades temporárias;
• pessoas que utilizam dispositivos ou tecnologias assistivas;
• usuários em diferentes condições de acesso.

A acessibilidade também pode melhorar a experiência de usuários que não possuem deficiência.

Por exemplo, legendas podem ser úteis para alguém assistindo a um vídeo em um ambiente silencioso ou barulhento.

Quais são os princípios das WCAG 2.2?

As WCAG são organizadas em quatro princípios fundamentais, conhecidos pela sigla POUR:

Perceptível, Operável, Compreensível e Robusto.

Esses princípios formam a base da acessibilidade na web.

1. Perceptível

As informações e componentes da interface precisam ser apresentados de maneiras que possam ser percebidas pelos usuários.

Isso inclui pessoas que utilizam:

• leitores de tela;
• ampliadores;
• diferentes tamanhos de fonte;
• tecnologias assistivas;
• legendas;
• recursos de contraste.

Um exemplo simples é adicionar texto alternativo às imagens relevantes.

2. Operável

Os componentes da interface precisam ser utilizáveis.

Isso significa que o usuário deve conseguir navegar e interagir com o site utilizando diferentes métodos.

Um exemplo importante é a navegação pelo teclado.

Se uma pessoa não consegue utilizar um mouse, ela precisa conseguir acessar menus, links, formulários e botões por meio do teclado.

3. Compreensível

As informações e a interface precisam ser fáceis de entender.

Isso envolve:

• linguagem clara;
• navegação previsível;
• formulários bem identificados;
• mensagens de erro compreensíveis;
• instruções adequadas.

Um formulário que apresenta apenas:

“Erro.”

não oferece muita informação.

Uma mensagem como:

“Digite um endereço de e-mail válido, por exemplo: nome@empresa.com.br.”

é muito mais útil.

4. Robusto

O conteúdo precisa funcionar corretamente em diferentes navegadores, dispositivos e tecnologias assistivas.

Isso envolve utilizar tecnologias web de maneira adequada e seguir padrões que permitam que diferentes ferramentas compreendam a estrutura da página.

Quais são os níveis de conformidade das WCAG 2.2?

As WCAG trabalham com três níveis de conformidade:

Nível A

Representa os requisitos fundamentais de acessibilidade.

São critérios que precisam ser atendidos para evitar barreiras importantes ao acesso.

Nível AA

É um nível mais abrangente e frequentemente utilizado como referência em projetos de acessibilidade digital.

Ele inclui critérios adicionais relacionados a aspectos como contraste, navegação e interação.

Nível AAA

É o nível mais elevado de conformidade.

Nem sempre é possível ou apropriado atingir todos os critérios AAA para um site inteiro. A própria abordagem das WCAG considera que diferentes partes de um projeto podem ter necessidades e contextos específicos.

Por isso, é importante definir uma meta de conformidade adequada ao projeto.

Como aplicar WCAG 2.2 em um site?

Agora vamos para a parte prática.

1. Use textos alternativos nas imagens

O atributo alt permite fornecer uma descrição textual para imagens.

Por exemplo:

<img src="curso-ia.jpg" alt="Curso de inteligência artificial para iniciantes">

O texto alternativo pode ser interpretado por leitores de tela.

Mas atenção: nem toda imagem precisa de uma descrição extensa.

Se a imagem for apenas decorativa, pode ser apropriado utilizar um texto alternativo vazio:

<img src="elemento-decorativo.svg" alt="">

O objetivo é evitar que tecnologias assistivas anunciem informações que não acrescentam valor.

2. Não coloque informações importantes apenas em imagens

Imagine um banner contendo:

“Curso de Inteligência Artificial — Inscreva-se agora”

Se todas essas informações estiverem apenas dentro de uma imagem, alguns usuários poderão ter dificuldades para acessá-las.

Sempre que possível, informações essenciais devem estar disponíveis como texto real na página.

Isso também facilita a adaptação do conteúdo para diferentes dispositivos.

3. Garanta contraste adequado

O texto precisa apresentar contraste suficiente em relação ao fundo.

Por exemplo, um texto cinza-claro sobre fundo branco pode ser difícil de ler.

Ao definir a identidade visual do site, verifique:

• textos;
• links;
• botões;
• menus;
• ícones;
• campos de formulário.

A acessibilidade visual não significa que você precisa abandonar sua identidade de marca.

É possível criar designs modernos e visualmente atraentes mantendo contraste adequado.

4. Não dependa apenas das cores

Imagine um formulário que indica:

Campo obrigatório em vermelho.

A cor sozinha pode não ser suficiente para comunicar a informação.

Uma solução melhor é combinar cor com texto, símbolo ou outro indicador.

Por exemplo:

E-mail — campo obrigatório

Isso torna a informação mais compreensível para diferentes usuários.

5. Permita navegação pelo teclado

Um dos testes mais simples de acessibilidade é utilizar o site sem mouse.

Experimente navegar utilizando:

Tab

Shift + Tab

Enter

Espaço

Setas

Verifique se é possível acessar:

• menus;
• links;
• botões;
• formulários;
• caixas de diálogo;
• controles interativos.

Também é importante que o usuário consiga identificar visualmente qual elemento está atualmente em foco.

6. Não remova o indicador de foco

Alguns sites removem o contorno que aparece quando um elemento recebe foco pelo teclado.

Isso pode prejudicar muito a navegação.

O usuário precisa conseguir identificar:

“Onde estou na página?”

Por isso, mantenha um indicador de foco visível e adequado ao design.

7. Crie títulos e subtítulos corretamente

Uma boa estrutura de headings ajuda usuários e tecnologias assistivas a entenderem a organização do conteúdo.

Uma estrutura típica pode ser:

H1 — Sites Acessíveis: Como Aplicar as Diretrizes WCAG 2.2

H2 — O que são as WCAG 2.2?

H2 — Por que criar sites acessíveis?

H2 — Como aplicar WCAG 2.2?

H3 — Use textos alternativos

H3 — Garanta contraste adequado

Evite utilizar headings apenas porque possuem um tamanho visual específico.

A hierarquia deve representar a estrutura real do conteúdo.

Acessibilidade e SEO possuem relação?

Sim, embora acessibilidade e SEO sejam disciplinas diferentes.

Diversas boas práticas podem beneficiar ambos.

Por exemplo:

• títulos descritivos;
• estrutura semântica;
• textos alternativos adequados;
• conteúdo organizado;
• links descritivos;
• boa experiência em dispositivos móveis;
• páginas rápidas;
• conteúdo claro.

Mas é importante não confundir os objetivos.

Uma prática pode melhorar a acessibilidade sem necessariamente gerar uma vantagem direta de posicionamento no Google.

O foco principal da acessibilidade deve ser tornar o conteúdo utilizável por mais pessoas.

8. Crie links descritivos

Evite utilizar apenas:

“Clique aqui.”

Prefira:

“Leia o guia completo sobre inteligência artificial.”

Um link descritivo permite que o usuário compreenda seu destino com mais facilidade.

Isso é especialmente importante para pessoas que utilizam leitores de tela e podem navegar por uma lista de links.

9. Crie formulários acessíveis

Formulários são componentes importantes de sites comerciais.

Eles precisam ser fáceis de entender e utilizar.

Utilize:

• labels associados aos campos;
• instruções claras;
• mensagens de erro específicas;
• identificação dos campos obrigatórios;
• ordem lógica de navegação;
• foco adequado.

Exemplo:

<label for="email">E-mail</label>
<input type="email" id="email" name="email">

Isso cria uma relação adequada entre o rótulo e o campo.

10. Não utilize apenas texto dentro de placeholders

Um erro comum é utilizar o placeholder como substituto do rótulo.

Por exemplo:

[ Digite seu e-mail ]

Quando o usuário começa a digitar, a informação desaparece.

Prefira manter um label visível associado ao campo.

O placeholder pode complementar a instrução, mas não deve ser a única identificação do campo.

11. Adicione legendas aos vídeos

Vídeos que possuem conteúdo falado podem precisar de legendas para atender usuários surdos ou com deficiência auditiva.

As legendas também beneficiam pessoas que:

• estão em ambientes barulhentos;
• não podem utilizar áudio;
• estão assistindo pelo celular;
• não dominam completamente o idioma falado.

Quando necessário, considere também recursos adicionais de acessibilidade audiovisual.

12. Não reproduza áudio automaticamente

Imagine que alguém está navegando em um site em um ambiente silencioso.

De repente, um vídeo começa a reproduzir áudio automaticamente.

Além de ser inconveniente, isso pode dificultar a navegação de usuários de leitores de tela.

Sempre que possível, permita que o usuário controle a reprodução.

13. Evite animações excessivas

Animações podem deixar um site mais interessante visualmente, mas precisam ser utilizadas com cuidado.

Excesso de movimento pode:

• distrair;
• dificultar a leitura;
• causar desconforto;
• dificultar determinadas interações.

Também é importante considerar mecanismos para reduzir movimento quando o usuário possui essa preferência configurada no dispositivo.

14. Crie uma navegação previsível

O usuário precisa entender rapidamente como o site está organizado.

Um menu bem estruturado pode conter:

Início | Sobre | Serviços | Blog | Contato

Evite mudanças inesperadas na navegação entre páginas.

A consistência ajuda o visitante a entender onde está e como chegar ao conteúdo desejado.

15. Utilize HTML semântico

O HTML semântico ajuda navegadores e tecnologias assistivas a entenderem a estrutura do conteúdo.

Em vez de construir tudo utilizando elementos genéricos, utilize elementos apropriados quando fizer sentido:

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>

Também utilize elementos como:

<button>

para botões e:

<a>

para links.

Isso é melhor do que criar elementos visualmente semelhantes utilizando apenas div e JavaScript.

16. Crie botões realmente acessíveis

Um botão deve indicar claramente sua função.

Prefira:

“Enviar formulário”

em vez de:

“Clique”

Também verifique se o botão:

• pode receber foco;
• pode ser acionado pelo teclado;
• possui nome acessível;
• apresenta estado visual adequado;
• possui contraste suficiente.

17. Torne o conteúdo compreensível

A acessibilidade também envolve linguagem.

Evite complicar desnecessariamente as explicações.

Em conteúdos educativos, por exemplo:

“A implementação desta metodologia apresenta potencial para otimização…”

pode ser substituído por:

“Essa estratégia pode ajudar a melhorar o resultado.”

Uma linguagem mais direta beneficia muitos usuários.

18. Facilite a correção de erros

Imagine que uma pessoa preencha um formulário e erre um campo.

O site deve explicar:

qual foi o problema e como corrigi-lo.

Em vez de:

“Erro no formulário.”

Prefira:

“O campo CPF precisa conter 11 números.”

Isso reduz a frustração e facilita a conclusão da tarefa.

19. Não limite desnecessariamente o tempo do usuário

Algumas páginas possuem contadores ou sessões que expiram rapidamente.

Quando houver limite de tempo, avalie se o usuário precisa receber:

• aviso;
• possibilidade de estender o tempo;
• oportunidade de salvar o trabalho;
• alternativa para concluir a tarefa.

Isso é especialmente importante em formulários extensos e processos de compra ou cadastro.

20. Crie sites acessíveis em dispositivos móveis

A acessibilidade também precisa ser considerada no celular.

Verifique:

• tamanho dos textos;
• tamanho dos botões;
• espaçamento entre elementos;
• orientação da tela;
• menus;
• formulários;
• zoom;
• navegação por teclado quando aplicável;
• compatibilidade com tecnologias assistivas.

Não considere o site acessível apenas porque ele funciona no computador.

WCAG 2.2 e leitores de tela

Leitores de tela são tecnologias assistivas utilizadas principalmente por pessoas cegas ou com baixa visão.

Eles transformam informações presentes na interface em áudio ou outros formatos de saída.

Para facilitar a utilização por leitores de tela:

• utilize HTML semântico;
• forneça textos alternativos adequados;
• associe labels aos campos;
• utilize headings corretamente;
• descreva links;
• mantenha uma ordem lógica de navegação;
• forneça nomes acessíveis aos controles;
• evite conteúdo essencial exclusivamente visual.

Ferramentas como NVDA, JAWS e VoiceOver são exemplos de tecnologias utilizadas para leitura de tela em diferentes plataformas.

Como testar a acessibilidade do seu site?

Nenhuma ferramenta automática consegue detectar todos os problemas de acessibilidade.

Por isso, utilize uma combinação de métodos.

Teste 1: navegue apenas pelo teclado

Desconecte-se mentalmente do mouse e tente realizar as principais tarefas do site.

Pergunte:

• consigo abrir o menu?
• consigo acessar os links?
• consigo preencher o formulário?
• consigo fechar uma janela?
• consigo identificar onde estou?

Teste 2: verifique o contraste

Utilize ferramentas de análise de contraste para verificar se textos e elementos importantes possuem contraste suficiente.

Teste 3: utilize ferramentas automatizadas

Ferramentas como Lighthouse, axe DevTools e outras soluções de auditoria podem identificar determinados problemas.

Mas lembre-se:

teste automatizado não substitui testes humanos.

Teste 4: teste com tecnologias assistivas

Quando possível, faça testes utilizando leitores de tela e outros recursos de acessibilidade.

Teste 5: peça feedback de usuários

Uma das melhores formas de descobrir problemas reais é ouvir pessoas que utilizam tecnologias assistivas ou possuem diferentes necessidades de acessibilidade.

Acessibilidade também é uma questão de experiência do usuário

Um erro comum é tratar acessibilidade como uma obrigação técnica que deve ser resolvida no final do projeto.

O ideal é pensar nela desde o início.

Ao criar um site, considere acessibilidade durante:

Planejamento → Design → Desenvolvimento → Conteúdo → Testes → Manutenção

Dessa maneira, é possível evitar decisões que posteriormente seriam caras ou difíceis de corrigir.

Como criar um checklist de acessibilidade?

Utilize uma lista como ponto de partida:

• Todas as imagens relevantes possuem texto alternativo.
• Imagens decorativas são tratadas adequadamente.
• O conteúdo não depende exclusivamente de cores.
• O contraste foi verificado.
• O site pode ser utilizado pelo teclado.
• O foco do teclado é visível.
• Os títulos seguem uma hierarquia lógica.
• Os links possuem descrições claras.
• Os formulários possuem labels.
• As mensagens de erro são compreensíveis.
• Os botões possuem nomes claros.
• Os vídeos possuem recursos de acessibilidade apropriados.
• A navegação é consistente.
• O site funciona em dispositivos móveis.
• O HTML utiliza elementos semânticos.
• As animações foram avaliadas.
• O site foi testado com ferramentas automatizadas.
• Foram realizados testes manuais.
• O site foi revisado considerando tecnologias assistivas.

WCAG 2.2 é obrigatória para todos os sites?

É importante diferenciar diretriz técnica de obrigação legal.

As WCAG são um padrão internacional de acessibilidade desenvolvido pelo W3C. A obrigação de cumprir determinados requisitos pode depender da legislação, regulamentação, contrato, setor de atuação e características do projeto.

No Brasil, a acessibilidade digital também está relacionada a normas e legislação, incluindo a Lei Brasileira de Inclusão da Pessoa com Deficiência (Lei nº 13.146/2015) e outros instrumentos aplicáveis.

Por isso, empresas ou instituições que precisam cumprir requisitos legais específicos devem avaliar o projeto com profissionais especializados e verificar a legislação aplicável ao seu caso.

Este artigo apresenta orientações técnicas e educativas e não substitui uma análise jurídica ou uma auditoria profissional de acessibilidade.

Acessibilidade pode ajudar no SEO?

A acessibilidade e o SEO possuem vários pontos de contato.

Por exemplo:

Texto alternativo
Ajuda usuários que utilizam leitores de tela e também fornece contexto sobre imagens.

Estrutura semântica
Ajuda tecnologias assistivas e facilita a compreensão da estrutura da página.

Títulos descritivos
Melhoram a compreensão do conteúdo para usuários e mecanismos de busca.

Links descritivos
Facilitam a navegação e deixam claro o destino do link.

Conteúdo claro
Melhora a experiência do usuário.

Boa experiência em dispositivos móveis
É importante tanto para acessibilidade quanto para usabilidade.

Entretanto, não devemos criar um site acessível apenas pensando em SEO.

O objetivo principal é garantir que o conteúdo possa ser utilizado por mais pessoas.

Como aplicar WCAG 2.2 em um site WordPress?

Se você utiliza WordPress, comece pela estrutura do projeto.

Escolha um tema com boa acessibilidade

Verifique se o tema foi desenvolvido considerando práticas de acessibilidade.

Revise seus plugins

Plugins podem adicionar componentes que não são necessariamente acessíveis.

Teste menus, pop-ups, formulários e outros elementos.

Cuidado com construtores visuais

Ferramentas como Elementor facilitam a construção de páginas, mas a responsabilidade pela acessibilidade não desaparece.

Revise:

• títulos;
• contraste;
• botões;
• links;
• formulários;
• navegação pelo teclado;
• atributos ARIA quando necessários.

Otimize imagens

Adicione textos alternativos apropriados e evite usar imagens como substitutos de conteúdo textual.

Teste antes de publicar

Não confie apenas no editor visual.

Abra a página publicada e faça testes reais.

ARIA: o que é e quando utilizar?

ARIA — Accessible Rich Internet Applications é um conjunto de atributos que pode ajudar a tornar determinadas interfaces web mais acessíveis.

Exemplos incluem:

aria-label
aria-expanded
aria-hidden
aria-describedby

Entretanto, ARIA não deve ser utilizada indiscriminadamente.

Uma regra prática importante é:

quando um elemento HTML nativo já oferece a semântica e comportamento necessários, prefira utilizá-lo.

Por exemplo, um botão HTML:

<button>Enviar</button>

geralmente é mais apropriado do que criar uma div e tentar transformá-la artificialmente em botão utilizando ARIA e JavaScript.

O futuro dos sites acessíveis

A acessibilidade digital tende a ganhar cada vez mais importância à medida que mais atividades passam a acontecer pela internet.

Hoje utilizamos sites para:

• estudar;
• trabalhar;
• comprar;
• solicitar serviços;
• acessar informações;
• fazer pagamentos;
• participar de comunidades;
• procurar oportunidades profissionais.

Quanto mais importante se torna a presença digital, maior é a necessidade de garantir que ela seja acessível.

Criar um site acessível não deve ser encarado apenas como uma tarefa técnica.

É uma forma de construir uma internet mais inclusiva.

Perguntas frequentes sobre sites acessíveis

O que é um site acessível?

É um site desenvolvido de forma que pessoas com diferentes capacidades e utilizando diferentes tecnologias possam acessar, compreender, navegar e interagir com seu conteúdo.

O que significa WCAG 2.2?

WCAG 2.2 significa Web Content Accessibility Guidelines 2.2, um conjunto de diretrizes internacionais para acessibilidade de conteúdo web desenvolvido pelo W3C.

Quais são os quatro princípios das WCAG?

Os quatro princípios são:

Perceptível, Operável, Compreensível e Robusto.

Eles são conhecidos pela sigla POUR.

Qual é a diferença entre WCAG 2.1 e WCAG 2.2?

A WCAG 2.2 mantém a estrutura e os princípios das versões anteriores e adiciona novos critérios de sucesso, com atenção adicional a aspectos como autenticação acessível, foco e interação, entre outros.

WCAG 2.2 é importante para SEO?

A acessibilidade não é sinônimo de SEO, mas várias práticas de acessibilidade também contribuem para uma boa estrutura de conteúdo e experiência do usuário. Isso pode complementar uma estratégia de SEO.

Como saber se meu site é acessível?

Utilize ferramentas automatizadas, faça testes manuais, navegue pelo teclado, verifique contraste e, quando possível, realize testes com tecnologias assistivas e usuários com diferentes necessidades.

Uma ferramenta automática consegue garantir acessibilidade?

Não. Ferramentas automáticas são úteis para identificar determinados problemas, mas não conseguem avaliar todos os aspectos da experiência de uma pessoa com deficiência.

Sites em WordPress podem ser acessíveis?

Sim. WordPress permite criar sites acessíveis, mas a acessibilidade depende do tema, plugins, conteúdo, configurações, componentes utilizados e decisões tomadas durante o desenvolvimento.

Conclusão

Criar sites acessíveis significa pensar em pessoas reais durante todas as etapas do desenvolvimento.

As WCAG 2.2 oferecem uma referência importante para orientar esse trabalho, utilizando quatro princípios fundamentais: Perceptível, Operável, Compreensível e Robusto.

Na prática, isso significa criar páginas que possam ser navegadas pelo teclado, utilizar textos alternativos adequados, garantir contraste, estruturar corretamente os conteúdos, criar formulários acessíveis, fornecer legendas quando necessárias e testar o projeto com diferentes tecnologias.

A acessibilidade não deve ser adicionada apenas no final.

Ela deve fazer parte do projeto desde o planejamento.

Além de contribuir para uma experiência digital mais inclusiva, muitas boas práticas de acessibilidade também ajudam a construir sites mais organizados, claros e fáceis de utilizar.

Para quem trabalha com SEO, WordPress, Elementor, desenvolvimento web ou marketing digital, aprender acessibilidade é uma habilidade cada vez mais relevante.

Na Fonte do Conhecimento, nosso objetivo é ajudar você a aprender tecnologia e conhecimento digital de maneira prática, para transformar informação em projetos melhores e mais acessíveis.

Um bom site não é apenas aquele que funciona. É aquele que pode ser utilizado pelo maior número possível de pessoas.