Diferencia entre revisiones de «Principio 2/2.5 Modalidades de los input/2.5.8-A»

De WCAG Wiki
VisualWikitexto
Página creada con «== '''2.5.8-A. Tamaño mínimo de interacción''' == <!-- Análisis interno: Este criterio impacta principalmente a: Personas con discapacidad motriz Problema grave: Si los elementos interactivos son muy pequeños, usuarios con movilidad limitada pueden pulsar elementos adyacentes por error, generando barreras graves de accesibilidad. --> <html> <!-- criterio 2.5.8-A --> <article class="wcag-card"> <section class="wcag-info"> <ul> <li><span cla…»
 
Sin resumen de edición
 
(No se muestran 3 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
== '''2.5.8-A. Tamaño mínimo de interacción''' ==
{{CriterioWCAG
<!-- 
|id_wcag_criterio=2.5.8
  Análisis interno:
|id_wcag_subcriterio=2.5.8-A
  Este criterio impacta principalmente a: Personas con discapacidad motriz 
|wcag_titulo_criterio=2.5.8-A. Tamaño mínimo de interacción
  Problema grave: Si los elementos interactivos son muy pequeños, usuarios con movilidad limitada pueden pulsar elementos adyacentes por error, generando barreras graves de accesibilidad.
|wcag_nivel=AA
-->
|wcag_version=2.2
<html>
|wcag_principio=2_Operable
<!-- criterio 2.5.8-A -->
|wcag_principio_url=Principio_2
<article class="wcag-card">
|wcag_pauta=2.5_Modalidades_de_los_input
   <section class="wcag-info">
|wcag_pauta_url=Principio_2/2.5_Modalidades_de_los_input
    <ul>
|wcag_grupo=Interacción
      <li><span class="label">Nivel:</span><span class="value">AA</span></li>
|wcag_subgrupo=Tamaño_del_objetivo
      <li><span class="label">Versión:</span><span class="value">2.2</span></li>
|wcag_subcriterio_url=Principio_2/2.5_Modalidades_de_entrada/2.5.8-A
      <li><span class="label">Principio:</span><span class="value">2. Operable</span></li>
 
      <li><span class="label">Pauta:</span><span class="value">2.5 Modalidades de entrada</span></li>
|wcag_discapacidades=
      <li><span class="label">Categoría:</span><span class="value">Interacción</span></li>
<li class="discapacidad-item">
      <li><span class="label">Subcategoría:</span><span class="value">Tamaño mínimo</span></li>
   [[Archivo:Motriz.png|20px|class=icon-discapacidad|alt=Discapacidad motriz]]
    </ul>
  <span class="discapacidad-texto">[[:Categoría:Discapacidad motriz|Motriz]]</span> –
  </section>
  <span class="gravedad gravedad-grave">Barrera grave</span>
  <section class="wcag-users">
</li>
    <p>Usuarios más afectados</p>
 
    <ul>
|wcag_lista_discapacidades=
      <li><img src="/images/0/06/Motriz.png" alt="Icono discapacidad motriz" class="icono-discapacidad" /> Personas con discapacidad motriz – <span class="gravedad">Barrera grave</span></li>
[[Categoría:Discapacidad motriz]]
    </ul>
 
  </section>
|wcag_texto_criterioOAW=
</article>
Los elementos interactivos deben disponer de un área de interacción mínima de 24 x 24 píxeles CSS, salvo que:
</html>
<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>
}}

Revisión actual - 12:54 6 nov 2025

2.5.8-A. Tamaño mínimo de interacción

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

Enunciado del criterio (Observatorio de Accesibilidad Web)

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

Comprensión del criterio

Descripción 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.

Objetivo

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

Importancia de cumplir el criterio

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

Referencias WCAG


Recursos de apoyo

No se presentan

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Paso 1. Localizar todos los elementos interactivos de la página (p. ej., botones, enlaces, iconos clicables, controles de formularios, elementos táctiles, etc.).
  2. Paso 2. 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 24 x 24 píxeles CSS.
  3. Paso 3. Si algún elemento no cumple el tamaño mínimo, comprobar si aplica una excepción:
    • a. La presentación (tamaño) está definida por el agente de usuario y no ha sido modificada por el autor, o
    • b. El tamaño está determinado por características esenciales del contenido (p. ej., elementos que requieren precisión específica).
  4. Paso 4. Si no se cumple ninguna de las excepciones y el área clicable es menor de 24 x 24 px, registrar como fallo de accesibilidad.

Resultado esperado

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

Ejemplo

Accesible: botón ≥ 24x24px 

<button class="btn">OK</button>

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

Otras herramientas de evaluación

  • Inspección visual: identificar botones, iconos, enlaces y otros elementos interactivos para comprobar que son lo suficientemente grandes para seleccionarlos fácilmente.
  • 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.
  • 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.
  • Revisión del CSS: comprobar la existencia de padding o área clicable ampliada para objetivos pequeños, asegurando que la zona activa cumple los 24×24 px aunque el icono visual sea menor.
  • Pruebas responsivas: evaluar en vista móvil y tablet para confirmar que el tamaño del objetivo sigue siendo adecuado en dispositivos táctiles.










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 2.5.8-A. Tamaño mínimo de interacción

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_2/2.5_Modalidades_de_los_input/2.5.8-A&oldid=3751»