A beginner’s guide to link and text accessibility

---

Visit January Accessibility Focus: Links and Text for more resources.

---

How do links and text help accessibility?

Links and accessibility

Links are how a keyboard user navigates a web page. When a keyboard user presses the tab key, they go from link to link down the page. You could try this right now by pressing the tab key. Press shift+tab to go back up the page.

Assistive technology users can also use links to review a web page’s content. For example, a screen reader user might listen to a list of links before deciding where they want to go on the page. This screenshot shows a Mac VoiceOver screen reader’s link list for the Pope Tech homepage.

So, accessible links are important because they help all types of users navigate a web page more easily.

Text and accessibility

Visual users consume most web content by reading text. Poorly formatted text can make it hard for anyone, but especially users with a visual or cognitive disability, to read and understand the content.

Take these paragraphs as an example – which one is easier to read?

The way we format text can affect its readability, and certain formatting choices can make text inaccessible for people with disabilities.

Back to top

Text and link best practices

Let’s review text and link best practices that’ll help make your website more readable for everyone, and more accessible for people with visual or cognitive disabilities.

Text readability

Making your text more readable helps all users skim and consume your content. It can be especially helpful for people with cognitive disabilities because it will be easier to read the text.

There are two easy-to-follow guidelines any content writer can follow to make their text more readable.

Use more paragraph breaks

The first is to use more paragraph breaks. This is a content chunking strategy. Chunking is a technique UX designers use to help people process content easier.

By using chunking in your own content, you can ease users’ cognitive load, which just means making it easier for users to read or skim the content.

This is why chunking text into more paragraphs works: the little white space between paragraphs gives the reader a little break. It also makes the content more skimmable because the eye can jump from paragraph to paragraph instead of getting lost in lines of text.

The opposite of chunked content would be a wall of text – just think back to the textbooks where you had to re-read lines, and it took a lot of effort (or cognitive load) to read.

We’ll look at an example of how paragraph breaks can improve readability along with the next guideline below.

Use simple language

The second strategy to make content more readable is simplifying the language. Here are 4 ways to simplify your writing:

• Use plain words and avoid jargon. For example, instead of saying “utilize” just say “use.” Or, instead of saying “inquire” use the word “ask.”
• Use short sentences. Write sentences with simple structures instead of adding many subordinate clauses and conjunctions.
• Write in active voice. Active voice sentences are when the subject performs the verb opposed to passive voice where the grammatical subject receives the verb.
• Write at an 8th-grade reading level for a general audience. You can check your own writing using this Flesch Kincaid Calculator.

Text readability example

Now, we’re going to take our two guidelines and apply them to some text to see how it becomes more readable.

In the first column, the text has no paragraph breaks and the reading ease score is 30, or a 14th-grade level. The second column includes paragraph breaks with the same reading level. The last column has paragraph breaks and is re-written to a 9th-grade reading level. Which one is easiest to read?

---

---

Readable fonts

This last guideline is for designers choosing the font for text. The font can directly impact the readability of text. In WebAIM’s Typefaces and Fonts article, they suggest these principles:

1. Use simple, familiar, and easily-parsed fonts.
2. Avoid character complexity
3. Avoid character ambiguity
4. Use a limited number of typefaces, fonts, and font variations.
5. Consider spacing and weight.
6. Ensure sufficient, but not too much, contrast between the text and the background.
7. Avoid small font sizes and other anti-patterns.

For more information on legibility and readability review Nielsen Norman Group’s Legibility, Readability, and Comprehension article.

Underline links in the body text

When there are links in the content, it needs to be clear to visual users that it’s a link and not more body text.

The best way to signify text is a link is to underline it. This quickly communicates that it’s a link.

But, it’s common for websites to stray from this standard and only use colored text for links. This can be okay if the link follows contrast accessibility and use of color accessibility guidelines for links that aren’t underlined.

Links should typically open in the same tab

People often choose to have external links open in a new tab so their users stay on their website. But, this isn’t the best user experience, especially for keyboard users.

