(Jane) - Okay, well, thank you everyone for joining this Fix-it Clinic on May 1st, we are going to be talking about alternative text today, if I can get my slides to work here. 

Okay, some basics. What is alt text? Everyone talks about alt text. Alt text is sort of short for text alternative for images primarily. Basically you want to provide these text alternatives for images because users of screen readers would like to know what's in that image and you would like them to know what's in that image if it is important to the content of your webpage, social media posts, anything like that. 

With alt text, context is key. So you want your alt text to provide information that gives the person an idea of why that image is there. A couple things about alt text specifically, you want to keep it brief, but you do want to make it meaningful. So there is an art involved in writing good alt text. Practice makes perfect.

A few things not to include in alt text: URLs. Basically what ends up happening, if you put a URL in alt text, your screen reader is going to read http colon slash slash. You know it's just going to read a whole string of characters. Not very helpful. And the screen reader user can't actually activate URLs that are in alt text. So you don't want to include them there.

Avoid using special characters in alt text like quotation marks that can throw off screen readers. And also avoid using the phrase "image of" or "photo of" in your actual alt text. Because really it's redundant. The screen reader is going to announce "image" or "photo" or you know, for other things "link". It'll announce what the the thing is. So you don't want to include that, those particular words in your alt text.

So for images, there are images that are meaningful, that add to the context of the information you're presenting. And then there are images that are purely decorative. For example, on this slide you'll see these little figures up here in the upper right corner. Those are just there for decoration. So if I were going to put this slide on the web, or if I use these little decorative elements on a webpage, for example, I would want to make sure that the alt text for that image is the null alt text, which is alt equals in these quotation marks here, there is no space between the quotation marks. And what having this does is it tells screen readers just ignore this image. Don't even announce it. So when a screen reader user is going to go through a webpage, if there is an image there that has null alt text, it's almost as if it doesn't exist. The screen reader will skip it. It'll just go to the next content element.

One of the alt text issues that comes up a lot if you go into Siteimprove is that people's logos on their webpages are not, they're, they fail because they don't have alt text associated with them. So when you have linked logos, this is just a specific example in particular, you want to use the alt text to tell users where that link is going.

So take for example, this is the W3C website and if you have a logo image here, what and it is a link. If you click this, it will take you to the W3C homepage. What you want to make sure to do is to include alt text that says where it's going. So in this case it's saying that, okay, this is going to take you to the W3C homepage. So if you have your webpage and in the header up here, usually you'll have a logo image. Typically you want to make sure that that one is properly tagged with the alt text showing where it's going.

Another example of images that show up a lot on things these days, QR codes. If you do present a QR code, you want to make sure that on that page you also have a visible URL and I highly recommend using a link shortener like Bit.ly to make that URL short. But you want to provide that along with the QR code image itself. And then for the QR code, the actual image, you include the alt text, you say it's a QR code and you say what it's for. So don't put the URL for the link. You know nothing like that. Just say what that It is a QR code and it's for the specific purpose.

For social media and alt text images you're including in posts definitely include alt text. And depending on the platform, there are different ways of including that alt text. Captioning for videos, either closed captions or open captions. Open captions you see a lot on like Instagram reels, things like that where the, the actual captioning is like visible at all times. It's like burned into the, the video image.

And then for hashtags and social media posts always use either Camel case or Pascal case. They're very similar. Essentially you are capitalizing the first letter of each word. The difference between Camel case and Pascal just is that in Pascal you capitalize the first letter as well. Camel case you don't.

So let me go over a couple of examples of alt text and you know what good alt text might look like. If you are going to write alt text for an image, you want to take into consideration the context of the page. What are you trying to convey to your user? So if you have this image, for example, you could say, okay, alt text equals charging phone. 'cause it is, it's, it's being plugged into the wall. But something that's, if this image is appearing in let's say a how to or like a instructional manual, this would be better plug cable into bottom, into the bottom edge of the phone. So you're describing what's actually happening in the image. Not just saying that it's charging, but depending on the context of the page. I mean charging phone could be perfectly acceptable, but it just depends on what your goal is for the information.

