Adding Alt Text to Images
To add alt text to an image in HTML, use the alt attribute within the img tag. Alt text provides a text description of an image for those who cannot see it.
Alt text (short for "alternative text") is an attribute that should be added to all images on your website. It serves several important functions that improve both your website's accessibility and its performance in search engines.
The Basic Syntax
Here's how you add alt text to an image:
The alt text should be descriptive but concise.
Here it is in a web page:
In the example above, alt="A small ginger kitten looking curious" tells the browser what to display if the image cannot be loaded, and what a screen reader should say to a visually impaired user.
If the image above loads successfully, the browser will display the image. It will only use the alt text if the image is missing or cannot be displayed for some reason.
Why Alt Text is Important
There are three main reasons why you should always include alt text:
- Accessibility: Screen readers use alt text to describe images to users with visual impairments. Without it, the user may only hear "image" or the filename, which provides no context.
- Slow Connections or Broken Links: If an image fails to load (due to a slow connection, a broken file path, or the user having images disabled), the browser will display the alt text in its place.
- Search Engine Optimization (SEO): Search engine crawlers cannot "see" images like humans do. Alt text helps search engines understand the content of the image, which can help your page rank better in image searches.
Tips for Great Alt Text
- Be descriptive but concise: Describe what is actually in the image, but try to keep it under 125 characters.
- Avoid starting with "Image of": Screen readers already identify the element as an image, so saying "Image of a cat" is redundant. Just say "A cat".
- Use keywords naturally: If your image is relevant to your page's topic, include keywords, but don't "stuff" them just for SEO.
- Decorative images: If an image is purely decorative (like a divider line or an abstract background) and doesn't add meaning to the page, use an empty alt attribute:
alt="". This tells screen readers to skip the image.
What Happens Without Alt Text?
If an image is broken, the user's experience will differ depending on whether any alt text was provided.
Here's an example of two broken images, one with alt text and one without:
When no alt text is provided for a broken image, the user just sees a broken image icon. Many screen readers will also read the image's filename instead. This is often confusing (e.g., "IMG_20240402_FINAL.jpg") and provides a poor user experience. By including alt="" for decorative images or a descriptive string for informative ones, you ensure your site is professional and accessible to everyone.