What does this accessibility issue mean?
To comply with WCAG Level A rules, check that all elements using ARIA roles have valid roles defined.
The role attribute is used to define the role of an element, and this test ensures that the role is properly defined and valid according to the WAI-ARIA specifications.
Example HTML violation: Invalid ARIA role value (WCAG 2.0 Level A Issue)
<!DOCTYPE html>
<html lang='en' class='no-js'>
<head>
<meta charset='utf-8'>
<title>Online Store</title>
</head>
<body>
<nav role='navigations'>
<!-- Invalid ARIA role -->
<ul>
<li>
<a href='#'>Home</a>
</li>
<li>
<a href='#'>Products</a>
</li>
<li>
<a href='#'>Contact</a>
</li>
</ul>
</nav>
</body>
</html>Explanation of Violation
The violation occurs in the <nav> element where the ARIA role attribute is assigned a value of 'navigations'. This is not a valid ARIA role value according to the ARIA roles category, which may lead to incorrect or nonsensical user interface information presented to users of assistive technology.
Corrected HTML Code is below
How to fix "Invalid ARIA role value (WCAG 2.0 Level A Issue)" issue
<!DOCTYPE html>
<html lang='en' class='no-js'>
<head>
<meta charset='utf-8'>
<title>Online Store</title>
</head>
<body>
<nav role='navigation'>
<!-- Correct ARIA role -->
<ul>
<li>
<a href='#'>Home</a>
</li>
<li>
<a href='#'>Products</a>
</li>
<li>
<a href='#'>Contact</a>
</li>
</ul>
</nav>
</body>
</html>In the corrected HTML Code, the correct ARIA role value 'navigation' is used for the <nav> element.
This provides the correct semantic information about the navigation section to assistive technology.
