El atributo title (no confundir con el elemento <title>) ha sido considerado durante mucho tiempo y por mucha gente (me incluyo) un atributo muy útil y necesario. Por ejemplo, su uso era recomendado en HTML4 para mostrar un aviso o información adicional sobre el destino de un enlace:

<a title="Biografía de Ana Martín" href="ana.html">Ana Martín</a>

En general, la utilidad del atributo title se podría asemejar al de un tooltip. Sin embargo, desde hace ya bastantes años, diversos agentes centrados en la accesibilidad web, como The Paciello Group, han venido señalando los problemas de accesibilidad que suponía este atributo, en especial en los dispositivos táctiles y para los usuarios que accedan únicamente a través del teclado, en ambos casos la información del atributo title no es accesible.

El resultado ha sido que las especificaciones HTML5 no recomienden el atributo title para incluir información que no esté disponible por otras vías. Es decir, la información contenida en atributo title ha de estar disponible en otras partes del documento para asegurar que sea accesible:

Warning! Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g. requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).

http://www.w3.org/TR/html/dom.html#the-title-attribute

Y sus efectos en SEO son nulos. Según SearchEngine Journal, ya hace mucho tiempo que ingenieros de Google confirmaron que no es utilizado en sus algoritmos, ya que rara vez aporta valor para los usuarios.

¿Cómo y cuándo utilizar el atributo title entonces?

El atributo title sigue siendo válido, incluido en las especificaciones y con algunos usos potenciales. Para utilizarlo correctamente, ten en cuenta estas dos reglas:

  1. No utilices title para incluir texto que quieres que sea accesible para todos los usuarios.
  2. Si title no tiene información adicional que aportar, simplemente no lo utilices. Por ejemplo, si en un enlace el texto enlazado y el title tienen el mismo valor, los usuarios con lectores de pantalla escucharán el mismo texto dos veces y para los demás usuarios no aporta absolutamente ningún valor.

Esto reduce el uso del atributo title sólo a dos casos de etiquetado:

1

Etiquetado de frames e iframes

<iframe title="Vídeo Ancestral Lullabies [Full Compilation]" src="https://www.youtube.com/embed/rTpbf5FFu1g" frameborder="0" allowfullscreen></iframe>
2

Etiquetado de controles cuándo el etiquetado visible es redundante o no es posible

Por ejemplo, si tenemos un input para hacer una búsqueda acompañado de un botón que dice “Buscar”, etiquetar el input con un <label> visible que diga “Buscar” sería redundante y el atributo title sería apropiado:

<input type="text" title="Buscar">
<input type="submit" value="Buscar">

O para el etiquetado de controles incluidos en tablas de datos.

Más información, y más completa, en The Title attribute what – is it good for?, por Steve Faulkner.

¿Se te ocurren más casos de uso justificado del atributo title? Coméntalos, estoy deseando discutir sobre el tema.

  • Hola. Lo primero gracias por el post, me resulta de mucho interés y no he encontrado información al respecto que sea reciente.
    Tengo una duda. Si los enlaces internos de una web tienen como anclaje “Leer más” y enlazan con un post del blog… aquí sería conveniente añadir el atributo Title y ponerle el título del post al que llega?
    Gracias

    • Buenos días Jorge.

      En principio no. Cómo se explica en el post, el problema del atributo title es la accesibilidad y por eso no se puede basar ninguna indicación al usuario en el atributo title. Si quieres dar indicaciones a los usuarios de hacia dónde se dirige el enlace, hazlo en el texto de enlace.

      Si, por motivos de diseño, no puedes añadir a cada enlace “Leer más: Título del post”, siempre puedes hacer:

      Leer más (Título del post)

      Y luego en el CSS utilziar técnicas para mostrar ese texto adicional sólo a los usuarios que accedan con lectores de pantalla (screen readers) u otros asistentes de navegación. Por ejemplo, bootstrap tiene las clases utilizadas en el ejemplo anterior, sr-only sr-only-focusable, puedes ver que CSS aplica en su documentación.

    • Gracias por tu respuesta Juan.
      Entiendo que es bueno añadir más información y no dejar un solo Leer más de cara a Google o no pasa nada por que en cada página interna haya 3 o 4 Leer más que lleven a páginas de posts. Llámese Leer más o Más información.

      Muchas gracias

    • Sinceramente, los enlaces “Leer más” son algo tan habitual que no creo que no creo que a Google le importe lo más mínimo. Generalmente también está el título del artículo enlazado, así que no creo que ponerlo también en el leer más sea necesario.

    • Muchas gracias Juan