Menu
Selecione seu idioma

Selecione seu idioma

Existem duas formas de abordar a acessibilidade digital, qual é a sua?

A acessibilidade sempre foi "deixada para depois", porque nunca foi vista como melhoria de qualidade nos produtos, mas sim como "algo que as empresas são obrigadas a incluir".

O uso de ferramentas para cobrir lacunas causa uma falsa sensação de atendimento, mas a experiência real continua comprometida.

Role a tela e compreenda as diferenças entre os caminhos escolhidos...

O caminho que você escolhe reflete diretamente na qualidade do seu produto!

Acompanhe as trilhas e reflita...

Duas mãos em preto e branco oferecem uma pílula vermelha e uma azul, em referência ao filme Matrix. Na versão animada, as mãos viram e as pílulas caem conforme a rolagem.

Duas escolhas. Diferentes consequências.

O que acontece depois da escolha?

Acompanhe cinco momentos de um produto digital. De um lado, acessibilidade como parte do trabalho. Do outro, a expectativa de resolver tudo com um overlay.

  1. A decisão inicial

    A promessa do atalho

    “É só instalar.”

    A equipe instala uma ferramenta e considera a acessibilidade resolvida, sem investigar as barreiras do produto.

    A acessibilidade na prática

    Começa com entendimento.

    A equipe identifica barreiras, define prioridades e assume responsabilidades para enfrentá-las.

  2. A preparação das equipes

    A promessa do atalho

    “A ferramenta cuida disso.”

    Design, conteúdo e desenvolvimento seguem trabalhando sem capacitação. As decisões que criam barreiras continuam se repetindo.

    A acessibilidade na prática

    Conhecimento faz parte da solução.

    As equipes recebem capacitação para reconhecer barreiras e incorporar acessibilidade às decisões do dia a dia.

  3. A construção do produto

    A promessa do atalho

    “Depois a gente adapta.”

    O produto chega à implementação sem requisitos de acessibilidade. A expectativa é que uma camada adicionada ao site compense o que ficou de fora.

    A acessibilidade na prática

    Acessibilidade desde a origem.

    Requisitos, comportamentos e critérios de aceite são documentados desde o design e orientam o desenvolvimento.

  4. A verificação da experiência

    A promessa do atalho

    “O botão apareceu. Está pronto.”

    A presença do recurso é tratada como prova de acessibilidade, sem verificar se as pessoas conseguem concluir as tarefas.

    A acessibilidade na prática

    A experiência precisa ser verificada.

    QA participa desde o início. Testes automatizados e manuais, tecnologias assistivas e participação de pessoas com deficiência ajudam a identificar barreiras.

  5. A continuidade

    A promessa do atalho

    “Já resolvemos isso.”

    Novas páginas e funcionalidades são publicadas sem revisão de acessibilidade. A confiança na ferramenta substitui o acompanhamento do produto.

    A acessibilidade na prática

    Cada mudança também conta.

    A equipe acompanha relatos, verifica regressões e atualiza componentes e documentação para sustentar as melhorias.

Um longo caminho...

Acessibilidade está longe (muito longe) de estar associada com a instalação de uma ferramenta.

É importante compreender que desenvolver com melhor qualidade não envolve fórmulas prontas,
mas sim contextos de uso...

Entenda a ferramenta

É uma ferramenta de AJUSTES, não uma solução para acessibilidade.

Algumas ferramentas de acessibilidade adicionam um painel de ajustes à página. São conhecidas como overlays: uma camada de recursos sobre o site que você está usando.

  1. O site continua sendo a base. Conteúdo, estrutura e comportamentos precisam ser acessíveis.
  2. A ferramenta acrescenta ajustes. O painel pode reunir opções como tamanho do texto e cores. Os recursos variam entre produtos.
  3. Um botão abre o painel. É assim que essas ferramentas costumam aparecer: um ícone em uma das laterais da página.

A maior parte das funcionalidades adicionadas já existem nos sistemas e navegadores.

Representação simplificada de duas camadas: o site e o botão da ferramenta sobre a página. O ícone nesta ilustração não é um botão funcional.

Recursos, alternativas e limites

O que essas ferramentas
realmente acrescentam?

Compare as funcionalidades oferecidas, os recursos que já existem nos dispositivos e as barreiras que continuam exigindo trabalho no próprio site.

Compare recurso por recurso

Inventário de funcionalidades

