Update "Can <img> tags contain a title attribute?"

[Jefferydo]

The answer:

Yes, and it is even encouraged but not required if there's already an alt="" attribute. More Information The title attribute will add a tooltip on the image which will be displayed on keyboard or mouse hover, or if the image doesn't load properly. Moreover, the title attribute will be used as the image's accessible name if it lacks an alt attribute.

Using the title attribute on images is discouraged. From the HTML5 spec's images section:

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).

The way it's written, the solution suggest the title attribute is required in the absence of an empty alt. An image with an empty alt is supposed to be ignored by AT.

More information suggest:

• the title tooltip will popup for keyboard users. That's the case only if the image can receive keyboard focus.
• using the title attribute is a viable alternative to alt. It validates but it may not work, it's the incorrect semantics, and it's discouraged. From the HTML spec:

Except where otherwise specified, the alt attribute must be specified and its value must not be empty

The spec mentions the title attribute in the context of images a few more times:

The title attribute can be used for supplemental information.

If a caption is to be included, then either the title attribute can be used, or the figure and figcaption elements can be used.

example of title as caption:

<img src="sales.gif"
     title="Sales graph"
     alt="From 1998 to 2005, sales increased by the following percentages with each year: 624%, 75%, 138%, 40%, 35%, 9%, 21%">

[chanmichaely]

The title attribute can be used for supplemental information.

I agree. Using the title attribute on images is not recommended.

Keep in mind that alt text should convey the meaning or essential content. It should be concise and short (less than 150 characters).

You can use <figcaption> to provide context to describe information that isn't apparent from looking at the image. This includes the who, what, when, where, and/or why of an image.

For complex images, there are different approaches you can use to provide short and long descriptions.

Please refer to the ESDC self-paced web accessibility course for more details and examples:

Module 5 - Images - Informative images Module 5 - Images - Figure and figcaption Module 5 - Images - Complex images