[Speaker] Welcome! Content Lab brings you the next video in our
series about accessible content practices.
In this video, we'll learn to create links
that are accessible to all users, including those
who use assistive devices.
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.
Think of a link as a sign on a closed door.
It should tell you exactly what's behind it.
In this video, Rob Dias,
Assistive Technology Information Specialist
and screen reader user talks about the importance
of descriptive link text.
[Robert Dias] 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," right?
So, um, 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.
And, um,
another thing you can do in these lists of first letter navigate.
So if I know that I want a particular link on this page
and it's, let's say call a contrast,
I can have the letter C and then I'm right there.
Now I have a choice from this list, whether
or not I want to activate it
or if I wanna bring my focus to that spot there.
So what happens a lot when you're on a page
and there's just a " click here," um, the user then has
to bring their focus to that section
so they can understand the purpose of that link in context
of the surrounding text.
[Speaker] As Rob mentions, screen reader users often navigate from
link to link to auditorily scan a page for information.
This skips the surrounding text.
So link text needs to make sense on its own
[Screen reader] Search hyperlinks window search list list.
Skip to main content link one of 18 selected.
Scan off select language link.
State organizations link. Mass.gov.
[Speaker] Make link text specific.
For example, "Apply for SNAP" or " Pay your property taxes."
Avoid using language that isn't specific
and doesn't provide details, like "click here
more and read more."
Meaningful text or keywords should always be linked.
This enables all users to navigate content efficiently
and makes it easier for assistive device users.
Here's a page about how to apply
to serve on the Digital Accessibility
and Equity Governance board.
Notice that the link text says "Apply
for a position on the board."
The keywords tell you exactly
what you'll find when you follow the link.
Links need to be easy to read out loud for two reasons.
First, speech recognition software requires users
to speak the links they want to access.
Also, when screen readers read links,
they pronounce each individual character.
Links shouldn't be too short or too long.
Link at least one full word. Linking two or more is better.
Don't link whole sentences
or paragraphs. Making link text distinct improves the user
experience for everyone.
Links should appear in a different color than body text.
Color differences alone aren't enough for accessibility.
Links should also be underlined.
Don't underline non-link text
because it can easily be confused by users.
For a link. Make links
with a common keyword distinct from one another.
For example, if you're including multiple staff lists on a
page, each should be labeled specifically. For example, "Facility staff,
RMV staff, operations staff."
in the Mass.gov CMS,
You can use images as links in a mosaic or image card.
When building a page with one of these components,
you'll wanna make sure you include specific descriptive link
text as you would anywhere else.
Images with links may require alt text.
You can learn more about alt text in
our video on that topic.
Don't place links to the same destination near each other.
This is referred to as adjacent links,
and it creates more steps for keyboard users
and repeats links in screen reader users link lists. Instead,
combine links into one.
If you're repeatedly linking to the same place,
the link text should be the same each time.
On this RAFT page, "housing help hub" appears twice
and links to the same destination.
It would create a poor user experience if the second
reference was named differently.
Editoria11y is built into the CMS
to help you check your webpages
for links with accessibility problems.
For additional accessibility tools, refer
to the ACCESS team's resources.