Images and Alt Text

[00:00 - 00:16] In this lesson, you'll explore images, important role throughout the web, and how alt text impacts everyone, not just those who use assistive technology. The focus will be on writing descriptive and meaningful alt text, and we'll look at some practical tips and techniques that you can use to level up your alt text game.

[00:17 - 00:31] The alt attribute is intended to contain a description of the associated image. This attribute greatly enhances accessibility by allowing screen readers to vocalize the provided text, enabling users to understand the meaning conveyed by the displayed image.

[00:32 - 00:41] Additionally, alt text is also displayed when an image fails to load for various reasons. Without the alt text, you would see a broken image and have no context of what should have been rendered.

[00:42 - 00:51] Most screen readers would react to this by reading out the file name, which is usually a long and verbose string that isn't very descriptive. This is just a simple example about how alt text benefits users of all abilities.

[00:52 - 01:14] Let's actually take a look at alt text in the wild, so to speak, and so let's go to the Aryan Author Practice Guide website, we're on their homepage here, and let's inspect one of their images. We can see that the alt text for the image is right there, there's a string for it, and let's inspect a second image and take a look at that alt text and how it differs.

[01:15 - 01:34] What I want to do is, I actually want to intentionally break one of these images so that you can see what is rendered when the image can't display for some reason. So go ahead and modify the URL and notice that it says now, "Indicates or indicators of the relevant side of documents."

[01:35 - 01:45] That's the alt text that's provided. Even though the image isn't displayed, we get an idea of like, "Okay, this is what this image would have represented, had it actually been rendered properly."

[01:46 - 01:58] Let's go to that other image and do the same thing. We're going to break the link, but instead I'm going to intentionally remove the alt attribute entirely, because I want you to see what happens when you don't have alt text.

[01:59 - 02:07] When we do that, notice that we get nothing that's displayed. It's just nothing.

[02:08 - 02:15] We have no context of what should have been rendered there in its place. So that's not helpful for screen readers or such a technology because they have no idea.

[02:16 - 02:24] I just would say like image or read out like a long verbose found name like I said earlier. Then for sighted users, we also have no idea what should have been displayed there.

[02:25 - 02:39] So there's just an example of how defining the alt attribute is very helpful to people who use assistive technology and those who don't. Crafting proper alt text can be trickier than it appears.

[02:40 - 02:52] Often it's up to the discernment of the author to decide what description would work best. Some tactics will be discussed to simplify that decision process and explore various image categories with both examples to guide you in creating compelling alt text.

[02:53 - 03:06] The first category we'll look at is decorative images, which are primarily used for cosmetic purposes and do not contribute significant context or meaning to the content. When incorporating decorative images, it is recommended to pass an empty string to the alt attribute.

[03:07 - 03:20] Doing this will remove the image from accessibility tree, ensuring that screen readers skip over it, signify that the image is not essential to the web page. One example of a decorative image is a cover photo on Colt Steel's website.

[03:21 - 03:35] While the image adds visual appeal to the content, it's not essential for understanding the site's context or meaning. If we actually go in and inspect the attribute or the image element here, we'll see that the alt attribute is actually empty.

[03:36 - 03:44] For some reason, Chrome and certain browsers just show that alt attribute with no empty string, but just know that it's alt equals empty string. That's actually being displayed here.

[03:45 - 03:55] Colt has an ARIA hidden equals true on this image element, which is a bit redundant. I'm going to remove that just so we can focus directly on the image element.

[03:56 - 04:16] But if we do this and then go to our accessibility section within our dev tools, we'll see that the tools here say that the element has empty alt text, which is what we expected. Another thing that we see is that right above it is that it says, "Accessibility node not exposed."

[04:17 - 04:24] That's exactly what we want. We don't want the assistive technology to be reading that out because we're saying, "Hey, this is just decorative.

[04:25 - 04:35] It's just there for fluff. It's not mandatory that this be read out so that it won't enhance the user's experience or take away from it."

[04:36 - 04:47] This is just a good example of that. I'm just going in alt equals empty string just in case to show you that that doesn't change what's exposed in the accessibility tree here.

[04:48 - 05:03] But yeah, there's a good example of nice image, great for sighted users, you can see it, but it doesn't take away from the context so we can go ahead and mark this decorative and put the alt text as an empty string. The next category we'll look at is functional images.

[05:04 - 05:16] These types of images serve to represent actions or interactions, rather than conveying specific information. When providing alt text for functional images, it is important to describe the associated action rather than the literal appearance.

[05:17 - 05:26] These types of images are commonly found on elements like links and icon buttons. And one example we'll take a look at here is a standalone image with an associated link.

[05:27 - 05:39] In this scenario, two frequently encountered image types are logos and social media icons. So let's go ahead and look at the navigation bar on the New Line website, where the logo is positioned in the top left-hand corner.

[05:40 - 05:48] There are a few acceptable alternatives for all text in this case. And one option is to state that it is the company's logo.

[05:49 - 05:59] And if we go in and inspect the image here, we'll see that New Line does have New Line logo here. But another viable option to set the alt text to is New Line Home.

[06:00 - 06:09] Since clicking on that image will actually direct you to the home page. Since we're on the home page already, it wouldn't really change, but say we were nested within a course lesson, clicking that will take us to the home page.

[06:10 - 06:22] And so those are just kind of two viable options that you could use to represent that kind of standalone image with an associated link. The last category of images we'll look at are informative images.

[06:23 - 06:40] When writing alt text for informative images, it is recommended that the text alternative describe the meaning or intent that the image is trying to convey in a brief phrase. Many of the images you've seen sprinkled throughout the course lessons are considered informative images, as they're intended to provide a visual representation of the concept being described.

[06:41 - 06:52] And so to take a look at an example of this out in the wild, I wanted us to go to Marcy Sutton's web page. Marcy Sutton, if you don't know, is a great advocate for accessibility.

[06:53 - 06:59] She's very well known in the accessibility community. I reference a lot of her resources and talks to learn more about accessibility.

[07:00 - 07:15] So I figured, let's take a look at how she is handling images and how she's writing alt text so that we can see how an accessibility expert actually does it. And so we're actually going to do this by activating the screen reader by pressing command F5.

[07:16 - 07:20] That'll open it up. And then we will open up the rotor by control option command U.

[07:21 - 07:28] And then navigate down to the photos region here. And then I'll kind of scroll down a little bit to center the images.

[07:29 - 07:43] And then what we're going to do is we're going to kind of iterate through each of the images and stop on some of them and just see what is read out for the alt text. So if we take a look at the first image here, it says presenting at React Rally image.

[07:44 - 07:53] And then if you go to the second one, refractive lake in Glacier National Park image. Notice how it's reading out the alt text followed by the type of element.

[07:54 - 07:59] This one gravel cycling in the truck nuts image. The day one already went platformed or it image.

[08:00 - 08:07] Again, she's describing the concept of the image is trying to convey. Rather than the literal thing like.

[08:08 - 08:16] So these are just some examples of how to write really good alt text. I just wanted to wrap up this lesson by providing a few additional tips and tricks.

[08:17 - 08:27] The first is that crafting alt text can be nuanced. Try to avoid descriptions that are too lengthy or wordy and aim for clear, concise and succinct depictions.

[08:28 - 08:34] The second is that choosing whether an image is decorative versus informative can be nuanced. And is ultimately up to the discretion of the author.

[08:35 - 08:46] Third is to avoid using terms like image, picture or icon within your alt text. As it becomes redundant, since screen readers already announced that the element being narrated is an image.