About the title/alt attributes

Question

I understand the purpose of the title and alt attributes, but I just do not understand the best use for them or if I can use the same title/alt more than once.

For example, take a website about dogs:

From my understanding all img tags need an alt attribute:

<img src="Husky.png" alt="Husky" />
<img src="Rottweiler.png" alt="Rottweiler" />

Is it good practice to use the same alt attribute for multiple pictures on the same subject?

<img src="Husky2.png" alt="Husky" />
<img src="Husky3.png" alt="Husky" />
<img src="Husky4.png" alt="Husky" />

Is it good practice to use a title/alt attribute in every tag? What about using the same attribute more than a few times?

Example:

<ol title="This Dog">
  <li title="This Dog"> Dogs </li>
  <li title="This Dog"> Dogs </li>
  <li title="This Dog"> Dogs </li>
  <li title="This Dog"> Dogs </li>
  <li title="This Dog"> Dogs </li>
</ol>

<div id="body">
  <p title="This Dog"> </p> 
  <p title="This Dog"> </p> 
  <p title="This Dog"> </p> 
  <p title="This Dog"> </p> 
</div>

My understanding is that the title attribute acts as a tooltip that appears when hovering over text. The kind of thing that has to be done in newer browsers but alt and title used to do the same thing back in older browsers. Those attributes also serve as a method for search engines to recognize your website.

Answer 1

My understanding is that the title tag acts as a tool tip/hover over information type of thing in newer browsers and the alt tags use to do the same back in the older browsers.

No, the title and alt attributes have a different meaning/purpose (not old method vs. new method).

---

title

The title attribute is a global attribute, which means that you can use it on all elements. In general (note that one some elements (e.g. the abbr element) it has a special meaning) it is defined as:

The title attribute represents advisory information for the element […]

You should read the definition of the attribute, it explains how it should (not) be used.

alt

The alt attribute can only be used on the area, input (for image buttons) and img element. For img, it has this meaning:

the value of the alt attribute is the img element’s fallback content, and provides equivalent content for users and user agents who cannot process images or have image loading disabled.

There are many rules how you should (not) use this attribute.

---

So, the alt attribute is an alternative to the image: EITHER you see the image OR you read the alternative text. The alt value should not be given/presented as an addition to the image.

The title attribute gives additional information, that would be provided to both (the users that see the image and the users that read the alternative text). However, you shouldn't use the title attribute as the only means for information of importance, because …

• … the typical presentation is often "hidden" behind a tooltip (users don't necessarily know that a tooltip is present at all, because they don't hover over all elements)
• … keyboard or touchscreen users often cannot see the tooltip at all, because they can't hover
• … screen readers often don't read/announce the title value (in the default settings)

Answer 2

ALT: Alt text mean alternative information source for those people who have chosen to disable images in their browsers and those user agents that are simply unable to “see” the images. It should describe what the image is about and get those visitors interested to see it. Without alt text, an image will be displayed as an empty icon: without alt

In Internet Explorer Alt text also pops up when you hover over an image. Plus, Google officially confirmed it mainly focuses on alt text when trying to understand what an image is about.

An Image with alt but image is not displaying.

<img src="a.png" alt="Ann Smarty">

Another image without alt and image is not displaying.

<img src="a.png">

Title: Image title (and the element name speaks for itself) should provide additional information and follow the rules of the regular title: it should be relevant, short, catchy, and concise (a title “offers advisory information about the element for which it is set“). In FireFox and Opera it pops up when you hover over an image: An image with title and displaying image.

<img src="a.png" title="Optimize Images For Search Engines, Social Media">

Read More:http://www.searchenginejournal.com/image-alt-text-vs-image-title-whats-the-difference/