Laboratório

Acessível ao abrir

Um site que já abre acessível, e um modo de leitura que nasceu de uma mira de videogame.

Os três estados da caixinha do Foco na linha (o ponto, o círculo com o desligar e a caixinha com o play e os ritmos) ao lado de um texto com a mira travada numa linha
Nota no Web para Todos98/100
Critérios AAA07/7
Refações do foco10

Em resumo

Desde que conversei com pessoas cegas, com baixa visão e surdas, acessibilidade virou ponto de partida em tudo que eu desenvolvo. Este estudo conta como levei isso para o meu próprio site: primeiro um modo de leitura pensado para dislexia, o maior desafio; depois a página ouvida com leitor de tela, a paleta refeita para todo texto passar de 7:1 e o painel organizado por perfil. No analisador do Web para Todos, a nota foi de 85 para 98, com todos os critérios AAA que ele mede aprovados. A ideia é que tudo que eu desenvolver daqui pra frente tenha essa função e chegue nessa qualidade.

  • Um modo de leitura pensado para dislexia, que nasceu da mira do Target Lock.

  • Frases inteiras para o leitor de tela, links que dizem para onde vão e aviso falado no que aparece na tela.

  • A paleta refeita perto da original, com todo texto a 7:1 do fundo, sem precisar ligar nada.

  • O painel para ir além: espaçamento, tamanho do texto, botões maiores, menos movimento e alto contraste.

  • Acessibilidade
  • WCAG 2.2
  • AAA
  • eMAG
  • Leitor de tela
  • VoiceOver
  • Navegação por teclado
  • Contraste
  • Daltonismo
  • Dislexia
  • Baixa visão
  • Alto contraste
  • Movimento reduzido
  • Design system

De onde vem esse cuidado

Acessibilidade entrou no meu trabalho no banco BV. Lá eu tive acesso ao time de acessibilidade e conversei com pessoas cegas, com baixa visão e com deficiência auditiva. Desde então, uma coisa que eu levo comigo é pensar nessas pessoas em tudo que eu desenvolvo: o que isso vai facilitar para quem também acessa?

No portal da Câmara de São Paulo, acessibilidade era o tema do projeto, e a equipe se apoiava no padrão WCAG e em plugins, como o da Hand Talk, sem ter conversado com quem usa. Propus um discovery: conversei com quem é cego e com quem tem baixa visão, e troquei mensagens com pessoas surdas. Foram as dores que essas pessoas contaram que direcionaram o portal. Ver o case das Câmaras

Do Target Lock ao Foco na linha

O site tem, de propósito, um pé nas interfaces de jogos de ficção científica: HUD, mira, rótulos em mono, aquele cursor que trava no alvo. É um tema que eu curto pra caramba. Durante os estudos de motion e microinteração, nasceu a função que a gente chama de Target Lock: os vértices que fecham em volta do que você aponta, como uma mira travando.

Um modo de leitura não estava no radar. Olhando para essa mira, veio a pergunta: e se ela servisse para ler? Pô, será que funcionaria? Mesmo sabendo que ia levar tempo e estudo, fui atrás de para quem seria. Uma mira que segue o texto ajuda quem perde a linha no meio do parágrafo, e pensei em dois públicos: dislexia e TDAH.

Para TDAH, não encontrei estudo que apontasse esse tipo de régua de leitura como ajuda. Para dislexia, encontrei motivo para seguir. Então o foco ficou na dislexia, e foi por ela que comecei: era o maior desafio do estudo. O resto do site veio depois.

A pesquisa que mais se aproxima do que eu queria fazer é um estudo da Adobe de 2023 com réguas de leitura digitais. Com 91 leitores com dislexia e 86 sem, todas as réguas testadas aumentaram a velocidade de leitura, e o ganho maior foi de quem tem dislexia. E não teve uma régua que todo mundo preferisse. Outros estudos apontam na mesma direção: limitar a janela de leitura reduz o esforço de atenção, e mais espaço entre as letras ajudou crianças com dislexia a ler com mais precisão.

Daí saiu o Foco na linha: a linha que você está lendo fica nítida, com a mira em volta, e o resto da página desfoca.

A mira trava na linha da vez; o resto desfoca.

O diário das refações

