Making Links More Accessible

[00:00:00]
>> Kevin Powell: Now we're almost finished with the HTML. We're almost ready to get into the layouts, but there's a really important thing that I want to talk to you about, which is meaningful links. This type of thing in designs that we have now with these links reference guides, not the worst one, but learn more is this epidemic that we have on these.

[00:00:19]
Links that look like buttons that are just really bad for everybody. But if ever you go to your designer and you say this text in this link is useless, they're gonna say and it should be this really long paragraph to explain what this link is doing. Your designer is going to tell you you can't do that because then the button looks terrible.

[00:00:36]
So there's actually a way that we can create more meaningful links. And ideally, the links should be like, if I look at a link and it says learn more, the problem with it is then, like, what am I learning more about? Well, I guess connect with nature. Well, where is that link actually bringing me?

[00:00:51]
It's kind of vague. What's actually happening? A user in this situation is kinda guessing at what it's gonna bring them to. But at least if you're skimming the page really fast, you You might have an idea. That's why the reference guide, you probably know what you're getting here, so it's not the end of the world but it's still has some sort of vagueness.

[00:01:07]
And again, if somebody is using an assistive technology to go through a page and someone's keyboard navigating through a page and they're just jumping link to link. They're just seeing like the links you have. And then they hit Reference Guide and they hit Learn More, and they have learn more and then they actually have to look up and see what else like what are they learning more about.

[00:01:24]
It's just it's not the best pattern in the world for keyboard navigators we can't really help them but for people that are using screen readers we definitely can. And to do that, I'm going to grab this code here and put this in a utilities layer. So you'll grab this from the course.

[00:01:42]
And I meant to put a link in here that it looks like I forgot to put in the lesson. But if you just look up visually-hidden class, Scott O'Hara has a really good blog post, and I linked to him earlier for one of the other things that we looked at that explains this.

[00:01:57]
Or the A11Y project also has an explanation of what this is, like why we're doing it this way, because this looks like a really complicated way to hide something. Basically, we're hiding it visually. And the other, well, let me bring it in to our utilities. So I'll go to my CSS utilities, I always have at the bottom.

[00:02:14]
So you add layer utilities, I'm gonna paste it in there. And I have it twice now there we go. So the other class name you will see used for this is sr-only, which is screen reader only. Again, I like verbose things that people can understand right away. So visually hidden, it says exactly what it's doing.

[00:02:37]
So I like that class name better. And we're gonna add some content here that sighted users won't see, but other people that are using screen readers will be able to access. And we're actually gonna use this in a few different places, but we can use this in our links.

[00:02:52]
So let's just do class equals button to get to the first one. And we'll do the second one first, because I think this one's easier. So if you ever have a learn more link, it should say what they're learning more about. So in this case, it's just gonna bring us to the second page, which is the mushroom guide.

[00:03:07]
So learn more about the different types of mushrooms using our handy mushroom guide, or something like that, something that's like. Where is this link going? What's it actually doing? What context is it? And so now, if a user came across this link and they get that context, they understand exactly what's happening.

[00:03:28]
But of course, if you had that as a button, which we don't have styled, but if this was a button, it would look absolutely terrible. Your designer is never gonna let you do that or your client, so you just come in here with a span and. That wraps all of that, and class is equal to visually hidden, and it will hide all of that extra content.

[00:03:53]
So the content is there. It's part of the DOM, and it's why we're not using a display none, because if something has a display none on it screen reader won't see it. So we have this weird, complex, odd, looking CSS. You do not need to remember this. Just do a Google search every time you need it of screen reader only or visually hidden, and the first five results will all give you this exact code.

[00:04:13]
It's very common. It's used everywhere, so it's very easy to find it. And we do the same thing for the Reference Guide one here. Maybe we could just do learn more about mushrooms, or let's do wild mushrooms using our handy reference guide. And in this case, the span can go at the top instead of at the bottom, and that gets, or here, before I do that, we can hit Save.

[00:04:46]
We see the nice, big long link and then as soon as I add the class="visually hidden", it shows me only the text that I want that's there. So a nice way just to make. Your same way we're doing alt text properly on our images to make sure that our sites are accessible.

[00:05:03]
This is another way, and another very simple step you can do to help improve the accessibility of your website.