Acessibilidade web: o que a lei exige e o que corrigir primeiro

Acessibilidade web significa construir seu site de modo que pessoas com deficiência consigam perceber, entender, navegar e usar o conteúdo, seja com leitor de tela, teclado, legendas ou zoom do navegador. Na prática, isso quer dizer seguir as Diretrizes de Acessibilidade para Conteúdo Web (Web Content Accessibility Guidelines, WCAG), o padrão a que a maioria das leis de acessibilidade faz referência.

Este guia é para donos de empresas e profissionais de marketing que cuidam do site de uma empresa. Ele explica quem é afetado, o que a lei dos EUA exige, as barreiras que aparecem na maioria dos sites, quais correções você mesmo pode fazer e quando vale a pena pagar por um especialista.

O que a acessibilidade web abrange

O W3C, o órgão que define os padrões da web, define acessibilidade web como sites, ferramentas e tecnologias construídos para que pessoas com deficiência possam usá-los. Isso significa que elas podem perceber, entender, navegar e interagir com a web, e também contribuir com ela.

Tim Berners-Lee, o inventor da web, resumiu o objetivo com simplicidade: "The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." (O poder da Web está na sua universalidade. O acesso por todos, independentemente de deficiência, é um aspecto essencial.) A Introduction to Web Accessibility do W3C começa com essa frase.

Quem depende de um site acessível

A WebAIM, que treina desenvolvedores em design acessível, observa que um em cada quatro adultos nos Estados Unidos tem alguma deficiência. Nem toda deficiência afeta a forma como alguém usa a internet. Ainda assim, nas palavras da WebAIM, poucas empresas recusariam de propósito um quarto dos seus clientes potenciais, ou mesmo 5 por cento deles.

Os principais grupos são estes:

• Visual: cegueira, baixa visão e daltonismo. As pessoas podem usar leitores de tela, que leem a página em voz alta, ou ampliadores de tela.
• Auditiva: surdez e perda auditiva. As pessoas dependem de legendas e transcrições.
• Motora: controle motor fino limitado ou impossibilidade de usar o mouse. As pessoas podem usar teclado, ponteira bucal, software de rastreamento ocular ou comandos de voz.
• Cognitiva: dificuldades de aprendizagem, distração e dificuldade de reter muita informação de uma só vez. Aqui, o que mais importa são textos claros e um layout lógico.

O W3C também inclui as deficiências de fala e neurológicas em sua definição.

Os benefícios vão muito além da deficiência

O W3C lista vários grupos que se beneficiam do design acessível sem ter uma deficiência:

• pessoas que usam celulares e smart TVs, com telas pequenas ou outras formas de entrada
• pessoas mais velhas, cuja visão ou audição muda com a idade
• pessoas com uma deficiência temporária, como um braço quebrado ou óculos perdidos
• pessoas limitadas pela situação, como sol forte ou um lugar onde não podem tocar som
• pessoas com conexão de internet lenta ou cara

Essa sobreposição é o motivo de o trabalho de acessibilidade e o de usabilidade andarem na mesma direção. Se você já está seguindo um plano para melhorar a experiência do usuário no seu site, muitas das mesmas mudanças valem duas vezes.

O padrão WCAG em linguagem simples

As WCAG são escritas pelo World Wide Web Consortium (W3C) e, segundo o W3C, a versão 2.2 também é um padrão ISO, a ISO/IEC 40500. A WebAIM a chama de base da maioria das leis de acessibilidade web do mundo.

As diretrizes se apoiam em quatro princípios, cujas iniciais formam a sigla POUR (em inglês):

1. Perceptível (Perceivable). Os usuários conseguem absorver o conteúdo com os sentidos que têm, ou por meio de tecnologia assistiva. As imagens têm alternativas em texto e os vídeos têm legendas.
2. Operável (Operable). Todos os controles funcionam pelo teclado ou por um dispositivo assistivo, além do mouse. Nada depende de movimentos precisos do mouse.
3. Compreensível (Understandable). O conteúdo é claro e o site se comporta de maneira previsível.
4. Robusto (Robust). O código é limpo o bastante para que muitos navegadores e ferramentas assistivas, antigos e novos, consigam lê-lo.

