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

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
(No se muestra una edición intermedia del mismo usuario)
Línea 7: Línea 7:
|wcag_principio=2_Operable
|wcag_principio=2_Operable
|wcag_principio_url=Principio_2
|wcag_principio_url=Principio_2
|wcag_pauta=2.5_Modalidades_de_entrada
|wcag_pauta=2.5_Modalidades_de_los_input
|wcag_pauta_url=Principio_2/2.5_Modalidades_de_entrada
|wcag_pauta_url=Principio_2/2.5_Modalidades_de_los_input
|wcag_grupo=Interacción
|wcag_grupo=Interacción
|wcag_subgrupo=Gestos_y_movimiento
|wcag_subgrupo=Gestos_y_movimiento
Línea 51: Línea 51:
|wcag_referencias=
|wcag_referencias=
<ul>
<ul>
<li>Understanding Success Criterion 2.5.1: Pointer Gestures (W3C)</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/general/G215 G215: Providing controls to achieve the same result as path-based or multipoint gestures]</span></li>
<li>WCAG Quick Reference – 2.5.1</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/general/G216 G216: Providing single point activation for a control slider]</span></li>
<li>WAI-ARIA Authoring Practices — gestos y entradas táctiles</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/failures/F105 F105: Failure of Success Criterion 2.5.1 due to providing functionality via a path-based gesture without simple pointer alternative]</span></li>
</ul>
</ul>


|wcag_recursos=
|wcag_recursos=
<strong> Consejos </strong>
<ul>
<ul>
<li>Controles alternativos para gestos móviles</li>
<li>Controles alternativos para gestos móviles</li>
Línea 66: Línea 69:


|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
<ol class="paso-list">
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Identificar funciones que usen gestos multipunto o movimientos.</li>
<li><span class="paso-badge">Paso 1.</span>
<li><span class="paso-badge">Paso 2.</span> Verificar alternativa mediante toque único o clic.</li>
Localizar los elementos en los que sea necesario realizar una interacción con gestos complejos (p. ej., pinza con dos dedos, pulsación con un dedo mientras otro se mantiene en la pantalla, pulsación múltiple con varios dedos o desplazamientos con uno o varios dedos).
<li><span class="paso-badge">Paso 3.</span> Comprobar que la alternativa no requiere precisión fina.</li>
</li>
<li><span class="paso-badge">Paso 4.</span> Probar desde móvil, tablet y navegación asistida.</li>
 
<li><span class="paso-badge">Paso 5.</span> Validar comandos accesibles visibles (no escondidos).</li>
<li><span class="paso-badge">Paso 2.</span>
Verificar que existe un modo de acceder a la misma funcionalidad utilizando un gesto sencillo o mediante el uso de un puntero.
</li>
</ol>
</ol>


Línea 79: Línea 85:
|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
<div class="accessibility-card">
<strong>✅ Alternativa a hacer zoom con pellizco</strong>
Botones para alternativa a hacer zoom con pellizco.
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<button aria-label="Aumentar zoom">+</button>
<button aria-label="Aumentar zoom">+</button>
Línea 86: Línea 92:
</div>
</div>


<div class="accessibility-card">
<strong>✅ Alternativa a deslizar para eliminar</strong>
<pre class="wcag-codigo-html">
<button aria-label="Eliminar elemento">Eliminar</button>
</pre>
</div>


|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>Pruebas en móvil/tablet</li>
<li>'''Prueba con un solo punto de contacto''': comprobar que cualquier función que requiera gestos complejos (pellizcar para ampliar, arrastrar para mover, deslizar para borrar, rotar con dos dedos) también puede activarse con un toque o clic sencillo.</li>
<li>Control por interruptores / Puntero de cabeza / Eye tracking</li>
<li>'''Navegación con teclado y ratón''': verificar que las acciones son operables sin necesidad de gestos táctiles avanzados (por ejemplo, mediante teclado, botones o clic único).</li>
<li>Prueba de puntero único</li>
<li>'''Inspección del interfaz''': revisar si existen controles alternativos visibles (botones para zoom, mover, borrar, confirmar) que permitan realizar las mismas acciones.</li>
<li>'''Inspección del código''': identificar características dependientes exclusivamente de eventos táctiles complejos (p. ej., <code>touchmove</code>, <code>gesturestart</code>, <code>pointermove</code>) y confirmar que existe un evento de activación simple (p. ej., <code>click</code>).</li>
</ul>
</ul>
}}
}}

