Alternative text is an important part of website images because it shows up when the image doesn't. This can be critical for people browsing your website with a screen reader or someone who has turned off images because they have a slow internet connection. Alternative text also helps search engines understand your web page when it scans the HTML for keywords. If you want to make sure that your content is optimized for SEO, adding alternative text should be one of your first things!
1. Why is it important to add alternative text on website images?
Alternative text is important because it provides essential information for people browsing your website with a screen reader or someone who has turned off images because their connection is slow. It also helps search engine crawlers understand your webpage better. Search engines view your website in a text-only format similar to how screen reader users interact with your website. If you want to make sure that your content gets found by search engines, then adding alternative text should be one of the first things you do!
While this article is focused on image alt text, it's not the only HTML tag that offers the alt attribute. In fact, the alt attribute is also available for the area and input tags. Generally, when people talk about alt text, they are referring to image alt text.
2. How can you add alternative text on a website image?
Adding alternative text to images is incredibly simple. You just need to find the image tags in the HTML and make sure that they have an alt attribute defined. Image elements with an alt attribute should look something like the following
<img src="..." alt="Woman that is frustrated while navigating a website">
That's all there is to is. Simply add the alt="" attribute to the image tag with a sentence describing either the scene or the intent behind the image to provide extra context to users.
3. Examples of websites with good alternative text for their images
When creating alternative text, it's important to make sure it is both readable and descriptive. Often images will be left to the programmer to decide what to write, and this often results in a half-hearted attempt where a beautiful image of the ocean with a variety of sailboats can end up with a terrible description like
"Water with boats on it"
Don't make this mistake! It's important to create alternative text at the same time you choose an image. It's also crucial that the alternative text is properly descriptive and understanding the image's intent when it is read. A better description for the same image might be:
"Anchored sailboats scattered across a harbor on a sunny day waiting for the race to start."
You don't need to write a novel, but it does need to elicit a specific image in the minds of your users and effectively convey the intent of the image. If you are using symbols like a stop sign, it is better to set the alt text to 'Stop!' instead of describing what a stop sign looks like.
Pro-tip: when writing alternative text, you should use commonly understood words and keep your sentences short. Complex or uncommon words and run-on sentences make it difficult for users to understand the purpose of the alternative text.
4. Tools for reviewing alt text
The most obvious way to check for image alt text is to do it manually within the browser. You can see alt text by right-clicking on an image and opening it in a new tab or window. If you're using Chrome, there's also an extension called Show Image that will display alt text for images as well!
If you have a WordPress website, a plugin called SEO Yoast will automatically generate alt text based on the image filename. This can be a handy tool if you do an amazing job of labeling your images, but you should still double-check that the alt text makes sense.
The last way of checking image alt text is with Look-see. Our service helps you review your website for various usability issues, like checking images for alt text. Come have a look-see!