Hey there and welcome again to Website Tip Friday.
So keeping with our theme of accessibility for the month of October, we’re going to move on to one of the most prevalent, but easiest and quickest fixes in all of web accessibility: alternative text.
You might be wondering what is alternative text. Alternative text is n attribute for an image HTML tag that describes the image being shown. It’s what screen readers use to describe the image to a user so that they can get a better idea of what the image is. And it will also show up if the image fails to load, which helps, you know, normal sighted users.
But kind of like what a lot of web accessibility does, it also has SEO benefits for your website. For example, search engine crawlers can’t see your image. But they can read the alternative text which helps them index it better.
So, if this is so good for your website, how do you implement alternative text? The answer is that it’s pretty simple. Let’s check it out!
Okay, so I come to my website and I have this image and some text, another image. Very basic layout to the page. And really to add alternative text, it’s really really simple.
I’m just going to go into the code, and I’m going to add A-L-T equals. This is an HTML attribute. And I’m just going to put [typing “Calendar of October 2019”] because that’s what this image is. It’s a calendar of October 2019 actually. And there you go. Hit save. That’s my alternative text.
I’m going to reload the page. And you won’t see anything. But someone that’s using a screen reader, they’ll hear the alternative text that we just put in.
And you can actually see this in action if — I’m going to purposely break this image and reload the page again — and now you can see our alternative text.
Now, if you use a content management system, things do get a little bit easier for you. Most of the big content management systems, like WordPress, like Drupal, like Joomla, make it a little bit easier to add that alternative text to your images.
So here we are on a sort of development test site that I have on my laptop. And we’re going to go to media, and we’re going to upload that calendar image. Go in here.
Okay, now the image is uploaded. We’re going to go into the image. And right here we have a place where we can put in our alternative text. So I’m just going to write in like we did earlier. And that’s going to save.
Bam. As long as the theme on the front end is coded correctly, that alternative text is going to show up and there’s nothing more that we need to do with the image to make it accessible for others.
So go through your website today and see if all of your images have alternative text and fix it if not. I recently did this with my website earlier this year, and yeah, it took a couple of weeks to get through all of the images. But really in the end, it was worth it because it might help people who can’t see those images.
Because once again, web accessibility matters.
Leave a Reply