When a link is set to open in the same tab, any user can choose to open it in a new tab by right-clicking or selecting it while holding control/command. But, if the link is set to open in a new tab, that choice is taken away – the link has to open in a new tab.

A keyboard user would potentially have to tab all the way back up the page and then into their browser’s website bar to get to the new tab instead of having a seamless experience in the same tab.

So, the best practice is, most of the time, it’s better to have links open in the same tab.

To learn more about when links should open in the same tab vs a new tab, read W3C’s Opening new windows and tabs from a link only when necessary technique.

Back to top

How to fix 4 common link accessibility issues

Now, let’s get into the common link and text accessibility issues starting with links.

These are 4 common link issues that are detectable by an accessibility checking tool like the WAVE extension or Pope Tech. We’ll go over each and how to fix them.

Suspicious link text

Suspicious link text means it isn’t clear where the link goes based on the linked text.

For example, “click here” is suspicious link text. This is a problem because, as we mentioned above, some users use links to navigate a page or review the content of the page.

If none of the links have actual content in them, a user using a screen reader would just hear, “click here” or “read this,” which doesn’t help them know where the link goes or where they are on the page.

To fix suspicious link text, rewrite the linked text, and maybe the entire sentence if needed. Here are two examples of re-written suspicious link text.

• FROM “Click here for more information on ambiguous links” TO “For more information on ambiguous links, visit Why ambiguous links are problematic“
• FROM “Avoid ambiguous language when writing links. Learn how here: https://blog.pope.tech/2018/07/26/why-ambiguous-links-are-problematic/” TO “Avoid ambiguous language when writing links.”

---

---

Empty link

Empty links have no text in them, which makes it difficult to understand the purpose of the link.

Keyboard users rely on focus indicators to know where they are on the page. A focus indicator outlines an element when it’s tabbed to. If a user is using a keyboard to navigate, they’ll lose focus when they get to an empty link.

For example, in the first screenshot below, I’ve tabbed to an empty link. There is no element in focus. In the second screenshot, the Oatmeal Chocolate Chip Cookie YouTube video link is in focus, so there is a dashed square, or focus indicator, around it.

So, empty links can make keyboard users lose where they are on the page when navigating and cause confusion.

Fixing an empty link is easy – either add text to the link or remove it.

Broken same-page link

Broken same-page link, or anchor links, link to another part on the same page. For example, the links at the top of this article jump readers to that section on the same page.

These can be helpful for keyboard users because they can jump down a long page using the same-page link instead of tabbing all the way down.

Obviously, a broken same-page link can be an issue for everybody and won’t add a helpful feature for keyboard users either. To fix it is probably what you’d expect – either remove it or fix the link so it works properly.

Redundant link

Redundant links are when two adjacent links go to the same place.

These redundant links are an issue because they add more keyboard stops for a keyboard user. For a screen reader user, redundant links also clutter their link list. Each link is also announced as they tab through the page, so they would hear it multiple times. All of this can add more cognitive overhead for the user.

To fix a redundant link, one of the links can be removed or they can be combined. That way, each link is adding value without adding more cognitive load.

Redundant links often happen on product or article pages when an image and text link to the same place. Take this example product listing for Fresca soda. The image and the product title link are two links that go to the same place.

In the code, there are two <a href> elements – one for the image and one for the text. If you press the tab right now, you’ll go to both the image and the product title. This is a redundant link that needs to be fixed.

To fix it, I combined the image and product text into one link. So, the image and text are surrounded by the same <a href> element.

Now, it just takes one tab, and the link will only be read once fixing the redundant link. And, we’re able to remove the alt text on the image because the product title now acts as the alternative text.

---

---

Back to top

How to fix 3 common text accessibility issues

Now, let’s review text accessibility issues.

These are 3 common text issues that are detectable by an accessibility checking tool like the WAVE extension or Pope Tech.

