Alt attribute

The alt attribute (alternative text) is a description of an image's content placed inside the img tag in HTML. Its job is to convey the meaning of a graphic in text form wherever the image itself cannot be perceived — by people using screen readers, by search engines, and when the image file simply fails to load. It is a small element that has a real impact on both accessibility and a page's visibility.

How the alt attribute works

When a browser cannot display an image — because of a loading error, a slow connection or blocked graphics — it shows the alt text in its place. Screen readers speak that text aloud, letting a blind user know what the graphic depicts. For search engine crawlers, the alt attribute is the primary source of information about an image, because algorithms still interpret text more reliably than raw visual content. It therefore acts as a bridge between the visual layer and the machine or assistive reading of a page.

Practical application

A well-written alt attribute is concise, specific and describes the actual content of a graphic rather than its file name. Instead of "image1.jpg", write "rack server mounted in a data centre cabinet". In the context of digital accessibility and the WCAG guidelines, correct alternative text is a requirement, not an extra. In on-page SEO the alt attribute helps a page rank in image search, provided the description reads naturally — stuffing it with keywords backfires and harms accessibility. Purely decorative graphics should carry an empty attribute so they do not clutter the screen-reader experience.

Context matters too: the same image may need a different description depending on the role it plays on the page. A product photo in a store should include the name and key features, while the same graphic used as a link should convey the link's purpose. A well-maintained alt attribute therefore improves not only accessibility but also the usability of a site, helping people who use assistive technology to navigate and helping search engines understand the content.