What is an ALT tag, and why do you care?

 

You may have been told “don’t forget your alt tags!” and not known what they were talking about. Well, you’ll know after watching THIS video, let me tell ya! Gain web visitors and boost your SEO rankings with this!

Transcription

Hey folks, welcome to another HeroPress Tip of the Week. This week, we’re going to talk about the ALT tag in HTML, what it is and why it matters to you. We’re here at the Wikipedia page for it. And here at the top, it says the alt attribute is the each tml attribute used in HTML and XHTML documents. To specify alternative text, alt text, that is to be displayed in place of an element that cannot be rendered. Typically that’s an image. And there are a variety of reasons why you may not be able to see an image. The most common is if you’re using a screen reader. But another is using a text based browser. Or maybe you just have low bandwidth, and you can turn off images, and the website’s much faster, there are a variety of reasons. So in this video, I’m going to show you what it is and why it matters.

The first thing I’m going to show you here is this image, and the code for this image is right here. And it’s very simple. There’s an image tag, a source tag and the URL of the image. Now, if I display alt attributes, and hide images, you get nothing, you have no idea what’s there, you wouldn’t know that image exists. We’re using the Web Developer Toolbar and Firefox to do this. However, if I put in alt=, and a quote, and some text, then I see this. And I’ll reload real quick. And we will do it again, display alt attributes, and hide images. And now you’ll see what someone would get if they were blind or using a text browser or just had images turned off or whatever.

Let me show you what it looks like in practice. So here’s a real website. And I’m going to do the same thing. I’m going to display alt attributes and hide images. And now you can see my header has an alt of your press. And there’s a banner here. And then down here, there was a little one, the alt tag exists, but it’s empty. So it still shows that it’s empty. And another banner, another banner, and so on. So let’s turn those back on real quick. And I will show you how you can make sure that those have alt tags. I’m looking at a post here. And I’m going to open it up in another tab while we are looking at it. So here’s an image. And I have clicked the image in the block editor. On the right, there is an alt text field. And that’s all there is to it.

Now this one is overriding the one in the media library. If we go to the media library you’ll see that this one has an exclamation point. Now this is the fallback, this is the default. So if I just put this in a post, and did not provide an alt tag, then it would come from here. So it’s important when you’re putting in an image that you always put in alternative text. And then we’ll come over here. And I will once again just display alt attributes and hide images. And you’ll see the banner was library card catalog. And the card just says library card. And there’s a satellite view of Harrisdale machine that was there.

Now why do you care? There are a couple of reasons. One is that blind people are people too and they want to know what’s on your website. I have an example here of a screen reader doing its thing. Let’s start about here. No, I want to start here.

Full Screen. Full Screen readers tab selected one of one navigation toolbar toolbar, search with Google or enter address combo box collapsed view Site Information button. And it has autocomplete selected websites dot it’s dotted yellow.edu/screen readers dot HTML screen readers document heading level one screen readers and accessibility, heading level one screen readers and accessibility. People who are blind or have low visual acuity often use assistive technology to read the content pages. One assistive technology called to read topic headings and bookmark and rendering the information for the reader function of a webpage. For example, listen closely for a description of the following image graphic a loggerhead turtle swims underwater off the coast of Lanzarote Canary Islands, heading level two summary assistive technology.

So you can see that the alt tag was read by the screen reader, and they get to know that there was a picture. They’re aware what it was, and where it was, and all of that. Now, this should be enough for you to want to put in all tags, they’re not that hard. And they’re very useful to people who use screen readers. However, if that’s not enough, let’s go back to Wikipedia here. This, this line right here is important. The text within the alt attribute substitutes the image when copy pasted as text, and makes images more machine readable, which improves search engine optimization. So you’re going to get better SEO, if you use alt tags, and you’re going to move up higher in the rankings, and you’re going to get more traffic. That’s just the long and short of it. So if doing it for the right reason of helping people who use screen readers or have low bandwidth or whatever isn’t enough, then do it for the SEO, do it to get higher rankings. I actually don’t mind if that’s your reason, because it will benefit all of humanity to have better alt tags.

So that’s an alternative text tag, alt tag, it’s just a little piece of HTML that sits in your, on your website that tells people it describes your images. And it’s super easy to use in WordPress. You can put it right here in the media library. You can edit it right within a post. It’s just it’s really easy to use. So go forth and alt all the things I hope you find it useful.