Los elementos de formulario deben tener una etiqueta visible

Los atributos title y aria-describedby tienen un papel complementario en la accesibilidad — transmiten pistas, tooltips, o descripciones adicionales. Sin embargo, las APIs de accesibilidad no los tratan como etiquetas principales. Cuando un lector de pantalla encuentra un campo de formulario que solo tiene un atributo title o aria-describedby y ninguna etiqueta apropiada, puede presentar el texto como información consultiva en lugar de como el nombre del campo. Esto hace que sea difícil o imposible para los usuarios entender qué entrada se espera.

Este problema afecta principalmente a usuarios que son ciegos, sordociegos, o que dependen de tecnologías de asistencia como lectores de pantalla. También puede impactar a usuarios con discapacidades de movilidad que usan software de control de voz, ya que el control de voz a menudo depende de etiquetas visibles para dirigirse a elementos de formulario. Una etiqueta visible faltante también perjudica a usuarios videntes que pueden no ver un tooltip hasta que pasan el cursor sobre el elemento.

Esta regla se clasifica como una Buena Práctica de Deque y se alinea con la intención más amplia del Criterio de Éxito 1.3.1 de WCAG (Información y Relaciones), que requiere que la información y relaciones transmitidas visualmente también estén disponibles programáticamente, y SC 2.4.6 (Etiquetas o Instrucciones), que requiere que las etiquetas describan el propósito de los controles de formulario. Aunque title y aria-describedby sí exponen algo de texto, no cumplen el requisito de una etiqueta confiable y determinable programáticamente.

Cómo solucionarlo

Cada control de formulario necesita un nombre accesible apropiado. Puedes proporcionar uno usando cualquiera de estos métodos:

1. Elemento <label> explícito — Asocia un <label> con el control de formulario usando atributos for e id coincidentes. Este es el enfoque más confiable y ampliamente soportado.
2. Elemento <label> implícito — Envuelve el control de formulario dentro de un elemento <label>. Esto funciona en la mayoría de tecnologías de asistencia pero tiene soporte inconsistente en algunas combinaciones (ej., JAWS con menús <select>).
3. aria-labelledby — Referencia texto visible en otra parte de la página por su id. Útil para escenarios de etiquetado complejos.
4. aria-label — Aplica una etiqueta invisible directamente al elemento. Usa esto solo cuando una etiqueta visible realmente no sea factible.

En la mayoría de los casos, un <label> explícito es la mejor opción. Crea una asociación clara, proporciona un objetivo de clic/toque más grande, y es universalmente soportado.

Ejemplos

Incorrecto: Usando solo title

El atributo title proporciona un tooltip al pasar el cursor pero no crea una etiqueta accesible apropiada.

<input type="text" title="Enter your email address">

Incorrecto: Usando solo aria-describedby

El atributo aria-describedby proporciona una descripción, no una etiqueta. Los lectores de pantalla pueden anunciar este texto de manera diferente o saltárselo en ciertos contextos.

<p id="email-hint">Enter your email address</p>
<input type="text" aria-describedby="email-hint">

Correcto: Elemento <label> explícito

Este es el enfoque recomendado. El atributo for en el <label> coincide con el id en la entrada, creando una asociación inequívoca.

<label for="email">Email Address</label>
<input type="text" id="email" name="email">

Aún puedes usar title o aria-describedby para pistas complementarias junto con una etiqueta apropiada:

<label for="email">Email Address</label>
<input type="text" id="email" name="email" title="e.g., user@example.com">

Correcto: Elemento <label> implícito

Envolver la entrada dentro del <label> crea una asociación implícita. Esto funciona para la mayoría de tecnologías de asistencia pero es menos confiable que las etiquetas explícitas.

<label>
  Email Address
  <input type="text" name="email">
</label>

Correcto: Usando aria-labelledby

Referencia texto visible en la página por su id. Esto es útil cuando la estructura de etiquetado es compleja, como tablas de datos con controles de formulario, o cuando múltiples elementos comparten una etiqueta.

<p id="email-label">Email Address</p>
<input type="text" aria-labelledby="email-label">

Correcto: Usando aria-label

Esto proporciona una etiqueta que es invisible en pantalla. Úsalo solo cuando no se pueda proporcionar una etiqueta visible, como un campo de búsqueda con un icono de búsqueda y botón claramente identificables.

<input type="text" aria-label="Search">
<button type="submit">Search</button>

Nota: Como aria-label no es visible, los usuarios videntes no obtienen texto de etiqueta. Prefiere un <label> visible siempre que sea posible.

Learn more:

Deque Reference

Deque University - How To Fix

→