What does this accessibility issue mean?
To comply with WCAG level A web accessibility rules, values of ARIA attributes should valid according to the WAI-ARIA specification. This includes checking that the values are properly formatted and meet any additional constraints or requirements for the attribute.
This is important for ensuring that the ARIA attributes used are accurate and meaningful for assistive technology users.
Example HTML violation: Invalid ARIA attribute value (WCAG 2.0 Level A Issue)
<!DOCTYPE html>
<html lang='en' class='no-js'>
<head>
<title>E-commerce Website</title>
</head>
<body>
<button aria-expanded="yes">View More</button>
</body>
</html>Explanation for the incorrect example above: The 'aria-expanded' attribute is used to indicate whether sections of content are collapsible and reveal additional information to the user. The valid values for this attribute are 'true' or 'false', not 'yes' or 'no'.
In the above code, 'yes' is used which is an invalid value for the 'aria-expanded' attribute.
Here is the corrected HTML code:
How to fix "Invalid ARIA attribute value (WCAG 2.0 Level A Issue)" issue
<!DOCTYPE html>
<html lang='en' class='no-js'>
<head>
<title>E-commerce Website</title>
</head>
<body>
<button aria-expanded="true">View More</button>
</body>
</html>This corrected HTML code now adheres to the accessibility rule 'aria-valid-attr-value'.
The 'aria-expanded' attribute has a valid value of 'true', adhering to the correct usage of ARIA attributes for the WAI-ARIA specifications.