Muitas ferramentas citam o fato de terem uma centena de recursos como diferencial, mas o quanto desses recursos realmente impactam na experiência das pessoas ou precisavam estar lá?

A tabela a seguir exibe algumas funcionalidades oferecidas por ferramentas do tipo "overlay" e os compara com funcionalidades existentes em sistemas operacionais ou navegadores. Entenda que nem sempre uma redundância significa melhora ou piora na experiência de forma isolada, essa é apenas uma tabela comparativa.

Funcionalidades, alternativas e limites
Funcionalidade oferecida Alternativa ou responsabilidade Limite da comparação
Aumentar e diminuir texto Redundância elevada Zoom dos navegadores; tamanho do texto no Windows, macOS, iOS e Android Zoom da página e tamanho do texto têm efeitos diferentes. O suporte aos ajustes varia entre sites e aplicativos.
Ampliador de tela ou lupa Redundância elevada Lupa do Windows, Zoom do macOS e iOS, ampliação do Android A ampliação do sistema pode alcançar a tela inteira; uma lupa dentro de um site tem alcance restrito.
Cursor maior Redundância elevada Configurações de ponteiro do Windows e macOS O ajuste do sistema alcança outros aplicativos. Ponteiros personalizados pelo site podem ter comportamento diferente.
Alterar cor do cursor Redundância elevada Personalização do ponteiro no sistema operacional As opções disponíveis dependem do sistema e de sua versão.
Alto contraste Redundância significativa Temas de contraste do Windows; opções de contraste do macOS e iOS Temas de contraste, aumento de contraste e recoloração de uma página têm alcances diferentes.
Inverter cores Redundância elevada Inversão de cores no macOS, iOS e Android O tratamento de imagens, vídeos e elementos da interface pode variar. Inverter cores não garante contraste adequado.
Escala de cinza Redundância elevada Filtros de cor dos sistemas operacionais Remover as cores não resolve informações que dependem apenas delas para ser compreendidas.
Filtros para daltonismo Redundância significativa Filtros de cores do Windows, macOS, iOS e Android Os filtros e seus resultados variam. O conteúdo ainda precisa oferecer formas de identificação além da cor.
Modo escuro Redundância significativa Preferência de aparência dos sistemas e navegadores A aparência escura do sistema ou navegador não transforma automaticamente todos os sites. O resultado depende do suporte da página.
Leitura de texto em voz alta Redundância elevada Recursos de fala dos sistemas, leitura em voz alta e modos de leitura Ouvir um texto não equivale a navegar e operar uma interface com leitor de tela. Vozes e idiomas disponíveis variam.
Leitor de tela Alternativa gratuita especializada VoiceOver, NVDA, Jaws, TalkBack, Narrador, entre outros. Leitores de tela oferecem navegação e interação, além de fala. O site precisa ter semântica e comportamentos compatíveis.
Avatar de língua de sinais Alternativa gratuita especializada Avatares podem ser considerados úteis em cenários específicos.
Exemplo: VLibras (para Língua de sinais brasileira) (abre em nova aba) 		Avatares de línguas de sinais podem ajudar positivamente uma parcela da comunidade surda e seus recursos podem ser utilizados de forma independente de outras ferramentas com certa utilidade em alguns cenários. No entanto, prefira soluções que priorize intérpretes humanos.
Comandos de voz Redundância significativa Acesso por Voz do Windows, Controle por Voz da Apple e Voice Access do Android A disponibilidade depende do sistema, da versão e do idioma. Comandos limitados a um site não equivalem ao controle do dispositivo.
Teclado virtual Redundância elevada Teclados virtuais existem nas configurações de sistemas operacionais O teclado permite entrada de dados, mas não corrige componentes que não podem ser alcançados ou operados adequadamente.
Reduzir animações Redundância parcial Preferências de redução de movimento dos sistemas operacionais A preferência não garante que todo movimento de uma página pare. O site precisa respeitá-la e oferecer controles adequados.
Modo de leitura simplificado Redundância significativa Modos de leitura dos navegadores e do Android Nem todas as páginas são compatíveis. A apresentação simplificada não substitui a operação de formulários e outros componentes.
Máscara de leitura Redundância parcial Recursos de foco de linha em modos de leitura dos navegadores A máscara reduz visualmente o conteúdo ao redor de uma faixa. A disponibilidade da alternativa depende do modo de leitura; o recurso não corrige a estrutura do conteúdo e deve permitir ajuste e desativação.
Guia de leitura Redundância parcial Recursos de acompanhamento de linhas em modos de leitura dos navegadores Uma régua ou linha visual ajuda a marcar a posição da leitura. Não equivale necessariamente ao foco de linha de um modo de leitura, nem ao foco do teclado; não deve encobrir conteúdo ou impedir interações.
Fonte mais legível Redundância parcial Personalização de fontes no navegador e em alguns modos de leitura A aplicação das fontes varia entre páginas e modos de leitura. Não existe uma única fonte que atenda a todas as pessoas.
Rastreamento ocular ou facial Redundância parcial Controle ocular do Windows e recursos de controle por expressões faciais em sistemas compatíveis Controle ocular e facial são recursos distintos. Podem exigir hardware específico e dependem do dispositivo e de sua versão. Ponto de atenção: É importante saber se a gravação da tela está sendo armazenada por questões relacionadas a LGPD, GDPR, CCPA ou equivalentes.

