Rol Estructura del documento

`definition`

Marca un elemento como la definición de un término. Debe emparejarse con role="term" (o el elemento nativo <dfn>) para asociar el término con su definición. Se recomienda usar primero <dl>/<dt>/<dd> o <dfn>, ya que aportan la semántica de forma nativa.

Cuándo utilizarlo

Para glosarios y pares término/definición, conviene usar la lista de descripción nativa de HTML: <dl> con <dt> (término) y <dd> (definición). O bien, para un término que se define en línea dentro del texto corrido, se puede usar <dfn>. Ambas opciones son reconocidas por los lectores de pantalla sin necesidad de ARIA.

role="definition" es adecuado únicamente cuando el elemento circundante no puede ser <dd> ni <dfn> — por ejemplo, dentro de un CMS que renderiza las entradas del glosario como <div>. Debe emparejarse con role="term" en el elemento del término correspondiente.

El rol indica a los lectores de pantalla que el elemento contiene una definición (la explicación), distinta del término que se define. La mayoría de las tecnologías de apoyo ofrecen poca navegación adicional para las definiciones más allá de anunciar el rol, por lo que el valor práctico es modesto — los elementos nativos son casi siempre suficientes.

Errores frecuentes

Usar role="definition" sin un role="term" emparejado. La definición no tiene ningún término al que asociarse.
Marcar el término como role="definition" (y viceversa). Es la imagen especular del mapeo correcto.
Usar role="definition" en un elemento <p> genérico de texto de cuerpo que por casualidad define algo. Es preferible usar <dfn> sobre el propio término dentro del texto.
Crear un glosario con role="list" de role="listitem" donde cada elemento mezcla término y definición. Conviene usar <dl> para que el emparejamiento término/definición se preserve.
<dfn> sin id al que anclar los enlaces. Las definiciones son más útiles cuando otras páginas pueden enlazar directamente a ellas.

Ejemplo

<!-- Preferido -->
<dl>
  <dt>ARIA</dt>
  <dd>Accessible Rich Internet Applications, a set of attributes that add accessibility semantics to HTML.</dd>
  <dt>APG</dt>
  <dd>ARIA Authoring Practices Guide, the W3C reference of common widget patterns.</dd>
</dl>

<!-- Cuando los elementos nativos son imposibles -->
<div role="term" id="aria-term">ARIA</div>
<div role="definition" aria-labelledby="aria-term">
  A set of attributes that add accessibility semantics to HTML.
</div>