aria-conditional-attr

Use browsers to store the state of a checkbox. Also, do not use attributes that are exclusive to an element in other elements.

Description

This rule covers the following accessibility issues:

• Browsers use a native state (true, false, mixed) for all checkboxes on a webpage. Screen readers and other assistive technologies perform inconsistently if the aria-checked attribute is used while defining checkboxes. This happens when the native state of browsers and the state in aria-checked doesn’t match.

• The attributes aria-level, aria-setsize, aria-posinset, and aria-expanded are exclusively designed for the treegrid element. Screen readers and other assistive technologies perform inconsistently if a webpage uses these attributes on other elements.

Success criteria

For this accessibility check to pass, your website must adhere to the following rules:

Examples

In the following example, the aria-checked attribute is used in a checkbox. This breaks the aria-conditional-attr rule.

In contrast, the following code snippet doesn’t use the aria-checked attribute in the checkbox element. Hence, it doesn’t break the aria-conditional-attr rule.

Consider the following example in which the attributes aria-level, aria-setsize, aria-posinset, and aria-expanded are used in a grid element. This code snippet breaks the aria-conditional-attr rule as these attributes must be used only on treegrid elements.

In contrast, the following code snippet uses the attributes aria-level, aria-setsize, aria-posinset, and aria-expanded in a treegrid element. Hence, this code snippet does not break the aria-conditional-attr rule.

How to fix?

You can follow these steps to fix issues if this rule gets flagged:

• Check if the aria-checked attribute is used in checkboxes. If so, remove the aria-checked attribute or use a different element.

• Check if the attributes aria-level, aria-setsize, aria-posinset, and aria-expanded are used in an element other than treegrid. If so, either modify the element to treegrid or remove the aria attributes.

Reference

• WCAG tag 4.1.2: Name, Role, Value
• aria-checked HTML attribute
• row role attributes in treegrid