Using alt text for images makes your website SEO-friendly, more accessible, and requires almost no technical abilities whatsoever, yet over half of all websites don’t include them. It seems borderline negligent to not use alt text, so let’s look at what it is, benefits to using them, and best-practices.
What are Alt Tags?
Alt tags, also known as alt attributes or alt text, are HTML attributes applied to images on web pages. The term "alt" stands for "alternative." Alt tags provide a text description of an image, which is displayed in place of the image if the image file cannot be loaded or if the user is using a screen reader.
How do Alt Tags Impact Accessibility & SEO?
Alt tags improve accessibility by providing a description of images that visually impaired users can’t see. They are imperative to ADA compliant website design. Screenreaders will read the alt text aloud, allowing users who can’t see the image to have purpose and context for its usage.
Alt tags are important for SEO. Search engines reference alt text to understand the content of images, which helps with indexing and ranking in search results. Including relevant keywords in alt tags can improve the visibility of your web page.
Usage & Common Pitfalls
Alt tags are often used incorrectly. Some developers will shoehorn keywords into their alt text, ignoring the actual content of the image, which needs to be described. Alt text needs to describe the content and purpose of the image in a clear and concise way that is descriptive enough to convey the meaning of the image to someone who cannot see it.
Alt text should be used for all images on a webpage except images that are purely decorative (graphic embellishments, or background textures, for example). For complex images or images with heavy text content (like an infographic), provide a more detailed description using the caption or a text area immediately following the image.
Implementation
When applying alt text to images, the tags are added to the HTML <img> element using the ‘alt’ attribute:
<img src="image.jpg" alt="Description of the image">
It's just that simple. Armed with this information, go and build yourself a better website. Even better - contact pondSoup to help you along the way.