Atrybut inert: wycisz tło za modalem w HTML

W skrócie: Atrybut inert pozwala wyłączyć interakcję z fragmentem strony: kliknięcia, fokus klawiatury i dostępność dla technologii asystujących. Najczęściej przydaje się, gdy otwierasz modal, panel koszyka albo formularz kontaktowy i chcesz, żeby tło naprawdę przestało być aktywne.

Atrybut inert robi coś, co wiele osób przez lata łatało ciężkim JavaScriptem: wyłącza cały fragment DOM z interakcji. Element oznaczony jako inert nie przyjmuje fokusu, jego linki i przyciski nie działają normalnie dla użytkownika, a technologie asystujące traktują go jak niedostępny.

Atrybut inert w minimalnym przykładzie

Atrybut inert możesz włączyć i wyłączyć na kontenerze strony jednym stanem logicznym. Najprostszy układ to treść strony w <main> oraz osobny modal, który pokazujesz dopiero po kliknięciu przycisku.

W HTML nie ma tu żadnej magii. Ważne jest rozdzielenie dwóch obszarów: normalnej treści oraz okna dialogowego, które pojawia się nad nią.

<button id="open-modal" type="button">Otwórz formularz</button>

<main id="page-content">
  <h2>Oferta firmy</h2>
  <p>Treść strony, linki, przyciski i formularze w tle.</p>
  <a href="/kontakt/">Przejdź do kontaktu</a>
</main>

<aside id="contact-modal" role="dialog" aria-modal="true" aria-labelledby="modal-title" hidden>
  <h2 id="modal-title">Szybki kontakt</h2>
  <p>Zostaw wiadomość, a odezwiemy się z wyceną.</p>
  <button id="close-modal" type="button">Zamknij</button>
</aside>

JavaScript też jest krótki. Po otwarciu modala ustawiasz inert na głównej treści, pokazujesz okno i przenosisz fokus do przycisku zamknięcia. Po zamknięciu odwracasz stan.

const page = document.querySelector('#page-content');
const modal = document.querySelector('#contact-modal');
const openButton = document.querySelector('#open-modal');
const closeButton = document.querySelector('#close-modal');

openButton.addEventListener('click', () => {
  page.inert = true;
  modal.hidden = false;
  closeButton.focus();
});

closeButton.addEventListener('click', () => {
  page.inert = false;
  modal.hidden = true;
  openButton.focus();
});

Gdzie to ma sens na stronie firmowej

Największy sens ma tam, gdzie użytkownik ma wykonać jedną konkretną akcję bez przypadkowego „uciekania” fokusu w tło. Na stronie małej firmy może to być okno szybkiego kontaktu, zapis na konsultację, panel koszyka albo komunikat o ważnej zmianie godzin otwarcia.

Wyobraź sobie stronę pensjonatu w Lubuskiem albo sklep rękodzielnika z Pomorza. Klient otwiera formularz rezerwacji, a pod spodem dalej są przyciski, linki, menu i kafelki oferty. Bez inert osoba poruszająca się klawiaturą może przypadkiem przejść tabulatorem do elementów ukrytych za modalem. To jest drobny detal techniczny, ale wpływa na odczucie porządku i dostępności.

Podobny problem pojawia się przy wysuwanym menu mobilnym. Jeżeli menu zakrywa całą stronę, tło nie powinno być aktywne. Wpis o Popover API i dymkach bez ciężkiego JavaScriptu pokazuje pokrewny kierunek: coraz więcej rzeczy da się dziś robić natywnie w przeglądarce, bez dokładania biblioteki do każdej drobnostki.

Dlaczego to poprawia dostępność

inert poprawia dostępność, bo porządkuje to, co jest aktualnie aktywną częścią interfejsu. Użytkownik klawiatury nie musi przebijać się przez linki schowane pod warstwą modala, a czytnik ekranu nie miesza treści tła z treścią okna.

To nie zastępuje całej logiki modala. Nadal warto zadbać o sensowny nagłówek, przycisk zamknięcia, powrót fokusu po zamknięciu oraz zamykanie klawiszem Escape, jeśli taki wzorzec pasuje do interfejsu. inert jest jednak bardzo dobrym klockiem, który usuwa jeden z najbardziej irytujących problemów.

Jeżeli projektujesz stronę firmową i chcesz, żeby była wygodna nie tylko „na oko”, zobacz też nasz poradnik o tym, czym jest profesjonalna strona firmowa budząca zaufanie. Takie szczegóły często decydują o tym, czy strona sprawia wrażenie dopracowanej.

Wsparcie przeglądarek i fallback

Wsparcie dla inert jest dziś szerokie, ale przy elementach krytycznych warto mieć prosty fallback. Aktualny opis działania i kompatybilność znajdziesz w dokumentacji MDN dla atrybutu inert.

W praktyce możesz sprawdzić, czy przeglądarka rozumie inert. Jeśli nie, fallback ustawia aria-hidden i usuwa elementy z kolejności tabulacji. To nie jest tak eleganckie jak natywne inert, ale daje bezpieczniejsze zachowanie w starszym środowisku.

const supportsInert = 'inert' in HTMLElement.prototype;

function setInactive(root, inactive) {
  if (supportsInert) {
    root.inert = inactive;
    return;
  }

  root.setAttribute('aria-hidden', inactive ? 'true' : 'false');

  root.querySelectorAll('a, button, input, select, textarea, [tabindex]').forEach((el) => {
    if (inactive) {
      el.dataset.prevTabindex = el.getAttribute('tabindex') ?? '';
      el.setAttribute('tabindex', '-1');
    } else {
      const prev = el.dataset.prevTabindex;
      prev ? el.setAttribute('tabindex', prev) : el.removeAttribute('tabindex');
      delete el.dataset.prevTabindex;
    }
  });
}

Najważniejsza zasada: nie uzależniaj działania formularza, koszyka albo rezerwacji wyłącznie od nowej funkcji. Interfejs ma działać zawsze, a inert powinien go po prostu dopracować. Jeśli potrzebujesz strony, sklepu lub opieki technicznej WordPress z takimi detalami, sprawdź ofertę stron i sklepów PEWIT.