Adding alt text for images is the first principle of web accessibility and SEO optimization. It is also one of the most difficult to properly implement. The web is replete with images that have missing, incorrect, or poor alternative text. Like many things in web accessibility, determining appropriate, equivalent, alternative text is often a matter of personal interpretation. Through the use of examples, this article will present our experienced interpretation of the appropriate use of alternative text.
Image Alt Attributes And Title Attributes?
This is a complete HTML image tag:
<img src=“image.jpg” alt=“image description” title=“image tooltip”>
The alt and title attributes of an image commonly relate to as alt tag or alt text and title tag. But technically, they’re not tags, they’re attributes. The alt text describes what’s on the image and the function of the image on the page. So if you are using an image as a button to buy product X, the alt text should say: “button to buy product X.”
The alt tag is in use by screen readers, which are browsers by blind and visually people. These screen readers tell them what is on the image by reading the alt tag. The title attribute is shown as a tooltip when you hover over the element. So, in the case of an image button, the image title could contain an extra call-to-action. However, this is not a best practice.
Context is Everything
When determining appropriate alternative text for images, context is everything. The alternative text for one image may be vastly different based upon the context and surroundings of the image itself.
Alt Text Best Practices
Ultimately, image alt text needs to be specific but also representative of the topic of the webpage it’s supporting. Get the idea so far? Here are a few important keys to writing effective image alt text with SEO in mind:
- Keep your alt text fewer than 125 characters. Screen-reading tools typically stop reading alt text at this point, cutting off long-winded alt text at awkward moments when verbalizing this description for the visually impaired.
- Use your keywords, but sparingly. Only include your article’s target keyword if it’s easily included in your alt text. If not, consider semantic keywords, or just the most important terms within a longtail keyword. For example, if your article’s head keyword is “how to generate leads,” you might use “lead generation” in your alt text, since “how to” might be difficult to include in image alt text naturally.
- Describe the image, and be specific. Use both the image’s subject and context to guide you.
- Don’t start alt text with “picture of…” or “Image of…” Jump right into the image’s description. Screen-reading tools (and Google, for that matter) will identify it as an image from the article’s HTML source code.
- Don’t cram your keyword into every single image’s alt text. If your blog post contains a series of body images, include your keyword in at least one of those images. Identify the image you think is most representative of your topic, and assign it to your keyword. Stick to more aesthetic descriptions in the surrounding media.