• June 1, 2025

Page Title: Correct Usage of Conditional ARIA Attributes

Rule ID: aria-conditional-attr
Ruleset: axe-core 4.10
User Impact: Serious
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), EN 301 549

How to Fix the Problem

ARIA attributes must only be used where they are permitted by specification. When using ARIA properties like aria-checked, aria-expanded, aria-level, aria-posinset, or aria-setsize, their placement is conditional based on the role of the element and the HTML structure. Here’s how to address common issues:

For Checkboxes

You have two valid approaches:

1. Use native HTML only
   Remove the aria-checked attribute from native HTML checkboxes (<input type="checkbox">). Browsers already manage the checkbox state natively with the checked and indeterminate properties.

   Correct:

   html

   KopierenBearbeiten

   <label>
<input type="checkbox" checked>
I agree to make my website accessible
</label>


   Incorrect:

   html

   KopierenBearbeiten

   <label>
<input type="checkbox" aria-checked="true">
I agree to make my website accessible
</label>


2. Use custom checkboxes
   If you’re building a custom checkbox using elements like <div> or <span>, you must:

   • Add role="checkbox"

   • Use aria-checked to reflect the current state

   • Implement keyboard accessibility (e.g., respond to spacebar)

   • Manage tabindex for focusability

For Table Rows (<tr> or role="row")

ARIA attributes like aria-expanded, aria-level, aria-setsize, and aria-posinset are only valid inside a role="treegrid" container. If your table uses these attributes, you must upgrade the table’s role accordingly.

Correct:

Incorrect:

Why it Matters

ARIA is intended to enhance accessibility, but incorrect or unsupported usage can have the opposite effect. When ARIA attributes are applied where they shouldn’t be, assistive technologies like screen readers may behave unpredictably:

• Checkbox conflict: aria-checked on native checkboxes can create a mismatch between the actual checkbox state and what is announced by screen readers.

• Table row context confusion: ARIA attributes like aria-level and aria-expanded provide structure only within widgets like treegrid. Using them elsewhere breaks the semantic meaning and may confuse users relying on assistive technologies.

Proper use ensures screen reader users receive accurate, consistent information about element roles, states, and relationships.

Rule Description

This rule flags ARIA attributes that are only allowed under specific conditions. These include:

• aria-checked: Must not be used with native checkboxes (<input type="checkbox">)

• aria-expanded, aria-level, aria-posinset, aria-setsize: Must only be used on tr or role="row" elements inside a role="treegrid" container.

Violations may lead to assistive technologies misinterpreting or ignoring the content, harming accessibility.

The Algorithm (in Simple Terms)

1. Scan all elements with ARIA attributes.

2. Check whether the element’s role permits use of that ARIA attribute.

3. Flag a violation if:

   • A native HTML element uses an ARIA attribute that conflicts with its implicit role or behavior.

   • An attribute is used outside of the specific widget type (e.g., treegrid) where it’s supported.