Zoom em dispositivos mobile

[felipefialho]

Criando uma issue para continuar a discussão da #314.

Como disse lá, fiz uma analise dos apps que tenho instalados e entrei em diversos sites. Por incrível que pareça, TODOS desabilitaram essa opção.

Pensando como desenvolvedor, o zoom causa problemas de quebra de layout, e em alguns equipamentos, problemas ao tentar fazer alguns gestos como swipes, drags ou mesmo o scroll.

• Estamos lidando com um problema de acessibilidade em larga escala?
• Até que ponto a falta de zoom pode gerar problemas para usuários com a visão mais debilitada?

O que pensam sobre essa questão?

@talitapagani @reinaldoferraz

[designernatan]

Pensando como usuário, acho complicado tirar o zoom, não enxergo nada bem. Se fosse algo que impactasse muito meu uso, deixaria o OS maior (fonte e talz) ou até mesmo usar o zoom do celular.

Acredito que seja melhor tirar uma liberdade do usuário do que lhe oferecer uma experiência ruim. Mas se no desktop a gente não bloqueia o zoom, também acho bacana o mesmo no mobile.

[felipefialho]

@designernatan E o que fazer sobre esses problemas que nós temos como desenvolvedores?

[talitapagani]

O Brad Frost publicou um artigo interessante há alguns anos sobre essa questão, mais especificamente sobre o dilema de ter que remover o zoom para o position: fixed funcionar. Uma das considerações dele é que precisamos avaliar se esta experiência (da posição fixa) é realmente necessária. Às vezes sacrificamos um pouco da experiência de uso para atender um fator estético do design que pode ser substituído por outra alternativa. Assim como o @designernatan, eu também uso o zoom porque não enxergo direito nem de óculos e isso é no desktop e no mobile.

[fititnt]

TL;DR: acho que não

Eu não tenho opinião argumentos extras sobre o assunto, até porque estou na rua e digitando do celular. Mas eu tenho impressão que isso é pior para usabilidade geral e pode ser até pior para quem precisa, pois desvia atenção de coisas que importam mais.

Deixar isso habilitado causa enorme transtorno para usuários em geral, e não me parece ter muito benefício.

Maia tarde escrevo melhor. Faço um convite para acessarem do celular até mesmo esse github aqui olharem as configurações. No Chome mobile tem até opção para aumentar o zoom padrão e desabilitar essa configuração de impedir zoom manual

[designernatan]

@lfeh como a @talitapagani mencionou o artigo do Brad Frost, trocar uma ideia com o designer é uma boa, para ver a real necessidade.

Pensando como UX Designer, faz sentido algo que o usuário vai interagir muitas vezes ficar sempre na tela (vide abas em alguns apps).

Pensando como dev, é o jeito tirar o zoom, ainda mais se levarmos essa questão para o cliente e ele mandar tirar o zoom mesmo perdendo em acessibilidade.

Agora não sei pq o Chrome/FF/etc fizeram isso do zoom/pos:fixed, será que explode o browser? Oo (sem ironia, não sei mesmo).

[talitapagani]

@designernatan existem gambiarras e TODOs até nas engines dos navegadores 😆

[talitapagani]

Não entendi porque deixar o zoom habilitado prejudica a usabilidade, causa transtorno e desvia a atenção @fititnt. Geralmente a pessoa só o utiliza se tem intenção de ver melhor algum item. Não posso obviamente responder por todos os usuários, mas conheço pessoas mais velhas que se frustram de não conseguir fazer isso. No meu caso, mesmo quando estou em sites com tipografia que é considerada adequada, dentro de guidelines estabelecidas, eu preciso aumentar o zoom por a) não conseguir enxergar direito, b) ter alguns impedimentos de coordenação motora fina e dar o zoom me ajuda a selecionar palavras, por exemplo. Além disso, o zoom é uma recomendação do WCAG no nível AA (1.4.4).

[fititnt]

Eu não tenho opinião pessoal forte quanto a questão no mobile, mas em desktop, definitivamente tenho.

Somente no Brasil que as pessoas fazem muita questão de deixar um botão de aumentar e de diminuir fonte, e que nem sempre funciona. Em várias situações o botão de trocar tamanho de fonte acaba sendo inútil pelo simples fato de que a fonte dele é tão pequena que o próprio não pode ser lido.