As funcionalidades dessa tabela não são exaustivas e tem o intuito apenas de exibir um comparativo inicial.

Onde consultar documentações e exemplos de uso de recursos similares?
Funcionalidade oferecida Sinônimos e nomes similares do recurso Documentações e extensões gratuitas
Aumentar e diminuir texto Tamanho da fonte; tamanho do texto; zoom da página
Ampliador de tela ou lupa Lupa; ampliação; zoom da tela; magnifier
Cursor maior Ponteiro ampliado; tamanho do ponteiro; cursor grande
Alterar cor do cursor Cor do ponteiro; ponteiro personalizado; pointer color
Alto contraste Temas de contraste; aumentar contraste; high contrast
Inverter cores Inversão de cores; cores invertidas; invert colors
Escala de cinza Tons de cinza; filtro monocromático; grayscale
Filtros para daltonismo Filtros de cor; correção de cores; color filters
Modo escuro Tema escuro; aparência escura; dark mode
Leitura de texto em voz alta Ler em voz alta; síntese de fala; text-to-speech (TTS)
Leitor de tela Leitura de tela; leitor de ecrã; screen reader; Narrador
Avatar de língua de sinais Avatar de Libras; tradução automática para língua de sinais; VLibras
Comandos de voz Acesso por voz; controle por voz; voice access
Teclado virtual Teclado na tela; teclado de acessibilidade; on-screen keyboard
Reduzir animações Reduzir movimento; efeitos de animação; reduced motion
Modo de leitura simplificado Modo de leitura; visualização de leitura; leitor imersivo; reader mode
Máscara de leitura Máscara de tela; janela de leitura; foco de linha; reading mask
Guia de leitura Régua de leitura; linha-guia; reading ruler; line guide
Fonte mais legível Personalizar fontes; família tipográfica; estilo de fonte
Rastreamento ocular ou facial Controle ocular; ponteiro pela cabeça; eye tracking; head tracking

Os nomes ajudam na busca por recursos similares, mas não indicam equivalência em todos os contextos. A disponibilidade depende do sistema, da versão e do conteúdo; alguns links estão em inglês.

Análise comportamental

Perguntas reflexivas que devem orientar sua decisão

O nome já diz: FUNCIONALIDADE. Será que essa função realmente ajuda em algo?

