Taking a region out of play in HTML

When a dialog opens, everything behind it should stop being reachable.

<div id="page" inert>
  <h1>Reports</h1>
  <button type="button">Export</button>
  <a href="/help">Help</a>
</div>

<div class="drawer" role="dialog" aria-modal="true"
     aria-labelledby="drawer-title">
  <h2 id="drawer-title">Filters</h2>
  <button type="button">Apply</button>
</div>

How it works

1. inert removes a subtree from focus, clicks and the accessibility tree.
2. A modal <dialog> does this for you; inert is for everything else.
3. It is inherited, so one attribute covers the whole background.

The run, in numbers

Lines

11

Characters to type

272

Tokens

82

Three-star pace

75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 66 seconds.

Type this snippet

Step 3 of 4 in Focus and visibility, step 11 of 15 in Accessible HTML.

← Previous Next →