So I wanted to show you a real-life example of a badly implemented alt text for images and how much it can hurt the user's experience. Not only that, but it can hurt the user's understanding of the page, especially if you put important information in an image, but do not provide a good alt text.


Here I am on the Amazon page of this book and let's start browsing it and see what we find. So as we go down, we see that there's a section here that says "From the Publisher." And inside here, we have images of text, which I noticed Amazon does a lot.


It has a lot of images of text in their products, especially in books, where they put important information such as testimonials, and awards, and it has no other text equivalent. Let's see the first image that reads "One of the most anticipated books of Fall 2020." Okay.


This is "Images of Text," which means that when you have that, you have to transcribe the text inside the <alt> attribute of the image. Let's check the <alt> attribute of this image. The <alt> attribute of the image is "Nicholas Sparks, The Return, Christmas gifts," whereas the text of the image is something completely else.


So this is really badly implemented alt text and what's even worse is I don't see any text alternative next to the image. You can sort of get away with bad alt text if there is the equivalent text next to the image. It's still not a good idea, but it's better than nothing.


But in this section that says "From the Publisher," the only information is images of text so a screen reader user is not going to read "One of the most anticipated books of the Fall 2020" and then the names of the magazines like Parade, PopSugar, Travel.


The screen reader is going to announce "Nicholas Sparks, The Return, Christmas gifts," which is useless and it's not what the image tells. And then right below this image, we have testimonials from various TVs, magazines-- you know how books work. You need people and magazines giving testimonials so you can sell your book. So let's see.


Their alt text of the image is the same "Nicholas Sparks, The Return, Christmas gifts," "Nicholas Sparks, The Return, Christmas gifts." It is absolutely terrible and it just takes away so much from the user experience. This is not going to help a user with a screen reader. This is terrible accessibility. So I just wanted to show you how important it is for good alt text.


Now, let's say that the alt text was correct. Let's say that they did everything right, that the alt text was exactly as the images of text were saying. You should avoid images of text as much as possible because they're very inaccessible. I’m going to show you right now.


I have zoomed 150% and I’m going to zoom a little bit more. So I’m going to zoom 175-- let's zoom 200% because 200% is in the WCAG. It says that content must still be accessible and readable at 200%.


As you can see, I have zoomed 200% and the text becomes very blurry. And why is that? Well, it becomes blurry because images of text are not like electronic text. It depends on the pixel of the image itself. So every time you zoom in, the browser has to repaint the image and since it's not electronic text, it gets zoomed-- it gets blurry and that's why it makes it so inaccessible. So that's at 200%. So if someone who has visual impairment or just hasn't found their glasses or doesn't want to get up from the chair and get their glasses, or they just prefer to browse zoomed in, that's fine too, they'll have a difficult time reading this text because it doesn't scale when zoomed in. 


Now I’m going to zoom in 400%, which is also in the WCAG. See the image itself cuts off because it's such a big image that it has to cut off from the screen. Either that or they haven't coded it correctly to scale as the site zooms in, but even if it did, if they did code it correctly to scale as it zooms in, see how blurry it is? It's just terrible user experience and again, I am scrolling down and these three images are just appearing horribly.


So I’m going to zoom back into 150% and I want to look at another book. Okay. This is a different book that I opened and they have "From the Publisher" as well. So let's check its alt text to see if they did a better job. Now these images of text are showing, again, testimonials from various newspapers, magazines and the middle image says "Reese Witherspoon X Hello Sunshine Book Club pick."


So this book was picked by Reese Witherspoon’s Book Club, which is great, because it's going to help the book sell. Okay? So let's check the alt text. "Alt Text Missing." So actually I checked and there's no alt text. What they did is they added the <alt> attribute, but they made it "null."


So you do that when you want your screen reader to skip an image and that's absolutely fine if the image is decorative. If right next to the images there is a text representation, you don't need the screen reader to repeat something twice. "Null" <alt> attribute is absolutely fine if the context requires it.


You might be thinking, "Oh, but Stefany, look at the first image. The first image is transcribed below." Yes, it is transcribed below, which is good, but it's not transcribed inside this section. Okay? And some users they navigate the website using "H"-- the "H" key via Headings.


So it's still not compatible to the WCAG, but however, the second image "Reese Witherspoon X Hello Sunshine Book Club"-- I’m going to try to see if there is a-- I’m going to search the page now to see if there is the same text inside the page. So I’m going to type "Reese Witherspoon" in the Search bar. Okay.


So there is an alternative text at the top of the page, but the alternative text is nowhere near the image. So again, not conformant. And let's see if Bustle has an alternative text somewhere in the page. I’m going to write Bustle. Okay. "A lush mystery is perfect for fans of Barbara Kingslover." Okay. Bustle here. Okay.


Bustle - (laughs) that's just a funny name - has no alternative text inside the page so the user would completely miss this testimonial. But you're thinking, "Well, Stefany, what's the big deal?" Well, it is a big deal. What if they're a fan of this, whatever that is - magazine, website, I don't know.


What if it's important for them to see, "Okay, so a lot of magazines or web publications love this book, maybe it's something I would like too." It doesn't really matter. What matters is you create an accessible interface for everybody. And alt text - yes, I know it's difficult because alt text for images, it depends on the context a lot.


So you have to look at it individually, but it's still relatively easy to add the correct alt text. You just have to think about it for more than like one minute, like those people did apparently. They don't care about it. So I just want to show you how important it is and wherever possible avoid images of text. If you want to have these-- I think they added images because they want it to look beautiful.


You can do that with CSS and HTML and it can be accessible off the bat. Yeah, that's pretty much it about <alt>. Don't forget to Like the video and Subscribe to the channel and code accessible websites.