An alt attribute in HTML is used inside the IMG tag to provide alternative text for that image. It is useful for accessibility, SEO, and as fallback content.
Here, if the image doesn’t load, users will see the text description “A black cat sitting on a windowsill.”
How is alternative text useful?
Alt attributes have many uses.
Although optional, using them provides significant benefits.
Let’s elaborate on the purposes that alternative text serves.
Accessibility
The alt attribute is crucial for web accessibility
Visually impaired users rely on alt text to understand images and how they apply to the surrounding content.
Screen readers read the alt text of an image aloud for them, providing additional description for that image and they may use the image filename or URL if the alt attribute is absent.
Besides being usually ineffective at properly explaining the image, this can also be confusing and disruptive, mainly if the filename is not optimized.
The example’s filename, “srcAttrInImg”, provides no information about the image itself.
Alt text is important for web accessibility, but its implementation is inconsistent and faulty.
Proper use of alt tags would dramatically improve lives of people with visual impairments, and this is something that all web developers should try for.
SEO
When crawling, search engines index images from web pages.
Adding relevant keywords in the description of an alt attribute can increase our chances of ranking high in image searches.
A descriptive alt text helps search engines understand the image’s content, improving SEO and SERP placement.
Fallback Content
When images are unavailable (for example, due to an incorect filename or pathway), browsers display alternative text instead.
In cases of images that are not merely decorative, but contribute to the content and benefit the reader, this can be very helpful.
Best Practices for Writing Alt Text in HTML
Using these best practices will make your alt tags better.
Be Descriptive
Describe the image clearly and provide as much information as possible.
Try to put yourself in your readers’ shoes.
Could you visualize the image just be reading the text on the alt tag?
Keep it brief
Alt text should be both detailed and brief.
Although according to the HTML standard, there is no character limit regarding the alt attribute, as a rule of thumb we are better off to keep content below 150 characters.
This 150-character limit isn’t for screen readers; Screen readers won’t truncate any text.
It works mostly as a reminder to avoid overly detailed descriptions.
Don’t Use Unnecessary words
Including words like “Image” or “Picture of” is unnecessarily repetitive.
Screen readers already indicate that it’s an image.
Use Keywords Wisely
Include relevant keywords naturally but avoid keyword stuffing.
Although including keywords within alt tags can boost SEO, we must be careful to not overdo it.
Overusing keywords negatively impacts both SEO and user experience.
Don’t Use Alt Text for Decorative Images
If an image is purely decorative, leave the alt attribute empty (alt="").
This helps screen readers skip unnecessary descriptions.
A decorative image is one that doesn’t provide any context in relation to the article but is merely used for breaking a wall of words or improving the look of the webpage.
Describe Functionality for Functional Images
Functional images don’t convey information, but initiate action.
They can be used as buttons, links, and other interactive components.
For functional images, we use alt text that explains what they do, not what they look like.
Use nearby text for complex images
When an image is complex (e.g., a chart, or an infographic), a good practice is to give a concise summary in alt text with a longer description provided either next to the image or on a linked page.
Although my blog doesn’t support comments, feel free to reply via email or X.