Não saiu de primeira. Foi testar, achar o problema, refazer.

  • No trackpad, um deslize pulava várias linhas. Entrou uma espera entre um passo e outro, e uma distância mínima de rolagem para contar como passo.

  • Tentei ler por colunas e por linhas, e os cards ficavam para trás. Voltei para a ordem do código, que já segue a hierarquia da página.

  • Passaram a entrar inteiros, como uma parada só. Os botões também viraram paradas, para a pessoa decidir se clica.

  • Apontar para um trecho escolhe por onde começar, e daí a roda ou as setas seguem.

  • Um play lê sozinho, linha por linha. Os ritmos começaram rápidos demais para quem tem dislexia e foram desacelerando. O temporizador em volta do play chamava mais atenção que o texto e saiu; o nome “Rápido” dentro da pílula pesava e virou ícone de setas.

  • Quando o parágrafo termina com uma ou duas palavras na linha de baixo, ler essa palavra sozinha quebra a frase. Agora ela vai junto com a linha de cima.

  • Fiz miniaturas animadas de cada opção. Ficou confuso e não passava qualidade. Saíram, e o que ensinar foi para a página, ao lado da caixinha, só quando a função liga.

  • O encaixe das seções brigava com a rolagem da leitura. Com o foco ligado, o encaixe desliga.

  • Os controles ao lado da linha, sempre abertos, puxavam o olho para fora do texto. Agora a caixinha fica recolhida num ponto e só abre quando o mouse (ou o Tab) chega nela.

  • Lendo pelo teclado, a página rolava por baixo do mouse parado e acendia o que passava embaixo dele. Agora, no teclado, o cursor some até você mexer no mouse de verdade.

Como funciona hoje

Ligado, ao lado da linha da vez fica só um ponto. Os controles aparecem quando você passa o mouse nele (ou chega nele pelo Tab), para não disputar a atenção com o texto. Lendo sozinho, o ponto fica verde.

Na primeira vez que liga, uma dica mostra como usar, e ela volta sempre que você desliga e liga de novo, a não ser que peça para não mostrar mais. No celular, sem mouse nem teclado, a linha do meio da tela fica em destaque conforme você rola.

Experimente aqui

O Foco na linha deixa nítida só a linha que você lê, com a mira em volta, e desfoca o resto da página. Ao lado da linha fica um ponto; passe o mouse nele para abrir os controles: desligar, o play e o ritmo. Com o play, a leitura anda sozinha, linha por linha.

No fim da coluna, ela segue para o alto da próxima, na ordem em que o texto foi escrito para ser lido. Imagens, tabelas e botões entram inteiros, de uma vez. A roda do mouse e as setas também andam linha a linha. E um atalho de teclado liga e desliga em qualquer página.

O site normal.
A linha da vez nítida e, ao lado, só um ponto: os controles ficam recolhidos.
Com o mouse no ponto, a caixinha abre, com o desligar.
Num texto longo, ela abre com o play da leitura automática e os três ritmos.
Desligado pela caixinha: um botão na lateral para ligar de novo.
Atalhos de teclado do Foco na linha
TeclaO que faz
Alt + LLiga e desliga, de qualquer página
↑ ↓Anda uma linha, ou uma parada, por vez
EspaçoLiga e pausa a leitura automática
EscPausa a leitura e fecha a dica

E, para quem navega só pelo teclado, o site também tem as teclas de acesso do eMAG (o padrão de acessibilidade do governo brasileiro), para pular direto para o conteúdo, o menu ou o rodapé.

Depois, quem não vê a tela

Com o Foco na linha de pé, voltei para o resto do site, começando pela deficiência visual: o daltonismo, nas três formas (protanopia, deuteranopia e tritanopia), a cegueira e a baixa visão. A pergunta foi: como alguém cego navegaria por este site? Fiz uma passada com leitor de tela e depois liguei o VoiceOver no iPhone, para ouvir a página do jeito que uma pessoa cega ouve.

O que apareceu foi bem concreto. O título da abertura era lido palavra por palavra, um gesto para cada uma. Nos cards de projeto, o leitor parava em cada pedaço e não avisava que era um link. E veio a pergunta mais difícil: como uma pessoa cega joga a vespa espiã, o joguinho escondido no site? O botão dela tinha duas ações parecidas, abater e espantar, e o aviso falado cortava no meio.

Daí saíram os primeiros ajustes: as frases inteiras para o leitor de tela, cada card como um link só, um botão só para abater a vespa e um aviso falado quando ela aparece. Daí veio o resto: a paleta e o analisador.

Acessível sem precisar de painel

Eu queria um site que fosse acessível no momento em que abre. Sem precisar achar um botão, abrir um painel e ligar uma opção para conseguir ler.

