What does this accessibility issue mean?
To comply with WCAG Level A accessibility rules, elements with ARIA roles should have a properly defined aria-roledescription attribute.
The aria-roledescription attribute provides a description of the role that is more verbose than the role name alone, making it easier for assistive technologies to convey the purpose of the element to users.
Example HTML violation: Semantic role missing aria-roledescription (WCAG 2.0 Level A Issue)
<!DOCTYPE html>
<html lang="en" class="no-js">
<head></head>
<body>
<title>Test Page</title>
<div aria-roledescription="slider button">Submit</div>
</body>
</html>The above HTML violates the aria-roledescription accessibility rule because it assigns the aria-roledescription attribute to a div element. This is a violation because the aria-roledescription attribute should only be used with elements that have a defined role.
In this case, the div element does not have an explicit role defined, such as role="button", which means it does not have a semantic role by default. Therefore, assigning the aria-roledescription attribute to the div represents a violation of the accessibility rule.
To correct this violation, you can either add a role to the div element or replace the div with an element that already has an inherent role, such as a button.
How to fix "Semantic role missing aria-roledescription (WCAG 2.0 Level A Issue)" issue
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<title>Test Page</title>
</head>
<body>
<button aria-roledescription="slider button">Submit</button>
</body>
</html>By using the button element, we end up with an element that has a semantic role built-in. It's also better from a keyboard accessibility perspective since a button can receive focus, whereas a div can't without extra effort.
Please note that the aria-roledescription attribute is used to create more human friendly role descriptions. It should be used judiciously. Not all assistive technology supports it, so it's important to test for compatibility.
For more information, you can look at the relevant links provided:
