What do I use as alt text for images?

- When you publish an image on the web, it's important that you fill in the alt text attribute for that image. The alt text is there in case either one, the image doesn't load, you've likely seen the little square with that little red X in it instead of an image instead of the webpage sometimes, and then you see text next to it, that's the alt text. But more importantly, it's there for anyone who can't see the image for some other reason. That could be because they're using a text to speech browser, or other accessibility tool, or it could be because they're using something like a voice assistant to read the content back to them, or they're using a web scraper to pull the content out and put it into an eReader, or a myriad of other reasons. Any time people don't see the image for some reason, the alt text is there to give them the context of that image, and that's the important part. It's easy to think that the alt text is there to describe the image at all times, that isn't actually the case. You see, to fill out the alt text directly, you have to follow something called the alt text decision tree, and that has to do with images not always serving the same function. So if you think about an image, you can add an image into a document for a lot of different reasons. It could be purely decorational, it could be as part of a link that goes somewhere else, it could be an image describing something or providing more context, the image can have text in it, and then you want people to read that text, or a myriad of other things, and the alt text changes depending on those contexts. So let me go through a basic checklist so you can see if the alt text you apply to an image is the correct one. So let's say you're adding in an image, you're going to immediately ask yourself, does this image have text in it? And if so, is that text available anywhere else in the document? If the text in the image is available somewhere else in the document, then the alt text element should be empty. It should still say alt equals, and then rabbit ears, but it should just be an empty alt text. If the text from the image is also present in the caption below, then it should just be in the caption and the alt text should be empty. If the text is not present anywhere else in the document, and it's necessary, then the alt text should be the text in the image so the text is present for someone accessing the content without seeing the image. If the image does not have text in it, but has some contextual value and that contextual value is not described anywhere else, then the alt text should describe the contextual meaning of the image. So for example, if you have an image of a person pointing at another person and this is relevant to the story, then the alt text should say, person pointing at other person, actually describing that, rather than saying, in the park, or something else. It should actually describe the relevant contextual information from the image instead of what the image is overall. And again, the caption part applies, if the caption already describes it, then you don't need to put it in the alt text, and then you leave the alt text empty. If the image functions as a link, meaning you can click on the image to go somewhere else, then the alt text should describe where the link points, because otherwise the user will have no way of knowing where this link points, and the image doesn't necessarily describe that. If the image is just an image and you want to describe the actual image, like you're showing an image or something, then the alt text actually describes the image. So what you'll often see is you'll post an image and then you'll have a caption that describes a photo of a horse by, and then the photographer's name, then the alt text can further describe the image to lend more clarity to what we're looking at because if I say something like horse, it's not really enough to understand what that image is. You have to describe where it is, and what's actually happening in the image, and why it has value, and so on. Lastly, if an image has no value other than as filler, so it is purely decorational, then you leave the alt text empty because if it has no information, then no information is passed on. So as you can see, depending on context, the alt text actually changes dramatically. The most common place I see the alt text used wrong is actually when people post up slides or some sort of different images that have different pieces of text in them, and they use that to communicate text in an easy way that can be shared across everything where you can control the layout and environment, but if you don't add an alt text actually saying the same thing that the text is saying, then someone who can't access the images will have no way of accessing that information at all, and then communication falls apart. So, any time you add an image, think about the context the image is in and when in doubt, go to the W3C and look for the alt text decision tree, and then you'll find a flowchart where you can go through the flowchart and find out exactly what the alt text should be for your image.