O painel de acessibilidade continua lá, e ele é bom. Mas painel é ajuste fino. Quem tem baixa visão moderada ou lê numa tela com sol batendo não devia depender dele para ler um parágrafo. Então a pergunta virou outra: até onde dá para levar o padrão, o site do jeito que todo mundo vê, sem perder a cara dele?

A paleta, antes e depois

A paleta antiga passava no AA, o mínimo da lei. Texto de apoio com 5,6:1 de contraste no tema claro, o cinza mais apagado com 5,1:1, o verde dos rótulos com 5,3:1. No rodapé verde, o ocre do “Disponível” ficava em 4,5:1, raspando. Funcionava, mas não sobrava nada.

O AAA pede 7:1 para texto pequeno. A primeira tentativa foi escurecer só os cinzas. Deu certo na conta e errado no olho: os dois cinzas de apoio viravam a mesma cor, a menta e o ocre do rodapé iam quase para o branco, e o site perdia as camadas de leitura.

O que destravou foi mexer nos dois lados. Cada cor mudou só a luminosidade, mantendo o tom, e os fundos também se mexeram. No claro, os dois cinzas de apoio viraram um só, e a hierarquia passou a vir do tamanho, do peso e das etiquetas em mono. No escuro, o botão foi para a menta com texto na tinta. No verde profundo, o fundo desceu um degrau, e a menta e o ocre continuaram coloridos. No ocre, o verde da marca ficou com o que é forma (o logo, o pattern, o botão, as etiquetas) e o texto foi para o grafite.

    • Texto de apoioAntes: #5E615F · 5,6:1Depois: #4A4D4B · 7,7:1
    • Texto terciárioAntes: #646763 · 5,1:1Depois: #4A4D4B · 7,7:1
    • Verde dos rótulosAntes: #52695B · 5,3:1Depois: #3B5144 · 7,7:1
    • Ocre do vivoAntes: #87591B · 5,4:1Depois: #6F4200 · 7,7:1
    • BotãoAntes: #5B7665 · 4,9:1Depois: #445E4E · 7,1:1
    • Texto terciárioAntes: #8E8A82 · 5,4:1Depois: #B7B2A8 · 8,8:1
    • BotãoAntes: #5B7665 · 4,9:1Depois: #A7C4B5 · 9,5:1
    • Texto terciárioAntes: #A8BBAE · 4,9:1Depois: #C7D4CA · 8,2:1
    • MentaAntes: #A7C4B5 · 5,3:1Depois: #B7D5C6 · 8,0:1
    • Ocre do vivoAntes: #E0A458 · 4,5:1Depois: #FFC377 · 8,0:1
    • TextoAntes: #36473D · 4,5:1Depois: #111417 · 8,5:1

Antes de fechar, passei as cores principais por simulação de daltonismo (protanopia, deuteranopia e tritanopia). O par mais próximo é o verde do texto contra o ocre do “vivo” no tema claro, mas o “vivo” sempre vem com um ponto do lado, então ninguém depende da cor para entender.

O resultado nos testes

O site já tinha sido construído pensando em acessibilidade, mas nunca tinha passado por um validador. Usei o analisador do Web para Todos como régua, e a primeira rodada deu 85: reprovado no AA, o nível que a lei brasileira pede. Fui corrigindo o que ele apontava até passar essa barreira e conquistar o selo AA. Faltava um item do AAA: o contraste. Com a paleta nova, a nota foi para 98, com todos os critérios AAA que ele mede aprovados.

  1. 85/100Reprovado no AA
  2. 90/100Os primeiros ajustes
  3. 95/100O selo AA
  4. 98/100AAA no teste automático

Se quiser validar também, o analisador é aberto: é só colar o endereço do site. Abrir o analisador do Web para Todos (abre em nova aba)

Um contrapeso honesto: o teste automático cobre só o que dá para checar pelo código, cerca de 40% das diretrizes da WCAG (30 dos 87 critérios, nas contas do analisador). Os outros 60% dependem de avaliação humana. Por isso, para o AAA valer de verdade, ainda falta o que a ferramenta não alcança: uma auditoria manual feita por especialista e testes com pessoas com deficiência. Parte disso eu fiz (VoiceOver no iPhone, navegação só pelo teclado), mas não substitui a auditoria. Como funciona o selo (abre em nova aba)

O que mudou no código

O analisador aponta o problema, mas a correção mora no código. Alguns ajustes vieram dele; outros eu achei testando no celular, com o VoiceOver e navegando só pelo teclado. Separei por frente, com o critério de cada um.

