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 moreExample 2
However if used with additional text, it will not be flagged as an error.
Learn more about JoomlaExample 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.
Example 5
This is a demonstration of an exclusion. Sometimes a website theme may automatically append text to a link. For example, the white on black (External Link) text will be ignored, which will correctly flag this link as an error for not being descriptive enough. learn more (External link)
Empty hyperlinks
Fail: It's common to see hyperlinks around icon fonts without text. Here's an example of one
Pass: Here's one with an ARIA label.
Pass: Using an aria-labelledby attribute connected to the previous heading above:
Pass: Empty hyperlink has SVG or child element that has aria-label, aria-labelledby, or title.
Fail: Empty hyperlink has SVG or child element that does not have an aria-label, aria-labelledby, or title.
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 Joomla's documentation
Example 2
It's very common for content authors to use HTML symbols for visual aesthetics, especially on a button link.
About Joomla >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.joomla.org/about-joomla/the-project/mission-vision-and-values.html
Example 4
Although if the URL is not too long, let's not flag it. https://www.joomla.org/4/
Hyperlinks with ARIA
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 3
Links with aria-hidden are always ignored.
Links (Advanced)
- Usability: Should links open in new windows? (Source: Smashing Magazine)
- Usability: Beware of opening links in a new window. (Source: webcredible)
- Accessibility: Opening new windows and tabs from a link only when necessary. (Source: W3/WCAG 2.1)
- Accessibility: Giving users advanced warning when opening a new window. (Source: W3/WCAG 2.1)
Links that open in a new tab without warning
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.