acc

How to fix: Interactive element semantics (WCAG 4.1.2 A)

Why this matters

<div onclick=…> looks the same to a sighted user but is invisible to keyboard + screen-reader navigation. Use <button> for buttons, <a href> for links. WCAG 4.1.2 Level A: name + role + value must be programmatically determinable for every interactive element.

Background

<div onclick=…> looks the same to a sighted user but is invisible to keyboard + screen-reader navigation. WCAG 4.1.2 Level A: name + role + value must be programmatically determinable for every interactive element.

References

WCAG 2.1 SC 4.1.2 Name, Role, Value (A) · ARIA Authoring Practices

How to fix

Code snippet for each stack we cover. Pick the one matching your server / framework.

nginx

No server config.

apache

Same.

cloudflare

Same.

wordpress

Audit themes / plugins for <div onclick>. Replace with <button> for actions, <a href> for navigation.

flask

Same — use <button type="button"> for in-page actions.

express

Same.

rails

Use button_to / link_to with appropriate semantics.

Verify it's working

Browser devtools: document.querySelectorAll('[onclick]:not(button):not(a)').length should be 0.

Want to know if your site has this issue?

Run a free 53-check audit — security, GDPR, NIS2, and technical SEO.

Audit my site →