Example HTML violation: ARIA widget role missing attributes (WCAG 2.0 Level A Issue)
<!DOCTYPE html>
<html lang="en" class="no-js">
<head></head>
<body>
<title>Examples of aria-required-attr violation</title>
<meta charset="UTF-8">
<div role="checkbox"></div>
</body>
</html>The above HTML violates the aria-required-attr accessibility rule because it includes a div element with a role of checkbox, but it does not have the required aria-checked attribute.
According to the rule, elements with certain ARIA roles must have specific required ARIA attributes.
In this case, the aria-checked attribute is necessary for the div element with the role of checkbox.
How to fix "ARIA widget role missing attributes (WCAG 2.0 Level A Issue)" issue
<!DOCTYPE html>
<html lang="en" class="no-js">
<head></head>
<body>
<title>Examples of aria-required-attr violation</title>
<meta charset="UTF-8">
<div role="checkbox" aria-checked="false"></div>
</body>
</html>In this HTML, aria-checked attribute is added with a value of "false". According to the W3C Web Accessibility Initiative (WAI), the aria-checked state indicates whether the element is selected (true), not selected (false), or neither (mixed). As the checkbox is not selected in this case, we set aria-checked to false.
For more details on ARIA roles and required attributes, check out the WAI ARIA Practices guide.
