If you’re a website or blog owner, then you’ve likely heard the term “alt attributes” or “alt tags” before. But what is alt text, exactly? And what is it used for? Read on to learn all you need to know about its purpose and implementation.
What Is Alt Text? Definition and Location
Alt text is a written description of an image that appears in its place if the image fails to load on a page. It’s also sometimes referred to as “alt tags,” “alt attributes,” “alt descriptions,” or “alternative text.” Alt text appears in the HTML code of a web page as follows:
<img src=”image.jpg” alt=”Image Description” width=”500″ height=”600″>
So, what is alt text? As you can see, it’s an attribute of the image HTML tag. In short, it’s text that is supposed to replace an image if necessary. Below, we’ll discuss its main purposes in more detail.
The Main Purpose of Alt Text: Accessibility
If you’re not familiar with the term, accessibility refers to the degree to which a website can be used by people with disabilities. Alt text ensures that blind or visually impaired people can still understand what an image is supposed to represent. How? Alt text is read aloud by screen readers, which are software programs that assist visually impaired users in accessing websites.
The Secondary Purpose of Alt Text: SEO
In addition to helping those with disabilities, alt text can also be beneficial for your website’s SEO. Since search engines can’t “see” images the way humans can, they rely on alt text to help them understand what an image is about. When it comes to SEO, what is alt text used for? The answer is that keywords included in the alt text of an image can help your website rank higher in search engine results pages (SERPs).
Some websites abuse this by stuffing their alt text with too many keywords (a practice known as “keyword stuffing”), but this can actually hurt your ranking. So, what is alt text supposed to be like, from an SEO perspective? In addition to being relevant and concise, your image’s alt text should also include keywords that are relevant to your website’s content.
For example, if the image shows a graph with data about the growth of your company, then you might use the keyword “business growth” if it’s relevant to your website’s content.
Image SEO – Other Things to Keep in Mind
In addition to using keywords in your alt text, there are a few other things you can do to optimize your images for SEO. These include:
- resizing your images so that they’re the correct size for your website;
- using keyword-rich file names for your images (e.g., “business-growth-graph.jpg”);
- compressing your images to reduce their file size (which can help your pages load faster);
- adding descriptive captions to accompany your images.
While alt text is just one part of image SEO, it’s an important one. So, if you’re not using it on your website, then you could be missing out on an opportunity to improve your site’s ranking in SERPs.
Another thing to keep in mind is that machines are getting better at understanding images, but they can’t accurately interpret an image the way humans can. So, it’s possible that a crawler might incorrectly interpret the content of an image and attribute the wrong keywords to it. Help machines out by including accurate and relevant keywords in your alt text.
What Should Alt Text Be Like?
What is alt text like, ideally? In order for a screen reader to correctly interpret and read aloud the alt text of an image, the text must be well-written and succinct. A common mistake is to write excessively long or detailed descriptions, which can be confusing and overwhelming for users. In general, the rule of thumb is to keep your alt text descriptions short (under 125 characters), relevant, and to the point.
The only exception to this rule is if you’re dealing with an infographic. You can spell it out in the alt description, but make sure that you’re still being concise and not adding any unnecessary fluff.
On the other hand, alt descriptions shouldn’t be too minimalistic, either. If your alt text is just a couple of words, it might not give users (or search engines) enough information about what the image is supposed to represent.
For example, if you’re including an image of a cat, simply saying “cat” as the alt text wouldn’t be very helpful. A better option would be something like “black cat sleeping on a windowsill.” Aim for a description that lets you imagine what the image looks like, even if you can’t see it.
Image Alt Text Checklist
If you’d like to check whether you’re using images and alt text correctly, here’s a quick checklist you can follow:
- All of your website’s images have alt text.
- Your image alt text is short, relevant, and to the point (under 125 characters).
- You’re including keywords in moderation in your image alt text (avoid keyword stuffing).
- Your image alt text is easy to understand without seeing the image.
- Your image alt text accurately describes what’s shown in the image.
- You’re not including image file names or unnecessary fluff in your alt text.
- You’re not including the words “picture of” or “image of” in your image alt text (it’s unnecessary).
- You’re using alt text for your website’s logos.
- You’re not using images in place of actual text on your website (e.g., you’re not using an image of a paragraph of text).
If you can check all of these items off your list, then you’re probably doing a great job with your images and alt text. If not, then there’s always room for improvement. By following these guidelines, you can be sure that you’re using alt text correctly to improve your website’s accessibility and SEO.
When Is Alt Text Unnecessary?
It’s important to remember that images on your website should have some form of alt text, even if it’s just a brief description. That said, there are some exceptions to this rule. If you’re including an image that is purely decorative and doesn’t add any value to the content of your page, then what is alt text supposed to help with? It’s unnecessary.
For example, if you have a website about dogs, and you’re breaking up your blog posts with images of dogs regardless of the actual topic, you don’t need to write alt text for those images because they’re just there for decoration. Having a screen reader randomly read “a picture of a black dog” every few paragraphs would be disruptive and confusing for users.
Also, you don’t need to write alt text if the image is already described in the surrounding text. For example, let’s say you have a blog post about different types of dogs, and you include an image of each type. In the text around the image, you already describe what kind of dog it is and what it looks like, so there’s no need to repeat that information in the alt text.
Other Elements That Might Need Alt Attributes
While most people associate alt text with images, it’s important to remember that it can be used for other elements on your website as well. What is alt text commonly used for? Here are a few examples:
- Videos: Just like images, videos should have concise descriptions that accurately describe what is happening in the video.
- Audio files: If you have an audio file on your website, you can use alt text to provide a brief description of what the audio file is about. This way, if the file doesn’t play, users will still have some context about what they’re missing.
- Links: If you’re using an image as a link (known as an image link), you can use alt text to describe where the link is taking users. For example, if you have an image of a cat and the image links to a page about cats, you might use alt text that says something like “click here to learn more about cats.”
- Graphs and charts: Alt text can be used to describe the information shown in graphs and charts. This is especially helpful if the graph or chart is complex and might be difficult to read for visually impaired users.
- Buttons: If you have an image button on your website (for example, a “buy now” button), you can use alt text to describe what the button does.
In general, any time you’re using an image for a purpose other than pure decoration, it’s a good idea to include alt text. When in doubt, the best rule of thumb is to think about what someone would want to know if they couldn’t see the image. By using alt text on all the elements on your website, you can be sure that everyone will be able to understand what your website is about, regardless of what device they’re using.
Do Screen Readers Cut off Long Alt Descriptions?
If you’re wondering if your alt text might be too long and get cut off by screen readers, don’t worry. Screen readers will automatically break it down into smaller chunks and read it aloud one section at a time. So, if you have a long description, just make sure that each section accurately describes what is happening in the image.
There’s a common myth that anything longer than 125 characters will get cut off, but that’s not actually true. In fact, there is no character limit for alt text. As long as the information is relevant, you can include as much or as little detail as you want. Just keep it concise and to the point, and you’ll be fine.
Title Attributes vs. Alt Text
In addition to alt text, you might also come across the term “title attribute.” Title attributes are similar to alt text in that they’re used to provide additional information about an element on a page. However, there are a few key differences between the two.
First, title attributes are intended to be used as tooltips. They’re meant to provide more information when a user hovers over an element. For example, if you have a link to your privacy policy, you might use a title attribute to provide a brief description of what the policy is about.
Second, title attributes are not read aloud by screen readers. This means that they’re not accessible to people who are visually impaired and are using screen reading software.
To sum it up, alt text is designed for screen readers, while title attributes are there to show additional information when you hover over an image. If you’re looking to improve the accessibility of your website, focus on using alt text.
Do you have any more questions besides “what is alt text?” Leave a comment below and let us know! We’re always happy to help.