Objaśnienie KS 2.4.11:Fokus niezakryty (minimum) (Poziom AA)

Treść przestawiana przez użytkownika

Niniejsze KS zawiera uwagę dotyczącą treści, które można przestawić. Jeśli użytkownicy mogą przesuwać elementy treści, mogą potencjalnie ustawić ruchomą treść w taki sposób, aby zasłaniała inną treść, która otrzymuje fokus. W takim przypadku autor jest odpowiedzialny jedynie za zapewnienie, aby ruchoma treść w swojej początkowej pozycji nie zasłaniała elementu, który otrzymuje fokus.

Ta uwaga ma na celu uwzględnienie powszechnej interakcji w złożonych aplikacjach, takich jak narzędzia autorskie, w których główny obszar edycji (zwany czasem także obszarem roboczym) można rozszerzyć, wyświetlając paski narzędzi lub inne panele, które można umieszczać wokół obszaru roboczego. Możliwe jest zaprojektowanie tych pasków narzędzi w taki sposób, aby nie zasłaniały fokusu. Autorzy są zachęcani do takiego postępowania, a także do stosowania technik, które umożliwiają równoważną obsługę takich pasków narzędzi z klawiatury. Jednakże, biorąc pod uwagę złożoność związaną z projektowaniem responsywnym, a także obsługą możliwości możliwości przekształcania rozmiaru tekstu i odstępów między treściami, ocenia się tylko pozycję początkową takich ruchomych paneli.

Treść otwierana przez użytkownika

To KS zawiera uwagę dotyczącą treści, które są otwierane lub ujawniane przez użytkownika. Jednym z przykładów takich treści jest otwierany przez użytkownika przycisk menu, który rozwija listę opcji w stosunku do wcześniej istniejących treści na ekranie. Taka treść może przysłaniać inne informacje na ekranie, ale nie zasłania elementu z fokusem klawiatury, ponieważ nowa treść nie pozostaje otwarta po zmianie fokusu. Autorzy mogą jednak tworzyć treści otwierane przez użytkownika, które są celowo zaprojektowane tak, aby trwały do momentu zamknięcia przez użytkownika, takie jak okno czatu. Taka trwała treść może potencjalnie nie spełniać wymogu Fokus niezakryty (minimum). W tym podrozdziale zostały opisane różne rodzaje takich sytuacji. Wszystko można zaprojektować tak, aby spełnić to kryterium sukcesu.

Uwzględniając bardziej złożone aplikacje, uwaga pozwala, aby treści otwierane przez użytkownika przesłaniały element otrzymujący fokus pod warunkiem, że użytkownik może wyświetlić element, na którym jest fokus, bez faktycznej zmiany fokusu klawiatury. Działania na klawiaturze, które mogą pozwolić na odsłonięcie elementu z fokusem, obejmują: 1) użycie Esc do odrzucenia otwartej treści, 2) użycie klawiszy do przewijania treści w rzutni, aby odsłonić element z fokusem lub 3) użycie klawisza do przemieszczania się między nakładkami. Uzasadnieniem jest to, że jeśli użytkownik otwiera pasek narzędzi lub czatbota, ma pewien kontekst, aby zrozumieć, dlaczego inne treści mogą być przez niego zasłonięte.

Ten podrozdział dotyczy tylko treści, które użytkownik aktywnie odsłania. Treść wstępnie pozycjonowana przez autora (taka jak przyklejona stopka) lub treść, która pojawia się bez bezpośredniej inicjatywy użytkownika, taka jak ostrzeżenia systemowe, nie może uniemożliwiać natychmiastowej widoczności elementu otrzymującego fokus w rzutni. Ponadto uwaga ta nie ma zastosowania do odsłaniania, które z założenia jest nietrwałe. Jak omówiono w poniższym podrozdziale, otwarta lista rozwijana, która nie zamyka się, gdy nie otrzymuje fokusu, nie jest oparta na tej konwencji.

Nietrwale otwierane informacje

