Principio 2/2.5 Modalidades de los input/2.5.3-A

2.5.3-A. Etiqueta en nombre

2_Operable 2.5_Modalidades_de_los_input

• Nivel: A
• Versión: 2.1
• Principio: 2_Operable
• Pauta: 2.5_Modalidades_de_los_input
• Grupo: Interacción
• Subgrupo: Etiquetas_y_nombre_accesible

Discapacidades afectadas

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

• Visual total – Barrera grave
• Cognitiva – Barrera moderada

Enunciado del criterio (Observatorio de Accesibilidad Web)

• En los componentes del interfaz de usuario (como los campos de formulario o botones) es necesario que el texto visible que actúa como su etiqueta y que sirve para reconocerlos visualmente también forme parte de su nombre accesible.

Comprensión del criterio

Descripción resumida

El texto visible en botones, enlaces, campos o iconos debe también aparecer en su nombre accesible, de manera que lectores de pantalla, asistentes de voz y otras ayudas técnicas reconozcan el mismo texto.

Objetivo

Garantizar que el texto que ven los usuarios y el texto que leen o usan las tecnologías de apoyo coincidan para permitir un reconocimiento claro y una activación fiable mediante voz y lectores de pantalla.

Importancia de cumplir el criterio

Si el nombre accesible y el texto visible son diferentes, las personas que utilizan control por voz, lectores de pantalla o que dependen de pistas textuales pueden no localizar o activar correctamente la función.

Referencias WCAG

• G208: Including the text of the visible label as part of the accessible name
• G211: Matching the accessible name to the visible label
• G162: Positioning labels to maximize predictability of relationships
• F96: Failure due to the accessible name not containing the visible label text

Recursos de apoyo

• labering controls (w3C)

Evaluación del criterio

Tipo de evaluación

Evaluación Semiautomática

Procedimiento de evaluación

Usa la herramienta Web Developer Toolbar.

1. Paso 1. Seleccionar “Forms – Display form details”.
2. Paso 2. Localizar los campos de formulario que tienen un texto visible que actúa como etiqueta.
3. Paso 3. Asegurar que el nombre accesible del elemento contiene las mismas letras y en el mismo orden que la etiqueta visible.
4. Paso 4. Localizar otros elementos de interacción disponibles en la página (p. ej., botones, enlaces…) que tienen un texto visible que actúa como etiqueta.
5. Paso 5. Usando la herramienta de inspección de código del navegador, comprobar si se utilizan propiedades WAI-ARIA (como aria-label, aria-labelledby o aria-describedby) para generar un nombre accesible.
6. Paso 6. Asegurar que el nombre accesible del elemento contiene las mismas letras y en el mismo orden que la etiqueta visible.

Resultado esperado

Los controles se pueden identificar y activar mediante el mismo texto visible que se muestra en la interfaz.

Ejemplo

El texto visible coincide con nombre accesible

<button>Buscar</button>

Otras herramientas de evaluación

• Inspección del código: revisar que el texto visible de la etiqueta está incluido en el nombre accesible del componente (p. ej. usando <label> asociado, o que el texto visible coincide con aria-label/aria-labelledby).
• Prueba con lectores de pantalla: (NVDA, JAWS, VoiceOver) situarse sobre botones, enlaces y campos y confirmar que los lectores anuncian el mismo texto que aparece visualmente.
• Accesibilidad del árbol: usar DevTools (Accessibility tree) para comprobar que el nombre accesible contiene el texto visible y no lo sustituye por contenido diferente.
• Prueba funcional: comprobar que comandos de voz (Dragon, Voice Control, dictado) permiten activar el elemento usando el texto visible (ej. decir “Haz clic en Enviar” funciona si el botón dice “Enviar”).

Comentarios

A continuación se muestran comentarios sobre el criterio 2.5.3-A. Etiqueta en nombre

Loading comments...