Funcionalidade Principal questionamento
Navegação por teclado Por que seria necessário ativar um recurso para operar algo que deveria funcionar naturalmente com teclado?
Compatibilidade com leitores de tela Por que o site não foi desenvolvido para funcionar corretamente com os leitores de tela que as pessoas já utilizam?
Descrição automática de imagens Como garantir que uma descrição gerada automaticamente represente corretamente a finalidade da imagem?
Destaque de links e títulos Se os elementos não são identificáveis, por que não corrigir sua apresentação e sua semântica na interface original?
Perfis de deficiência Por que presumir que pessoas com a mesma deficiência necessitam dos mesmos ajustes?
Ajuste de espaçamento entre textos Se uma pessoa modifica o espaçamento, o layout continua funcional e sem perda de conteúdo?
Ampliação de texto e conteúdo Ao ampliar o conteúdo, a pessoa continua conseguindo ler, acessar os controles e concluir sua tarefa, sem sobreposição ou perda de informações?
Alto contraste e inversão de cores O ajuste preserva a identificação de campos, mensagens de erro, foco e estados dos controles, ou melhora uma parte da página e dificulta outra?
Filtros de cores e escala de cinza Se uma informação depende apenas da cor, o filtro resolve essa barreira ou ainda faltam textos, símbolos e outras formas de identificá-la?
Leitura de texto em voz alta A leitura ajuda a compreender o conteúdo e pode ser pausada e interrompida, sem competir com o leitor de tela ou outros sons que a pessoa já utiliza?
Redução de animações Ao interromper o movimento, carrosséis, menus e outros componentes continuam operáveis? Por que não respeitar a preferência do sistema desde o início?
Modo de leitura simplificado A simplificação preserva as informações essenciais, a ordem de leitura e os links necessários, ou remove partes de que a pessoa precisa?
Comandos de voz A pessoa consegue acionar os controles pelos nomes que aparecem na tela, sem precisar aprender comandos exclusivos dessa ferramenta?
Alteração de fonte A troca de fonte respeita a preferência da pessoa e preserva a leitura de todos os caracteres, sem cortar textos ou desorganizar os componentes?

Considere o esforço

Quantidade de funcionalidades NÃO é uma medida de acessibilidade

Não é incomum percebermos discursos relacionando a quantidade de opções oferecidas como algo favorável para a acessibilidade. Mas quantidade nunca será um fator de qualidade, ainda mais se considerarmos diferentes estudos relacionando a quantidade de opções com o aumento da carga cognitiva, como este estudo de 2023 (abre em nova aba), como exemplo.

Um possível percurso de atenção, interpretação e decisão ao usar um painel de preferências:

Selecione uma etapa para explorar um exemplo. Selecione novamente para recolher.

Etapas de esforço cognitivo antes de retomar a tarefa

  1. Encontrar o recursoInterromper a tarefa e localizar onde estão os ajustes.

    Exemplo da situação

    Você está preenchendo um formulário e precisa aumentar o texto. Antes de continuar, procura o botão que abre o painel de preferências.

  2. Entender as opçõesInterpretar os nomes e imaginar o efeito de cada alternativa.

    Exemplo da situação

    O painel oferece “Contraste”, “Saturação” e “Realce”. Você lê os nomes e tenta descobrir qual opção tornará o texto mais fácil de ler.

  3. Escolher um ajusteComparar possibilidades e decidir qual pode atender à necessidade.

    Exemplo da situação

    Entre aumentar a fonte, ampliar a página e mudar o espaçamento, você compara as opções para decidir qual experimentar primeiro.

  4. Testar o resultadoAvaliar o efeito e, se necessário, rever a escolha.

    Exemplo da situação

    Você aumenta o texto, volta ao formulário e verifica se consegue ler melhor. Se o resultado não ajudar, retorna ao painel para tentar outro ajuste.

  5. Voltar à tarefaRetomar a atenção e lembrar de onde havia parado.

    Exemplo da situação

    Depois de fechar o painel, você procura o campo em que estava e relembra a informação que pretendia preencher.

Copie boas ideias

Observe sites de grandes empresas.
São acessíveis e não exibem "ajustes"

Desenvolver produtos e serviços envolve também reconhecer e utilizar boas práticas. Da mesma forma que algumas boas práticas de grandes empresas são adotadas, herde também a característica de desenvolver produtos de forma consistente capacitando suas equipes.

Ações e posicionamentos importantes envolvendo governos e organizações em diferentes países

IAAP + EDF

Declaração conjunta do Fórum Europeu das Pessoas com Deficiência (EDF) e da Associação Internacional de Profissionais de Acessibilidade (IAAP) sobre sobreposições de acessibilidade.

Ler declaração conjunta (abre em nova aba)

Comissão Europeia

O Fórum Europeu da Deficiência, usuários com deficiência e muitos especialistas em acessibilidade expressaram preocupação com o uso de sobreposições.

Consultar posicionamento (abre em nova aba)

Há muitas outras referências para consulta adicional, role a tela mais um pouco para ter uma lista delas.

Para estudar profundamente

Referências adicionais

