Join us on a quick and eventful mind-journey…
You are uploading an image to your website or email.
The image has a file name that’s something like: IMG_2521.jpg.
It’s a picture of a dog — but you only know that because you can see it.
What if the image doesn’t load? Or what if a visually-impaired visitor is engaging with your site or email via a screen-reader? They don’t know it’s a dog.
Unless you tell them!
An ‘alt tag’ (or ‘alt text’) is how you tell them.
And it’s easy to do … we promise!
What is an alt tag?
It’s text used to describe an image for those who cannot see it. In the example above, you would simply add the alt text — “yellow dog” — to your image.
Why are alt tags so important?
A clearly-identified image is part of a good user experience — and we want all website visitors to have a good user experience! If the image doesn’t load, or your visitor is using a screen-reader, the visitor won’t know what’s pictured unless you use an alt tag describing the image.
Using alt tags isn’t just about being nice!
All websites should be accessible and ADA compliant, meaning that anybody (with any ability or disability) can use the site. Website accessibility standards are starting to be enforced by law, so it’s more important than ever to do what’s necessary for compliance.
A little SEO bonus…
Aside from making your site accessible and providing a good user-experience, alt tags can also support SEO. Though the intention of alt tags is not to attract SEO traffic, it can certainly help. If your images have relevant alt tags, this can naturally lead to good search engine visibility. For example, if one of your images is a “designer creating a website” — you might attract traffic for searches about website design.
How do you add alt tags to your website?
An image tag in HTML looks like this:
<img src=”https://yoururl.com/thepathtotheimage.jpg” >
To add an alt tag in HTML simply add this:
<img src=”https://yoururl.com/thepathtotheimage.jpg” alt=”your alt text” >
In most content management systems, including WordPress, you can easily update your image’s ‘alt tag’ or ‘alt text’. Same goes for your email marketing platform. (In WordPress, go to your images in your media library. Click on an image to open its settings and there you can add an alt tag.)
At the 23NTEN conference, one of the presenters shared a PERFECT example of descriptions for images. I thought it was so great, I’ll share from their slide deck here (credit goes to: Kanopi Studios):
You could use “Dead bug” as the alt-tag to describe these two photos. When you can visually see the photo, it makes sense.
Now, close your eyes and picture a “Dead Bug.” Could be a lot of things.
More accurately, you could describe the image like this:
Tips when writing alt tags:
- Avoid confusion. Be sure your tag describes the image as clearly as possible for someone who cannot visually see it. While you might call this image a “dead bug” — it’s more accurate to call it a Rusted Volkswagen Beetle or car abandoned in a junkyard. Some terms can have multiple meanings; be sure to pick a term that is clear.
- Be mindful of how you describe people. Instead of making gender or ethnicity assumptions, aim for inclusion. Unless it’s someone you know (and therefore know how they’d like to be described), stick to terms like “person in a blue shirt walking a dog” or “person with red hair holding a baby.”
- Do not include spammy keywords. While alt text can benefit SEO, it’s not the main purpose. While keywords may show up naturally, do not use alt tags as a place to “hide” keywords. This is not the purpose, and can ultimately detract from SEO.
Our most important tip? Get in the habit!
When uploading an image to your website, it’s easy to skip over this. Don’t. Even if you’ve been leaving your images tagless for years, start now.
- Make sure your staff knows how to add alt tags.
- Implement it moving forward as a new procedure.
- Go back and resolve previous images.
Challenge: Download this PC screen reader (https://www.nvaccess.org/download/) or try the Chrome extension https://chromewebstore.google.com/detail/kgejglhpjiefppelpmljglcjbhoiplfn. Take a little spin on a website (yours or someone else’s) — and get some insight into what a visually-impaired person might experience online.
Heads up! Alt tags are an essential part of website accessibility — and you’ll be hearing lots more from us about that. Buckle up and get ready to learn! As always, Boomerang Marketing will be your guide on all things website-related.
Not sure where or how to add alt tags? Schedule an intro call — we’ll talk you through.