Properly formatted hyperlinks help readers scan for important information and identify outside resources. When a screen reader encounters a hyperlink, it announces “link” — so there is no need to include the words “link” or “link to” in your link text.
Screen readers can also generate a “links list” that allows users to navigate directly to any link on a page without reading the surrounding content. This is only useful when link text is descriptive. A list of links that all read “click here” or “read more” provides no useful information at all.
Formatting Hyperlinks
Rules to follow
- Identify the purpose of the link as part of the link text.
- Be descriptive but concise. Screen reader users must listen to the full link text before moving to the next one.
- Integrate the link into your sentence. Sighted readers will see it in context, and screen readers will announce it naturally.
- Make links useful on their own, independent of surrounding text. If the link were pulled into a list, would it still make sense?
Adding a Hyperlink in CI Docs
- Select the text you want to turn into a link.
- Press Ctrl+K (Windows) or Cmd+K (Mac), or go to Insert > Link in the menu bar.
- Paste or type the URL in the link field.
- Click Apply.
To edit or remove an existing link, click the link text and select Edit or Remove from the small menu that appears below it.
Hyperlinking Examples
The following examples show less and more accessible approaches to the same hyperlink. In each pair, the first option is a less accessible approach and the second is the improvement. Consider how each would sound if read aloud as part of a links list.
Example 1
- Less accessible: Read the article here.
- More accessible: Read about Good Fonts for Dyslexia.
Example 2
- Less accessible: Academic Integrity Policy — more info.
- More accessible: Be sure to read our Academic Integrity Policy.
Example 3
- Less accessible: Read Article 1 (Read More) and Article 2 (Read More).
- More accessible: Read Article 1: The un-essay and Article 2: Beyond the un-essay.
Example 4
- Less accessible: Learn more here: https://accessibility.psu.edu/legibility/contrast/ and here: https://accessibility.psu.edu/color/colorcoding/.
- More accessible: Learn more about color contrast and color reliance for improved accessibility.
In each case, the more accessible option works on its own — even without the surrounding sentence to provide context.