Para widgets interativos criados com JavaScript, os desenvolvedores usam o WAI-ARIA. É uma tecnologia do W3C que acrescenta significado que navegadores e ferramentas assistivas podem repassar aos usuários. A documentação de acessibilidade da MDN, da Mozilla, trata do assunto a fundo. A MDN também faz uma observação mais simples: muito conteúdo se torna acessível apenas por usar o elemento HTML correto para cada função.

A acessibilidade web é exigida por lei?

Muitas vezes, sim. Os detalhes dependem de quem você é e de onde atua. Leia o que vem a seguir como um resumo de orientações públicas e consulte um advogado sobre a sua situação.

A ADA e o seu site

A Lei dos Americanos com Deficiência (Americans with Disabilities Act, ADA) cobre governos estaduais e locais no Título II e empresas abertas ao público no Título III. Em seu guia sobre acessibilidade web e a ADA, de 18 de março de 2022, o Departamento de Justiça afirma que sempre entendeu que a ADA se aplica a serviços e bens oferecidos na web.

Os exemplos do DOJ para o Título III incluem lojas, bancos, hotéis, hospitais e consultórios médicos, negócios de comida e bebida, e teatros e arenas esportivas. Se os clientes podem entrar no seu negócio, a posição do DOJ é que o que você oferece no seu site também está coberto.

O mesmo guia diz que as empresas podem escolher como cumprir a lei, porque o DOJ não havia definido padrões técnicos detalhados para elas. Ainda assim, elas devem tornar acessível o que oferecem online, e o DOJ aponta as WCAG e os Padrões da Seção 508 federal como orientações úteis.

Governos estaduais e locais: a regra de 2024

A página do ADA.gov traz sua própria ressalva. O guia de 2022 não reflete os requisitos para governos estaduais e locais publicados no Federal Register em 24 de abril de 2024. Se você administra ou cria sites para um órgão público, leia essa regra diretamente, em vez de um resumo mais antigo.

Seção 504, Seção 508 e outros países

A Lei de Reabilitação de 1973 (Rehabilitation Act of 1973) acrescenta as Seções 504 e 508. A Seção 508 define os padrões que o governo federal usa em seus próprios sites. Fora dos EUA, a WebAIM observa que muitas leis internacionais também tratam de acessibilidade. A Convenção da ONU sobre os Direitos das Pessoas com Deficiência vai além e trata o acesso à web como um direito humano básico.

Regra ou padrão	A quem se aplica	O que significa para um site	Onde ler
ADA Título II	Governos estaduais e locais	O DOJ considera seus serviços e programas online como cobertos	ADA.gov, mais a regra publicada em 24 de abril de 2024
ADA Título III	Empresas abertas ao público, como lojas, bancos, hotéis e consultórios médicos	O DOJ considera bens e serviços oferecidos online como cobertos, com flexibilidade na forma de cumprir	Guia do DOJ de 18 de março de 2022
Seção 508 da Lei de Reabilitação de 1973	Órgãos federais	Define os padrões de acessibilidade que os sites federais seguem	Os Padrões da Seção 508
WCAG, do W3C	Qualquer pessoa; a maioria das leis de acessibilidade se baseia nelas	A lista técnica que a maioria das equipes usa para testar; as WCAG 2.2 também são a ISO/IEC 40500	A Web Accessibility Initiative do W3C
Convenção da ONU sobre os Direitos das Pessoas com Deficiência	Países que a ratificaram	Trata o acesso à web como um direito humano básico	As Nações Unidas

As barreiras de acessibilidade que a maioria dos sites ainda tem

A UserWay, empresa que vende software de acessibilidade, informa que 96% dos principais sites contêm problemas de acessibilidade facilmente detectáveis. É um número da própria fornecedora, mas condiz com a visão da WebAIM de que o potencial da web para pessoas com deficiência "remains largely unrealized" (continua em grande parte não realizado).

O mesmo punhado de barreiras aparece repetidamente nas orientações do DOJ, então aqui estão elas, com a correção e uma resposta direta sobre se você mesmo consegue fazê-la.

