Acessibilidade da área mínima de toque e como ela impacta o seu SEO…
Escrito por: Marília Gabriele Suzart
Você sabia que ao negligenciar a área mínima de toque, além de prejudicar a experiência e acessibilidade, você também está perdendo aproximadamente 2 pontos de SEO?
A WCAG e a Google possuem opiniões diferentes sobre a acessibilidade da área de toque, mesmo que você use a WCAG como referência, você ainda perderá pontos em SEO.
Não sabia disso? Vem comigo que vou te explicar as recomendações da WCAG e Google. Além disso, eu vou te ensinar um truque maravilhoso para implementar a área de mínima de toque, mantendo um visual minimalista e elegante.
Agora que chamei a sua atenção para ler esse artigo, antes de começar, gostaria de te convidar a pensar na acessibilidade além de cumprir a legislação e de melhorias do SEO.
Bora implementar a acessibilidade para as PESSOAS?
Quando projetamos botões, links e demais elementos clicáveis com uma boa área de toque, proporcionamos uma melhor experiência para todas as pessoas usuárias, principalmente, para pessoas com deficiências motoras, pessoas idosas e as pessoas com DCNA — Deficiências Cognitivas, Neuronais ou de Aprendizagem.
Você percebeu que eu destaquei “pessoas idosas”? Isso foi de propósito. Tem uma pergunta que me faço todos os dias antes de começar a trabalhar e gostaria que você reflita um pouco comigo.
Daqui a 5 ou 10 anos, eu vou conseguir usar a plataforma que eu estou projetando hoje?
Afinal, deficiências são adquiridas ao longo da vida e um dia inevitavelmente TODOS nós vamos precisar de acessibilidade, seja por algum acidente, uma doença ou apenas pelo processo natural de envelhecimento.
Quando projetamos interfaces para atender APENAS aos requisitos de robôs e da legislação, esquecemos do mais importante: as pessoas! Isso prejudica a acessibilidade, criando barreira para milhões de pessoas, inclusive para o nosso eu do futuro.
Então, agora que já refletimos um pouco, bora começar?
Esse artigo é o material de apoio do nosso vídeo no YouTube sobre a área de toque:
Explicando a WCAG
WCAG, versão 2.1, critério de sucesso 2.5.5 Tamanho da área clicável (Nível AAA): O tamanho da área clicável para entradas de ponteiro é de pelo menos 44 por 44 pixels CSS, com algumas exceções.
Esse é critério 2.5.5 é de nível de conformidade AAA (triple A), ou seja, não é obrigatório por lei, pelo menos não ainda.
Empresas que implementam a acessibilidade com o foco apenas na legislação, acabam descartando esse critério da lista de prioridades.
A equipe da WCAG percebeu que a área de toque é muito importante para a acessibilidade, na versão 2.2 que está em rascunho, teremos um novo critério relacionado a área de toque, que ainda pode sofrer alterações, mas que está assim atualmente:
WCAG, versão 2.2 em rascunho, critério de Sucesso 2.5.8 Espaçamento da área clicável (Nível AA): Para cada elemento clicável, deverá ter uma área com largura e altura de pelo menos 44 pixels CSS que o inclui, e nenhum outro elemento clicável, com algumas exceções.
Esse critério 2.5.8 é de nível de conformidade AA (duplo A), ou seja, obrigatório segundo a Lei Brasileira de Inclusão, Capitulo II, Artigo 63.
A seguir, duas imagens com uma breve explicação dessa nova regra que está em rascunho:
Eu recomendo utilizar a recomendação da Google, no próximo tópico eu vou explicar o motivo.
Explicando a recomendação da Google e SEO
Para incentivar a melhoria da acessibilidade na web, a Google coloca alguns problemas de acessibilidade como critérios para SEO. Assim, ela poderá melhorar a posição nas pesquisas para sites que são mais acessíveis.
Ao validar uma página com um botão ou link pequeno, o sistema de auditoria informa o seguinte:
As áreas de toque não estão dimensionadas corretamente: Os elementos interativos, como botões e links, precisam ser grandes o bastante (48x48 px) e ter espaço suficiente ao redor para poderem ser tocados sem sobreposição com outros elementos. Leia sobre a auditoria do Google.
Tem uma página de suporte de acessibilidade no Android sobre área de toque, com um tópico de Design que diz o seguinte:
Considere fazer alvos de toque com pelo menos 48 x 48dp, separados por 8dp de espaço ou mais, para garantir densidade e usabilidade de informações equilibradas. Um alvo de toque de 48x48dp resulta em um tamanho físico de cerca de 9 mm, independentemente do tamanho da tela. O tamanho de destino recomendado para objetos de tela sensível ao toque é de 7 a 10 mm.
Observe que a unidade de medida é dp e não px, ou seja, durante a implementação precisamos levar em consideração a densidade da tela e implementar o que seria equivalente à 48 pixels para aquele dispositivo.
Recomendação do GAIA — Guia de acessibilidade web focado nos aspectos do autismo
GAIA, G23 — Aparência clicável: Botões, menus, controles de formulários e demais elementos clicáveis devem apresentar uma área de clique ou toque maior para acomodar diferentes habilidades motoras de pessoas com TEA e devem apresentar um design que eles podem ser clicados ou pressionados.
E agora qual regra devo seguir?
Você pode conversar com o seu time e escolher o que fica melhor para o cenário e projeto que vocês estão atuando. Porém, cuidado para não confundir as pessoas e complicar a implementação da acessibilidade!
Como existe muitas regras e exceções, é comum que as pessoas fiquem confusas e apresentem resistência para implementar. Além disso, o trabalho fica mais complexo e aumenta as chances de cometermos erros, principalmente, quando tem vários times trabalhando no mesmo produto.
Simplifique a regra! E o trabalho de toda a equipe ao implementar a acessibilidade será mais simples.
Regra simplificada para WCAG:
Todos os elementos clicáveis, por exemplo botões, links, caixa de texto, etc… Precisam ter altura e largura mínima de 44 pixels.
Regra simplificada para WCAG + SEO da Google:
Todos os elementos clicáveis, por exemplo botões, links, caixa de texto, etc… Precisam ter altura e largura mínima de 48 pixels, separado por uma margem de no mínimo 8 pixels de outros elementos clicáveis.
Nos meus projetos eu sigo a recomendação do Google, pois sei que a experiência para as pessoas usuárias será ainda melhor.
Truques de implementação
Na percepção de algumas pessoas que trabalham como Designers, um botão maior pode ser esteticamente “feio”.
Não deveria ser necessário discutir que acessibilidade e experiência (UX), são mais importantes que esse conceito de “beleza”.
Mas, felizmente, existe uma solução para tornar acessível e manter o design minimalista e visualmente “agradável”. Vou mostrar para vocês um exemplo baseado em um projeto que eu já trabalhei:
Um card de produto com padding de 16 pixels e botões com 32 pixels de altura e 32 pixels de largura.
Na implementação, eu removi o padding do card. Para o primeiro bloco, eu coloquei os 16 pixels. Para o bloco onde estava os botões eu coloquei apenas 8 pixels, os outros 8 pixels ficaram livres para adicionar um padding dentro do botão aumentando a área de toque dele, conforme exemplo a seguir:
Ao fazer o protótipo, precisamos lembrar que 2 corpos não ocupam o mesmo lugar no espaço! Essa área transparente não pode ficar sobreposta na área transparente de outros elementos clicáveis. A seguir, um exemplo que apresentei para equipe de pessoas voluntárias de uma ONG:
Durante a prototipação, posicione os elementos considerando o tamanho e espaçamento, conforme imagem abaixo:
Nota para dev: Quando criar componentes reutilizáveis que recebe clique, como por exemplo o botão, você pode colocar
min-width: 3rememin-height: 3rem. Assim, você terá uma preocupação a menos na sua rotina.
Se você gostou desse conteúdo, não esqueça de bater muitas palmas e compartilhar com aquela pessoa que também precisa aprender isso.
Obrigada por ler. Espero que esse conteúdo seja útil para você ☺