No GIF acima, o site usa.gov usa botão de "aumentar e diminuir fonte" que, se clicado, explica como alterar fonte direto no navegador usado. Link do site: https://www.usa.gov/

E não, isso não responde a pergunta inicial, essa estou vendo aqui pra ver se gravo vídeo no meu Android. Esse ponto que quero dizer é que tem como atingir os mesmos objetivos finais de formas que beneficiam todos os usuários, não somente os que tem grave dificuldade na visão.

[talitapagani]

@fititnt: entendo seu ponto, mas estamos falando sobre o zoom em mobile e sobre desabilitar o user-scalable

[bernardodiasc]

Uso o zoom do celular direto, mas geralmente em sites que não possuem versão mobile ou no caso das versões mobiles serem mal feitas. De qualquer modo, me irrita muito quando sites alteram o funcionamento padrão do browser, por exemplo mudar a velocidade do scroll, opinião pessoal, acho isso péssimo.

[felipefialho]

@bernardodiasc Também só uso zoom quando não tem versão mobile e odeio que mudem o comportamento padrão do browser 😸

[fititnt]

Exemplo visual de como alterar tamanho de texto em mobile sem aplicativos extras, Android 5

Pronto, tem dois GIFs que mostram como é fácil, até mais fácil e rápido em móbile do que navegador desktop, modificar comportamento de alterar zoom da página.

Libero esses gifs aqui em public domain. Podem usar sem pedir autorização e nem citar fonte.

Apenas desabilitar auto-resize com gesto do tipo "pinça"

Desabilitar auto-resize com gesto do tipo "pinça" e alterar padrão de texto para 200%

[talitapagani]

Bem interessante, obrigada por compartilhar. Creio que isso seja um recurso avançado para alguns usuários, infelizmente não resolve o problema do zoom desabilitado para pessoas que não têm domínio deste tipo de configuração. Sempre tento pensar nesses casos. Usar recursos de configuração e atalhos não é trivial para quem não trabalha com tecnologia.

[fititnt]

TL;DR:se alguém for criticadopor não criar botão javascript para aumentar/diminuir fonte, ou pelo uso user-scalable=no mesmo com site bem feito, o problema está em quem critica, não no trabalho de vocês.

---

@talitapagani commented an hour ago
b) ter alguns impedimentos de coordenação motora fina e dar o zoom me ajuda a selecionar palavras, por exemplo. Além disso, o zoom é uma recomendação do WCAG no nível AA (1.4.4).

Se for levar levar pro lado de recomendações, as afirmações que eu disse (sem botão de aumentar/diminuir texto, e uso bem feito de user-scalable=no) se enquadram dentro da WCAG. A WCAC 1.4.4 documenta em inglês em https://www.w3.org/TR/WCAG20-TECHS/G142.html. Até ano que vem um pessoal da @webiwg vai ter traduzido todo resto da WCAG2 pra evitar o senso comum em português de que para ser acessível tem que ser igual ao site padrão do governo.

Pra quem interessa implementação de acessibilidade ser mais complexa do que o necessário? Anos atrás WCAG Samurai fazia afirmações meio fortes até a respeito de lobby de grandes empresas.

Uma coisa é sugerir coisas que poderiam melhorar, outra é socar padrões duvidosos. Eu por exemplo sei até que ponto #210 (comment), que não é open-source, é mais algo pra fazer lobby do que realmente resolver problemas.

Não estou dizendo que as pessoas que repetem são por má fé. Eu acho que a maioria não é, e justamente por isso que no webiwg/acessibilidade-web-pt tem um pessoal começando um trabalho de base chato, que ninguém se importa para lá por 2017/2018 os desenvolvedores terem acesso a recomendações técnicas de outros países e acesso a traduções de textos de pessoas com 10~15 anos de experiência que estão tri apoiando nosso trabalho independente.

[fititnt]

Retiro o que eu disse sobre recomendar uso user-scalable=no simplesmente por site ter responsivo bem feito, mas não vou editar o comentário anterior e remover o que eu disse. Pode-se usar isso sim, mas os usos são mais restritos.

A especificação do HTML 5.2 vai emitir aviso para quem for restringir uso de zoom e alertar para que isso deveria ficar restrito a usos bem especiais, como uso de webapps que dependem do gesto de pinça usado para zoom.

