Cómo y cuándo utilizar el atributo title: una cuestión de accesibilidad HTML

  • Publicado el 26 noviembre, 2015 - Actualizado el

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.