Heard about the new HTML “inert” attribute?
It’s a game-changer and it’s as simple as it is powerful.
When you add inert to an element:
- The element and everything inside it becomes inactive.
- Users can’t click or interact with it.
- Screen readers completely ignore it.
It’s perfect for modals and pop-ups!
With inert, you can ensure users stay focused on the modal without interacting with the rest of the page.
It’s super handy for keeping users focused and making sure screen readers skip over stuff they don’t need to see.
Bonus: better accessibility often means better SEO too!
How does it work?
Just add inert to any element you want to deactivate. While it’s there, users can’t click, tab, or interact with it. Remove it, and everything’s back to normal.
It’s simple, effective, and takes no effort to set up.
The best part ? It’s available on every major browser with a support of 94%!
To learn more tips about CSS, make sure to join my newsletter below ❤️