Aria Prohibited Attribute
Critical - WCAG Level A
The issue with using prohibited ARIA attributes is that they can cause assistive technologies, such as screen readers, to misinterpret the role and purpose of an element. ARIA (Accessible Rich Internet Applications) attributes are designed to enhance the accessibility of web content by providing additional semantic information. However, each ARIA attribute is intended to be used with specific roles, and using them incorrectly can lead to confusion and miscommunication to users relying on assistive technologies.
For example, using aria-checked on a <button> element is incorrect because aria-checked is meant for roles like checkbox or menuitemcheckbox. When ARIA attributes are misapplied, screen readers may announce incorrect information, leading to a poor user experience for those who rely on these technologies.
To fix this issue, first, identify the role of the element you are working with. Then, consult the ARIA specification to ensure that the attributes you are applying are allowed for that role. If you find that an attribute is prohibited, remove it or replace it with a valid attribute that conveys the same information.
Best practices include:
Always verify the role-attribute compatibility using the ARIA specification.
Use native HTML elements with built-in semantics whenever possible, as they are inherently accessible.
Regularly test your application with screen readers to ensure that the intended information is conveyed correctly.
Common mistakes to avoid include assuming that adding more ARIA attributes will always enhance accessibility, or neglecting to check the compatibility of ARIA attributes with the element's role.