Image alt attribute best practices

Question

What exactly is the intended use of the alt attribute on tags?

Should it describe the image, or should it provide meaningful re

Answer 1

From w3.org:

While alternate text may be very helpful, it must be handled with care. Authors should observe the following guidelines:

• Do not specify irrelevant alternate text when including images intended to format a page, for instance, alt="red ball" would be inappropriate for an image that adds a red ball for decorating a heading or paragraph. In such cases, the alternate text should be the empty string (""). Authors are in any case advised to avoid using images to format pages; style sheets should be used instead.
• Do not specify meaningless alternate text (e.g., "dummy text"). Not only will this frustrate users, it will slow down user agents that must convert text to speech or braille output.

Answer 2

I think the idea is to use the alt text to communicate the same information as was intended with the image. This depends on what the image is.

Navigational elements are perhaps better described by their function ("next page", "back") than their appearance ("right arrow").

The photo of John Smith might be replaced with a description of John Smith, or a description of the event taking place, etc.

Answer 3

Alt attribute is used with img tag.

Alt means Alternate

It is used for short description of image.

It is displayed on screen in case browser is unable to load image

Click to Know more

Answer 4

The "alt" attribute is an alternative (textual) representation of the semantics of the image. This is not just used for images that can't load: it's also used for screen-readers or text-only browsers.

In your particular case, including the alt-text kind of depends on whether you think it's important to note that the page contains a picture of the person or not. If it's a purely visual item, you may not want any alt-text. If it's also used as a link of some sort, you probably do want some alt-text so that a person using a screen-reader has some clue about what following the link might do.