đźš« Make Content Unclickable, Unfocusable, Invisible to Screen Readers
Modal open? Background content should be ignored. inert attribute disables everything inside.
đź“ť Basic Usage
<!-- Main content with modal open -->
<main inert>
<button>Can't click me!</button>
<a href="#">Can't focus me!</a>
<input placeholder="Can't type here">
</main>
<div class="modal">
<h2>This is accessible</h2>
<button onclick="closeModal()">Close</button>
</div>
<script>
function openModal() {
document.querySelector('main').inert = true;
}
function closeModal() {
document.querySelector('main').inert = false;
}
</script>
âś… What Inert Does
- Makes elements not focusable (Tab skips them)
- Makes elements not clickable
- Hides from screen readers (assistive tech ignores)
- Prevents text selection
- Applies to all descendants
“Manual ARIA attributes for modal background were buggy. inert handles everything. Tab stays in modal, screen readers ignore background. Accessibility done right.”