Error de etiqueta de ARIA

Texto

El elemento es de tipo input, button, image-button o landmark , pero no tiene un nombre accesible.

Tipo

Error

Descripción

Este error se aplica a:

• Campos de entrada de formulario:
  • Etiquetas HTML: input[type= "text|password|checkbox|radio|file|email|tel|color|date|datetime|datetime-local|time|week|month|number|range|search|url"], select, datalist y textarea.
  • Roles WAI-ARIA: casilla, cuadro combinado, cuadro de lista, radiogrupo, radio, cuadro de texto, árbol, control deslizante y botón de número.
• Botones/botones de imágenes/imágenes
  • Etiquetas HTML: img, input[type="image|button"], y button.
  • Roles WAI-ARIA: img y botón.
• Puntos de referencia
  • Roles WAI-ARIA: región, banner, complementario, contentinfo, formulario, main, navegación y búsqueda.

Nota

AccChecker muestra este error incluso para los elementos para los que el nombre accesible se establece de forma predeterminada en función del contenido HTML interno (vea el elemento banner en el ejemplo anterior). En estos casos, puede suprimir estos errores.

 

Todos los elementos de interfaz de usuario semánticamente importantes, como campos de formulario (por ejemplo, entrada, selección, área de texto), imágenes, botones y puntos de referencia (etiquetas que representan regiones lógicas) deben tener el nombre accesible para permitir que los lectores de pantalla anuncien correctamente.

Para corregir este error, establezca el nombre accesible de una de las maneras siguientes (enumeradas en el orden de preferencia).

• Campos de formulario: use la etiqueta de etiqueta y establezca para el atributo en el valor id del campo de destino.
• Botón Imagen/imagen: establezca el atributo alt .
• Botones: establezca el botón subtítulo texto.
• Para cualquier elemento:
  • atributo aria-etiquetadoby: establezca en el valor id del elemento que contiene la cadena de nombre accesible.
  • atributo aria-label: establezca en la cadena de nombre accesible.
  • atributo title: establezca en la cadena de nombre accesible (también cree una información sobre herramientas).

Ejemplo

<!-- For landmark tags, set the accessible name by using the aria-labelledby 
attribute to reference the visible headers. -->
<h1 id="formHeader">Application Form</h1>
<form aria-labelledby="formHeader">

  <!-- For input fields, use the LABEL tag with the for attribute. -->
  <label for="fullName">Full Name</label>
  <input id="fullName" type="text" />

  <!-- If there is no visible text that can be referenced, set the accessible 
  name by using aria-label or title attributes. -->
  <input type="file" aria-label="Your photo"/>

  <!-- For images, use the alt attribute. -->
  <img src="…" alt="Uploaded photo" />

  <!-- For buttons, caption text is also used as the accessible name. -->
  <button onclick="processForm()">Send</button>

  <!-- For image buttons, use the alt attribute to define the accessible name. -->
  <input type="image" src="images/moreinfo.png" alt="Show more info"/>

  <!-- For elements with inner text this error can be suppressed because the 
  accessible name is set by default. -->
  <div role="banner">Accessible name set by default</div>
</form >