Creating descriptive hyperlinks

Hyperlinks, usually called links, correlate any text string with a URL; a user can instantly reach the target document by activating the link. Links are the breakthrough that made the Web so useful and successful. They stand out from the surrounding text by being underlined and typically in blue text. Hyperlink text is usually blue but may be any color that contrasts sufficiently with surrounding colors. The same color should be used for all hyperlinks in a given document or web page. Users either tap or click a link to activate it and keyboard users will press Tab until the link is in focus and hit Enter or Spacebar.

Creating hyperlinks

Embedding accessible hyperlinks

Embed a link within a concise string of text instead of using its URL as the link text. A screen reader user will more easily understand where an accessible link leads and will not have to listen while the reader pronounces every single character of a URL.

• Example:
  • Accessible: Wayne State style guide
  • Not accessible: https://mac.wayne.edu/editorial/style-guide

Concise hyperlinks

Users can scan a concise hyperlink and quickly determine whether they want to click through and read the material it links to. It is worth nothing that a longer link is more likely to break across lines in a web page or document and may appear to be two separate links. Longer links may also reveal some of the information that users will find when they click on the link, which may or may not be your intention.

• Example:
  • Concise: Content best practices
  • Not concise: This page lists various ways in which content is most accessible for your users.

Descriptive hyperlinks

Descriptive hyperlinks will more clearly explain what information they link to and improve the experience of all your users, sighted or unsighted.

• Example:
  • Descriptive: Updating profile images
  • Not descriptive: Profiles

Email addresses

Use the full email address as link text rather than embedding it in other link text.

• Example:
  • Accessible: accessibility@wayne.edu
  • Not accessible: Accessibility Help
    • This example does not convey that it is an email address.

Screen readers and links

Screen readers will announce ”Link” and the hyperlinked text whether it is the URL or descriptive. Users can pull up a list of links on the page for the screen reader to read aloud to the user to choose which link to go to, as shown in the photo below.

---

Please let us know if you have any follow-up questions on this topic!