Revisión actual - 12:52 6 nov 2025

2.5.1-A. Gestos alternativos

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)

  • Toda la funcionalidad que emplee gestos multipunto o dependientes de la trayectoria realizada también se debe poder realizar empleando un único punto de contacto y sin trazos, mediante una pulsación sencilla con un dedo o con un puntero.

Comprensión del criterio

Descripción resumida

Si una funcionalidad requiere gestos complejos, como pellizcar para hacer zoom o deslizar para borrar, debe existir una alternativa basada en una pulsación simple.

Objetivo

Garantizar que las funciones que dependen de gestos avanzados puedan ejecutarse también mediante un gesto simple o puntero único.

Importancia de cumplir el criterio

Fundamental para personas con movilidad reducida, temblores, parálisis parcial o que usan punteros de cabeza, dispositivos de seguimiento ocular o botones externos.

Referencias WCAG

Recursos de apoyo

Consejos
  • Controles alternativos para gestos móviles
  • Buenas prácticas UI accesibles en móviles
  • ARIA para dispositivos táctiles

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Paso 1. Localizar los elementos en los que sea necesario realizar una interacción con gestos complejos (p. ej., pinza con dos dedos, pulsación con un dedo mientras otro se mantiene en la pantalla, pulsación múltiple con varios dedos o desplazamientos con uno o varios dedos).
  2. Paso 2. Verificar que existe un modo de acceder a la misma funcionalidad utilizando un gesto sencillo o mediante el uso de un puntero.

Resultado esperado

Toda acción basada en gestos complejos dispone de una alternativa mediante pulsación simple.

Ejemplo ilustrativo

Botones para alternativa a hacer zoom con pellizco. 

<button aria-label="Aumentar zoom">+</button>
<button aria-label="Reducir zoom">−</button>


Otras herramientas de evaluación

  • Prueba con un solo punto de contacto: comprobar que cualquier función que requiera gestos complejos (pellizcar para ampliar, arrastrar para mover, deslizar para borrar, rotar con dos dedos) también puede activarse con un toque o clic sencillo.
  • Navegación con teclado y ratón: verificar que las acciones son operables sin necesidad de gestos táctiles avanzados (por ejemplo, mediante teclado, botones o clic único).
  • Inspección del interfaz: revisar si existen controles alternativos visibles (botones para zoom, mover, borrar, confirmar) que permitan realizar las mismas acciones.
  • Inspección del código: identificar características dependientes exclusivamente de eventos táctiles complejos (p. ej., touchmove, gesturestart, pointermove) y confirmar que existe un evento de activación simple (p. ej., click).










Ejemplos accesibles y no accesibles creados por alumnos

<!DOCTYPE html> Formulario de Reserva - NO Accesible 3.3.2-C

⚠️ 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> Formulario de Reserva - ACCESIBLE 3.3.2-C

✅ 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

Ingrese su nombre tal como aparece en su documento de identidad

Enviaremos la confirmación de reserva a este correo

Incluya el código de país (Ej: +34 para España)

¿Cuántas personas se alojarán?

Formato: DD/MM/AAAA (Ej: 15/02/2025)

Formato: DD/MM/AAAA (Ej: 20/02/2025)

Seleccione el tipo de habitación que prefiere

Si tiene un código promocional, ingréselo aquí

Indique cualquier necesidad especial o preferencia (cama extra, piso bajo, accesibilidad, etc.)

✅ 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.1-A. Gestos alternativos

Loading comments...




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