Inicia sesión


Cómo y cuándo utilizar el atributo title

Cómo y cuándo utilizar el atributo titleEl 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).
...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:

Etiquetado de frames e iframes

<iframe title="Como transformar tus fotos en acuarelas con Photoshop CC" src="https://www.youtube.com/embed/6mAMDG9niGA" frameborder="0" allowfullscreen></iframe>

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.


  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-08-08
  • Categorias: Diseño Web html5 Html WebSite webmasters SEO Tutorial




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Cómo rastrear a los usuarios de Adblock usando Google Analytics

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-15
  • Categorias: Google WebSite Trucos y tips Noticias Tutorial

Cómo eliminar a todos los usuarios de Twitter que estás siguiendo

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-15
  • Categorias: Google Chrome Redes Sociales Twitter Noticias Tutorial

Cómo escribir un poema

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-15
  • Categorias: Trucos y tips Noticias Tutorial

Curso de iniciación de JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Cómo insertar código JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Expresiones JavaScript para especificar valores de atributos en HTML

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial