You’re not still using “Read More” are you?
It’s probably not the first time you’ve heard that using links like “Read More” or “Click Here” is bad practice. This topic has been widely discussed and the internet is packed with information about why it sucks. If you’re still making links like “Learn More” in 2020, it’s really time to kick this habit to the curb. If you’re not, you can probably stop reading… But, are your alternatives that much better?
For those of you who want to make your links more accessible, let’s take a closer look at the underlying issue behind uninformative links.
They lack context.
Why is context important? People come from a background of different experiences, biases, and/or capabilities that influence how they process the world, which includes the content they see on the web. Let’s take this scenario from a book called Culture Map I think everyone that is interested in accessibility should pick up.
So, this is how the story goes…
On a business trip to New Dehli Erin Meyer found difficulty finding a restaurant recommended to her by the concierge at her hotel. She came back three times to clarify his instructions, but in the end he had to take her there. When they arrived she couldn’t help but think why he hadn’t just told her to “Cross the street, turn left, walk nine minutes, look for the big bank on the corner, and, when you see the big fruit store, look up to the second floor of the yellow stucco building for a sign with the restaurant’s name.”
By providing context you’re giving people the information they need to successfully understand what to do and how to find the information they’re looking for.
Take for instance this example on how to improve a ‘read more’ link given on a11project’s website (a great resource for all of your accessibility guideline needs):
When a person navigates a webpage using links alone, “Click Me” would be read out of context. It doesn’t give a user the ability to scan a webpage for specific information in a quick or easy way.
High context wins because you’re not designing based on your own abilities and biases anymore. It addresses everyone from a basic level of understanding, so that you’re not leaving anyone out. Not to mention it comes with other added benefits like SEO and content find-ability.
So it’s all fine and dandy to understand why context is important, but how do you actually put this into practice? I’ve created this comprehensive checklist to help you make your links as accessible as they can be.
Accessible Link Checklist:
Step 1: Valid HTML
- href attribute — find out why it’s better to use absolute versus relative URLs
- link content — learn how to best use the alt attribute to help people using assistive technologies
Step 2: Grammar and what not
- Understand why links should make sense out of context.
- Learn how to make links concise and descriptive.
- Start with a keyword.
- Follow punctuation rules for hyperlinks like not including ending punctuation in the link.
- Try to use concrete nouns to give users a more immediate and vidid idea of what they will get when they click through. — A concrete noun is a noun that can be perceived using one of the five senses. For example, nouns like dog, bark, or cookies. Read more about concrete nouns.
- Avoid using only verb phrases as anchors. Learn more about what verb phrases are.
Step 3: Styling
- Make sure your links are underlined or follow the additional requirements for body text links that are not underlined by default.
- Be Level AA conformant regarding colour contrast. — You might find it handy to provide a secondary feature to toggle your website between your current colour state to a more accessible state. Kind of like a ‘dark mode’, but for accessibility. Check out this super useful resource for determining who can use specific colour combinations.
- Understand why changing the colour of visited links makes your site easier to navigate and increases user satisfaction.
So there you have it. With accessibility standards ramping up, it’s important to remember how context is essential for good UX design.
Thanks for reading!
