Diferencia entre revisiones de «Principio 2/2.5 Modalidades de los input/2.5.8-A»
De WCAG Wiki
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 |
||
| Línea 1: | Línea 1: | ||
== | {{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>Understanding Success Criterion 2.5.8: Target Size (Minimum) — WCAG 2.2</li> | |||
<li>WCAG Quick Reference — 2.5.8</li> | |||
<li>WAI-ARIA Authoring Practices — Target Sizes</li> | |||
<li>Material Design / Apple HIG / IBM Carbon — Guidelines de tamaño mínimo táctil</li> | |||
</ul> | |||
|wcag_recursos= | |||
<ul> | |||
<li>Patrones UI para aumentar área táctil</li> | |||
<li>Buenas prácticas de diseño móvil accesible</li> | |||
</ul> | |||
|wcag_tipo_evaluacion=Manual | |||
|wcag_pasos_evaluacion= | |||
<ol class="paso-list"> | |||
<li><span class="paso-badge">Paso 1.</span> Identificar objetivos táctiles e interactivos.</li> | |||
<li><span class="paso-badge">Paso 2.</span> Medir superficie (mín. 24×24 px CSS o área clicable equivalente).</li> | |||
<li><span class="paso-badge">Paso 3.</span> Revisar espaciado si el tamaño directo no es suficiente.</li> | |||
<li><span class="paso-badge">Paso 4.</span> Probar con zoom 200–400% y dispositivo móvil.</li> | |||
<li><span class="paso-badge">Paso 5.</span> Comprobar excepciones (UI de sistema o tamaño esencial).</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"> | |||
<strong>✅ Accesible: botón ≥ 24x24px</strong> | |||
<pre class="wcag-codigo-html"> | |||
<button class="btn">OK</button> | |||
<style> | |||
.btn { | |||
min-width: 24px; | |||
min-height: 24px; | |||
padding: 6px 8px; | |||
} | |||
</style> | |||
</pre> | |||
</div> | |||
<div class="accessibility-card"> | |||
<strong>✅ Alternativa: hit-area ampliada</strong> | |||
<pre class="wcag-codigo-html"> | |||
<button class="icon-btn" aria-label="Menú"> | |||
<svg aria-hidden="true" width="16" height="16"></svg> | |||
</button> | |||
<style> | |||
.icon-btn { | |||
width: 24px; | |||
height: 24px; | |||
padding: 4px; | |||
} | |||
</style> | |||
</pre> | |||
</div> | |||
|wcag_otras_herramientas_evaluacion= | |||
<ul> | |||
<li>Chrome DevTools → herramienta de medición</li> | |||
<li>Simulación móvil / responsive</li> | |||
<li>Pruebas con stylus / trackball / control por puntero único</li> | |||
<li>Zoom 200–400% en navegador</li> | |||
</ul> | |||
}} | |||
Revisión del 12:10 5 nov 2025
2.5.8-A. Tamaño mínimo de interacción
- Nivel: AA*
- Versión: 2.2
- Principio: 2_Operable
- Pauta: 2.5_Modalidades_de_entrada
- Grupo: Interacción
- Subgrupo: Tamaño_del_objetivo
Discapacidades afectadas
Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.
-
Motriz –
Barrera grave
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
- Understanding Success Criterion 2.5.8: Target Size (Minimum) — WCAG 2.2
- WCAG Quick Reference — 2.5.8
- WAI-ARIA Authoring Practices — Target Sizes
- Material Design / Apple HIG / IBM Carbon — Guidelines de tamaño mínimo táctil
Recursos de apoyo
- Patrones UI para aumentar área táctil
- Buenas prácticas de diseño móvil accesible
Evaluación del criterio
Tipo de evaluación
Evaluación Manual
Procedimiento de evaluación
- Paso 1. Identificar objetivos táctiles e interactivos.
- Paso 2. Medir superficie (mín. 24×24 px CSS o área clicable equivalente).
- Paso 3. Revisar espaciado si el tamaño directo no es suficiente.
- Paso 4. Probar con zoom 200–400% y dispositivo móvil.
- Paso 5. Comprobar excepciones (UI de sistema o tamaño esencial).
Resultado esperado
Todos los objetivos interactivos cumplen ≥ 24×24 px o cuentan con un área táctil equivalente ampliada.
Ejemplo ilustrativo
✅ Accesible: botón ≥ 24x24px
<button class="btn">OK</button>
<style>
.btn {
min-width: 24px;
min-height: 24px;
padding: 6px 8px;
}
</style>
✅ Alternativa: hit-area ampliada
<button class="icon-btn" aria-label="Menú">
<svg aria-hidden="true" width="16" height="16"></svg>
</button>
<style>
.icon-btn {
width: 24px;
height: 24px;
padding: 4px;
}
</style>
Otras herramientas de evaluación
- Chrome DevTools → herramienta de medición
- Simulación móvil / responsive
- Pruebas con stylus / trackball / control por puntero único
- Zoom 200–400% en navegador
Ejemplos accesibles y no accesibles creados por alumnos
<!DOCTYPE html>
⚠️ PROBLEMA 3.3.2-C: Este formulario NO tiene etiquetas ni instrucciones claras
Reserva de Hotel
⚠️ Problemas de este formulario:
- No hay etiquetas
<label>para ningún campo - Algunos placeholders son ambiguos ("Código" - ¿qué código?)
- No se indica qué campos son obligatorios
- No hay instrucciones sobre el formato esperado
- El select dice "Selecciona" pero ¿seleccionar qué?
- Un campo no tiene ni placeholder ni etiqueta (campo de email)
- No hay indicación de formato de fecha específico
- No se explica para qué sirve cada campo
<!DOCTYPE html>
✅ ACCESIBLE 3.3.2-C: Este formulario tiene etiquetas e instrucciones claras
Reserva de Hotel
Complete el siguiente formulario para reservar su estadía
Nota: Los campos marcados con * son obligatorios
✅ Implementación correcta:
- Cada campo tiene una etiqueta
<label>clara asociada - Los campos obligatorios están claramente marcados con *
- Hay instrucciones específicas sobre formato y contenido esperado
- Los selectores tienen opciones descriptivas, no ambiguas
- Se explica el propósito de cada campo cuando no es obvio
- Se proporcionan ejemplos en los placeholders
- Hay una nota inicial explicando la convención de campos obligatorios
- Se usan atributos ARIA apropiados (aria-required, aria-describedby)
Comentarios
A continuación se muestran comentarios sobre el criterio 2.5.8-A. Tamaño mínimo de interacción
Loading comments...
