Acessibilidade no site da ONG: o que revisar primeiro

Um site acessível funciona para quem usa leitor de tela, para quem navega só pelo teclado, para quem enxerga pouco e para quem abre a página no celular sob o sol. Para uma organização social, isso pesa em dobro: o público atendido, os voluntários e os doadores incluem pessoas com deficiência, e um formulário que elas não conseguem preencher é uma inscrição ou uma doação que não acontece.

A referência internacional é a WCAG, as Diretrizes de Acessibilidade para Conteúdo Web do W3C. Nos projetos da Sassarico, o alvo é o nível AA da versão 2.1. A lista completa tem dezenas de critérios, e começar por todos de uma vez costuma travar a equipe. Por isso sugerimos quatro pontos para revisar primeiro, porque aparecem em quase toda página e porque a correção costuma ser barata.

1. Contraste entre texto e fundo

Texto cinza-claro sobre fundo branco é bonito no layout e difícil de ler na prática. O critério 1.4.3 (Contraste mínimo, nível AA) pede uma razão de contraste de pelo menos 4,5:1 entre o texto e o fundo. Para texto grande, a exigência cai para 3:1. A WCAG considera texto grande o de pelo menos 18 pontos, ou 14 pontos em negrito.

Onde olhar primeiro:

• textos sobre fotos, como o título do banner principal;

• botões com texto branco sobre cores claras da marca;

• legendas, datas e textos de rodapé, que costumam receber o cinza mais fraco.

O contraste é mais fácil de resolver na origem. Quando a paleta da identidade visual já vem testada, com as combinações aprovadas registradas no design system, todas as páginas novas nascem dentro do critério.

2. Texto alternativo nas imagens

O critério 1.1.1 (Conteúdo não textual, nível A) pede que todo conteúdo não textual apresentado ao usuário tenha uma alternativa em texto com a mesma função. Na prática, é o texto que o leitor de tela lê no lugar da imagem.

Três regras simples resolvem a maior parte dos casos:

• foto que informa algo ganha uma descrição do que importa nela ("Crianças em aula de futebol na quadra do projeto");

• imagem decorativa ganha texto alternativo vazio, para o leitor de tela pular;

• imagem com texto dentro, como um card de campanha, precisa repetir esse texto no alternativo ou no corpo da página.

Em sites com CMS, o campo de texto alternativo precisa existir na coleção. Se ele não estiver no modelo de dados, ninguém da equipe vai preencher.

3. Formulários de doação, inscrição e contato

O formulário é onde a acessibilidade vira resultado. Dois critérios ajudam a começar. O 3.3.2 (Rótulos ou instruções, nível A) pede rótulos ou instruções sempre que o conteúdo exige entrada do usuário. O 3.3.1 (Identificação de erro, nível A) pede que, quando um erro é detectado automaticamente, o campo com erro seja identificado e o erro seja descrito em texto.

O que revisar:

• cada campo tem um rótulo visível, e o texto de exemplo dentro do campo some quando a pessoa começa a digitar, então ele sozinho deixa o campo sem nome;

• a mensagem de erro diz o que está errado e como corrigir ("Informe um e-mail no formato nome@dominio.com");

• o erro aparece em texto, além da borda vermelha;

• o formulário inteiro pode ser preenchido e enviado só com o teclado.

4. Títulos e ordem de leitura

Quem usa leitor de tela costuma pular de título em título para entender a página, do mesmo jeito que quem enxerga passa os olhos pelos destaques. Para isso funcionar, a hierarquia precisa estar no código. Um H1 por página, depois H2 para as seções e H3 dentro delas, sem pular níveis só por causa do tamanho da fonte.

Três critérios tratam disso. O 1.3.1 (Informações e relações, nível A) pede que a estrutura transmitida pela apresentação visual também possa ser determinada por programa. O 1.3.2 (Sequência com significado, nível A) pede uma ordem de leitura correta quando a sequência afeta o sentido. O 2.4.6 (Cabeçalhos e rótulos, nível AA) pede que títulos e rótulos descrevam o tema ou a finalidade.

No Framer, vale conferir a ordem das camadas em layouts de colunas no celular: o que aparece primeiro na tela deve vir primeiro no código.

Esses quatro pontos ficam no começo da fila, e o trabalho segue depois deles. Ferramentas automáticas, como o Lighthouse, apontam parte dos problemas. O restante depende de teste manual com teclado e leitor de tela. Na Sassarico, a revisão de acessibilidade faz parte do trabalho de identidade visual e design system: cobre contraste, textos alternativos, formulários e ordem de leitura, com referência à WCAG 2.1 AA. Para a ADD, por exemplo, os e-mails HTML do informativo mensal passam por checagem WCAG 2.1 AA, e o Instituto Seci recebeu um design system web com widget de acessibilidade.

Veja a ficha de Identidade Visual e Design System e, se quiser saber como o site da sua organização se sai nesses quatro pontos, fale com a gente.

Fontes (W3C, consultadas em 10/10/2026):

• WCAG 2.1, recomendação do W3C (critérios 1.1.1, 1.3.1, 1.3.2, 1.4.3, 2.4.6 e definição de texto grande): https://www.w3.org/TR/WCAG21/

• Understanding SC 3.3.2 Labels or Instructions: https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html

• Understanding SC 3.3.1 Error Identification: https://www.w3.org/WAI/WCAG21/Understanding/error-identification.html