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 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 visually impaired people. 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, describe the image, and provide a better understanding of an on-page image.
• If an image can’t load, an alt attribute will be displayed in place of an image.
• Alt attributes provide better image context and descriptions to search engine crawlers, helping them to index an image properly and improving your SEO.

Writing Alt Attributes for 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, but they should be to the point. Alt attributes are designed to provide text explanations of images for users who are unable to see them. Be clear 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 were to include the picture of the birthday-celebrating pug above, it should be placed near text about 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 to help your images rank.

Avoid Keyword Stuffing

Like all things, keywords are great in moderation. Be careful not to 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, and 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 a 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 also have alt attributes. This simple step will give you a more accessible website that is also SEO friendly, creating a more positive user experience!

If you are more of a visual user, here is a tutorial from Google about writing alt attributes.