Each one can be easy to fix, but it might need to be fixed in the website’s template. That just means that the CSS code would need to be updated and that would fix the issue everywhere it occurred.

• Very small text is difficult to read. To fix it, either increase the size in your content editor or adjust the font size in the CSS.
• Justified text is difficult to read because the varying size of spaces between words. To fix it, remove the justified text styling.
• Underlined text can be mistaken for links. To fix it, remove the underline and choose another way to emphasize the text like bolding.

Back to top

A note on links vs buttons

Now that you know more about accessible links, there’s one other thing to keep in mind – links and buttons aren’t the same.

The main difference is links go somewhere and a button does something. This difference between links and buttons means:

• If it is supposed to take the user to another website, use an anchor (a href) HTML element to make it a link.
• If it is changing data on the back end or how the front-end looks, use a <button> HTML element to make it a button.

For more information, read Buttons vs. Links.

Back to top

Make links and text accessible in your own content

You know more about link and text accessibility best practices and detectable accessibility issues, so you’re ready to apply it to your own website.

Below is a plan to fix current link and text issues and strategies to write with link and text best practices going forward.

Fix current link and text issues

Follow these steps to fix existing link and text issues:

1. Identify any link or text errors in your content using Pope Tech’s website scanning tool or the Canvas Accessibility Guide. If you don’t have these tools, you can use WebAIM’s free WAVE extension tool.
   • If you’re a Pope Tech user, run an HTML or PDF detail report and configure it for text or link-related issues.
   • If you’re a Canvas Accessibility Guide user, test your syllabus, home page, and other pages for one course.
   • WAVE extension tool – Test the homepage and three other pages you contribute to.
2. Review the alerts and errors and determine if any could be fixed at the website template level. For example, fixing small text in the footer could fix that issue on every page.
3. Look over the homepage and the three other pages for text readability and links that open in a new tab. Are there walls of text? What is the reading score of some passages of text? Is it clear links open in a new tab or should they open in the same tab?
4. Now that you have an idea of the link and text issues, prioritize the template-level issues first. Then, fix other issues you found based on the content’s priority.
5. Make an achievable goal and share that goal with your team or office.
6. BONUS: If you don’t have one already, schedule a monthly accessibility check-in (even if it’s just you) to celebrate progress and remove blockers.

Prevent link and text issues going forward

An easy way to prevent detectable link and text issues (plus other accessibility issues) is to use the WAVE extension to check for issues during your publishing process. Learn what issues to check for as a content writer or developer in our Use the Wave Extension article.

There are some link and text best practices that can’t be detected by the WAVE extension. You could add them to a list of things to check for when writing content, or an editor’s checklist. They include:

• Keep sentences short. Try not to have lines longer than 80 characters, or sentences longer than 30 words.
• Keep paragraphs 1-3 sentences long.
• Keep sentences simple. Use the reading calculator to spot-test your content for the grade level.
• Only open links in new tabs when necessary.

By following these steps, you’re on your way to more accessible content.

Back to top

---

Visit January Accessibility Focus: Links and Text for more resources.

---

Key takeaways

• People with disabilities use links to navigate web pages and visual users use text to consume web content.
• Make text more readable with paragraph breaks, shorter sentences, using active voice, and writing at an 8th-grade reading level.
• Avoid suspicious link text like “click here” by rewriting the link to be where it actually goes. For example:
  • “Click here for more information on ambiguous links” TO “For more information on ambiguous links, visit Why ambiguous links are problematic“
• Links should typically open in the same tab.
• Underline links in body text. If using only color to convey it’s a link, follow contrast accessibility and use of color accessibility guidelines.
• Avoid redundant links that go to the same place by combining links. This often happens on product or article pages when an image and text link to the same place.
• A link goes somewhere, and a button does something. Use an anchor HTML element to make it a link, and use a button HTML element to make it a button.
• An easy way to prevent detectable link and text issues (plus other accessibility issues) is to use the WAVE extension to check for issues during your publishing process.

---

---