Szereg komponentów w sieci otwiera (lub odsłania) dodatkową treść (po aktywacji lub otrzymaniu fokusu) przeznaczoną do natychmiastowej interakcji użytkownika lub uzyskania informacji. Ta nowa treść często znajduje się nad innymi treściami, zasłaniając je. Przykładami takich komponentów są elementy menu, elementy listy wyboru, pola kombinowane (i inne elementy rozwijane), kalendarze z selektorem dat i podpowiedzi. Wspólną cechą wszystkich tych komponentów jest to, że nie oczekuje się od nich trwałości po wykonaniu akcji lub gdy nie są już głównym punktem interakcji użytkownika. Takie nietrwałe odsłanianie nie narusza tego KS, ponieważ nie przysłania elementu z fokusem. Jeśli jednak autor pozwoli takim komponentom pozostać po tym, jak użytkownik 1) aktywował jeden z otwartych elementów lub 2) przeniósł fokus z elementu wyzwalającego i dodatkowej treści, istnieje ryzyko, że nie spełni tego kryterium w wyniku zasłonięcia elementu z fokusem.

Otwierane przez użytkownika, trwałe odsłanianie informacji

Niektóre wzorce odsłaniania zapewniają użytkownikowi mechanizm otwierania dodatkowej treści, która pozostaje otwarta do momentu celowego zamknięcia przez użytkownika. Prostym przykładem takiego wzorca są akordeony. Przykładami bardziej złożonymi są czatboty i rozszerzalna nawigacja boczna. Wszystkie te wzorce można wdrożyć tak, aby nie ryzykować naruszenia tego KS. Niektóre możliwe podejścia to:

• Gdy pojawia się dodatkowa treść, wypiera ona istniejącą treść. Akordeon jest tego przykładem. Po otwarciu akordeonu odsłaniana treść przesuwa istniejącą treść dalej w dół strony. Ponieważ nowa treść nie przesłania istniejącej treści, nie może przesłaniać elementu z fokusem.
• Gdy pojawi się dodatkowa treść, to istniejąca treść zostanie ponownie wyświetlona. Przykładem tego wzoru jest wysuwany pasek boczny na stronie standardu WCAG. Gdy menu boczne jest aktywowane, otwiera nową sekcję informacji po lewej stronie strony. Główny obszar treści jest zmniejszany w poziomie, aby pomieścić nową treść, a istniejąca treść jest przenoszona, aby zmieścić się w węższej przestrzeni. W rezultacie nie ma nakładających się treści między dwiema sekcjami; element otrzymujący fokus, czy to w lewej nawigacji, czy w treści głównej, nie zostanie przesłonięty przez drugą sekcję.
• Po otwarciu dodatkowej treści przejmuje ona fokus, a pierścień kart jest ograniczony do nowej treści, dopóki nie zostanie zamknięty. Ta modalność przypomina nieco okno dialogowe, ponieważ użytkownik nie może nawigować poza otwartą treść za pomocą klawiatury bez uprzedniego jej zamknięcia (zwykle przez naciśnięcie Esc). Jednak w przeciwieństwie do modalnego okna dialogowego, w niektórych sytuacjach użytkownik wskaźnika może być w stanie wchodzić w interakcję z treścią poza otwartą sekcją bez jej zamykania. Ponieważ ten wzorzec potencjalnie stwarza nierównoważne doświadczenia użytkowników klawiatury i wskaźnika, należy go używać ostrożnie. To jednak zapobiega zasłanianiu przez otwartą treść fokusu klawiatury w głównej treści, a zatem powinno spełnić wymaganie KS. Zostało to opisane i pokazane w krótkim filmie w artykule Knowbility w sekcji referencyjnej, pod nagłówkiem Utrzymuj fokus klawiatury w wysuwanej nawigacji, aż zostanie zamknięta (Utrzymuj fokus klawiatury w wysuwanej nawigacji, aż zostanie zamknięta).
• Treść rozszerza się na obszar strony, który nie zawiera żadnych innych treści. Wiele stron projektuje się z szerokimi marginesami, zapewniając znaczną pustą przestrzeń, w której można otwierać nowe treści. Wiele czatbotów i powiadomień tostowych jest zaprojektowanych tak, aby „wsuwały się” w prawą, niezapełnioną część strony. Jeśli autorzy dbają o to, aby treść nie była zasłaniana w żadnym punkcie przerwania w projekcie responsywnym, nie musi dochodzić do zasłaniania innych treści funkcjonalnych.
• Gdy fokus opuszcza dodatkową treść, dodatkowa treść jest ukrywana lub zwijana. Jest to bardzo podobne do wzorców omówionych wcześniej w podrozdziale Nietrwale otwierane informacje. Czynnikiem wyróżniającym może być to, że ostatni punkt interakcji użytkownika w odsłanianiu jest zachowany (utrzymuje się), nawet jeśli może być ukryty do czasu powrotu użytkownika. W ten sposób zachowują się niektóre drzewa i pozostałe wzorce nawigacji.

