Los elementos select deben tener un nombre accesible

Cuando un elemento <select> carece de un nombre accesible, los lectores de pantalla lo anuncian como algo genérico como “combobox” o “listbox” sin contexto sobre lo que representa. Un usuario vidente podría ver texto cercano como “País” y entender el propósito, pero esa proximidad visual no significa nada para la tecnología de asistencia a menos que exista una relación programática entre el texto y el control del formulario.

Este problema afecta críticamente a usuarios que son ciegos, tienen baja visión, o tienen impedimentos de movilidad y dependen de tecnologías de asistencia para interactuar con formularios. Sin una etiqueta adecuada, estos usuarios no pueden determinar qué datos espera un menú desplegable, haciendo que completar el formulario sea propenso a errores o imposible.

Criterios de éxito WCAG relacionados

Esta regla se mapea a WCAG 2.0, 2.1, y 2.2 Criterio de Éxito 4.1.2: Nombre, Rol, Valor (Nivel A), que requiere que todos los componentes de interfaz de usuario tengan un nombre que pueda determinarse programáticamente. También cae bajo Sección 508 §1194.22(n), que exige que los formularios en línea permitan a las personas que usan tecnología de asistencia acceder a todos los elementos de campo, direcciones y señales necesarias para completarlos.

Cómo arreglarlo

Hay varias formas de dar a un elemento <select> un nombre accesible, listadas aquí desde la más preferida a la menos preferida:

1. <label> explícito con for/id — El enfoque más común y recomendado. Usa el atributo for en el <label> para coincidir con el id del <select>. Esto también da a los usuarios videntes un objetivo de clic más grande.

2. <label> implícito envolviendo — Envuelve el <select> dentro de un elemento <label>. No se necesita emparejamiento for/id.

3. aria-labelledby — Apunta al id de un elemento de texto visible existente que sirve como etiqueta. Útil cuando un <label> tradicional rompería el diseño o cuando múltiples elementos se combinan para formar la etiqueta.

4. aria-label — Proporciona una etiqueta de texto invisible directamente en el <select>. Usa esto solo cuando no existe texto de etiqueta visible o es apropiado.

Cualquier método que elijas, asegúrate de que:

• El texto de la etiqueta describe claramente lo que el usuario debe seleccionar.
• Cada atributo id sea único en la página.
• Cada <select> tenga solo un método de etiquetado para evitar conflictos o confusión.

Ejemplos

Incorrecto: Sin asociación de etiqueta

Esto coloca texto cerca del <select> pero no crea enlace programático entre ellos. Los lectores de pantalla no anunciarán “Estado” cuando el usuario enfoque el desplegable.

Estado:
<select>
  <option value="ny">Nueva York</option>
  <option value="ca">California</option>
</select>

Correcto: <label> explícito con for e id

El atributo for en el <label> coincide con el id en el <select>, creando una asociación programática clara.

<label for="state">Estado:</label>
<select id="state">
  <option value="ny">Nueva York</option>
  <option value="ca">California</option>
</select>

Correcto: <label> implícito envolviendo

Envolver el <select> dentro del elemento <label> los asocia implícitamente.

<label>
  Estado:
  <select>
    <option value="ny">Nueva York</option>
    <option value="ca">California</option>
  </select>
</label>

Correcto: Usando aria-labelledby

Cuando ya existe texto visible en otro lugar (ej., en un encabezado o celda de tabla), usa aria-labelledby para referenciarlo por id.

<span id="state-label">Estado:</span>
<select aria-labelledby="state-label">
  <option value="ny">Nueva York</option>
  <option value="ca">California</option>
</select>

Correcto: Usando aria-label

Cuando no hay etiqueta visible presente o apropiada, aria-label proporciona un nombre accesible directamente. Ten en cuenta que esta etiqueta es invisible para usuarios videntes, así que úsala solo cuando el contexto ya sea visualmente claro.

<select aria-label="Estado">
  <option value="ny">Nueva York</option>
  <option value="ca">California</option>
</select>

Learn more:

Deque Reference

Deque University - How To Fix

→