Área de clique: confira o tamanho de links e botões

A área de clique é a região que aceita a ativação de um link ou controle. Ela pode ser maior que o desenho do ícone. Para revisar um botão pequeno, confira qual elemento recebe a interação, suas dimensões e a proximidade de outras ações. Medir apenas a lupa ou o X pode deixar de fora a área que realmente está disponível.

No treinamento, essa revisão pode alcançar o menu da aula, o acesso ao material e os controles de uma atividade. O guia de acessibilidade no treinamento corporativo organiza o percurso completo. Aqui, vamos aprofundar o tamanho dos alvos para mouse, toque e outros dispositivos apontadores, com um desenho fictício e uma amostra em HTML.

Ícone, área ativa e espaço entre ações são medidas diferentes

Imagine uma seta de 16 por 16 pixels CSS dentro de um link quadrado. Se o link ocupa 44 por 44 e toda essa região responde, o alvo não se limita à seta. Se apenas a imagem recebeu o link, o espaço em volta pode continuar sem ação. A borda de um cartão também não comprova que o cartão inteiro seja acionável.

O espaço entre controles tem outra função: separar uma ação da vizinha. Acrescentar margem pode afastar dois links sem aumentar suas regiões ativas. Acrescentar preenchimento interno ao próprio link pode ampliar a área, mas o resultado precisa ser conferido depois que o tema e os demais estilos forem aplicados.

Mantenha a função correta ao alterar o desenho. Um link continua levando a um destino; um botão executa uma ação. O roteiro de escolha entre link e botão ajuda a definir esse comportamento antes da aparência.

O que significam 24 e 44 pixels CSS

O critério 2.5.8 da WCAG 2.2, de nível AA, estabelece alvos de pelo menos 24 por 24 pixels CSS, com exceções. O critério 2.5.5, de nível AAA, usa 44 por 44, também com exceções. Registre qual critério está sendo examinado; os dois números não são exigências idênticas.

Pixel CSS é uma unidade usada no desenho da página, diferente de contar os pontos físicos de uma fotografia da tela. A explicação do W3C sobre o tamanho mínimo esclarece que pedir à pessoa para ampliar o zoom não resolve uma área insuficiente na medição em pixels CSS.

Exemplo fictício: a seta permanece, a área muda

Exemplo fictício T049: uma equipe desenhou uma seta de 16 por 16 pixels CSS. Na primeira proposta, só esse quadrado é ativo. Na segunda, a seta fica dentro de um alvo quadrado de 44 por 44. Para o desenho idealizado, sem bordas, são 14 pixels de preenchimento em cada lado: 16 + 14 + 14 = 44. Não houve teste com pessoas nem medição de redução de erros.

T049 · Duas propostas fictícias

Geometria quadrada ideal, sem bordas. O esquema estático é ampliado e se adapta à tela; não é um controle funcional.

Proposta inicial

Desenho da seta: 16 por 16 pixels CSS. Área ativa: 16 por 16. A medida isolada não encerra a avaliação de vizinhança e exceções.

Proposta revista

A seta continua com 16 por 16. A área ativa passa a 44 por 44 pixels CSS, sem mudar a dimensão do ícone.

Conta do preenchimento

14 pixels de cada lado. Em cada dimensão: 16 + 14 + 14 = 44 pixels CSS, no modelo sem bordas.

O que precisa ser conferido

Na implementação: área real, formato, controles vizinhos, critério, eventual exceção, ativação e destino. Não medir o site pela imagem.

Limite do exemplo

Propostas fictícias, sem teste com usuários, redução de erros medida ou conformidade integral demonstrada.

Descrição da figura

O esquema próprio T049 compara duas propostas quadradas, desenhadas com ampliação de seis vezes no arquivo. No painel esquerdo, o desenho da seta e a área ativa medem 16 por 16 pixels CSS. No direito, a seta continua com 16 por 16 e recebe uma área quadrada de 44 por 44. O quadrado maior tem a seta centralizada e 14 pixels de preenchimento em cada lado, sem bordas na geometria ideal: 16 mais 14 mais 14 resulta em 44. A cor laranja identifica o desenho; os rótulos e contornos distinguem a área ativa. O esquema é fictício, estático e responsivo. Não mede a página nem comprova funcionamento, exceções ou conformidade integral. No celular, a informação é recomposta em cartões de texto.

A segunda proposta mantém o ícone com a mesma dimensão. O que muda é a região disponível para acioná-lo. Essa conta descreve quadrados ideais: em um componente real, bordas, recortes, cantos e outros elementos podem mudar a região efetiva. Por isso, a conferência precisa alcançar a implementação.

O esquema é ampliado para leitura e suas medidas são rótulos do exemplo. Não use uma régua sobre a imagem publicada para concluir quantos pixels CSS um botão do seu site tem. A imagem se adapta à tela e não é um controle funcional.

Confira a região real na página implementada

Comece por uma ocorrência concreta: qual link ou botão, em qual tela e em qual estado? Peça à equipe técnica que selecione o elemento interativo no inspetor do navegador e confira a caixa calculada em pixels CSS. O tamanho de um contêiner externo só serve como área ativa se essa região também receber a interação prevista.

