Algunos consejos sobre el uso del atributo title

Muy interesante el artículo The Trials and Tribulations of the Title Attribute.

El primer consejo es "no uses el atributo title". Pero si lo tienes que usar, o lo quieres usar aunque te digan que no lo debes usar, entonces lee este artículo para saber cómo usarlo correctamente.

Uso del atributo title

El atributo title se suele utilizar muy mal en las páginas web. Ya he escrito sobre ello en el pasado:

• El atributo title
• Sobre el atributo alt y title, ¿cumplen la misma función?
• Consejo 14: Proporciona un título significativo para cada parte individual de una página

En el artículo Using the HTML title attribute – updated explican algunas cosas más:

Situations in which the the title attribute is not useful due to lack of support:

• Displaying information for web content viewed on mobile phone browsers. Typically in desktop browsers title attribute content is displayed as a tooltip. From what I could find, tooltip display is not supported in any mobile browser and alternative visual methods of accessing title attribute content are not supported.

• Providing information for people who cannot use a mouse. Typically in desktop browsers, title attribute content is displayed as a tooltip. Although the tooltip behaviour has been supported for 10+ years, no browser (except IE10+ [on focusable elements]) as yet has implemented a practical method to display title attribute content using the keyboard.

• Using it on most HTML elements to provide information for users of a variety of assistive technologies. Access to title attribute information is not supported uniformly by screen readers

• User groups not well served by use of the title attribute

Mobile phone users.

• Keyboard only users.

• Screen magnifier users.

• Screen reader users.

• Users with fine motor skill impairments.

• Users with cognitive impairments

Consejo 14: Proporciona un título significativo para cada parte individual de una página

Consejo: aunque se desaconseja su uso, una página puede estar compuestas de marcos, ya sea de tipo frame o iframe. Para cada marco (parte), debes proporcionar un título significativo y representativo, es decir, un título que ayuda al usuario a entender el contenido, propósito o función de ese marco sin tener que visitar la página. Cada marco en una página debe tener un título único.

Cómo lo hago: en la definición del marco, ya sea en la etiqueta frame o iframe, debes incluir el atributo title (no confundir con la etiqueta title) para proporcionar una descripción del contenido del marco.

Cómo se benefician los usuarios: algunos grupos de usuarios, en especial los usuarios que utilicen un lector de pantallas, como pueden ser los usuarios ciegos, se benefician ya que los lectores de pantalla proporcionan algunas ayudas, como la "lista de marcos de la página" (y se muestra el título de cada marco) que les ayuda a moverse de un marco a otro en el navegador web.

Más consejos en Julio, cada día, un consejo sobre accesibilidad web.

Sobre el atributo alt y title, ¿cumplen la misma función?

Me escribe una alumna de la asignatura Experiencia de usuario del Curso de especialista en diseño web:

Estoy mirando varias páginas para la actividad voluntaria de accesibilidad web, pero me están surgiendo algunas dudas con las etiquetas. Por ejemplo, después de leer los apuntes me ha quedado claro que cuando se pone una imagen, se debe incluir la etiqueta (alt=" "),  sin embargo, estoy viendo una web en la que aparece de la siguiente forma:

<div id="Clogo">

<img alt="Escudo Institucional" src="images/logo.jpg" title="Escudo Institucional" />

En este caso concreto, ¿la etiqueta (title= " ") cumple la misma función?

La alumna no me ha dicho en su mensaje dónde ha encontrado este ejemplo,  pero uno que es "perro viejo" lo ha encontrado fácilmente: se trata de la web oficial de la Junta de Extremadura.

La respuesta es NO, no cumple la misma función. Si leemos la recomendación del W3C sobre HTML podemos sacar las siguientes conclusiones:

• El atributo alt se emplea como representación alternativa, es decir, como sustituto de la imagen. Por ejemplo, cuando se decide no cargar las imágenes de una página (por ejemplo, porque la conexión a Internet es lenta o nos cobran mucho dinero por ello, como puede ser desde un teléfono) o cuando alguien no puede ver las imágenes (por ejemplo, un ciego). Este atributo es obligatorio.
• El atributo title se emplea para proporcionar información adicional, no para proporcionar información que sustituya al elemento al que se aplica (en este caso a una imagen). Por ejemplo, se puede emplear para indicar el autor de una fotografía, la fecha de realización de una fotografía o el origen de una imagen, pero siempre como información complementaria. Este atributo es opcional.

Por tanto, en este caso concreto, está mal utilizado el atributo title. Se emplea para proporcionar exactamente la misma información que con el atributo alt, lo cual, más que ayudar, es una barrera (a nadie le gusta leer o escuchar dos veces lo mismo). Si vemos el código de la página de la Junta de Extremadura, comprobaremos que esta forma de actuar se repite en más sitios.

Esta página es el típico caso de accesibilidad web mal entendida: el desarrollador de la página lee alguna guía, lee algún artículo, consulta algún ejemplo, pero en realidad no entiende lo que está haciendo, simplemente lo repite como un loro.

La guinda de esta página web la podemos encontrar en su pie. Por un lado, podemos encontrar el mensaje "Resolución Óptima 1024x768 px.", que ya comenté un caso parecido hace unos días en Tonterías, las justas. Por otro lado, podemos encontrar las medallas de "XHTML 1.0" válido (pero no es así, a mí me han salido 3 errores de validación) y "WAI-AA" (hay algunas cosas básicas que se deberían corregir, como esta del atributo title).

[Actualización 04/03/2011]
En realidad, en este ejemplo, la imagen en cuestión sólo realiza una función decorativa, por lo que lo mejor, lo más accesible es emplear un texto alternativo nulo (simplemente alt=""), y por supuesto, no utilizar el atributo title.

El atributo title

El objetivo del atributo alt es ofrecer un texto alternativo como sustituto de una imagen y no, como mucha gente cree y hace, un medio para proporcionar información adicional. Este mal uso del atributo alt proviene de la interpretación que hace de él el navegador Internet Explorer, que muestra el texto alternativo como una etiqueta de ayuda (tool tip). Otros navegadores lo muestran en la barra de estado de la ventana del navegador.

Si se desea incluir información adicional que no es esencial, se puede emplear el atributo title. Este atributo se puede usar en todas las etiquetas de HTML excepto base, basefont, head, html, meta, param, script y title.

En una imagen se puede emplear el atributo title para proporcionar información adicional que no es esencial, como la fecha de una fotografía, su autor o la cámara con la que se hizo.

En Internet Explorer, el atributo title tiene preferencia sobre el atributo alt cuando se muestra la etiqueta de ayuda. Por tanto, si no queremos que el texto alternativo se muestre en un navegador visual al situar el cursor del ratón sobre una imagen, simplemente tenemos que dejar el atributo title vacío: title="".