Other ways to do alt text. This, the link to this page is on the a11y website, but oftentimes you'll see little images or icons next to information. In this example you have the little telephone and in the alt text telephone pretty standard. And then this one's an interesting one, we have a picture here and the alt text for this is dog with a bell attached to its collar.

This level of detail is not necessary if you're using this image on just let's say a gallery of pets on a a webpage. Let's say if that were the case, if it were just in a gallery page, you could just say, you know, dog, you could say what kind of dog it is. I suppose it's really depends on what you're trying to accomplish. In this instance they're talking, this image is appearing on a page that's talking about guide dogs and the fact that it is wearing a bell on its collar is relevant to the fact that it's talking about guide dogs and the owners use that ringing bell to locate where their dog is.

So this page, I'm not going to go through every example, but I will, this is linked from the Ally website. It goes through several other examples for how to write meaningful al text. And it really does depend on the context and your goal. There are other links on that, on the ally webpage here. Under resources I will be adding more and I will also be adding a whole page specifically for alt text in the coming weeks.

I just wanted to show one last thing before I open up for questions about any accessibility issue. So if you're in Siteimprove, I wanted to show what issues might look like. So you'll see this image missing A text alternative is a pretty common issue for sites and this particular website has a couple of those errors coming up. We'll go to the admissions page, this one here and Siteimprove will open up a page report, it's going through its thing.

So it takes a little bit of time for, it shouldn't be hashing all of that. But, oops, sorry, it's flag. What it's flagging here is this image from maybe Cal Day, no, I don't know if that's Cal Day, but if you go over to this left hand panel, you can look at it from, you know, the page content view or the HTML view. If you look at the HTML view, it's highlighting the image and you'll see in here there is no alt equals, it's just showing, you know, the source of the image, but there is no alt tag.

So what you would need to do in to fix this issue is to go into your, your code or into your, this, this is WordPress. So you go into WordPress and you would have to add the alt text. And if this site were set up with a direct link, then you would be able to click right up here and it would take you directly into WordPress. This one is not set up, so you're going to have to go in from a separate window. I won't do that right now unless people want me to, but I will. I do want to point out that setting up this direct link is really helpful. I highly encourage you to do it if you haven't done it already.

(EH) - Quick question, if you don't mind about that image. So it seems like it's coming from, they're just linking to the College of Engineering website. So would that alt text need to actually come from the College of Engineering website or would we need to do it from the aerospace website?

(Jane) - Let's see, engineering Berkeley uploads. That's interesting.

(SM) - The alt text goes in the code on the aerospace website. It's pulling the image from engineering Berkeley, but it's pulling that into a page that's on the aerospace website. So you can change this code that you're seeing. The image decoding equals async. I have no idea what that is. And the source, that's all part of the aerospace website. And the alt tag would be the same. And putting an an alt tag in here or changing an existing one would not affect anything that's on the engineering site. It doesn't go two ways, it just displays it on this page on the aerospace site.

(EH) - Oh, okay. So when you pull or link the image from another site, it's not going to also link the, like the, the alt text that they have, like

(SM) - Correct.

(EH) - Does it come with it?

(SM) - It won't bring a, it won't bring an alt text, it won't bring a caption, it won't bring anything except the JPEG or PNG image itself.

(SM) - Dang. Okay. Thank you.

(Jane) - Yeah, it's, it's, it's interesting. Some systems will pull that in and others won't, but it is good to check what happens after you have pulled in that image. I actually didn't know that it would go in, you know, and I that it's not copying the image as wholesale into your media library.

(SM) - What you're doing is just putting a reference in the code in the HTML on this page so it doesn't pull any actual attributes in. You could go and download that image from that place and upload it to the media library on aerospace and that would potentially be safer, but it has some other implications too.

(EH) - Got it. Thank you so much.

(SM) - Sure, yeah, that's very, I have, I have a couple of questions.

(Jane) - Sure.

(SM) - One of them, do you know whether WordPress can generate a null alt tag by putting quote quote in the alt tag field?

(Jane) - Ooh, that is a good one.

(SM) - I haven't tested this, but it just occurred to me you might be able to do that.

(Jane) - Hold on. Let's try. We can try right now. Let me see.

(SM) - Got a screen reader hooked up?

