Atrybut inert to globalny atrybut HTML, który upraszcza usuwanie i przywracanie zdarzeń wejściowych użytkownika dotyczących elementu, m.in. zdarzeń skupienia i zdarzeń z technologii wspomagających.
Bezczynność to domyślne działanie elementów okna, np. gdy używasz showModal, aby otworzyć okno, w którym użytkownicy mogą dokonać wyboru, a następnie zamknąć go z ekranu.
Po otwarciu pliku <dialog> reszta strony staje się bezwładna – nie można już np. klikać linków ani naciskać Tab.
Aby osiągnąć to samo działanie w przypadku innych elementów, możesz użyć atrybutu inert.
Bezczynność oznacza brak możliwości poruszania się, więc gdy oznaczysz coś bezwładnego, usuwasz 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 miejscu zadeklarowano inert w drugim elemencie <div> zawierającym button2, więc żadna treść zawartej w tym elemencie <div>, w tym przycisk i etykieta, nie może zostać zaznaczona ani nie będzie mogła zostać kliknięta.
Atrybut inert jest szczególnie przydatny w przypadku ułatwień dostępu, a w szczególności do zapobiegania zatrzymywaniu ostrości.
Lepsza dostępność
Wytyczne dotyczące dostępności treści internetowych wymagają zarządzania koncentracją i rozsądnej kolejności nawigacji. Dotyczy to zarówno wykrywalności, jak i interaktywności. Wcześniej wykrywalność można było ograniczać za pomocą elementu aria-hidden="true", ale zwiększało to interaktywność.
inert umożliwia programistom usuwanie elementu z kolejności kart i z drzewa ułatwień dostępu. Pozwala to kontrolować wykrywalność i interaktywność oraz tworzyć bardziej przydatne i przystępne wzorce.
Są 2 główne przypadki użycia atrybutu inert w elemencie poprawiające dostępność:
- Gdy element jest częścią drzewa DOM, ale znajduje się poza ekranem lub jest ukryty.
- Gdy element jest częścią drzewa DOM, ale nie powinien być interaktywny.
Poza ekranem lub ukryte elementy DOM
Częstym problemem związanym z ułatwieniami dostępu są elementy takie jak szuflada, która dodaje do DOM elementy, które nie zawsze są widoczne dla użytkownika.
Dzięki inert możesz mieć pewność, że gdy elementy podrzędne panelu znajdują się poza ekranem, użytkownik klawiatury nie może przypadkowo z nimi korzystać.
Nieinteraktywne elementy DOM
Innym częstym powodem problemów z ułatwieniami dostępu jest sytuacja, w której interfejs użytkownika jest widoczny lub częściowo widoczny, ale wyraźnie nieinteraktywny. Może to być np. podczas wczytywania strony, przesyłania formularza lub gdy otwarta jest nakładka okna.
Aby zapewnić użytkownikom jak najlepsze wrażenia, wskaż stan interfejsu i „upuść” zaznaczenie na interaktywną część strony.
Pułapki na skupienie
pułapki na koncentracji to podstawowa koncepcja dobrej ułatwień dostępu w interfejsie, Dopilnuj, aby czytnik ekranu korzystał z interaktywnych elementów interfejsu, i musi wiedzieć, że element blokuje interaktywność. Pomaga to też ograniczyć nieuczciwe czytniki ekranu, aby nie dotykały nakładki na stronie lub przypadkowo przesyłały formularz w trakcie przetwarzania pierwszego zgłoszenia.
Dzięki usłudze inert możesz mieć pewność, że osiągalne są wyłącznie treści, które można wyszukać. Jest to przydatne w przypadku:
- elementy blokujące, takie jak okno modalne, menu traktowania zaznaczenia lub boczny panel nawigacyjny;
- Karuzela z nieaktywnymi elementami.
- nieodpowiedniej treści formularza (np. ściemnianie i wyłączanie pól „Adres wysyłki” po zaznaczeniu pola „Taki sam jak adres rozliczeniowy”).
- Wyłączenie całego interfejsu użytkownika w niespójnym stanie.
Sygnalizuj wizualnie elementy inert
Domyślnie nie jest widać, że poddrzewo jest bezwładne. Zalecamy wyraźne oznaczenie elementów DOM, które są aktywne, a które bezwładne.
[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ń lub lupy, a nawet użytkownicy, którzy korzystają z bardzo małych okien, mogą nie być w stanie zobaczyć aktywnej części strony i frustrują się, jeśli takie sekcje nie są wyraźnie obojętne. W przypadku poszczególnych ustawień prawdopodobnie bardziej odpowiedni jest atrybut wyłączony.
Jakie interakcje i ruch są zablokowane?
Domyślnie inert blokuje zdarzenia skupienia i kliknięć. W przypadku technologii wspomagających osoby z niepełnosprawnością blokuje to też używanie kart i wykrywalność. Przeglądarka może też ignorować wyszukiwanie na stronie i zaznaczenie tekstu w elemencie.
Wartością domyślną inert jest false.