Barreira	Quem ela bloqueia	A correção	Você mesmo consegue corrigir?
Imagens sem texto alternativo	Usuários cegos com leitores de tela	Adicionar um texto alternativo curto que diga para que serve a imagem	Sim, na maioria dos sistemas de gerenciamento de conteúdo
Baixo contraste de cores	Pessoas com baixa visão ou daltonismo	Escurecer o texto ou clarear o fundo até o texto se destacar com clareza	Geralmente, embora mudanças nas cores da marca possam exigir um designer
Cor como único sinal	Usuários daltônicos e usuários de leitores de tela	Adicionar uma indicação em texto, como a palavra "obrigatório" ao lado de um campo de formulário vermelho	Sim
Vídeos sem legendas	Pessoas surdas ou com deficiência auditiva	Adicionar legendas precisas e sincronizadas que identifiquem quem fala	Sim, ou com um serviço de legendagem
Áudio sem transcrição	Pessoas surdas ou com deficiência auditiva	Publicar uma transcrição em texto junto com o áudio	Sim; o W3C diz que as transcrições são fáceis e relativamente baratas
Campos de formulário sem rótulos ou com erros vagos	Usuários de leitores de tela e pessoas com deficiência cognitiva	Rotular todos os campos, dar instruções claras e explicar cada erro e como corrigi-lo	Em parte; muitas vezes precisa de um desenvolvedor
Menus e botões que exigem mouse	Pessoas que não conseguem usar o mouse, incluindo usuários de controle por voz	Fazer todas as funções funcionarem pelo teclado	Geralmente precisa de um desenvolvedor
Títulos escolhidos pelo tamanho da fonte	Usuários de leitores de tela que pulam entre títulos	Usar tags de título de verdade, em ordem lógica	Sim
Links que dizem "clique aqui"	Usuários de leitores de tela que percorrem uma lista de links	Escrever um texto de link que faça sentido sozinho	Sim

Imagens, vídeo e áudio

O texto alternativo deve descrever a finalidade da imagem. O DOJ diz que, para ser útil, ele deve ser curto e descritivo. Uma foto de produto precisa do nome do produto. Um gráfico precisa da conclusão que o gráfico mostra.

Para vídeo, o DOJ pede legendas sincronizadas, precisas e que identifiquem quem está falando. Para áudio arquivado, como um episódio antigo de podcast, a WebAIM diz que uma transcrição pode bastar.

Formulários e uso do teclado

Os formulários são onde os problemas de acessibilidade custam dinheiro de forma mais direta. Um cliente que não consegue enviar um formulário de reserva ou de compra simplesmente vai embora. Cada campo precisa de um rótulo que o leitor de tela consiga anunciar, como "número do cartão de crédito" no campo do cartão. Quando alguém comete um erro, a página deve avisar na hora, dizer o que deu errado e explicar como corrigir. Uma data digitada no formato errado é o exemplo do próprio DOJ.

O acesso pelo teclado é a outra metade. Algumas pessoas não conseguem usar o mouse de jeito nenhum, e muitos usuários mais velhos com controle motor fino limitado estão nesse grupo. Quando todos os menus e formulários funcionam pelo teclado, quem usa entrada por voz e outras ferramentas que agem como um teclado também consegue usar o seu site. O tamanho do texto também importa: pessoas com baixa visão precisam ampliar a página no navegador sem que ela se desmonte.

Estrutura: títulos, links, tabelas e documentos

Usuários de leitores de tela costumam percorrer a página pelos títulos, ou ouvir apenas os links. Por isso, os títulos precisam ser elementos de título de verdade, em uma ordem sensata, e cada link precisa fazer sentido fora de contexto. Você pode ver a estrutura de títulos de uma página, junto com a tag de título, em um verificador gratuito de títulos e meta tags.

Tabelas de dados precisam de células de cabeçalho para que o leitor de tela consiga ligar cada valor à sua linha e coluna. PDFs e arquivos do Word exigem o mesmo cuidado. A WebAIM recomenda PDFs com tags, ou uma versão em HTML quando um documento não pode ser tornado acessível. Um link "Pular para o conteúdo principal" no topo de cada página permite que usuários de teclado passem direto pelo menu que se repete em todas as páginas.

Como a acessibilidade web e o SEO se sobrepõem

Boa parte do que torna uma página acessível também facilita a leitura pelos mecanismos de busca. O W3C lembra que os mecanismos de busca também não enxergam imagens. Eles leem o texto alternativo, assim como um leitor de tela, e uma transcrição transforma áudio em texto que eles conseguem ler.

