Hi everyone. Josh with Online ADA here, and in this video we’re covering 2.4.4, link purpose in context. This is a level A requirement.
The description reads, ‘the purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link text, except for the purpose of the link would be ambiguous to users in general’.
This article is all about letting the user understand what the purpose of the link is. If you have lots of links on a web page and they have ambiguous text, then there’s a lot of mental effort that goes into trying to determine what they are or even in some cases, you would have to go and explore what those links do and determine whether or not you wanted to visit that content and then go back. So there’s a whole lot of effort involved there and sort of exploring on your own as user, when in fact you could have been saved all that effort by having a descriptive purpose for that link before they visited it.
I have a couple of examples directly from the documentation that I’d like to read to you. I feel like these ones make it really clear what’s happening here. So the first one is, ‘a link is preceded by a text description of the information at the URI’. So the URI is going to be the information that’s contained inside the Href attribute of the anchor tag. Which can sometimes be a really long list of words and question marks and equal signs and may not make any real sense to a user to to listen to it.
So, using the link text would be a page contains the sentence, ‘Learn more about the government of Ireland’s Commission on electronic vote Electronic voting at go vote’. Where ‘go vote’ is a link. And what this description is saying is that you can have context by for, excuse me, you can have context for ‘go vote’ by providing the rest of the text next to the link. So the link itself just says ‘go vote’, but you have learn more about the government of Ireland’s Commission on electronic voting right before that, then in that context you can understand what that links purpose is. Okay.
Another one would be an icon of a voting machine and the text ‘Government of Ireland’s Commission of Electronic Voting’ are combined to make a single link, so the image and the text are one link. The alt text for the icon is null because it’s purpose of the link, because the purpose of the link is already described by the text, of the link, next the icon. So the icon itself doesn’t need to have an alt text in this case because the whole word is the link. The whole sentence, rather, is the link.
And then this is a really good one. And this one actually illustrates one of the problems for people with cognitive disabilities where they may get disoriented by having multiple links really in close proximity to each other. And if they’re too similar then they might get confused about what the purpose of these links are. And they might have to go explore them themselves and we wanna avoid making them go visit the link to determine whether they wanted to or not.
So here’s the example. A list of book titles. A list of books is available in three formats. HTML, PDF and MP3, which would be a recording of a person reading the book. To avoid hearing the title of each book three times, once for each format, the first link for each book is the title of the book. The second link is the PDF, it just says PDF and the third link just says MP3. See, cause in that context you know that you’ve just read the title of the book, that’s gonna be one link. And then after that, you got PDF and MP3, and those don’t need the title of the book in it because the context is enough to determine what that means.
So, those are a couple of examples where we might want to expand upon the text alternatives for these link purposes and making them really clear to users.
One other example I can think of is, if you have a link that’s using a graphical object, then you can utilize the graphical objects text alternative. Whether it’s an image element, you can use the text attribute or, because an anchor tag has an opening and closing tag, you can just wrap some text inside there next to the image, as well. You can make it hidden from the screen reader, I’m sorry, hidden from the visual user where the screen reader will pick it up and that would be another way of doing it. So you just rely on the text alternative of the anchor tag to give that descriptive purpose to the user.
Okay, thank you very much for joining me in this video and I’ll see you in the next.