Atrybut inert

Atrybut inert to globalny atrybut HTML, który upraszcza usuwanie i przywracanie zdarzeń danych wejściowych użytkownika dotyczących elementu, w tym zdarzeń fokusowania i zdarzeń z technologii wspomagających.

Obsługa przeglądarek

  • Chrome: 102.
  • Edge: 102.
  • Firefox: 112.
  • Safari: 15.5.

Źródło

Wstawianie jest domyślnym działaniem w elementach dialogu, np. gdy używasz elementu showModal, aby otworzyć okno dialogowe, w którym użytkownicy mogą dokonać wyboru, a potem zamknąć je na ekranie. Po otwarciu <dialog> reszta strony staje się nieaktywna, na przykład nie można już klikać linków ani przełączać się między nimi.

Aby uzyskać takie samo działanie w przypadku innych elementów, możesz użyć atrybutu inert.

Inert oznacza brak możliwości poruszania się, więc gdy oznaczysz coś jako nieruchome, usuniesz ruch lub interakcję z tych elementów DOM.

<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>

W tym przykładzie funkcja inert została zadeklarowana w drugim elemencie <div> zawierającym element button2, więc wszystkie treści zawarte w tym elemencie <div>, w tym przycisk i etykieta, nie mogą być zaznaczane ani klikane.

Atrybut inert jest szczególnie przydatny w zakresie ułatwień dostępu, zwłaszcza w celu zapobiegania uwięzienia kursora.

Lepsza dostępność

Wytyczne dotyczące dostępności treści internetowych wymagają zarządzania punktem skupienia uwagi oraz logicznego i użytecznego kolejnego wyświetlania elementów. Dotyczy to zarówno widoczności, jak i interakcji. Wcześniej można było ograniczyć widoczność za pomocą atrybutu aria-hidden="true", ale interaktywność jest trudniejsza do osiągnięcia.

inert umożliwia deweloperom usuwanie elementów z kolejności kart i z drzewa ułatwień dostępu. Dzięki temu możesz kontrolować zarówno widoczność, jak i interaktywność, oraz tworzyć bardziej użyteczne i dostępne wzorce.

Zastosowanie atrybutu inert do elementu w celu ułatwienia dostępu ma 2 główne zastosowania:

  • gdy element jest częścią drzewa DOM, ale jest poza ekranem lub ukryty.
  • gdy element jest częścią drzewa DOM, ale nie powinien być interaktywny;

Elementy DOM poza ekranem lub ukryte

Jednym z częstych problemów z dostępnością jest kwestia elementów takich jak szuflada, które dodają do DOM elementów, które nie zawsze są widoczne dla użytkownika. Dzięki opcji inert możesz mieć pewność, że gdy elementy wyskakującego menu są poza ekranem, użytkownik korzystający z klawiatury nie może ich przypadkowo aktywować.

Nieinteraktywne elementy DOM

Innym częstym problemem związanym z ułatwieniami dostępu jest widoczność elementów interfejsu. Czasami są one widoczne lub częściowo widoczne, ale nie można z nimi wchodzić w interakcje. Może to być podczas wczytywania strony, przesyłania formularza lub gdy otwarte jest okno nakładki.

Aby zapewnić użytkownikom jak najlepsze wrażenia, wskaż stan interfejsu użytkownika i „przyciągnij” jego uwagę do interaktywnej części strony.

Focus trapping

Przyciąganie uwagi użytkownika to kluczowa koncepcja ułatwień dostępu w interfejsie użytkownika. Upewnij się, że czytnik ekranu skupia się na interaktywnych elementach interfejsu, i sprawdzaj, czy któryś z nich nie blokuje interakcji. Pomaga to też ograniczyć działanie nieuczciwych czytników ekranu, które mogłyby sięgnąć poza nakładkę strony lub przypadkowo przesłać formularz, gdy pierwsze przesłanie jest jeszcze w trakcie przetwarzania.

Używając inert, możesz mieć pewność, że dostępne są tylko treści, które można znaleźć. Jest to przydatne w przypadku:

  • elementy blokujące, takie jak okno modalne, menu blokujące fokus lub nawigacja boczna;
  • Karuzela z nieaktywnymi elementami.
  • Treści formularza, które nie są odpowiednie (np. przyciemnianie i wyłączenie pól „Adres dostawy”, gdy zaznaczone jest pole wyboru „Ten sam adres co adres rozliczeniowy”).
  • Wyłączenie całego interfejsu użytkownika, gdy jest on w niezgodnym stanie.

wizualnie wskazywać elementy inert,

Domyślnie nie ma wizualnego wskazania, że poddrzewo jest nieaktywne. Zalecamy wyraźne oznaczenie aktywnych i biernych części modelu DOM.

[inert], [inert] * {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
  user-select: none;
}

Nie wszyscy użytkownicy mogą widzieć wszystkie części strony jednocześnie. Na przykład użytkownicy czytników ekranu, małych urządzeń lub powiększalników, a nawet użytkownicy korzystający z bardzo małych okien mogą nie widzieć aktywnej części strony i mogą się zirytować, jeśli sekcje nieaktywne nie są wyraźnie nieaktywne. W przypadku poszczególnych elementów prawdopodobnie lepiej jest użyć atrybutu disabled.

Jakie interakcje i ruchy są blokowane?

Domyślnie inert blokuje zdarzenia związane ze skupieniem i kliknięciem. W przypadku technologii wspomagających spowoduje to również zablokowanie przełączania kart i wykrywania. Przeglądarka może też ignorować wyszukiwanie na stronie i wybieranie tekstu w elemencie.

Wartością domyślną parametru inert jest false.