A sobreposição vai além da mídia:

• Os títulos dão aos usuários de leitores de tela um mapa da página. Para os rastreadores, eles dão um esboço claro do assunto da página.
• Um texto de link descritivo diz a um usuário de leitor de tela e a um mecanismo de busca o que a próxima página aborda. "Preços de limpeza de escritórios" é melhor que "clique aqui" para os dois.
• HTML limpo também compensa. A WebAIM observa que o código acessível costuma ser mais leve e eficiente, e que HTML e CSS válidos tornam o código mais robusto.
• Muitas barreiras que atrapalham pessoas com deficiência também frustram quem usa o celular em telas pequenas.

Seja realista sobre o que isso significa. O trabalho de acessibilidade não vai posicionar uma página sozinho, e o motivo para corrigir uma barreira é que, sem isso, as pessoas não conseguem usar o seu site. O benefício para a busca vem de uma estrutura mais clara e de um conteúdo melhor. Para saber mais sobre como estrutura, conteúdo e correções técnicas se encaixam, navegue pelo blog da SearchBlueprint.

Como verificar a acessibilidade do seu site por conta própria

Dá para encontrar muita coisa numa tarde, sem nenhum software especial. O W3C publica um guia chamado "Easy Checks", uma primeira revisão de acessibilidade web, construído exatamente sobre essa ideia: passos simples, como alterar configurações do navegador, mostram onde estão os problemas óbvios.

Verificações rápidas que você pode fazer hoje

1. Largue o mouse e use a tecla Tab para percorrer sua página inicial e seu formulário mais importante. Você consegue ver sempre onde está, alcançar todos os links e enviar o formulário?
2. Aumente o zoom do navegador bem além do tamanho normal e veja se o texto continua legível ou se começa a se sobrepor e ser cortado.
3. Confira suas imagens. Olhe o texto alternativo das suas páginas principais. Está faltando, ou está cheio de palavras-chave em vez de descrever a imagem?
4. Leia seus títulos em ordem. Eles formam um esboço lógico, ou saltam de H1 para H4 porque alguém gostou do tamanho da fonte?
5. Reproduza um vídeo sem som. Há legendas, e elas estão corretas?
6. Quebre um formulário de propósito. Deixe um campo obrigatório vazio e envie. O erro explica o problema em palavras, ou só deixa o campo vermelho?
7. Rode um verificador automático. Ferramentas gratuitas apontam texto alternativo ausente e contraste baixo em minutos.

Se quiser uma lista mais ampla para trabalhar ao mesmo tempo, este checklist de auditoria de site com 25 verificações gratuitas cobre o básico técnico e de on-page.

Por que ferramentas automáticas e overlays só vão até certo ponto

Os verificadores automáticos são úteis. Mas também deixam passar muita coisa. O W3C é direto: nenhuma ferramenta sozinha consegue determinar se um site cumpre as diretrizes de acessibilidade, e é necessária uma avaliação humana qualificada. O DOJ compara verificadores automáticos e overlays a corretores ortográficos e gramaticais, que só ajudam quando usados com cuidado, e alerta que um relatório "limpo" não significa necessariamente que o site seja acessível.

Essa cautela vale para os overlays, os widgets que adicionam uma barra de ferramentas de acessibilidade e prometem corrigir problemas comuns conforme cada página carrega. Fornecedores como a UserWay os vendem junto com auditorias manuais e monitoramento. Um widget não tem como saber se o seu texto alternativo descreve a coisa certa, ou se as mensagens de erro dos seus formulários fazem sentido. Trate-o como uma camada extra por cima da correção das suas páginas.

Quando chamar um profissional

Fazer por conta própria funciona bem para correções de conteúdo: texto alternativo, legendas, títulos, texto de links e escrita simples. Busque ajuda especializada quando:

• você usa componentes de JavaScript personalizados, como seletores de data ou carrosséis, que exigem ARIA e tratamento de teclado
• seus formulários de compra, reserva ou inscrição são complexos
• você está planejando um redesign, já que o W3C diz que é mais eficiente incorporar a acessibilidade desde o início do que refazer o trabalho depois
• você precisa de uma auditoria formal, por exemplo porque o processo de compras de um cliente ou uma carta jurídica a exige

