Acessibilidade: selecionando automaticamente um tamanho de texto maior para usuários com deficiência visual

Fui solicitado por um dos nossos usuários a aumentar o tamanho do texto da nossa instância. Felizmente, isso é fácil de fazer para ela pessoalmente usando as configurações de interface (veja https://meta.discourse.org/my/preferences/interface).

Ela me diz que outros sites e aplicativos têm a capacidade de fazer isso automaticamente se o dispositivo tiver uma fonte grande selecionada.

O Discourse costumava ter o modo escuro selecionável apenas pelo usuário, mas isso mudou no último ano para ser automatizado (se configurado corretamente). Seria brilhante ter a mesma dinâmica para o tamanho do texto. Na verdade, isso é muito mais importante, pois pessoas com deficiência visual terão dificuldade em encontrar a configuração com o texto pequeno.

5 curtidas

Não tenho certeza @awesomerobot, isso é algo que pode ser detectado automaticamente, semelhante ao modo claro/escuro?

1 curtida

Se você ajustar o font-size no seu navegador, o Discourse deve escalar como qualquer outro site… mas parece que se você ajustar o font-size do sistema operacional no iOS, isso só afeta o tamanho dos aplicativos e não necessariamente os tamanhos de fonte dos sites.

Se usarmos font: -apple-system-body; também podemos escalar junto com o sistema (a Apple chama isso de Dynamic Type). Eu acho que o Android faz isso automaticamente e não precisa de nenhuma alteração… mas vou verificar novamente.

1 curtida

Tentando aqui:

Existem algumas peculiaridades para contornar que observei no PR, mas parece que isso deve funcionar como esperado.

Nada adicional é necessário para Android, o navegador já redimensiona os tamanhos de fonte junto com a configuração do sistema lá.

3 curtidas

Esta é a maneira do Apple iOS Safari de selecionar seu nível de zoom padrão para todos os sites:
Vá para Configurações → Safari → Configurações para Sites → Zoom da Página → Outros Sites:
50/75/85/100/125/150/175/200/250/300%

Veja: How to Make Text Bigger in Safari for iOS - MacRumors


Ao usar font: -apple-system-body; por padrão apenas para sites discourse, diferimos totalmente da base amplamente utilizada font-size: 15px para parágrafos.

Isso agora introduz um caso especial para todos os sites discourse: a fonte é muito grande.
E cada usuário deve definir um nível de zoom especial para domínios de sites discourse, por exemplo, 85%.
Ou, caso um usuário já tenha definido um nível de zoom mais alto no Safari, por exemplo, 150%, ela agora deve defini-lo para, por exemplo, 125% apenas para domínios discourse.

Eu recomendo fortemente não implementar isso!
Por favor, reverta a mesclagem deste PR.

Por favor, verifique o que acontece se no iPhone iOS sua configuração de fonte do sistema estiver em torno de 150% e o Zoom da Página do Safari estiver definido como 150%:

  • Para sites normais, isso deve resultar em 150%
  • Com a nova alteração para Discourse font: -apple-system-body;, isso pode resultar em 225% (= 150% * 150%)

Pelo que sei, o Chrome no Android não faz isso: apenas a interface do Chrome é ampliada pela configuração do sistema.
Para zoom de tamanho de fonte de sites, abra o Chrome e vá para Configurações → Acessibilidade → Escala de texto

Talvez varie por dispositivo ou versão do Android? Isto é de um teste que fiz com a fonte do sistema ampliada nas configurações de acessibilidade. Nenhuma alteração no navegador:

1 curtida

Aqui o parágrafo é escalado apenas, o título e todos os outros elementos de texto ainda são pequenos!
Este é um comportamento especial do Chrome para escalar apenas partes do texto – pesquise por “Font Boosting” ou veja:


text-size-adjust pode precisar ser normalizado no iOS:

1 curtida

Estou notando alguns efeitos colaterais não intencionais agora que isso foi implantado no Meta, não tenho certeza por que estava funcionando de forma diferente em meu ambiente de desenvolvimento, vou reverter e investigar um pouco mais… provavelmente não posso fazer isso por enquanto… isso afeta muitas coisas fora do tamanho da fonte.

2 curtidas

Em caso geral de acessibilidade:
Gosto da ideia de manter a fonte base para parágrafos no padrão de 16px que todos os navegadores definem como tamanho de fonte padrão.

Isso aumentaria o tamanho do texto em 6-7% (16px/15px = 1,0666).
Para dispositivos móveis como telefones e tablets, isso parece bom. Para desktops, seria um pouco grande e incomum.

Se seguirmos por esse caminho, talvez implementar alguma regra especial para dispositivos sem tela sensível ao toque para usar 15px como fonte base em vez disso. (Ao verificar dispositivos sem tela sensível ao toque, definitivamente perderemos alguns notebooks com telas sensíveis ao toque - eles então receberão o tamanho de fonte maior.)

1 curtida

Este ainda é um problema com dispositivos iOS? Posso aumentar o tamanho da fonte, mas isso não altera o tamanho do ajuste de linha. Não tenho acesso a um telefone/tablet Android para testar.

1 curtida