Los botones input deben tener texto discernible

Cada control interactivo en una página necesita un nombre accesible para que las tecnologías de asistencia puedan anunciarlo a los usuarios. Para elementos <input> con type="button", type="submit", o type="reset", el nombre accesible normalmente proviene del atributo value. Mientras que <input type="submit"> e <input type="reset"> tienen etiquetas predeterminadas proporcionadas por el navegador (“Submit” y “Reset”), <input type="button"> no tiene ninguna por defecto — se renderiza como un botón vacío y sin etiqueta si no se proporciona un nombre.

Este problema afecta críticamente a los usuarios ciegos y sordociegos que dependen de los lectores de pantalla. Cuando un lector de pantalla encuentra un botón input sin texto discernible, puede anunciar algo como “botón” sin indicación de qué hace el botón. Esto hace imposible navegar formularios, enviar datos o realizar acciones con confianza. Los usuarios videntes a menudo pueden inferir el propósito de un botón por el contexto visual, pero los usuarios de lectores de pantalla dependen completamente del nombre accesible programático.

Criterios de conformidad WCAG relacionados

Esta regla se corresponde con el Criterio de Conformidad 4.1.2 de WCAG 2.2: Nombre, Función, Valor (Nivel A), que requiere que todos los componentes de la interfaz de usuario tengan un nombre que pueda determinarse programáticamente. También se relaciona con los requisitos de la Sección 508 de que cada elemento no textual debe tener un equivalente textual, y la Sección 9.4.1.2 de EN 301 549.

Cómo solucionarlo

Hay varias formas de dar a un botón input un nombre accesible discernible:

1. Atributo value — El enfoque más directo. Establece value con texto descriptivo que comunique el propósito del botón.
2. Atributo aria-label — Proporciona un nombre accesible directamente. Útil cuando necesitas que el nombre accesible sea diferente del texto visible, o cuando value no se puede usar.
3. Atributo aria-labelledby — Hace referencia al id de otro elemento cuyo contenido de texto se convierte en el nombre accesible. El elemento referenciado debe existir y contener texto.
4. Atributo title — Actúa como un nombre accesible de respaldo. Sin embargo, title es menos confiable porque no es expuesto consistentemente por todas las tecnologías de asistencia y solo aparece como un tooltip al pasar el ratón, haciéndolo inaccesible para usuarios de teclado y táctiles. Prefiere value o aria-label en su lugar.

Para <input type="submit"> e <input type="reset">, los navegadores proporcionan etiquetas predeterminadas, así que pasan sin un value explícito. Sin embargo, si estableces value="" (una cadena vacía), sobrescribes el valor predeterminado y creas un nombre accesible vacío, lo cual falla.

Ejemplos

Incorrecto: Botón input sin nombre accesible

<form action="/search">
  <input type="button" id="go" />
</form>

Este botón no tiene value, aria-label, aria-labelledby, o title. Un lector de pantalla lo anunciará como simplemente “botón” sin contexto.

Incorrecto: aria-label vacío

<form action="/search">
  <input type="button" aria-label="" />
</form>

Un aria-label vacío no proporciona un nombre discernible.

Incorrecto: aria-labelledby haciendo referencia a un elemento inexistente o vacío

<form action="/search">
  <input type="button" aria-labelledby="nonexistent" />
</form>

<form action="/search">
  <input type="button" aria-labelledby="empty-label" />
  <div id="empty-label"></div>
</form>

Si el elemento referenciado no existe o no tiene contenido de texto, el botón no tiene nombre accesible.

Incorrecto: Submit o reset con un value vacío

<form action="/search">
  <input type="submit" value="" />
  <input type="reset" value="" />
</form>

Establecer value a una cadena vacía sobrescribe la etiqueta predeterminada del navegador, dejando el botón sin nombre.

Correcto: Usando el atributo value

<form action="/search">
  <input type="button" value="Buscar" />
</form>

Correcto: Usando aria-label

<form action="/search">
  <input type="button" aria-label="Buscar" />
</form>

Correcto: Usando aria-labelledby

<form action="/search">
  <input type="button" aria-labelledby="btn-label" />
  <span id="btn-label">Buscar</span>
</form>

Correcto: Submit y reset con valores predeterminados o explícitos

<form action="/search">
  <input type="submit" />
  <input type="reset" />
  <input type="submit" value="Enviar Formulario" />
  <input type="reset" value="Limpiar Todos los Campos" />
</form>

Los dos primeros dependen de las etiquetas predeterminadas integradas del navegador (“Submit” y “Reset”). Los dos últimos proporcionan etiquetas personalizadas más descriptivas a través del atributo value. Ambos enfoques son válidos, aunque generalmente se prefieren las etiquetas descriptivas explícitas para mayor claridad.

Learn more:

Deque Reference

Deque University - How To Fix

→