Images are, by nature, visual elements on your page. For a blind user, the closest they can get to seeing an image on your site is through your description. This is one of the reasons for alt text and why it is an essential component when trying to achieve compliance. Under the grouping of WCAG 1.1.1, images are non-text content and fall under the single A level. Related Links
1.Introduction to Accessibility4 lessons, 12:12
2.Tools for Testing8 lessons, 30:06
3.Fixing Common Accessibility Mistakes8 lessons, 1:20:23
4.Real Site Testing2 lessons, 23:50
5.Conclusion1 lesson, 02:03
Hey, John Hartley here, and in this lesson we'll be taking a look at one of the most visual portions of the web, and that is images. Images are by nature visual elements on your page. For a blind user the closest they can get to seeing an image on your site is through your description. This is one of the reasons for alt text and why it is an essential component when trying to achieve compliance. Under the grouping of WCAG 1.1.1, images are non-text content and fall under the single A level. The only time you should leave alt text empty is if the image is simply decorative. Now let's make sure that we heard that correctly. The only time you should leave alt text empty is if the image is simply decorative. So say, you have frills on your page or a little dancing unicorn that doesn't really have much purpose. If your site's about beef jerky, but you have a unicorn, unless it's the mascot it probably doesn't need to be on the page. Things that don't convey much of a meaning don't need to have an alt text. But that's not to say that an alt text does not need to be there. And I understand that that's a little confusing. But, I'll show you the difference right here. In this first technical fail that I have, I have an image with no alt text. When a screen reader reads this, it's going to read it as just the file name. Having no alt attribute at all on an image results in a fail of this guideline, as some alt text must be given. And again for decorative, it's all equals quotation marks, quotation marks. And that's it. There's no space in between or it will be run that way. When adding images to your page, it's generally best to write the alt text as you're adding it. Don't feel confined to make the alt text concise. If the image is there to stir up emotions, it would make sense to try and bring that out in alt text. And in terms of character limit, 150 seems to be about the max that all text is good for. Past that, you might wanna think about longdesc, and longdesc stands for long description. Never under any circumstance, should you use the file name for the alt text. If you have an image on your page, you must have alt text. That just is, just how you pass the criteria. But let's look at some differences in passing this guideline. Note this image that I have on the page. I placed it on the page five times. I'm going to turn off the screen and have the screen reader read to you what would be read through a screen reader user. Helsinki dot JPEG image. Helsinki dot JPEG image. Image of a radio thing on a roof image. RCA's microwave link was situated on top of the Olympic Stadium Tower and directed towards Palace Hotel in Helsinki. The studio equipment was located in a radio house Fabianinkatu. The programs were transferred by coaxial cable to RCA's microwave link on the roof of the Palace Motel. And from there, they were seven gigahertz frequency to [INAUDIBLE] radio's link on top of the Olympic Stadium Tower image. RCA's microwave on top of the Helsinki Olympic Stadium Tower in the 1950S image. >> So which of those was the best to you? To me, that last option is the best. It's fairly concise, it get the point across, but it's not too verbose. It doesn't give extra information that isn't necessarily needed. The fourth option probably could pass, it's got alt text, it's descriptive, but it's extremely long and someone may get lost while a screen reader's reading that to them. And that was all with just this main image that I got from New Old Stock and it explains exactly what the image is. If you're using an image in your page and you have text afterward, make sure that the text on the page is not a duplicate of the text that's being used as the alt text. You may think, this is exactly what it is, but at the same time, you don't wanna have that replication of content. Illustrations, maps, charts, and other similar images can enhance comprehension of your content. But, sometimes alt text for that just won't do. Let's take a look at the Tokyo Subway map. It's pretty confusing right? So, think for a minute, that you're colorblind. You start looking at all these different lines, and the pretty much become unreadable. You have no idea in where any of these lines go. You have this magenta line that comes into the station, but it could go down this way, it could pop back up up top, or it could come out over here. Now one way that they've tried to alleviate this is by having letters associated with the lines as well. Apart from that, you could also use shapes to indicate the different lines. And when I first took a look at this map I hadn't actually noticed the line color associated with a line symbol. So it's pretty impressive that they can get all this information onto this one map. By using an extra symbol you're no longer relying on color alone to get someone, literally, from point a to point b. Now the alt text on this may be difficult. Sure you can say for your alt text, the Tokyo Subway map. Great, but that doesn't help out a user that is trying to look at this map and interact with it, to get from the Narita Airport into downtown Tokyo. So in my mind at least, there are two options for this situation. One, you could have long desk. And long desk links out to a separate page. And this page gives a larger description. And on that page, you could have more interactive site that helps out a user input information of where they are and where they wanna go. And then outputs the text version of all of these subway charts. The option I would probably be more likely to go to is to give the person a phone number to call. Now this isn't always going to be an option. But, think about a user that is unable to see this map that needs to use the subway. Is it going to be easier for them to try to use a text-based system? Or to have a phone number that they can easily call to be assisted in planning out their trip? So we've covered basic images, but let's take a look at one more image. And I'm talking about this one with the cat turning his head in the middle of a field wearing sunglasses. That's right, I'm talking about GIFs. And as you know, GIF stands for graphic interchange format so some say JIF, some say GIF. Those that say JIF, in my opinion, are wrong. When you have a GIF and you're dealing with accessibility, it's important to remember that GIFs can be a bit confusing to someone who has ADD or ADHD. One method that's used frequently throughout the web is to only move the GIF on hovering. So there are many techniques out there on how to get that done. We're not going to go over it here, but that's an option that you can use. Another thing to remember with GIFs is that you need to make sure there aren't too many flashes. So white to black or high contrast flashes between images with flashes that occur more than three times per second. Flashes that occur more than three times per second could induce seizures and that is definitely a problem. Just to quickly drive these points home, let's take a look at imgur.com. Now this is a site that is heavy, heavy, heavy on images. And if we tab through, we can actually get to the images themselves. And let's see what happens when we turn on the screen reader. >> link, like dislike points. link, like dislike points. >> So you can see that I'm starting to move through and this is the overview page, but there's no descriptive text. You don't know what the image is. It's just saying like dislike. And that's all you can do with these images is like or dislike them. And as a sighted user, if you hover over an image, it'll show you the title of that image and you can like or dislike that post. So by hiding that content and setting it to display none, this site is not allowing users using a screen reader to focus on that image and then see the title. This is something that we'll cover in a later lesson about focus, but I wanted to bring it up here to show that you could just have that image inside the link with alt text that says what it is, but that is not the case here. So now we know a bit more about images and how to make them accessible, and what not to do with images on a website. In the next lesson, we'll start breaking down some more of your HTML content, and we'll take a look at another WCAG guideline.