Ver el código de «Principio 2/2.5 Modalidades de los input/2.5.8-A»

{{CriterioWCAG
|id_wcag_criterio=2.5.8
|id_wcag_subcriterio=2.5.8-A
|wcag_titulo_criterio=2.5.8-A. Tamaño mínimo de interacción
|wcag_nivel=AA*
|wcag_version=2.2
|wcag_principio=2_Operable
|wcag_principio_url=Principio_2
|wcag_pauta=2.5_Modalidades_de_entrada
|wcag_pauta_url=Principio_2/2.5_Modalidades_de_entrada
|wcag_grupo=Interacción
|wcag_subgrupo=Tamaño_del_objetivo
|wcag_subcriterio_url=Principio_2/2.5_Modalidades_de_entrada/2.5.8-A

|wcag_discapacidades=
<li class="discapacidad-item">
  [[Archivo:Motriz.png|20px|class=icon-discapacidad|alt=Discapacidad motriz]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad motriz|Motriz]]</span> –
  <span class="gravedad gravedad-grave">Barrera grave</span>
</li>

|wcag_lista_discapacidades=
[[Categoría:Discapacidad motriz]]

|wcag_texto_criterioOAW=
Los elementos interactivos deben disponer de un área de interacción mínima de 24 x 24 píxeles CSS, salvo que:
<ul>
<li>la presentación esté definida por el agente de usuario y no modificada por el autor, o</li>
<li>el tamaño esté determinado por características esenciales del contenido.</li>
</ul>

|wcag_descripcion_resumida=
Los elementos interactivos deben tener al menos 24x24 px CSS para poder pulsarlos sin errores, especialmente en pantallas táctiles o dispositivos de apoyo.

|wcag_objetivo=
 Facilitar la activación precisa de controles evitando selecciones accidentales, especialmente en usuarios con movilidad reducida o temblores.

|wcag_importancia=
Un área táctil insuficiente puede impedir o dificultar gravemente la interacción para usuarios con dificultades motrices o pulso poco preciso.

|wcag_referencias=
<ul>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/css/C42 C42: Using min-height and min-width to ensure sufficient target spacing]</span></li>
</ul>


</ul>

|wcag_recursos= No se presentan

|wcag_tipo_evaluacion=Manual

|wcag_pasos_evaluacion=
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span>
Localizar todos los elementos interactivos de la página (p. ej., botones, enlaces, iconos clicables, controles de formularios, elementos táctiles, etc.).
</li>

<li><span class="paso-badge">Paso 2.</span>
Usar la herramienta de inspección del navegador para verificar las dimensiones del área clicable de cada elemento.  
Comprobar que el área de interacción mide al menos <strong>24 x 24 píxeles CSS</strong>.
</li>

<li><span class="paso-badge">Paso 3.</span>
Si algún elemento no cumple el tamaño mínimo, comprobar si aplica una excepción:
<ul>
<li>a. La presentación (tamaño) está definida por el agente de usuario y no ha sido modificada por el autor, o</li>
<li>b. El tamaño está determinado por características esenciales del contenido (p. ej., elementos que requieren precisión específica).</li>
</ul>
</li>

<li><span class="paso-badge">Paso 4.</span>
Si no se cumple ninguna de las excepciones y el área clicable es menor de <strong>24 x 24 px</strong>, registrar como fallo de accesibilidad.
</li>
</ol>


|wcag_resultado_evaluacion=
Todos los objetivos interactivos cumplen ≥ 24×24 px o cuentan con un área táctil equivalente ampliada.

|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
Accesible: botón ≥ 24x24px
<pre class="wcag-codigo-html">
<button class="btn">OK</button>

<style>
.btn {
  min-width: 24px;
  min-height: 24px;
  padding: 6px 8px;
}
</style>
</pre>
</div>


|wcag_otras_herramientas_evaluacion=
<ul>
<li>'''Inspección visual''': identificar botones, iconos, enlaces y otros elementos interactivos para comprobar que son lo suficientemente grandes para seleccionarlos fácilmente.</li>
<li>'''Medición en DevTools''': usar las herramientas del navegador para medir el área activa (mínimo 24×24 px CSS) de los elementos interactivos, incluidas áreas de relleno o zona clicable ampliada.</li>
<li>'''Prueba táctil / ratón''': interactuar con controles pequeños (especialmente en móvil) para verificar que se pueden activar sin errores ni precisión extrema.</li>
<li>'''Revisión del CSS''': comprobar la existencia de <code>padding</code> o área clicable ampliada para objetivos pequeños, asegurando que la zona activa cumple los 24×24 px aunque el icono visual sea menor.</li>
<li>'''Pruebas responsivas''': evaluar en vista móvil y tablet para confirmar que el tamaño del objetivo sigue siendo adecuado en dispositivos táctiles.</li>
</ul>
}}