Atrybut inert

Emma Twersky

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.

Bezczynność to domyślne zachowanie w elementach okna. Może się tak zdarzyć, gdy użyjesz showModal do otwarcia okna, w którym użytkownicy będą mogli dokonać wyboru, a następnie odrzucisz go z ekranu. Po otwarciu <dialog> reszta strony staje się nieaktywna, np. 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.

Nieruchomość 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.

Lepsze ułatwienia dostępu

Wytyczne dotyczące dostępności treści internetowych wymagają zarządzania koncentracją oraz rozsądnej i użytecznej kolejności wyboru. Dotyczy to zarówno wykrywalności, jak i interaktywności. 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 wykrywalność, 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. inert daje pewność, że gdy elementy podrzędne panelu są poza ekranem, użytkownik klawiatury nie będzie mógł przypadkowo z nich skorzystać.

Nieinteraktywne elementy DOM

Inny częsty problem z ułatwieniami dostępu to sytuacja, w której interfejs użytkownika jest widoczny lub częściowo widoczny, ale wyraźnie nieinteraktywny. Może to być podczas wczytywania strony, przesyłania formularza lub gdy otwarte jest okno nakładki.

Aby zadbać o wygodę użytkowników, wskaż stan interfejsu i „przyciągnij” uwagę na interaktywną część strony.

Focus trapping

Przyciąganie uwagi użytkownika to kluczowa koncepcja w ramach zapewniania dobrej dostępności interfejsu użytkownika. Upewnij się, że czytnik ekranu skupia się na interaktywnych elementach interfejsu, i pamiętaj, że który z nich blokuje interaktywność. Pomaga to także uniknąć przypadkowego przesłania formularza przez nieuczciwych czytników ekranu za nakładkę na stronie czy też do przypadkowego przesłania formularza w trakcie przetwarzania pierwszego zgłoszenia.

Korzystając z inert, masz pewność, że jedyne treści, które można znaleźć, są osiągalne. Jest to przydatne w przypadku:

• elementy blokujące, takie jak okno modalne, menu blokujące fokus lub nawigacja boczna;
• Karuzela z nieaktywnymi elementami.
• nieodpowiednie treści formularza (np. zanikanie i wyłączenie pól „Adres dostawy”, gdy zaznaczono pole „Tak samo jak adres rozliczeniowy”);
• Wyłączenie całego interfejsu użytkownika w przypadku niespójnego stanu.

wizualnie oznaczać 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 sterujących bardziej odpowiedni jest wyłączony atrybut.

Jakie interakcje i jakość ruchu są blokowane?

Domyślnie inert blokuje zdarzenia zaznaczenia i kliknięć. W przypadku technologii wspomagających blokuje to też przełączanie kart i wykrywanie. Przeglądarka może też ignorować wyszukiwanie na stronie i wybieranie tekstu w elemencie.

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