Principio 4/4.1 Compatible/4.1.2-A

De WCAG Wiki

4.1.2-A. Nombre, función y valor

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)

  • Para todos los componentes de la interfaz de usuario (como elementos de formulario, enlaces o componentes generados por scripts), el nombre y la función pueden ser determinados por software; los estados, propiedades y valores ajustables por el usuario pueden ser establecidos por software usando métodos compatibles con los agentes de usuario, incluidos productos de apoyo; y los cambios están disponibles para los agentes de usuario, incluyendo productos de apoyo.

Comprensión del criterio

Descripción resumida

Todos los controles deben exponer nombre, rol y estado de forma programática.

Los elementos nativos de HTML cumplen esto automáticamente.

Para componentes personalizados (widgets, botones creados con <div>, etc.), se debe usar WAI-ARIA correctamente para ofrecer esta información.

Objetivo

Garantizar que lectores de pantalla y otros productos de apoyo puedan identificar cada control, saber qué hace y conocer su estado y cambios, permitiendo interacción accesible.

Importancia de cumplir el criterio

Si un control no expone su nombre, función o estado, las tecnologías de apoyo no pueden usarlo. Este criterio es esencial para páginas modernas con componentes interactivos creados con JavaScript y frameworks (Vue, React, etc.).

Referencias WCAG

  • G108: Exponer nombre, función y propiedades
  • H91: Usar controles estándar HTML
  • F15: Fallo por controles personalizados sin API accesible

Recursos de apoyo

  • Usar controles nativos de HTML siempre que sea posible
  • Asociar etiquetas con <label> o aria-label
  • Usar role, aria-labelledby, aria-expanded, aria-checked según corresponda
  • title en <iframe> y elementos embebidos

Evaluación del criterio

Tipo de evaluación

Evaluación Comprobación manual

Procedimiento de evaluación

  1. Paso 1. Identificar todos los elementos interactivos.
  2. Paso 2. Confirmar que los elementos nativos HTML se usan correctamente.
  3. Paso 3. Para controles personalizados, comprobar atributos ARIA apropiados.
  4. Paso 4. Verificar que cambios de estado (p.ej., expandido, seleccionado) se comunican al lector de pantalla.

Resultado esperado

Todos los componentes exponen de forma programática su nombre, función y estado, y notifican los cambios.

Ejemplo

Correcto: 

<button aria-expanded="false" id="menuBtn">
  Menú
</button>

El lector de pantalla reconoce "Botón — Menú — Colapsado".

Incorrecto: 

<div onclick="toggleMenu()">
  Menú
</div>

El lector de pantalla no sabe que es un botón ni su estado.

Otras herramientas de evaluación

  • Web Developer Toolbar
  • Inspectores de accesibilidad del navegador
  • NVDA / VoiceOver / JAWS










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 4.1.2-A. Nombre, función y valor

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_4/4.1_Compatible/4.1.2-A&oldid=3349»