What does this accessibility issue mean?
To comply with website accessibility best practices, check that all elements that require text content have text content defined.
For example, if an element has the role=”button” attribute, it should have text content that describes the button’s purpose.
This is important for ensuring that assistive technology users can properly understand and interact with the content of a webpage, even if they cannot see or access the non-text content directly.
Example HTML violation: Role=”text” has focusable descendant (A11y Best Practice Violation)
<!DOCTYPE html>
<html lang="en" class="no-js">
<head></head>
<body>
<title>Accessibility Violation Example</title>
<div role="text">
<a href="#">Click Me!</a>
</div>
</body>
</html>The above HTML violates the aria-text accessibility rule because the role="text" attribute on the div tag is unnecessary and may cause certain assistive technologies to overlook interactions.
How to fix "Role=”text” has focusable descendant (A11y Best Practice Violation)" issue
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<title>Accessibility Compliance Example</title>
</head>
<body>
<div>
<a href="#">Click Me!</a>
</div>
</body>
</html>In this updated version, I removed role="text" from the div tag. This role was likely causing the violation as it can create unpredictable screen reader behavior.
Here are further quick tips for ensuring your HTML is always accessible:
- Always provide meaningful alternative text for images using
altattributes. - Ensure form inputs have associated labels
- Use semantic elements when possible. For example, use
<nav>for navigation sections and<footer>for footers. - Use ARIA roles and properties when necessary, but do not overuse them, as they can create more problems than they solve if used incorrectly.
Maintaining accessibility in your code not only ensures compliance with standards, but also improves overall user experience, usability and will often have SEO benefits as well.
To find out more about making accessible websites, you can check out the Web Content Accessibility Guidelines (WCAG) provided by W3C's Web Accessibility Initiative.
