Target Size
Tamanho alvo
O tamanho alvo é a área total que uma pessoa pode clicar ou tocar para usar um controle. Pode ser maior que o ícone visível.
Outro exemplo
Em um aplicativo de medicina, cada pequeno ícone de lembrete fica dentro de um botão de 32 por 32 pixels CSS. Espaço entre os botões evita toques incorretos. Com zoom de 200%, os controles se movem em vez de se sobreporem, e os pinos densos do mapa também têm uma lista.
Partes principais
- 01Controle visível
- 02área de clique interativa
- 03Separação dos vizinhos
Use-o quando
Faça com que os alvos dos ponteiros tenham pelo menos 24 por 24 pixels em CSS, ou deixe espaço suficiente ao redor deles. Teste toque, zoom e diferentes necessidades de movimento.
Não o use quando
Não julgue apenas o ícone visível. A área de clique completa, espaçamento, exceção em linha e outro caminho utilizável também importam.
Nome usado no código
minimum 24×24 CSS px target or sufficient spacing under WCAG 2.5.8 Antes de lançar
Give assistive tools the control’s name (accessible name), purpose (role), value, and state. Check keyboard use, visible focus, target size, disabled and busy states, feedback, and recovery.
Outcome: Complete the task with Tamanho alvo (Target Size). User context: Em um aplicativo de medicina, cada pequeno ícone de lembrete fica dentro de um botão de 32 por 32 pixels CSS. Espaço entre os botões evita toques incorretos. Com zoom de 200%, os controles se movem em vez de se sobreporem, e os pinos densos do mapa também têm uma lista. Recommended pattern: Tamanho alvo (Target Size). Why it fits: Faça com que os alvos dos ponteiros tenham pelo menos 24 por 24 pixels em CSS, ou deixe espaço suficiente ao redor deles. Teste toque, zoom e diferentes necessidades de movimento. Do not use it when: Não julgue apenas o ícone visível. A área de clique completa, espaçamento, exceção em linha e outro caminho utilizável também importam. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): O padrão cobre apenas o escopo listado. Ele não escolhe o estilo visual, decisão do produto ou exemplo de Vibulary. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Conferir este pedido
Review how Tamanho alvo (Target Size) is used now. Definition: O tamanho alvo é a área total que uma pessoa pode clicar ou tocar para usar um controle. Pode ser maior que o ícone visível. Release checks: Give assistive tools the control’s name (accessible name), purpose (role), value, and state. Check keyboard use, visible focus, target size, disabled and busy states, feedback, and recovery. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.