Diferencia entre revisiones de «Principio 2/2.5 Modalidades de los input/2.5.8-A»
De WCAG Wiki
Sin resumen de edición |
Sin resumen de edición |
||
| (No se muestran 6 ediciones intermedias del mismo usuario) | |||
| Línea 3: | Línea 3: | ||
|id_wcag_subcriterio=2.5.8-A | |id_wcag_subcriterio=2.5.8-A | ||
|wcag_titulo_criterio=2.5.8-A. Tamaño mínimo de interacción | |wcag_titulo_criterio=2.5.8-A. Tamaño mínimo de interacción | ||
|wcag_nivel=AA | |wcag_nivel=AA | ||
|wcag_version=2.2 | |wcag_version=2.2 | ||
|wcag_principio=2_Operable | |wcag_principio=2_Operable | ||
|wcag_principio_url=Principio_2 | |wcag_principio_url=Principio_2 | ||
|wcag_pauta=2. | |wcag_pauta=2.5_Modalidades_de_los_input | ||
|wcag_pauta_url=Principio_2/2. | |wcag_pauta_url=Principio_2/2.5_Modalidades_de_los_input | ||
|wcag_grupo=Interacción | |wcag_grupo=Interacción | ||
|wcag_subgrupo=Tamaño_del_objetivo | |wcag_subgrupo=Tamaño_del_objetivo | ||
| Línea 41: | Línea 41: | ||
|wcag_referencias= | |wcag_referencias= | ||
<ul> | <ul> | ||
<li> | <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> | ||
</ul> | </ul> | ||
|wcag_recursos= No se presentan | |||
|wcag_tipo_evaluacion=Manual | |wcag_tipo_evaluacion=Manual | ||
| Línea 57: | Línea 53: | ||
|wcag_pasos_evaluacion= | |wcag_pasos_evaluacion= | ||
<ol class="paso-list"> | <ol class="paso-list"> | ||
<li><span class="paso-badge">Paso 1.</span> | <li><span class="paso-badge">Paso 1.</span> | ||
<li><span class="paso-badge">Paso 2.</span> | Localizar todos los elementos interactivos de la página (p. ej., botones, enlaces, iconos clicables, controles de formularios, elementos táctiles, etc.). | ||
<li><span class="paso-badge">Paso 3.</span> | </li> | ||
<li>< | |||
<li><span class="paso-badge">Paso | <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> | </ol> | ||
|wcag_resultado_evaluacion= | |wcag_resultado_evaluacion= | ||
| Línea 69: | Línea 81: | ||
|wcag_ejemplo_evaluacion= | |wcag_ejemplo_evaluacion= | ||
<div class="accessibility-card"> | <div class="accessibility-card"> | ||
Accesible: botón ≥ 24x24px | |||
<pre class="wcag-codigo-html"> | <pre class="wcag-codigo-html"> | ||
<button class="btn">OK</button> | <button class="btn">OK</button> | ||
| Línea 83: | Línea 95: | ||
</div> | </div> | ||
< | |wcag_otras_herramientas_evaluacion= | ||
. | <ul> | ||
<li> | |||
<strong>Bookmarklet diagnóstico tamaño de objetos :</strong><br/> | |||
<html> | |||
} | <div class="highlight-box"> | ||
Arrastra este botón a tu barra de marcadores y podrás ejecutarlo y ver el tamaño en pixels de los elementos interactivos. <br> | |||
</ | <a class="bookmarklet-button" | ||
href="javascript:(function(){function t(e){const t=e.getBoundingClientRect();return{top:t.top+window.scrollY+t.height/2,left:t.left+window.scrollX+t.width/2}}function e(e){let t=e;while(t){const e=getComputedStyle(t);if('none'===e.display||'hidden'===e.visibility)return!1;t=t.parentElement}return!0}const n='http://www.w3.org/2000/svg',o=[...document.querySelectorAll('a, label, button, input:not([type=hidden]), select, textarea, [tabindex], [role=button], [role=checkbox], [role=link], [role=menuitem], [role=option], [role=radio], [role=switch], [role=tab]')].filter(e),s=[];o.forEach(function(e){if(!e.matches('label')&&e.closest('label'))return;const o=t(e);s.push({element:e,center:o});const r=document.createElementNS(n,'svg');r.style.position='absolute',r.style.top=`${o.top-12}px`,r.style.left=`${o.left-12}px`,r.style.width='24px',r.style.height='24px',r.style.zIndex='9999',r.style.margin='0',r.style.pointerEvents='none',r.setAttribute('aria-hidden','true');const l=document.createElementNS(n,'circle');l.setAttribute('cx','12'),l.setAttribute('cy','12'),l.setAttribute('r','12');const a=document.createElementNS(n,'clipPath');a.setAttribute('id','clip'),a.appendChild(l.cloneNode()),r.appendChild(a),l.setAttribute('clip-path','url(#clip)');if(e.getBoundingClientRect().width<24||e.getBoundingClientRect().height<24){l.setAttribute('fill','rgba(255,0,0,0.35)');l.setAttribute('stroke','rgba(255,0,0,0.8)');l.setAttribute('stroke-width','4');}else{l.setAttribute('fill','rgba(0,200,0,0.25)');l.setAttribute('stroke','rgba(0,200,0,0.8)');l.setAttribute('stroke-width','4');}r.appendChild(l),document.body.appendChild(r)});const r=[];s.forEach(function(e,t){s.slice(t+1).forEach(function(n){Math.sqrt(Math.pow(n.center.left-e.center.left,2)+Math.pow(n.center.top-e.center.top,2))<24&&(r.push(e.element),r.push(n.element))})});const l=[...new Set(r)];l.forEach(function(e){e.setAttribute('aria-description','overlap')});alert(`Se detectaron ${l.length} controles solapados.\n\n▪️ 🔴 Círculo rojo: indica un ERROR.\n - Tamaño insuficiente (<24×24 px)\n - O solapamiento con otro control accesible\n\n▪️ 🟢 Círculo verde: indica que el elemento es CORRECTO.\n - Tamaño adecuado (≥24×24 px)\n - Sin solapamiento\n\nEstos indicadores ayudan a evaluar accesibilidad táctil y visual según WCAG 2.2 (criterios 2.5.5 y 2.5.8).`);})(); | |||
"> | |||
Ver tamaño de objetos interactivos | |||
</a> | |||
</div> | </div> | ||
</html> | |||
</li> | |||
<li> | |||
'''Bookmarklet para evaluar el criterio WCAG 2.5.8 (Tamaño de Objetivo)''': bookmarklet de emiliano montani para analizar el tamaño de un objeto según el criterio WCAG 2.5.8. | |||
[https://emilianomontani.github.io/bookmarklet/ Acceder al bookmarklet para evaluar el criterio WCAG 2.5.8]</li> | |||
</li> | |||
<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> | <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> | <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> | <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> | ||
<li> | |||
</ul> | </ul> | ||
}} | }} | ||
Revisión actual - 17:47 6 ene 2026
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_los_input
- 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
Recursos de apoyo
No se presentan
Evaluación del criterio
Tipo de evaluación
Evaluación Manual
Procedimiento de evaluación
- Paso 1. Localizar todos los elementos interactivos de la página (p. ej., botones, enlaces, iconos clicables, controles de formularios, elementos táctiles, etc.).
- 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.
- 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).
- 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 ilustrativo
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
-
Bookmarklet diagnóstico tamaño de objetos :
Arrastra este botón a tu barra de marcadores y podrás ejecutarlo y ver el tamaño en pixels de los elementos interactivos.
Ver tamaño de objetos interactivos - Bookmarklet para evaluar el criterio WCAG 2.5.8 (Tamaño de Objetivo): bookmarklet de emiliano montani para analizar el tamaño de un objeto según el criterio WCAG 2.5.8. Acceder al bookmarklet para evaluar el criterio WCAG 2.5.8
- 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
paddingo á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
<!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...