A técnica C44 do W3C exemplifica a aplicação de dimensões mínimas aos próprios links. Na amostra abaixo, adotamos uma apresentação própria com texto visível. Os links levam a duas seções desta página; a largura final depende também do texto e do preenchimento.

Para conferir a amostra, alcance “Conferir a área” com Tab e observe o contorno de foco. Enter deve levar a esta seção. Em “Registrar o teste”, Enter deve levar ao modelo de registro. Com mouse ou toque, confira também a região branca que faz parte do link. Conseguir ativar pelo teclado não mede a área de clique; são verificações complementares.

Se o assunto da ação continuar ambíguo, aumentar a área não resolve a identificação. O guia de nome de botão com ícone explica como relacionar o desenho à função. Confira nome, foco, ativação e continuidade junto das dimensões.

Quando uma área menor exige examinar uma exceção

Não conclua que todo alvo abaixo de 24 por 24 falha automaticamente. No critério mínimo, há situações de espaçamento, controle equivalente na mesma página, alvo inserido no texto, tamanho determinado pelo navegador sem alteração do autor e apresentação essencial ou legalmente exigida. Aplique a condição correspondente à ocorrência, sem transformar a lista em dispensa geral.

Na exceção de espaçamento, o W3C usa um círculo de 24 pixels CSS de diâmetro, centrado na caixa de cada alvo pequeno. Ele não deve interceptar outro alvo nem o círculo de outro alvo pequeno. A técnica C42 detalha essa conferência. Verifique também ações acima e abaixo; olhar apenas o vão lateral pode deixar uma colisão passar.

Um link dentro de uma frase e um item isolado de menu merecem análises diferentes. A exceção para texto não significa que qualquer controle acompanhado de palavras possa ficar pequeno. Quando depender de uma exceção, registre sua justificativa, a geometria e as condições examinadas.

Para alvos arredondados ou irregulares, largura e altura da caixa externa não encerram a avaliação. A explicação do critério mínimo pede que caiba um quadrado sólido de 24 por 24, alinhado à página, dentro da área. Um círculo de 24 de diâmetro não contém esse quadrado; a avaliação pode então depender de espaçamento ou de outra condição aplicável.

Repita a conferência na adaptação para celular

Uma alteração de tela pode aproximar ações, quebrar rótulos em linhas ou trocar texto por ícone. Examine cada apresentação pertinente, incluindo menus abertos e outros estados usados na tarefa. Um resultado em uma tela grande não demonstra que a versão compacta manteve a mesma área.

Depois de ajustar, confira se o alvo continua levando ao destino ou executando a ação prevista. Verifique o espaço de leitura, o foco e possíveis coberturas por avisos ou elementos flutuantes. Se uma correção depender do fornecedor, envie a ocorrência e o resultado esperado, em vez de apenas pedir “botão maior”.

A medição desta amostra e o teste de seus links cobrem uma parte delimitada da página. Uma avaliação integral precisa considerar os demais critérios e percursos pertinentes. Os dois links do exemplo não comprovam conformidade AA ou AAA do artigo, da plataforma ou do treinamento.

Registre a ocorrência e a nova conferência

Página, seção, versão e estado:
Tarefa, rótulo e função do elemento:
Dispositivo, navegador e largura examinados:
Elemento que recebe a interação:
Dimensões e unidade: pixels CSS:
Formato, recortes e área efetiva:
Alvos vizinhos, inclusive acima e abaixo:
Critério, nível e eventual exceção justificada:
Resultado com mouse ou toque efetivamente testado:
Teclado, foco e destino ou ação:
Problema, responsável e ajuste proposto:
Nova medição e nova ativação após a correção:
Evidência, limites e pendências:

Perguntas frequentes sobre área de clique

O ícone precisa ter 44 por 44 pixels?

A dimensão do ícone pode ser diferente da área ativa. No exemplo T049, uma seta de 16 por 16 fica dentro de um alvo de 44 por 44. Confira a região que realmente aceita a interação.

24 e 44 pixels são a mesma regra?

Não. O critério 2.5.8 da WCAG 2.2, nível AA, usa 24 por 24 pixels CSS com exceções. O critério 2.5.5, nível AAA, usa 44 por 44, também com exceções. Registre a referência examinada.

Aumentar a margem amplia o clique?

A margem pode afastar controles sem fazer parte da área ativa. Confira o próprio elemento interativo e o comportamento da região, incluindo o preenchimento interno e os estilos aplicados.

Testar dois links comprova acessibilidade da plataforma?

Não. A conferência cobre as ocorrências e condições registradas. Outros controles, critérios e percursos precisam de avaliação própria, com limites e pendências declarados.

Se sua equipe precisa organizar conteúdo e percurso de treinamento, converse conosco sobre o planejamento dessa revisão. Podemos ajudar a definir tarefas e responsabilidades. Implementação de componentes, avaliação técnica e testes com pessoas precisam de escopos e profissionais adequados.