(Jane) - I do have a screen reader hooked up. Okay, so let me see here. Let me go to the dashboard. I have a sandbox page. I want to see if I have an image in there. Oh, I got another chat too. Hold on one sec. Oh, okay. Matthew says that that's how it worked with the old Drupal site.

(Steve) - Yeah, I was remembering that from Drupal too. I just, I never got around to thinking to test it on WordPress.

(Jane) - Oh, okay. My WordPress. Oh, there, okay. It's being very, very slow. Right, right now.

(SM) - Oh dear. Speak to your site admin.

(Jane) - Alright, where's my sandbox page? There it is. I did click. Okay, there it is. Okay, so if I add, of course I need to find an image. Do I have a,

(SM) - You must have some image somewhere.

(Jane) - Let me, let me just go to the media library and choose. Choose A. Okay. So there's no alt text. Should I do it from here or should I do it...?

(SM) - Do it right there. Put put the two quotes in. Okay. Because it should pull that into the code that we can check that find out.

(Jane) - All right.

(SM) - So while you're there, click the three dots in the toolbar right above the image. No, left there. Edit as HTML.

(Jane) - Okay. Oh, let's see if it put it in the code. No, alt you. Oh, no.

(SM) - That's what I was afraid of. Okay.

(Jane) - So darn. Oh wait, let's try space. Even though you're not supposed to put spaces, oh wait a second. Look at that.

(SM) - Yeah, actually it puts it in as a null tag, which is not right because that means that this image doesn't get flagged.

(Jane) - Yeah.

(SM) - Okay. Just something I wanted to check. So the, the advice is still the same. Everything Jane told you about alt tags applies including the need for them and make sure they're there. 'cause otherwise WordPress may make it look like it's there and it will just get ignored.

(Jane) - Yeah, this is, this is worth, I'm going to explore this more later.

(SM) - One more. Okay. Very tiny comment. Someone told me that you should end your alt tag with a period.

(Jane) - Oh that.

(SM) - Solely because that causes a screen reader to take a very brief pause after reading the alt tag so it doesn't run it right into the next sentence.

(Jane) - Yeah, no, that's a good, that's a good suggestion.

(SM) - And then my other question, not to monopolize things or anything, but say you've got a page which is largely or almost entirely a bunch of headshot, like our National Academy of Engineering members and those headshots have name line caption underneath the visible text. Should those images also have alt tags? And if so, what should those alt tags be?

(Jane) - So those should not actually if the, if their name is right under or right next to their image, that is a special sort of a special case. Because if you, the reason I'm saying, you know, mark those as decorative because the name appears next to it is because when you're using the screen reader, if you have the alt text as the person's name for example, it'll just be redundant. It'll say, you know, right. Jane Lee. Jane Lee. And it'll just say image Jane Lee, Jane Lee. It'll just, it's redundant. So you actually don't need it there. That's a really good question. Let me see if that's actually pointed out on one of these

(SM) - That actually caused a fair amount of argumentation in old web access group because there were people who said, no, that image is not decorative and it needs to be identified as an image so that screen reader users know there's an image here, which means you don't use a null alt tag. The other side of the table said, no, you should never put a, an alt tag that duplicates the caption because like you said, it's redundant and annoying. Nobody ever won that argument. 'cause they were both right.

(Jane) - Yes, they're both right. I would say, you know, just try to eliminate the redundancy. But you're right, you know, you could, you could make an argument both ways in terms of like another example of that is the linked logo that has the link next to the, you know, the actual image. In this case, this logo image is going to, you are going to put the, sorry, null alt text for this particular image because right next to it is the actual link and the link text. So you don't want this reading W3C Home link or image or whichever, whichever one it is. W3C Home link. So it would just repeat, repeat, repeat. And you know, if you've listened to people using screen readers, they are the speed, the reading speed is so fast. I mean, to have all the redundant texts would be quite difficult, you know, over the course of a page.

Does anyone have other questions? Oh, Matthew asked in the chat for Steve, your, your note that alt text should end with a period Matthew asked period outside of the quotation mark you in order for to the, so the code in the code alt text equals quotation mark. You write your alt text, your period would have to be inside the quotation mark in order for the screen reader to know that that is the alt text and that is the end of the alt text. You don't want to put the period outside,

