Sacar una región de juego en HTML

Cuando se abre un diálogo, todo lo que queda detrás debería dejar de ser alcanzable.

<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>

Cómo funciona

1. inert quita un subárbol del foco, los clics y el árbol de accesibilidad.
2. Un <dialog> modal lo hace por ti; inert es para todo lo demás.
3. Se hereda, así que un solo atributo cubre todo el fondo.

El intento, en números

Líneas

11

Caracteres a escribir

272

Tokens

82

Ritmo de tres estrellas

75 tpm

Al ritmo de tres estrellas de 75 tokens por minuto, este intento toma unos 66 segundos.

Escribe este fragmento

Paso 3 de 4 en Foco y visibilidad; paso 11 de 15 en HTML accesible.

← Anterior Siguiente →