Custom control is missing a required state

Why does it matter?

WCAG 4.1.2 asks that assistive technology can read a control's state; WAI-ARIA requires this state for this role, and without it people cannot tell, for example, whether a custom checkbox is ticked. A script may add it when the page runs, so check the live page before changing anything.

Who it affects: Screen reader and keyboard users, who depend on ARIA and focus order being correct to understand and operate the page.

What does Lumtera flag?

A role that WAI-ARIA says must carry a state, such as role="checkbox" with no aria-checked. On raw content this is Needs review, because a script may add the state later; on the running page's snapshot in review mode it is an error.

Check ID aria-required-attr — use it to filter the content report or with wp lumtera issues --rule.

How do I fix it in WordPress?

Add the missing attribute and keep it up to date from the script that runs the control, for example aria-checked="false" that becomes "true" when ticked. Better still, use a native control (a checkbox input or a button), which keeps its own state.

Example

<div role="checkbox" tabindex="0">Subscribe</div>

<input type="checkbox" id="news"> <label for="news">Subscribe</label>

How do I check the fix?

1. Update the post. The issue disappears from the Lumtera Accessibility sidebar on the next check, and from the site report on the next scan.
2. Press Tab from the top of the page. Focus should move in reading order and never land on something invisible or silent.