Atrybut inert

Emma Twersky

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

Obsługa przeglądarek

• 102
• 102
• 112
• 15,5

Źródło

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 pliku <dialog> reszta strony staje się bezwładna, na przykład nie można już klikać linków lub przechodzić do nich klawiszem Tab.

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

Inert oznacza brak możliwości poruszania się. Gdy oznaczysz coś bezwładnego, 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>

Tutaj inert zostało zadeklarowane dla drugiego elementu <div> zawierającego button2, więc cała zawartość tego elementu <div>, w tym przycisk i etykieta, nie będzie zaznaczona i nie będzie można jej kliknąć.

Atrybut inert jest szczególnie przydatny w przypadku ułatwień dostępu, zwłaszcza w celu uniknięcia zatrzymania ostrości.

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ć wykrywalność za pomocą funkcji aria-hidden="true", ale interaktywność jest trudniejsza.

inert umożliwia programistom usuwanie elementu z kolejności kart i z drzewa ułatwień dostępu. Dzięki temu możesz kontrolować wykrywalność i interaktywność, a także tworzyć bardziej przydatne i łatwo dostępne wzorce.

Aby poprawić dostępność, można zastosować inert do elementu w 2 głównych przypadkach:

• Gdy element jest częścią drzewa DOM, ale poza ekranem lub jest ukryty.
• Gdy element jest częścią drzewa DOM, ale powinien być nieinteraktywny.

Poza ekranem lub ukryte elementy DOM

Częstym problemem związanym z ułatwieniami dostępu są takie elementy jak szuflada, które dodają do DOM elementy, 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ć na przykład podczas wczytywania strony, przesyłania formularza lub jeśli otwarta jest nakładka okna.

Aby zapewnić użytkownikom najlepsze wrażenia, wskaż stan interfejsu i „pułapkę” skup się na interaktywnej części strony.

Utrzymywanie skupienia

Utrzymywanie skupienia to jedna z głównych koncepcji dobrych ułatwień dostępu w interfejsie. 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 lub gdy pierwsze zgłoszenie jest jeszcze przetwarzane.

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

• Elementy blokujące, takie jak okno modalne, menu do kontrolowania ostrości lub boczny panel nawigacyjny.
• Karuzela z nieaktywnymi elementami.
• nieodpowiednie treści formularza (np. zanikanie i wyłączenie pól „Adres dostawy”, gdy pole wyboru „Taki jak adres rozliczeniowy” zostało zaznaczone);
• Wyłączenie całego interfejsu użytkownika w przypadku niespójnego stanu.

Oznacz wizualnie elementy inert

Domyślnie nie ma wizualnego oznaku obojętności poddrzewa. Zalecamy wyraźne oznaczenie, które części DOM są aktywne, a które bezczynne.

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

Nie wszyscy użytkownicy widzą wszystkie części strony jednocześnie. Na przykład użytkownicy czytników ekranu, małych urządzeń, lupy, a także użytkownicy korzystający ze szczególnie małych okien mogą nie być w stanie zobaczyć aktywnej części strony i być frustrowani, jeśli sekcje neutralne nie są oczywiście bezczynne. 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 osoby z niepełnosprawnością blokują też używanie kart i wykrywalność. Przeglądarka może też zignorować wyszukiwanie na stronie i zaznaczenie tekstu w elemencie.

Wartość domyślna pola inert to false.