[Presenter] Welcome to Making the Future Accessible: Creating Descriptive Labels for Links and Buttons. Before we get started, I would like to give an image description for the featured image for this presentation. A white woman with gray hair and red glasses holds her hands over her ears and screams as the laptop in front of her says, "Click Here! Click Here! Click Here!"
The topics we will be discussing today are, What are descriptive labels? Who uses descriptive labels? And how do I create descriptive labels?
So what are descriptive labels? Descriptive labels provide context. They provide users with the proper context of where activating the link or button will take them. An example of a descriptive link would be "Upcoming Red Sox Game," which, when activated, would bring the person to a Red Sox Game Schedule page.
Are click here and read more links descriptive? No. Reasons for them not being descriptive are they do not provide any context for anyone that is scanning the page. Thus they reduce the speed in which everyone navigates your site. In addition, click here assumes all site visitors are using a mouse. This fails to account for assistive technology users and mobile device users.
What's an example of good descriptive labels? In the example we provided in today's training, we have the UITS homepage of the President's office. There are three call to action tiles. The first one has a link of knowledge library, the second one has a link that is named Create a Support Case, and the third one has a link called Got Projects. All three links inform the site visitor of where they will land if they activate the link. If they select Knowledge library, they will assume they are going off to the Knowledge Library for UITS products. If they select create a support case, they will assume that they will be sent to a form to enter a support case, and finally, if they activate Got projects, they will land on a project page.
So again, it is providing the user with enough information where they do not have to look at the content around the links to know where they are going. They just have to look at the link name or the button name, as we'll show in a minute.
So what's an example of bad descriptive links or labels?
In this example, that we have, it is an online education site and the online education site has 3 buttons on their home page. All 3 buttons are labeled, "Let's do this." This makes the user pause and say, What is it we are going to do? And so in order for the user to understand what each button does, they have to read the content either before or after it. And in this case the content is before each button. And if that content doesn't provide enough context, even with the content itself, the user might struggle to know which button to click on and where they will be sent.
In addition, all 3 buttons are the same name creating a redundant, confusing experience that also reduces the overall usability of the page. So again, we want not only our labels to be descriptive, but we want them to be unique. We do not want to have 5 labeled buttons on the same page with the same label name.
Who uses descriptive labels?
If your answer is everyone, you are correct. So everyone uses a descriptive label when they're navigating a site -- everyone benefits from them. The experience becomes faster when they are able to quickly skim content and click on the button or link they need. However, the experience of non-descriptive labels can extremely reduce the efficiency of navigating a site for the blind, deafblind, low vision, and neurodivergent communities.
What we are going to do next is we are going to take a look at a good example and a bad example when trying to navigate those as a screen reader user. So let's jump into our demo. I am going to escape the presentation, and I am going to open Safari. I am going to have my good example first, and then we are going to have our bad example. And first, what I need to do before I show the examples, even though I have the homepage of the UITS website up, is I need to start up the VoiceOver screen reader on my Mac computer. And anyone can do this
with an Apple device - VoiceOver is built into all Apple devices. You can also, if you use an Android, you do have TalkBack built into an Android. And if you use a Windows computer, you have Narrator built right into the computer. So what I'm going to do, is I'm going to click on the Apple, and I'm going to select System Preferences. I am already in Accessibility, but if I wasn't I would go to accessibility, and I am already on the VoiceOver panel, so I am going to enable VoiceOver. And when I do that, VoiceOver is going to start talking to me and reading the content on the page.
[Screen Reader] VoiceOver. Safari. UITS. Vertical Line. University of Massachusetts Office. Visited link. Visited link. Product Cata -- Link. Form. Link. Projects. Link. Support. Link. About. Submit Search. Search text. Search button. Visited. Link. Heading level 2 - Knowledge Library. You are -- Link. Heading level 2. Create a support case. You are currently on -- link. Heading level 2. Got Projects? You are currently on a link. To click this link, press control-option-space.
[Presenter] So again, these have clear descriptive labels. If I did want to read the text below them, I could navigate the text, but if I'm coming here to open a support case, I have easily found My support case link in the second tile. I am going to go ahead, and so activate that to submit a case.
So now, what we are going to do is we are going to switch over to our bad example, and our bad example has 3 click here buttons on the page. And so visually they have the most emphasis, and then there is bulleted text to the left of each Click here button. So what we are going to do is we are going to try to navigate this page.
[Screen Reader] Leaving. Link, new link, link, recruiting, turn auto play off, previous button, next button, link. Click here, list 3 items. You are currently on a link. To click this link, press control-option-space.
[Presenter] So, in order for me -- Now I've landed on this click here and if I'm just trying to navigate the page quickly by tabbing through, or I'm using the button shortcut key or the link shortcut key, I now need to take time to read the content around it to understand what this click here button does. So I am going to navigate to the content itself.
[Screen Reader] Bullet, to start or re-opened a claim for unemployment insurance, including disaster unemployment assistance. You are currently on a text element.
[Presenter]: So this click here button is really to start or reopen a claim. And so that should be our descriptive label, and that really could be a link rather than a button. And so instead of that click here being there, we would just say, "Start or reopen a claim," and then you would click that link, and you would immediately know that it is going to take you off to that process. So let's see what our next click here is.
[Screen Reader] Link, click here, link, click, link, click here. You are currently on a link. To click this link, press control-option-space.
[Presenter] So I'm going to --
[Screen Reader] There are potential fees connected with a debit card payment method. For a full disclosure of related fees and debit card services. You are currently on a text element.
[Presenter]: So really, what that click here is doing is sending me off to a full disclosure of related fees and debit card services. So that would be our link name, right? That provides us with the context. That provides all users with the context, including assistive technology users. And finally --
[Screen Reader] Link, click here. You are currently on a link. To click this link, press control-option-space.
[Presenter] Let's see what this one does.
[Screen Reader] Bullet. You can now make online payments toward your overpayment balance. Please. You are currently on a text element.
[Presenter] So in this case, we probably want to make the link "Make online payments." Easily takes people off to that content. We might want to instead, label it as overpayment -- make over payment balance payments, or something to that effect. Obviously this one would need to be reworked a little bit, and it would be based on what they think users would be looking for and what they would be visually scanning for. But we want to avoid click here buttons, because that creates more work for everyone including assistive technology users. As we saw, it took more time for me to navigate the content with assistive technology with this page, then it did with the other page, because I had clear, descriptive labels.
So we're going to shut off the screen reader.
[Screen Reader] VoiceOver off.
[Presenter] And we are going to go back to our presentation. And so the last question is, how do I create descriptive labels?
And the answer is, it varies by product, but most products provide the ability to add descriptive labels. And so you can easily follow instructions when creating Microsoft word documents on how to add descriptive labels. The same with Outlook. The same with Slack. Slack allows you to provide descriptive labels rather than just copy pasting in a hyperlink that doesn't provide the context for anyone looking at that link. And what we are going to do is I'm going to include a link to resources underneath the video that will point you to how-to instructions on different products.
Now keep in mind not all products allow for descriptive labels, one of the most common being social media. So in that case, you do need to provide the context before the label -- I mean, before the link, because, unfortunately, there are a lot of social media platforms that still don't support descriptive labels.
So I would like to thank you for attending this session of making the future accessible, and please check out our other courses on making the future accessible and other ways to make accessible content. Thank you.