O commit que dá esse aviso é bem recente, de dois dias atrás, e está disponível em w3c/html@c6b0011 e o site público em https://w3c.github.io/html/document-metadata.html#element-attrdef-meta-content

meta name="viewport" content="..." allows authors to define specific viewport characteristics (such as the layout viewport’s width and zoom factor) for their documents. Among these is the ability to prevent or restrict users from being able to zoom, using content values such as user-scalable=no or maximum-scale=1.0. Authors should not suppress or limit the ability of users to resize a document, as this causes accessibility and usability issues.

The following examples illustrate code that should be avoided:

(!-- DO NOT DO THIS --)

(meta name="viewport" content="user-scalable=no")

(meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0")

There may be specific use cases where preventing users from zooming may be appropriate, such as map applications – where custom zoom functionality is handled via scripting. However, in general this practice should be avoided, and HTML conformance checking tools should display a warning if they encounter these values.

Note that most user agents now allow users to always zoom, regardless of any restrictions – either by default, or as a setting/option (which may however not be immediately apparent to users).

[felipefialho]

Mas e agora, como tratar esses problemas que vamos ter na renderização?

[fititnt]

@lfeh o motivo do alerta tri recente do HTML 5.2 ser alerta e não erro é porque tem casos e casos.

LFeh commented 8 hours ago • edited
Pensando como desenvolvedor, o zoom causa problemas de quebra de layout, e em alguns equipamentos, problemas ao tentar fazer alguns gestos como swipes, drags ou mesmo o scroll.

Seu caso é um exemplo perfeito de onde você não deveria ser punido por travar zoom. Se não tiver meios complexos pra permitir zoom, tem todo direito de desabilitar zoom.

E um projeto como seu, se for participar em algum prêmio de acessibilidade, não deveria por exemplo ser avaliado com os mesmos critérios de projetos que são sites de conteúdo simples.

Eu sei que isso pode soar estranho, mas dependendo do caso, você ainda pode liberar o zoom, só que restringir. Tipo o inicial ser escala 1.0, e você ter testado e ficar "aceitável" o uso de mínimo ser 0.5 e máximo de 1.25.

[fititnt]

Embora possa parecer, não estou dizendo que user-scalable=no deve ser usado em sites de propósitos gerais.

---

Pessoal, gravei aqui rapidinho 3 gifosos de sites relevantes

• Github, bloqueia zoom, permite via clique, ver foto da pessoa e afins com qualidade melhor do que se tivesse zoom próprio
• Facebook, bloqueia zoom, permite via clique ver foto da pessoa e afins com qualidade melhor do que se tivesse zoom próprio
• Medium, libera zoom, porém NÃO permite via clique ver foto com qualidade maior

Ponto pra se considerar aqui: aparentemente quem bloqueia zoom tem uma tendência a se preocupar mais com detalhes que influenciam publico em geral.

Vou dar argumentos pra quem quer defender os dois lados aqui:

• Deixar zoom liberado pode reduzir custos de implementar toda estrutura pra ter que exibir uma imagem em link separado maior
• Deixar zoom bloqueado pode forçar a ver meios alternativos de melhorar a experiência de usuário, se focando em algo que pode ajudar outros usos além do móbile, ou mesmo forçando desenvolvimento de outras soluções (como o aplicativo nativo do Facebook)

Github

Facebook

Medium.com

[felipefialho]

Adorei ver meu proprio rosto com zoom, hahaa

[akfzambrana]

Sera que trabalhar com media queries baseadas em em em vez de pixel não resolveria o problema da desativação do zoom?

No projeto em q estou trabalhando no momento, estou utilizando a recomendação do Sergio Lopes que fala sobre fazer as media queries se baseando no conteudo e não no tamanho da tela. Fiz varios testes e realmente ficou muito bom.

Particularmente acho complicado fazer algo so pq "sites grandes" fazem, todos os desenvolvedores no mundo tem direito de errar e as vezes isso acontece em larga escala. Apesar de ler muito sobre boas praticas e opiniões de pessoas, costumo analisar o projeto em q estou e tomar minhas proprias decisões baseadas no que acredito ser melhor para o projeto, mesmo que isso não seja "nossa q legal".