Links

Partial stop words

If the following words are used as the hyperlink text alone, it will be flagged as an error. If used with other text, it will not be flagged as an error.

Example 1

Using any of the words above on it's own will result in an error since it's not descriptive enough.

Learn more

Example 2

However if used with additional text, it will not be flagged as an error.

Learn more about Ryerson

Example 3

Just another example of a partial stop word being used in a sentence. Visit this page to learn more about our history, or you can visit this page to learn about the future.

Example 4

Empty hyperlink and sometimes single characters get linked.

Empty hyperlinks

Instagram

Fail: It's common to see hyperlinks around icon fonts without text. Here's an example

Pass: Here's one with an ARIA label.

Pass: Using an aria-labelledby attribute connected to the previous heading above:

Pass: Using title attribute:

Link text best practices

If hyperlinks contain any of the following words or characters within a hyperlink, it will be flagged as an error.

Example 1

Hyperlink contains descriptive text, although it will still be flagged as an issue since 'click here' is a stop word:
Click here to view Ryerson's programs

Example 2

It's very common for content authors to use HTML symbols for visual aesthetics, especially on a button link.

About Ryerson >

Example 3

It's also very annoying to hear a really long URL being read out character-by-character using a screen reader. https://www.ryerson.ca/programs/undergraduate/accounting-finance/

Example 4

Although if the URL is not too long, let's not flag it. https://www.ryerson.ca/programs

Hyperlinks featuring an aria-label or aria-labelledby attribute will be indicated as a pass and show the accessible label conveyed to assistive technology.

Example 1

The following link uses an ARIA label.

Learn more

Example 2

The following link uses an ARIA labelledby attribute.

Learn more

Example 3

Links with aria-hidden are always ignored.

Example 4

ARIA labelledby attribute doesn't start with visible label.

Learn more

Links (Advanced)

Links that open in a new tab without warning

Example 1

aria-label with warning text.

Learn more
Example 2

aria-labelledby with warning text.

Learn more
Example 3

Warning: aria-label without warning text.

Learn more
Example 4

Warning: aria-labelledby without warning text.

Learn more
Example 5

Warning: Plain text example.

Learn more about Google.

Example 6

Pass: Plain text example with visually hidden warning.

Learn more about Google. (Opens new tab).

Links with identical names should have equivalent purpose

Oranges and Oranges: will pass because they point to the same URI.

document and Document and document: will fail because they have the same link text but different URIs.

Learn more and Learn more: will fail because the accessible name is the same but point to different URIs.

Links to PDF and other files without warning

Example 1

Contains file type within link text.

View the Final Report (PDF)

Example 2

Warning: Does not contain file type within link text.

View the Final Report