HTML abbr: explicar abreviaturas y usar el atributo title

HTML <abbr> identifica una abreviatura o acrónimo. Su atributo opcional title puede proporcionar el término completo, pero las explicaciones esenciales también deben aparecer en el texto visible para que los lectores puedan entenderlas sin un ratón.

Marca una abreviatura y explica su término completo

Cuando un término técnico aparece por primera vez, escribir el término completo junto con su abreviatura ayuda a los lectores a entenderlo. El elemento abbr identifica el texto como una abreviatura; no busca ni traduce automáticamente el término completo. No es necesario envolver cada abreviatura que tu audiencia ya conozca en este elemento.

Guarda el siguiente documento como abbreviation.html y ábrelo en un navegador. La primera oración mantiene la explicación visible, mientras que la segunda demuestra el atributo title.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Abreviaturas y términos completos</title>
</head>
<body>
  <p>Los documentos web usan HyperText Markup Language
    (<abbr>HTML</abbr>) para definir su estructura.</p>
  <p>Otra abreviatura: <abbr title="World Wide Web">WWW</abbr></p>
</body>
</html>

La primera oración muestra el término completo junto a HTML. Dependiendo del navegador, WWW en la segunda oración puede tener un subrayado punteado, y al pasar el cursor sobre él puede mostrarse World Wide Web en un tooltip. El navegador determina la apariencia predeterminada del subrayado y del tooltip, por lo que esto no es una característica de diseño que garantice un resultado visual consistente.

¿Qué pertenece al atributo title?

El atributo title en abbr es opcional. Si lo usas, incluye el término completo representado por esa abreviatura, sin texto promocional ni explicaciones no relacionadas. Un valor de title en un elemento abbr no se aplica automáticamente a otros elementos abbr en el mismo artículo. Si eliminas title del ejemplo, la abreviatura visible WWW permanece.

No confundas el atributo global title con el elemento title del documento. El atributo title en abbr proporciona información suplementaria sobre esa abreviatura; el elemento title en el head del documento suministra el título de la página.

No dependas solo de un tooltip

La interacción táctil no ofrece el gesto de pasar el ratón por encima, y el acceso a la información del title también varía con la navegación por teclado y la tecnología asistiva. Si es necesario dar una explicación para entender una abreviatura, hazla visible en el texto, como en la primera oración del ejemplo. Haz que el contenido sea legible en sí mismo en lugar de convertir abbr en un punto de tabulación o botón innecesario solo para mostrar un tooltip.

Si la explicación es larga, escríbela cerca de la primera aparición o enlaza a una definición. Considera la fluidez de lectura antes de repetir el término completo en el atributo title cuando el mismo párrafo ya lo explica. La referencia de abbr en MDN explica las condiciones de uso y las consideraciones de accesibilidad.