Hyperlinks are one of the most common navigational elements on any webpage. They are also one of the most frequently inaccessible elements on a webpage. Fortunately, it is fairly easy to make hyperlinks accessible and improving the overall usability of your page.

A hyperlink's destination should make sense completely out of context from the rest of the page. Since screen reader user can navigate your page by tabbing from hyperlink to hyperlink and never interacting with the remaining content, each hyperlink should clearly explain where a user would be taken if they were to click on that hyperlink.

Hyperlinks should be a minimum of three words, however, linking a full sentence may frustrate screen reader users. The ideal hyperlink text length will vary depending on your page but a minimum of three words is recommended.

There are four concepts to consider when creating a hyperlink in the GVSU CMS; using descriptive hyperlink text, avoiding duplicate hyperlink text, embedding the hyperlink, linking to an email address.

Using descriptive hyperlink text

Use descriptive hyperlink text rather than only URL text or non-descriptive text. Hyperlink texts should be written so that they would make sense out of the context of your page. Generic hyperlink text such as “Click here” and “More” gives no indication as to the destination of the hyperlinks. We should not make our users have to click a hyperlink to find out where it goes.

Avoiding duplicate hyperlink text

The same hyperlink text should not be used for hyperlinks going to different destinations. Users may not notice the difference if the hyperlinks are not properly explained. If the destination pages are not the same, make sure the hyperlinks can be distinguished by their hyperlink text alone and make it clear that those lead to different destinations.

Embedding the hyperlink

When creating a hyperlink you will want to embed the hyperlink within other text, rather than the full text of the hyperlink. This will make your page easier to understand and provide the user details as to the destination of your hyperlink, instead of a seemingly random combination of characters. This is a critical step for screen reader users so that they won’t have to listen to their screen reading software read every single character of the URL.

When creating a hyperlink to a file such as a Word or PDF document, you should include the document with the rest of the embedded text. For example, linking to a PDF map of the Allendale Campus would be Allendale Campus Map (PDF).

Linking to an email address

The exception to the guidelines above is when creating a hyperlink to an email. When creating a hyperlink to an email you will want to type out the full email address and then create a hyperlink to the text of the email address. The reason for this is because a screen reader does not automatically recognize that a hyperlink is to an email address instead of a navigational hyperlink.