0:06
Speaker 1: Welcome! Content Lab brings you the next video in our series about accessible content practices.
0:12
In this video, we'll learn to create links that are accessible to all users, including those who use assistive devices.
0:19
Link text should clearly describe what you're going to find when you click on the link, the information you'll find, or the action you'll take.
0:27
Think of a link as a sign on a closed door.
0:29
It should tell you exactly what's behind it.
0:32
In this video, Rob Dias, Assistive Technology information Specialist and screen reader user, talks about the importance of descriptive link text.
0:41
Speaker 2: Now, if these weren't descriptive links, some of these would just say "click here, click here, click here" or "read more, read more, read more."
0:48
Right.
0:49
So what we talked about yesterday was the importance of making sure that these links are descriptive because I can get to these links out of context.
0:58
And another thing you can do in these lists, the 1st letter navigates.
1:03
So if I know that I want a particular link on this page and it's, let's say colour contrast, I can hit the letter C and then I'm right there.
1:12
Now I have a choice from this list whether or not I want to activate it or if I want to bring my focus to that spot there.
1:21
So what happens a lot when you're on a page and there's just a "click here?"
1:25
The user then has to bring their focus to that section so they can understand the purpose of that link in the context of the surrounding text.
1:30
1:34
Speaker 1: As Rob mentioned, screen reader users often navigate from link to link to auditorily scan a page for information.
1:41
This skips the surrounding text, so the link text needs to make sense on its own.
1:46
Speaker 3: Search hyperlinks window.
1:47
Search list list, Skip to main content.
1:51
Link one of 18 selected Scan off select language Link state organizations Link Mass.gov.
2:02
Speaker 1: Make linked text specific. For example, apply for SNAP, and pay your property taxes.
2:07
Avoid using language that isn't specific and doesn't provide details like "click here, more, and read more."
2:16
Meaningful text or keywords should always be linked.
2:20
This enables all users to navigate content efficiently and makes it easier for assistive device users.
2:27
Here's a page about how to apply to serve on the Digital Accessibility and Equity Governance Board.
2:33
Notice that the link text says apply for a position on the board.
2:38
The keywords tell you exactly what you'll find when you follow the link.
2:43
Links need to be easy to read out loud for two reasons.
2:47
First, speech recognition software requires users to speak the links they want to access.
2:53
Also, when screen readers read links, they pronounce each individual character.
2:58
Links shouldn't be too short or too long.
3:04
Link at least one full word.
3:06
Linking 2 or more is better.
3:08
Don't link whole sentences or paragraphs.
3:12
Making link text distinct improves the user experience for everyone.
3:16
Links should appear in a different color than body text.
3:20
Color differences alone aren't enough for accessibility.
3:24
Links should also be underlined.
3:26
Don't underline non-link text because it can easily be confused by users for a link.
3:33
Make links with a common keyword distinct from one another.
3:36
For example, if you're including multiple staff lists on a page, each should be labeled specifically: facility staff, RMV staff, operations staff.
3:50
In themass.gov CMS, you can use images as links in a mosaic or image card.
3:55
When building a page with one of these components, you want to make sure you include specific descriptive link text as you would anywhere else.
4:03
Images with links may require alt text.
4:06
You can learn more about alt text in our video on that topic.
4:10
Don't place links to the same destination near each other.
4:14
This is referred to as adjacent links, and it creates more steps for keyboard users and repeats links in screen reader users' link lists.
4:22
Instead, combine links into one.
4:25
If you're repeatedly linking to the same place, the link text should be the same each time.
4:31
On this raft page, Housing Help Hub appears twice and links to the same destination.
4:37
It would create a poor user experience if the second reference were named differently.
4:43
Editoria11y is built into the CMS to help you check your web pages for links with accessibility problems.
4:55
For additional accessibility tools, refer to the ACCESS team resources.