Preventing interactivity on elements using HTML or CSS

There are various HTML attributes and CSS properties to remove interactivity from an element. Choose the right tool:

Effect	User agent	`[inert]`	`[aria-hidden="true"]`	`pointer-events: none`
Content readable	Visual browser	✔️ visible	✔️ visible	✔️ visible
Content readable	Screen reader	❌ hidden	❌ hidden	✔️ readable
Focus with keyboard	Visual browser	❌ prevented	✔️ allowed	✔️ allowed
Focus with keyboard	Screen reader	❌ prevented	❌ prevented	✔️ allowed
Activate link/button with keyboard	Visual browser	❌ prevented	✔️ allowed	✔️ allowed
Activate link/button with keyboard	Screen reader	❌ prevented	❌ prevented	✔️ allowed
Focus with mouse	Visual browser	❌ prevented	✔️ allowed	❌ prevented
Activate link/button with mouse	Visual browser	❌ prevented	✔️ allowed	❌ prevented

Further reading