What does this accessibility issue mean?
To comply with WCAG Level A rules for website accessibility, ARIA attributes must be valid according to the WAI-ARIA specification. This includes checking that the attribute is properly defined, has a valid value, and is used in the appropriate context.
This is important for ensuring that the ARIA attributes used are recognized and understood by assistive technology, and that invalid or unrecognized attributes do not cause confusion or errors.
Example HTML violation: Invalid ARIA attribute name (WCAG 2.0 Level A Issue)
<!DOCTYPE html>
<html lang='en' class='no-js'>
<head>
<title>Ecommerce Website</title>
</head>
<body>
<div id="product" aria-fakeattribute="true">
<h2>Product Name</h2>
<p>Description of the product.</p>
</div>
</body>
</html>The ARIA attribute aria-fakeattribute does not exist and as such, this code violates the 'ARIA attributes must conform to valid names' accessibility rule (rule-id: 'aria-valid-attr').
Assistive technologies might ignore this invalid ARIA attribute or may behave unexpectedly, making the element difficult or impossible to use for some users.To correct this issue, we would simply remove or replace this invalid attribute with an appropriate valid ARIA attribute.
As an example, if the intent was to hide the div from assistive technologies, the valid attribute would be aria-hidden.
Here's how the corrected code could look:
How to fix "Invalid ARIA attribute name (WCAG 2.0 Level A Issue)" issue
<!DOCTYPE html>
<html lang='en' class='no-js'>
<head>
<title>Ecommerce Website</title>
</head>
<body>
<div id="product" aria-hidden="true">
<h2>Product Name</h2>
<p>Description of the product.</p>
</div>
</body>
</html>To ensure ARIA attributes conform to valid names, refer to the Accessible Rich Internet Applications (WAI-ARIA) 1.1: Definitions of States and Properties for a list of all valid ARIA attributes.