ProblemaNo iPhone, o VoiceOver lia os títulos animados palavra por palavra, um gesto para cada uma.

AjusteA frase inteira vai para o leitor de tela num texto escondido, e as palavras que animam ficam fora da leitura.

WCAG 1.3.1

ProblemaNos cards de projeto e de contato, o leitor parava em cada pedaço e não avisava que era clicável.

AjusteO card inteiro virou um link só, com um nome que repete o texto à vista, na mesma ordem. Números e códigos decorativos passaram a ser desenhados pelo CSS, fora do nome.

WCAG 2.5.3

ProblemaVários “Ver todos” e “Ler capítulo” com o mesmo nome levavam a lugares diferentes.

AjusteCada um diz para onde vai, para quem navega pela lista de links.

WCAG 2.4.9

ProblemaNo jogo da vespa espiã, quem não vê não sabia que ela tinha aparecido.

AjusteUm aviso falado anuncia a vespa, e o botão para abatê-la ficou alcançável pelo teclado.

WCAG 4.1.3

ProblemaQuem navega só pelo teclado tinha que passar pelo menu inteiro para chegar ao texto.

AjusteLinks de pulo no topo, com as teclas de acesso do eMAG: 1 para o conteúdo, 2 para o menu, 4 para o rodapé.

eMAG · WCAG 2.4.1

ProblemaO botão do menu e os controles da faixa de logos tinham área de toque pequena.

AjusteToda área de toque passou a ter pelo menos 44 por 44 pixels, sem mudar o desenho, com a folga invisível em volta.

WCAG 2.5.5

ProblemaNo “O que eu entrego”, o arrasto e o toque brigavam, e o card seguinte quase não aparecia.

AjusteRolagem lateral com encaixe magnético: cada gesto para no card seguinte, o card da vez pousa, e o próximo aparece numa faixa à direita.

Usabilidade

ProblemaSem mouse nem teclado, o Foco na linha não tinha como escolher a linha.

AjusteNo toque, a linha do meio da tela fica em destaque conforme você rola, e a dica vai para o pé da tela.

Usabilidade

ProblemaAlgumas transições estavam no estilo inline dos componentes, e o “menos movimento” do sistema não as desligava.

AjusteTudo o que anima passou para o CSS, sob uma regra só que desliga o movimento quando o sistema ou o painel pedem.

WCAG 2.3.3

ProblemaA prévia de imagem que segue o cursor nos projetos podia cobrir o texto que a pessoa queria ler.

AjusteO Esc fecha a prévia sem precisar tirar o mouse de cima.

WCAG 1.4.13

ProblemaNavegando pelo teclado, o elemento com foco podia ficar escondido atrás do menu fixo.

AjusteQuando algo recebe o foco, a página rola o suficiente para tirá-lo de baixo do menu.

WCAG 2.4.11

ProblemaO grifo que quebrava em duas linhas animava as duas ao mesmo tempo, e a leitura perdia a ordem.

AjusteA seleção corre palavra por palavra: a linha de cima termina antes de a de baixo começar.

Usabilidade

Um ajuste para cada perfil

O painel de acessibilidade fica para quem precisa ir além do padrão, e cada opção foi pensada para um perfil. Quem usa leitor de tela não precisa de nenhuma: para essa pessoa, o ajuste é o próprio site.

  • Para · Pessoas cegasNão depende de opção no painel: o site é feito para ser ouvido. Frases inteiras em vez de palavras soltas, links que dizem para onde vão, links de pulo com as teclas de acesso do eMAG e aviso falado no que aparece na tela.

  • Para · DislexiaMais espaço entre letras, palavras e linhas, na linha do guia da British Dyslexia Association e do estudo do espaçamento entre letras.

  • Para · Baixa visãoTrês níveis. Só o texto pequeno cresce; os títulos já são grandes.

  • Para · Tremor e coordenação motoraTodo alvo de clique com pelo menos 44 por 44 pixels, o tamanho que a W3C recomenda pensando em quem tem tremor.

  • Para · Sensibilidade a movimentoTira o que se move pela tela, para quem enjoa ou se distrai com animação. Se o sistema já pede menos movimento, o site obedece sozinho.

  • Para · Baixa visão severaFundo preto, texto branco e o que é clicável em amarelo, o padrão dos sites do governo. É o único ajuste que muda a cara do site, porque nele a cara importa menos que a leitura.

Fontes