A curva de aprendizado é mais curta do que muita gente imagina. A WebAIM diz que um desenvolvedor pode aprender o básico de acessibilidade web em poucos dias, embora muitas vezes leve meses para que a mentalidade e as técnicas se tornem naturais. Se quiser começar a aprender por conta própria, o W3C oferece um vídeo introdutório de 4 minutos e um curso online gratuito, Digital Accessibility Foundations.

Faça da acessibilidade parte da sua rotina de publicação

Correções pontuais se desgastam. Um novo post vai ao ar sem texto alternativo, um novo vídeo é publicado sem legendas e um redesign elimina o link de pular conteúdo. O conselho da WebAIM para as organizações é criar conscientização, conseguir o apoio da liderança e respaldar o trabalho com uma política escrita, para que a acessibilidade faça parte da rotina diária.

Para uma equipe pequena, isso pode ser algumas linhas acrescentadas a cada briefing de conteúdo:

• toda imagem recebe um texto alternativo que diz o que ela mostra ou faz
• todo vídeo recebe legendas antes de ir ao ar
• os títulos seguem uma ordem lógica
• o texto do link diz para onde ele leva
• os formulários são testados com o teclado antes do lançamento

Depois, repita suas verificações a cada versão publicada, do mesmo jeito que você reauditaria qualquer outra coisa que se desvia com o tempo. Você pode ver esse hábito na prática no nosso estudo de caso, em que auditamos o nosso próprio site.

Perguntas frequentes

A acessibilidade web é uma exigência legal para pequenas empresas?

Nos EUA, a posição do DOJ é que a ADA cobre empresas abertas ao público, e que os bens e serviços que elas oferecem online também estão cobertos. O DOJ dá flexibilidade às empresas quanto à forma de cumprir, mas espera que o resultado seja acessível. Outros países têm suas próprias leis, então confira as regras de onde você atua.

O que são as WCAG e qual versão devo seguir?

As WCAG, as Web Content Accessibility Guidelines, são o padrão internacional do W3C para conteúdo web acessível. O W3C observa que as WCAG 2.2 também são publicadas como o padrão ISO ISO/IEC 40500, o que as torna a versão natural para testar.

Um overlay de acessibilidade deixa meu site em conformidade?

Sozinho, não. O DOJ diz que verificadores automáticos e overlays podem ajudar, mas exigem uso cuidadoso, e que um relatório limpo não significa necessariamente que o site seja acessível. O W3C acrescenta que é necessária uma avaliação humana para confirmar que um site cumpre as diretrizes.

A acessibilidade web ajuda no SEO?

De forma indireta. Texto alternativo, transcrições, títulos lógicos e links descritivos ajudam os mecanismos de busca a entender uma página, assim como as pessoas que usam tecnologia assistiva. Trate o benefício para a busca como um bônus.

Quanto tempo leva para tornar um site acessível?

Depende. Correções de conteúdo, como texto alternativo e legendas, podem começar esta semana, enquanto problemas de código, como o acesso por teclado, levam tempo de desenvolvedor e dependem de como o site foi construído. A WebAIM diz que um desenvolvedor pode aprender o básico em poucos dias. Incorporar a acessibilidade desde o início, observa o W3C, é mais eficiente do que voltar atrás para refazer o trabalho.

Percorra com a tecla Tab a sua página mais importante esta semana

Escolha a página que traz mais negócios e largue o mouse. Tente concluir a tarefa principal dela só com o teclado e anote cada ponto em que você travar. Essa lista é o ponto de partida do seu trabalho de acessibilidade web. Para ver como uma revisão completa de site organiza problemas e correções, confira nosso exemplo de relatório de auditoria de SEO e depois converse com a equipe sobre o que uma revisão do seu próprio site cobriria.

Recursos / Referências

1. Introduction to Web Accessibility
2. WebAIM
3. Documentação de acessibilidade da MDN
4. guia sobre acessibilidade web e a ADA

Leitura relacionada: Web Accessibility and SEO: Why Fixing One Boosts the Other.

Fontes

• Introduction to Web Accessibility
• Guidance on Web Accessibility and the ADA
• Introduction to Web Accessibility
• UserWay | Web Accessibility Solutions
• Accessibility - MDN Web Docs - Mozilla