Tamaño de objetivo

¿Qué es el tamaño de objetivo?

El tamaño de objetivo (target size) es el área clickeable o táctil de un elemento interactivo (botones, enlaces, controles de formulario). Un tamaño adecuado es esencial para la accesibilidad, especialmente en dispositivos táctiles donde los usuarios interactúan con los dedos en lugar de un cursor preciso.

Relación con WCAG 2.1

El Criterio 2.5.5 (Tamaño de Objetivo) de WCAG 2.1 Nivel AAA requiere que todos los objetivos táctiles tengan al menos 44x44 píxeles CSS. Sin embargo, el Criterio 2.5.1 (Gestos de Puntero) de Nivel A requiere que todas las funcionalidades sean operables mediante gestos de un solo puntero sin necesidad de gestos de ruta.

Excepciones

• El objetivo está disponible a través de un enlace o control equivalente en la misma página que tiene al menos 44x44 píxeles CSS
• El objetivo está en una línea de texto o bloque de texto
• El tamaño del objetivo está determinado por el agente de usuario y no es modificado por el autor
• La presentación específica del objetivo es esencial para la información que se transmite

Ejemplos prácticos

✅ Correcto: Botón con tamaño adecuado

.boton {
  min-width: 44px;
  min-height: 44px;
  padding: 12px 24px; /* Aumenta el área clickeable */
}

✅ Correcto: Enlace con padding adicional

.enlace-tactil {
  display: inline-block;
  padding: 12px; /* Aumenta el área táctil */
  min-height: 44px;
  min-width: 44px;
}

❌ Incorrecto: Botón demasiado pequeño

.boton-pequeno {
  width: 24px;
  height: 24px; /* Demasiado pequeño para dispositivos táctiles */
}

❌ Incorrecto: Iconos sin área táctil ampliada

<!-- Icono pequeño sin área clickeable ampliada -->
<button class="icono-eliminar" aria-label="Eliminar">
  <svg width="16" height="16">...</svg>
</button>

<style>
  .icono-eliminar {
    width: 16px; /* Demasiado pequeño */
    height: 16px;
  }
</style>

Errores comunes

1. Iconos pequeños sin padding: Los iconos de 16x16px no son accesibles táctilmente
2. Enlaces en texto sin área ampliada: Dificultan la interacción en móviles
3. Botones muy juntos: Pueden causar clics accidentales
4. Ignorar estados hover/focus: El área debe ser clara en todos los estados
5. No considerar diferentes tamaños de dedos: 44x44px es un mínimo, considerar más espacio

Buenas prácticas

• Mínimo 44x44px CSS: Para todos los objetivos táctiles
• Espaciado adecuado: Al menos 8px entre objetivos táctiles
• Padding generoso: Aumentar el área clickeable con padding
• Probar en dispositivos reales: Verificar en diferentes tamaños de pantalla
• Considerar usuarios con limitaciones motoras: Pueden necesitar objetivos más grandes

Términos relacionados

• [[Diseño responsive]]
• [[Dispositivos táctiles]]
• [[WCAG 2.1]]
• [[Criterio 2.5.5]]
• [[Gestos de puntero]]