You took the time to find that perfect image for your website’s homepage or a blog post. You feel that image says everything you want to say about your business or blog. The last thing you would want is for it to be invisible. If you neglect the alt attribute of that image, it may very well be invisible from a Search Engine Optimization (SEO) and accessibility standpoint.
If you want to ensure that your page is SEO and accessibility friendly, this post is a must-read for you. If you use alt attributes on your site, but want to improve how they are written, this post is for you too. If you just can’t get enough alt attributes in your life, well, you’re in luck as well!
What are Image Alt Attributes?
Alt attributes, also referred to as alt tags or alt text, are an essential element for an effective online presence. They are used within an HTML code to describe the appearance and function of an image on a page. Alt attributes strengthen your visibility to search engine spiders and improve the accessibility of your website for people who are visually-impaired. By neglecting to add alt attributes to your images, you keep those images, and your page, invisible. They are essential for these three reasons:
- Adding alt attributes to photos is first a principle of web accessibility. Visually impaired users need to know what the picture is showing. A screen reader will read an alt attribute, describing the image, and provide a better understand of an on-page image.
- If an image can’t load, an alt attribute will be displayed in place of an image.
Writing Alt Attributes for Website Accessibility
Now that we have a better idea of the importance of alt attributes, it is important to know how to write them. So if you were to create an alt attribute for this image:
The alt text could say: pug dog. That describes the picture on a basic level, but does not give the full picture. A better alt text would say: pug dog wearing birthday hat looking up. Why does that work better? Well here are 6 tips to keep in mind when creating alt attributes that are SEO and accessibility friendly:
Keep Alt Text Simple
Google does not like long descriptions of images (see keyword stuffing below) and neither do screen readers. The most popular screen readers cut off alt attributes at around 125 characters, so it’s advisable to keep it to that character count or less.
Be Descriptive and Concise
Not only should the alt attributes be short, it should be to the point. Alt attributes are designed to provide text explanations of images for users who are unable to see them. Be clean in your description, while trying to say it in as few words as possible.
Location, Location, Location
Placing images with alt attributes near relevant text will help create a logical experience for non-visual users. For example, if I was to include the picture of the birthday-celebrating pug above, it should be placed near text about a doggy-themed birthdays.
Keywords are Key
Remember when I told you that there is an SEO component to alt attributes? Well, keywords are key for SEO. Alt attributes are an opportunity to signal to search engines that your page is highly relevant to a particular search query. It’s a great strategy to use your site’s keywords in order to help your images rank.
Avoid Keyword Stuffing
Like all things, keywords are great in moderation. Be careful to not misuse your keywords as it could end up hurting your SEO instead of helping it. Google does not like it when you stuff the alt attributes with keywords. In our pug wearing a birthday hat example above, you would want to avoid this alt attribute:
pug dog breed puppies doggies birthday party hat red white pup puppies woof
First, this does not accurately tell a screen reader what the picture is. Imagine having to make sense of a picture with that description!
Secondly, filling alt attributes with keywords results in a negative user experience, and may cause your site to be perceived as spam.
Don’t Neglect Form Buttons
What is a form button? Form elements are different types of input elements, like text fields, checkboxes, submit buttons.
For example:
This is an example of a shopping cart or add to cart form button. If a form on your website uses an image give it an alt attribute. Image buttons should have an alt attribute that describes the function of the button, for example, this icon could have an alt attribute of shopping cart.
You are now ready to write your alt attributes for all the images on your site. Every time a new image is added, be sure to write the alt attribute. Remember to go back to older images and ensure that they have alt attributes as well. This simple step will give you a more accessible website that is also SEO friendly, creating a more positive user experience!