Os links a seguir possuem conteúdos relacionados a pesquisas, empresas processadas mesmo usando ferramentas, depoimentos, análises profundas e detalhadas e uma série de informações que podem ajudar como argumentação e decisão para uso de diferentes tipos de ferramentas.

  1. Overlay Fact Sheet (abre em nova aba) — funcionamento, capacidades e limites de overlays.
  2. Overlay False Claims (abre em nova aba) — documentação crítica de promessas comerciais.
  3. Should I Use An Accessibility Overlay? (abre em nova aba) — argumentos sobre barreiras não resolvidas, tecnologias assistivas e riscos de confiar em overlays.
  4. The A11Y Project: Should I use an accessibility overlay? (abre em nova aba) — diferenças entre correções temporárias e plugins permanentes, com impactos sobre autonomia, privacidade e qualidade.
  5. Daniela Kubesch: The Impact of Web Accessibility Overlays (abre em nova aba) — pesquisa de mestrado com avaliação técnica e estudo de usabilidade com 21 pessoas com deficiência visual.
  6. Lainey Feingold: Why Accessibility Overlays Don’t Work (abre em nova aba) — resultados de testes de overlays em sites de governos estaduais dos Estados Unidos.
  7. Scope: Why accessibility overlays do not improve site accessibility (abre em nova aba) — limitações dos widgets e possíveis conflitos com tecnologias assistivas.
  8. Sheri Byrne-Haber: Overlays are not the solution to your accessibility problem (abre em nova aba)
  9. Sheri Byrne-Haber: More lawsuits filed against companies using accessibility plugin/overlays (abre em nova aba)
  10. Sheri Byrne-Haber: The four pillars of accessibility overlay marketing (abre em nova aba)
  11. Siteimprove: A guide to accessibility overlays (abre em nova aba)
  12. Karl Groves: Selling Accessibility – Negative Factors (abre em nova aba) — equívocos, medo e práticas que dificultam o apoio à acessibilidade nas organizações.
  13. FTC: acordo com a accessiBe sobre alegações de acessibilidade (abre em nova aba) — comunicado sobre acordo de US$ 1 milhão para resolver acusações de publicidade enganosa.

Vídeos

  1. The Underlying Truth about Overlays (abre em nova aba)
  2. Overlays Underwhelm / Adrian Roselli #id24 2022 (abre em nova aba)
  3. 5 False Claims 1-Line "AI" Accessibility Script Vendors Make (abre em nova aba)
  4. What are accessibility overlays? (abre em nova aba)
  5. Avoid companies claiming quick & easy AI accessibility (abre em nova aba)
  6. Accessibility Overlays: What You See You Already Have (abre em nova aba)
  7. ICT2020 Overlays Panel (abre em nova aba)
  8. Será que é possível tornar um site acessível com apenas uma única linha de código? (em português) (abre em nova aba)
  9. Não confie em ferramentas "milagrosas" de acessibilidade (em português) (abre em nova aba)

Outras leituras

  1. Governo Digital: documentação do VLibras (abre em nova aba) — referência sobre tradução automática e a ressalva de que não substitui intérprete humano.
  2. Scheibehenne, Greifeneder e Todd (2010): Can There Ever Be Too Many Options? (abre em nova aba) — meta-análise sobre sobrecarga de escolha (PDF, em inglês).
  3. Chernev, Böckenholt e Goodman (2015): Choice overload (abre em nova aba) — fatores que influenciam a sobrecarga de escolha (em inglês).
  4. W3C: Avoid Too Much Content (abre em nova aba) — orientação de acessibilidade cognitiva, suplementar às WCAG (em inglês).

Ferramentas de ajustes de código aberto

Algumas opções de código aberto para utilizar em seus projetos

Preferências de Acessibilidade

Com base nas mesmas opções disponíveis em sistemas e navegadores, construímos uma ferramenta de AJUSTES gratuita e de código aberto para que você possa utilizar, recriar e adaptar à vontade em seus projetos.

Apenas lembre-se de que ela deve ser qualificada como uma ferramenta de AJUSTES e não como uma solução de acessibilidade.

Site Preferências de Acessibilidade com o painel aberto, mostrando ajustes de zoom, contraste, fontes, tamanho do texto e espaçamentos.

Conheça Preferências de Acessibilidade (abre em nova aba)

Ao desmarcar, a ferramenta será ocultada e os ajustes serão restaurados.

Outras opções gratuitas e de código aberto

Não endossamos o uso de ferramentas, mas há razões para que algumas pessoas queiram utilizá-las.

Apenas lembre-se de que oferecer ferramentas de ajustes é diferente de promover a acessibilidade de produtos ou serviços digitais.