What Is Alt Text? (And Why It’s So Important For Your Site)
Images can be really helpful resources when you’re creating a web page. They assist in adding more context to site content, divide long passages of text, enhance the visual appeal of pages, and more! An unoptimized image, on the other hand, is just helpful to the person who can see it.
What if someone visually impaired visits your website? Or what if Google’s algorithms try to crawl these images for data? Well, that’s what alt text is for.
In this article, we’ll take you through everything you need to know about alt text, and even throw in some of our best tips on how to effectively write them!
What Is Alt Text?
Alt text, also known as alternative text, commonly referred to as alt attribute or alt description, is essentially a brief summary of text to illustrate what a picture displays.
However – it’s not the same as a caption. It’s a quick HTML or CMS attribute that you can use to provide the images on your website with a description of no more than 100 characters.
Here’s an example that we found direct from Amazon.
This was the image:
And here’s a look at the alt text – taken directly from the source code.
Although often overlooked, alt text actually offers a lot of value to your website, so you’d be wise not to sleep on them!
What Are The Benefits Of Having Alt Text?
You’d be surprised to find out how these small pieces of information can make a world of a difference for your website. Let’s have a look at some of their biggest benefits:
1. Enhanced user experience
Nowadays, great user experience is one of the most important factors for an effective website. This means that everyone should be able to access it – even those with a bad internet connection.
Low bandwidth users might not see properly loaded graphics and visuals. They will instead see a broken link symbol that indicates an image is missing.
So, the connected alt text is used to stay true to the user experience when a picture is unable to load on the user’s screen. This helps users understand the content of the website and what it wants to tell them or make them feel.
2. Improved website accessibility
People suffering from vision impairments rely on screen readers when browsing the web. But, unless you include an alt tag, the screen reader is unable to read aloud the content of an image.
With that said, because alt text is considered as text that a program can read, having it makes websites more accessible to visitors with eye disorders.
Image accessibility is not only a basic politeness to your blind and visually impaired clients, but it also increases user satisfaction and brand loyalty in the process, which can lead to higher conversion rates. In fact – we’ve written a whole guide on website accessibility.
3. Higher SEO rankings
Another function of alternative text is that it accurately identifies the visual components of your page by using Google Search’s result code. When scanning the alt text on an image, search engine crawlers can determine the visual content properties of the image and present your page in the search engine results.
Basically, a search engine function known as “image packs” places graphics above any actual links on the first page of results. The system ranks the relevancy of the websites to the keywords using this horizontal row of image links.
With this, you’ll find that alt text utilizes specific keywords for image SEO, and operates similarly to regular SEO. Although picture SEO is not yet sophisticated enough to understand its content, it can scan the added alt text.
So, to improve your SEO ranking on the results page, it is safe to invest time and effort in adding alt text to your images. The more optimized visuals you have, the more people will visit and stay on your website.
How To Properly Write Alt Text
One of the easiest ways to increase accessibility on your website is to include helpful alt text to photos. But mastering it isn’t always simple, and if done incorrectly, it may even make accessibility worse.
So, here are some tips to get you started:
1. Be clear and concise
Without adding any editorial commentary, you should describe your image’s content as clearly as possible. It’s best to avoid making assumptions about a subject’s motivations, gender, race, or what’s going on out of frame—only describe what’s noticeable.
Be specific about what you can see, though! For instance, you can describe what a sign is saying, an animal’s fur color, someone’s style, and other details. This will help someone who cannot see the image to create a mental picture.
The best advice we can give is to imagine how you’d quickly communicate the image to someone on the phone. Most of the time, a few words will be enough, but there are situations when a complete statement is needed. Though, keep in mind that viewers tend to stop reading alt text after 125 characters, so it’s better to stay within that range.
2. Never start a sentence with “image of…” or “picture of…”
A person or a machine will be able to tell when something they are viewing is alt text.
Think about how annoying it would be to use a screen reader on a page with a lot of images and have it read them all out loud all starting with “Image of”. Super frustrating!
On the other hand, describing what kind of image it is—such as a headshot, drawing, chart, or screengrab—might be valuable, as it’ll provide readers with more context.
3. Make use of keywords sparingly and avoid repeating yourself
If you can strategically include one or two top keywords in your description of an image, go for it! It’ll greatly benefit your SEO ranking, but only when done sparingly and effectively.
Remember: contextually ‘poor’ (i.e., useless) alt text can’t be detected by search engines, but keyword stuffing can result in a ranking penalty since search engines like Google can detect it. That being said, be sure to briefly and specifically describe any photos that need alt text, but don’t overdo it!
How To Add Alt Text To Your WordPress Website
Lucky for us, it’s very easy to add image alt text in WordPress. The hardest part, in fact, is just remembering to do it. No worries though, all you have to do is follow these steps:
- First, log in to WordPress to access the WordPress dashboard.
- Once you’re there, go to the “Post” or “Page” area of your website to access the images that need alt text.
- After clicking on one of them, simply click on “Edit” to access the WordPress editor.
- When you’re inside the WordPress editor, you can now add alt text to your images. Simply click on the image you want to add alt text in, then you should be greeted with the Block tab in the sidebar.
- In the blank space under the heading “Settings”, just enter your alt text.
- Then, click on “Update” to save your changes.
We told you it’s super easy to do!
With that said, if possible, try to incorporate this into your usual routine. For instance, after you’ve completed writing a page or post, it’ll be helpful to go through each section and quickly give each image an alt text. Doing this can go a long way!
Don’t Overlook This Helpful Feature
Who would’ve thought that images can do more than just give visuals? Alt text is a great way to give your website more accessibility, enhanced user experience, and higher SEO rankings (the best web hosts can also do those for you too!). And luckily, adding alt text to your WordPress site is as easy as counting 1-2-3.
So, to make yourself stand out and take things a step further, it’s important that you don’t overlook this helpful feature (and follow our tips on how to effectively write them).
Follow Bitcatcha for more best practices and tech updates!
