Usar el atributo «aria-label» para proporcionar etiqueta para un objeto. [Técnica ARIA6 – WCAG 2.1] (Accesibilidad Web 70)


Se aplica a

Tecnologías que soporten WAI-ARIA (documento en Inglés) «Accessible Rich Internet Applications (WAI-ARIA)

Criterio 1.1.1 – Existencia de alternativas textuales

Descripción

El propósito de esta técnica es proporcionar una etiqueta para objetos que puedan ser leídos por tecnologías de asistencia. El atributo «aria-label» proporciona una etiqueta textual para un objeto, como, por ejemplo, un botón.

Cuando un lector de pantalla encuentra el objeto, el texto del atributo «aria-label» es leido de forma que el usuario sepa qué es.

Los autores deben ser conscientes de que «aria-label» será ignorada por las tecnologías de asistencia cuando el atributo «aria-labeledby» sea usado para el mismo objeto.

Para más información sobre la jerarquía de nombres, puede consultar el sigueinte documento (en Inglés) «ARIA specification» y este otro de la guia de implementación de HTML para lectura por parte de APIs de accesibilidad (en Inglés) «accessible name and description calculation«.

Los autores deberán ser conscientes de qe el uso de «aria-label» sobreescribirá cualquier otro nombre nativo como el atributo «alt» en imagenes o un elemento «label» que pudiera estar asociado al campo de un formulario.a través del atributo «for».

Ejemplos

Ejemplo 1: Distinguiendo landmarks

Este ejemplo muestra como «aria-label» puede ser usado para distinguir entre si dos areas de navegación en un documento HTML4 y XHTML 1.0, donde hay al menos dos elementos de navegación del mismo tipo en la misma página y no existe un texto en la página que permita distinguirlos , como una etiqueta.

<div role="navigation" aria-label="Primary">
<ul><li>...a list of links here ...</li></ul> </div>
<div role="navigation" aria-label="Secondary">
<ul><li>...a list of links here ...</li> </ul></div>

Ejemplo 2: Identificando landmarks de tipo «region»

El siguiente ejemplo muestra como un elemento de tipo «region» generico puede ser descrito como «weather portlet». No hay un texto en la página que pueda hacer referencia a el, como una etiqueta, por lo que es etiquetado a través del atributo «aria-label».

<div role="region" aria-label="weather portlet"> 
...
</div>

Ejemplo 3: Aportando una etiqueta para el elemento «Math»

Este ejemplo se refiere a una función MathML, usando role=»math», una etiqueta adecuada y MathML para renderizarla.

<div role="math" aria-label="6 divided by 4 equals 1.5">
  <math xmlns="https://www.w3.org/1998/Math/MathML">
    <mfrac>
      <mn>6</mn>
      <mn>4</mn>
    </mfrac>
    <mo>=</mo>
    <mn>1.5</mn>
  </math>
</div>

Recursos

Recursos (en Inglés) cuyo objetivo es únicamente informativo, no suponen adhesión alguna a su contenido.

Técnicas Relacionadas

  • ARIA16 – Usando aria-labeledby para proporcionar un nombre para controles de interfaz de usuario.
  • H44: Usando elementos label para asociar etiquetas de texto con controles de formulario.

Comprobaciones

Procedimiento

Para cada elemento donde un atributo «aria-label» está presente:

  1. Asegúrese de que el texto descriptivo etiquete apropiadamente el objeto para el que se provee dicha etiqueta o su propósito o aporte información equivalente.

Resultados Esperados

  • El punto 1 es verdadero.

Bibliografía


Quizá te interese leer más sobre WCAG 2.1 - Técnicas

Dejar una Respuesta

XHTML: Usted puede usar las siguientes etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>