What does this accessibility issue mean?
Accessibility issue summary: links on page do not have discernible text
Links on your site should have accessible text or names to provide context for that link to users of assistive technologies. Users should be able to understand the purpose of a link before they choose to follow it. Meaningful link text also helps assistive technology users easily tab between links.
Link text accessibility issues are related to WCAG Level A rules around providing link purpose (in context).
Solution:
Ensure links have discernible text. This can be accomplished through a number of discernible link text techniques, including using link text that describes the purpose, supplementing link text with the title attribute, and providing link context via aria-label or similar, to name a few options.
Example HTML violation: Indiscernible link text (WCAG Level A Issue)
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<title>Violating Link Name Accessibility Rule</title>
</head>
<body>
<a href="https:\\www.example.com"></a>
</body>
</html>The above HTML violates the link-name accessibility rule because it does not provide an accessible name for the link. According to this rule, links or interactive elements must have a clear description of their function or purpose. However, the given HTML code shows an empty link without any descriptive text. This lack of descriptive text makes the link unhelpful in terms of accessibility and search engine optimization (SEO).
How to fix "Indiscernible link text (WCAG Level A Issue)" issue
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<title>Non-violating Link Name Accessibility Rule</title>
</head>
<body>
<a href="https://www.example.com">Visit Our Example Site</a>
</body>
</html>In the corrected version, I have:
-
Corrected the URL: The href attribute in the anchor tag (a) was incorrectly specified in the given HTML. I've corrected it to point to "https://www.example.com".
-
Added Descriptive Text: I added the "Visit Our Example Site" text in between the opening and closing anchor tag.
This descriptive text now acts as the accessible name for the link which is crucial for accessibility and beneficial for SEO.The goal for fixing this is to make sure that every link on a webpage has an accessible name that accurately describes its purpose. This makes the webpage more user-friendly for all users, including those who rely on assistive technologies to surf the web. These could include screen readers, braille display, etc.
