What
An alt tag, also known as an alternative text attribute, is a hidden piece of text information describing an image on a webpage.
Why
An alt tag is important for screen readers and for SEO.
Alt tags provide a text alternative for the image, allowing people with visual impairments using screen readers to understand the content of the image. This ensures everyone can access and comprehend the full message of your webpage. However, if the image has no real relevance and is not adding to the content and is an attracter then treat it as decoration.
Search engines like Google can't "see" images directly, they rely on alt tags to understand what those images are about. Relevant and descriptive alt tags help search engines index your images, potentially improving your website's ranking for relevant searches.
How
The alt tag is entered in the html code after the image like in this example for the graphic at the top of this page.
alt="illustration of mayhill with a winding path leading up to a clump of trees planted for queen victoria's golden jubilee"
About decoration
html code for decoration is simply an empty alt tag <alt"">
Here are instances where a decorative alt tag might be appropriate:
Purely decorative images
Images that serve no informational purpose and simply add visual flair to the page, like background patterns or textures.
In these cases, use an empty alt tag <alt"">.
Redundant images
Images that repeat the same information already expressed in surrounding text.
For these, an empty alt tag or a brief alt tag like "image of text above" can suffice, avoiding repetitive information for screen readers. Remember excessive noise for a screen reader can be annoying.
Images used purely for aesthetic purposes
These often appear on landing pages or hero sections of websites and aren't strictly tied to specific content.
A creative and evocative alt tag that enhances the image's aesthetic impact can be considered, but prioritise accuracy and avoiding misleading descriptions.
Important caveats
Even for decorative images, prioritise accessibility when in doubt. An empty alt tag is often preferable to a misleading one that might confuse screen reader users.
Use your judgment cautiously and sparingly. Overusing decorative alt tags can harm SEO and accessibility.
Remember, the primary purpose of alt tags is to be informative and helpful. Decorative use should be a last resort.
Aria role
Where the image for example has a caption the alt tag maybe redundant or will duplicate text. In this instance you could use aria like this:
<img src="my-photograph.png" role="presentation">
This however is not widely supported at the moment