W przypadku gdy treść pozostaje nadal otwarta, a istniejąca treść zostanie zasłonięta, istnieje ryzyko niespełnienia tego kryterium, jeśli użytkownik nie będzie mógł zobaczyć elementu, który otrzymuje fokus. Przykład tego problemu jest opisany i pokazany w krótkim filmie Wysuwana nawigacja pozostaje otwarta, gdy fokus jest ustawiony na treści znajdującej się za nią.

W przypadku bardziej złożonych interfejsów i potrzeb użytkownika podajemy uwagę: Treść otwierana przez użytkownika może przesłaniać element otrzymujący fokus. Jeśli użytkownik może wyświetlić element z fokusem za pomocą metody bez konieczności powrotu do treści otwartej przez użytkownika w celu jego odrzucenia. Na przykład akcje klawiatury, które mogą pozwolić na ujawnienie elementu z fokusem, obejmują:

• użycie klawisza Escape do odrzucenia zasłaniającej treści;
• użycie klawiszy do przewijania treści w rzutni w celu odsłonięcia elementu z fokusem;
• użycie klawisza umożliwiającego poruszanie się między nakładkami.

Na przykład:

• Użytkownik otwiera interfejs czatu, który jest niemodalnym oknem dialogowym. Powoduje to całkowite zasłonięcie części treści strony źródłowej. Użytkownik opuszcza interfejs czatu za pomocą klawisza Tab,przenosząc fokus na łącze, które zostało całkowicie zasłonięte przez okno dialogowe. Użytkownik naciska klawisz Escape, aby zamknąć interfejs czatu, co powoduje odsłonięcie łącza.
• Użytkownik rozwija komponent opinii o stronie internetowej o ustalonej pozycji na dole strony. Następnie używa klawiatury, aby przejść do łącza, które jest całkowicie zasłonięte przez rozszerzony element i naciska strzałkę w dół lub klawisz spacji na klawiaturze, aby przewinąć treść strony, odsłaniając łącze.
• Użytkownik otwiera internetową aplikację do tworzenia treści dla wielu użytkowników. Pojawia się nakładka wyświetlająca listę osób, które przyczyniły się do powstania dokumentu. Użytkownik przegląda listę współautorów i aktywuje jednego z nich. Aplikacja wyświetla nową nakładkę, która zasłania pierwszą, wyświetlającą ostatnie wpisy tej osoby. Użytkownik naciska klawisz F6, aby zmienić kolejność obu nakładek.

Techniki wystarczające

• C43: Używanie właściwości CSS scroll-padding do odsłaniania ukrytej treści

Błędy

Poniżej wymieniono typowe błędy, które Grupa Robocza WCAG uważa za niespełnienie tego kryterium sukcesu.

• F110: Naruszenie kryterium sukcesu 2.4.12 Fokus niezakryty (minimum) z powodu przyklejonej stopki lub nagłówka, który całkowicie zakrywa element z fokusem