Los campos de entrada ARIA deben tener un nombre accesible

Cuando usas roles ARIA para crear controles de entrada personalizados en lugar de elementos HTML nativos, el navegador ya no asocia automáticamente una etiqueta con el control. Los elementos nativos <input>, <select>, y <textarea> admiten el elemento <label> a través del envoltorio implícito o el emparejamiento explícito for/id, pero los elementos <div> o <span> personalizados con roles ARIA no. Esto significa que debes proporcionar un nombre accesible a través de mecanismos específicos de ARIA.

Esta regla se aplica a elementos con cualquiera de los siguientes roles de entrada ARIA:

• combobox
• listbox
• searchbox
• slider
• spinbutton
• textbox

Quién se ve afectado

Sin un nombre accesible, los usuarios que dependen de lectores de pantalla (incluyendo usuarios ciegos y sordociegos) solo escuchan el role del elemento — por ejemplo, “textbox” — sin ninguna indicación de qué información ingresar. Los usuarios con discapacidades de movilidad que navegan mediante control por voz también dependen de nombres accesibles para dirigirse a controles específicos hablando sus etiquetas. Esto crea una barrera seria para la interacción.

Criterios de éxito WCAG relacionados

Esta regla se corresponde con el Criterio de Éxito 4.1.2 de WCAG 2.0, 2.1, y 2.2: Nombre, Función, Valor (Nivel A). Este criterio requiere que todos los componentes de la interfaz de usuario tengan un nombre que pueda ser determinado programáticamente por las tecnologías asistivas. Es un requisito de Nivel A, lo que significa que representa la línea base mínima de accesibilidad.

Cómo solucionar el problema

Debido a que los elementos <label> no funcionan de manera confiable con elementos no nativos como <div> o <span>, necesitas usar uno de estos enfoques:

1. aria-label — Agrega una etiqueta concisa y descriptiva directamente en el elemento.
2. aria-labelledby — Apunta al id de uno o más elementos visibles que sirven como etiqueta.
3. title — Usa el atributo title como último recurso (es menos descubrible para usuarios videntes).

Asegúrate de que el nombre accesible que proporcionas no esté vacío o contenga solo espacios en blanco, y que cualquier id referenciado por aria-labelledby realmente exista en el DOM.

Errores comunes

• Establecer aria-label a una cadena vacía o que solo contenga espacios en blanco (ej., aria-label=" ").
• Usar aria-labelledby con un id que no existe en la página.
• Envolver un widget ARIA personalizado en un elemento <label>, lo cual no proporciona un nombre programático para elementos no nativos en la mayoría de las combinaciones navegador/lector de pantalla.
• Usar <label for="id"> para apuntar a un <div> — el atributo for solo funciona con elementos etiquetables nativos como <input>, <select>, y <textarea>.

Ejemplos

Incorrecto: sin nombre accesible en un combobox

El <div> tiene un role combobox pero no tiene etiqueta de ningún tipo.

<div role="combobox">England</div>

Incorrecto: aria-label solo contiene espacios en blanco

Un aria-label vacío o que solo contenga espacios en blanco no cuenta como nombre accesible.

<div aria-label=" " role="combobox">England</div>

Incorrecto: aria-labelledby referencia un id inexistente

El id referenciado debe existir en el documento; de lo contrario el nombre accesible se resuelve como vacío.

<div role="listbox" aria-labelledby="color-label">
  <div role="option">Orange</div>
</div>
<!-- No existe ningún elemento con id="color-label" -->

Incorrecto: <label> envolviendo un elemento no nativo

La asociación implícita de etiqueta no funciona para elementos <div> con roles ARIA.

<label>
  First name
  <div role="textbox"></div>
</label>

Incorrecto: <label for> explícito dirigido a un elemento no nativo

El atributo for solo crea una asociación programática con elementos etiquetables nativos.

<label for="name-field">First name</label>
<div role="textbox" id="name-field"></div>

Correcto: aria-label en un combobox

<div role="combobox" aria-label="Country">England</div>

Correcto: aria-labelledby apuntando a una etiqueta visible

<p id="color-label">Select a color:</p>
<div role="listbox" aria-labelledby="color-label">
  <div role="option">Orange</div>
</div>

Correcto: aria-labelledby en un searchbox

<p id="search-label">Search currency pairs:</p>
<div role="searchbox"
  contenteditable="true"
  aria-labelledby="search-label"></div>

Correcto: aria-label en un slider

<div role="slider"
  aria-label="Choose a value"
  aria-valuemin="1"
  aria-valuemax="7"
  aria-valuenow="2"
  tabindex="0"></div>

Correcto: aria-label en un spinbutton

<div role="spinbutton"
  aria-label="Enter quantity"
  aria-valuemin="0"
  aria-valuemax="10"
  aria-valuenow="8"
  tabindex="0"></div>

Correcto: aria-labelledby en un textbox

<p id="name-label">First name</p>
<div role="textbox"
  contenteditable="true"
  aria-labelledby="name-label"></div>

Cuando sea posible, prefiere los controles de formulario HTML nativos (<input>, <select>, <textarea>) porque tienen soporte integrado para etiquetas y comportamiento de teclado. Usa roles de entrada ARIA personalizados solo cuando los elementos nativos no puedan satisfacer tus requisitos de diseño, y siempre asegúrate de que esos controles personalizados tengan un nombre accesible.