2526UdL2.4.6-B-001
Edición de la página como formulario
1. Información básica
Enlace directo a la página del subcriterio en la wiki https://wikiwcag.udl.cat/Principio_2/2.4_Navegable/2.4.6-B
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://dequeuniversity.com/rules/axe/4.1/button-name
2.1.2. Código HTML:
<button id="empty"></button>
<button id="val" value="Button Name"></button>
<button id="alempty" aria-label=""></button>
<button id="albmissing" aria-labelledby="nonexistent"></button>
<button id="albempty" aria-labelledby="emptydiv"></button>
<div id="emptydiv"></div>
<button id="buttonvalue" value="foo" tabindex="-1"></button>
Explicación del problema detectado:
Algunos botones están completamente vacíos (<button id="empty"></button>), otros incluyen atributos como value que no se exponen como nombre accesible en elementos <button>, y otros utilizan aria-label o aria-labelledby de forma incorrecta (es decir, vacíos o apuntando a elementos inexistentes o sin contenido).
En consecuencia, el propósito del control no queda definido de forma programática, una persona que navega visualmente, podría deducir el significado del botón en caso de estar acompañado de un icono o contexto adicional. Sin embargo, para tecnologías de apoyo como lectores de pantalla, el botón puede anunciarse simplemente como “button”, sin indicar qué acción realiza.
Con esto se incumple la intención del criterio 2.4.6-B, que exige que los controles de interacción identifiquen claramente su propósito. Como se ha explicado en el ejemplo, en ausencia de un nombre accesible válido, el usuario debe “adivinar” qué hace el botón, lo que dificulta navegar o interactuar de forma eficiente.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Discapacidad cognitiva (barrera grave):
Cuando el botón no indica claramente su función, la persona debe inferir/deducir su propósito a partir del contexto o probarlo para ver qué ocurre. Derivando en un aumento de la carga cognitiva y la probabilidad de error.
Baja visión (barrera moderada):
Si el botón depende únicamente de un icono pequeño o poco claro y no tiene texto visible ni nombre accesible, puede resultar difícil identificar su función.
Discapacidad visual total (barrera moderada):
Los lectores de pantalla dependen de un nombre accesible para anunciar el propósito del botón, si este no existe o está mal definido, el usuario puede escuchar únicamente “button”, sin saber si sirve para enviar, buscar, cerrar o eliminar, lo que impide la navegación, generando desorientación y saturación.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
https://www.w3.org/WAI/tutorials/forms/labels/
2.2.2 Código HTML:
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname"><br>
<input type="checkbox" name="subscribe" id="subscribe">
<label for="subscribe">Subscribe to newsletter</label>
Explicación de la solución aplicada:
El propósito de cada control se identifica de forma clara y sin ambigüedades, el texto “First name” no es simplemente un texto “visual”, sino una etiqueta real (<label>) asociada explícitamente al campo que le corresponde, mediante for="firstname" y id="firstname". Esto permite que la relación sea determinable por software, el navegador y las tecnologías de apoyo pueden saber con certeza que ese texto nombra ese control.
Del mismo modo, el checkbox “Subscribe to newsletter” tiene su etiqueta asociada con for="subscribe" y id="subscribe", el usuario entiende de forma inmediata qué acción está activando, y la tecnología de apoyo puede anunciar el control con un nombre que le de significado / lo identifique (por ejemplo, “Subscribe to newsletter, casilla de verificación”).
Discapacidad cognitiva: Al usar etiquetas explícitas se reduce la necesidad de deducción, el usuario comprende qué datos se solicitan (“First name”) y qué acción implica el checkbox (“Subscribe to newsletter”), evitando “ensayo-error” y disminuyendo confusiones durante el proceso/navegación.
Baja visión: Independiente de usar el “zoom” o “lectura parcial”, la etiqueta sigue vinculada al control de forma programática. Al hacer clic en la etiqueta, se activa el control, facilitando completar formularios con menos esfuerzo, menos errores y más precisión.
Discapacidad visual total: Los lectores de pantalla anuncian el propósito del control con total certeza, derivando en una evidente mejora al navegar por teclado, en la comprensión del formulario y la velocidad de interacción.