(SM) - But if you are using a CMS like WordPress, you don't actually see those quotation marks in the first place. You just type in your alt text, end it with period, and the CMS will wrap that entire thing. Including the period inside the quotation marks.

(Jane) - Yes. All right. Let me make sure I've got all the, the questions. Okay. So Matthew also, so put a com quest comment in. LiveWhale has a section to indicate whether an image is decorative. So LiveWhale does that. Canva also does that. So there are various platforms where they have like a checkbox, let's say to mark images as decorative. If they have that check mark what you know they're doing when they actually spit out code, they should be putting in that alt, you know, null alt text into the code.

Are there any other questions about any kind of accessibility thing or alt text in general? Alt text, like I said, it's kind of an art to writing alt text. So I, I feel like the only way you get better is by looking at, at examples, you know, trial and error yourself, that kind of thing. And, and I'm always happy to help if you contact me. Does anyone have any other comments or thoughts about alt text?

(SM) - No. Thanks.

(Jane) - Yeah. Thank you everybody.

(MS) - Hello?

(Jane) - Oh, quick I hear something.

(SM) - Matthew

(MS) - Can you guys hear me? tabs opening up in a new window. What's the, is that generally considered not as accessible?

(Jane) - Depends on why it's opening a new tab. Are you...

(MS) - I, yeah, in regards to links. So if there's a, 'cause you know there's an option in WordPress to have it open in a new tab and I, I'd seen sort of arguments either way, so I'm just curious what your thoughts are. Yeah,

(Jane) - My thought, my, my thoughts, you know, personally, I, it's, I think it's fine to open links in a new tab, especially if they're going offsite. I think that it, you know, you can make a very strong argument for why that makes good sense. If you are linking to something within your own site, I would, I tend to just let that open in the current window and not open a new tab. But again, I don't think, you know, it's, there's nothing particularly, you know, like you can't just say no that's wrong, never do it. It really just depends on what you're linking to, like where that target is going. And one,

(SM) - The one other thing that matters and the reason why it's often frowned on and in particular for accessibility reasons, is it breaks the back button so you can no longer navigate as you expect to. And if you don't realize that the new tab is opening, I'm not sure that screen readers announce that a new tab is being opened by a link. You will think you're going back and you're not and you will be hopelessly lost because you can't see that there are now two tabs open on your screen.

So on the one hand I'm like, Jane, if it makes sense because you are sending people to something completely different and you want them still to have access to the content on your site, it makes sense on the other because you may be confusing them while you think you're helping them. It may not make sense.

(Jane) - Yeah, that's a good point. The back button, preserving the utility of the back button is really important in most cases. Also, web apps, if you're working within some kind of like web application, definitely trying to stay, you know, predictable and preserve the back button. Use is really important.

(SM) - Right. On the other hand, if you are working, say within forms and the form includes a link to explanatory material, then it's actually pretty important that you do open it in a new tab because otherwise you send them off to the explanation, they hit the back button and they return to the form with nothing filled in and they get very upset with you. So

(Jane) - Yes, there's, yeah, there's unfortunately there's no simple answer but it, they're, these are all good things to consider.

(SM) - Yeah, "it depends" is almost always a good answer. In this case, the one thing I'd point out is that if you're just linking to another webpage and there are none of these application form, et cetera considerations, the user can always choose to open it in a new tab or not to do so. Simple keyboard commands will get them there. So you forcing them to open it in a new tab doesn't give them the option of opening it in the existing tab. If you leave it up to them, then they can decide what they want to do. So that's why I almost always never, unless there is some overriding reason open things in new tabs. I used to do that more than I do now, but I've kind of been convinced that I'm making things worse rather than better.

(Jane) - Yeah, there used to be an argument people would make for opening things in new tab because you didn't want to lose them from your site.

(SM) - Right.

(Jane) - You know, or you always wanted to be there.

(MS) - That makes sense. Thank you.

(Jane) - All right, well thanks everybody. That was the end of our time. I'm happy to stay longer if anyone has further questions, but if not, thank you for joining today and stay tuned for the next clinic. I haven't decided on a topic yet. If you have anything in particular you would like me to cover, send me an email.