Objaśnienie KS 2.4.11:Fokus niezakryty (minimum) (poziom AA)
Pobierz:
- Ten dokument w formacie DOCX (Word)
- Porównanie oryginału i tłumaczenia w formacie DOCX (Word) (wersja na stronie może się nieznacznie różnić - jest aktualniejsza)
W skrócie
- Cel
- Zapewnij widoczność elementu, który otrzymuje fokus klawiatury.
- Co zrobić
- Upewnij się, że element, który otrzymuje fokus klawiatury, jest przynajmniej częściowo widoczny.
- Dlaczego to jest ważne
- Osoby, które nie mogą korzystać z myszy, muszą widzieć element, który ma fokus klawiatury.
Intencja
Celem tego kryterium sukcesu jest zapewnienie, że element, który otrzymuje fokus klawiatury, jest zawsze częściowo widoczny w rzutni użytkownika. Dla osób widzących, które używają klawiatury lub urządzenia korzystającego z interfejsu klawiatury (takiego jak przełącznik lub wprowadzanie głosowe), informacja o aktualnym miejscu fokusu ma kluczowe znaczenie. Komponent z fokusem sygnalizuje punkt interakcji na stronie. Gdy użytkownicy nie widzą elementu z fokusem, mogą nie wiedzieć, jak postępować, lub mogą nawet pomyśleć, że system przestał reagować.
Aby uwzględnić obecnie powszechne złożone projekty responsywne, to kryterium AA pozwala na częściowe zakrycie komponentu otrzymującego fokus przez inne treści stworzone przez autora. Częściowo zakryty komponent może być nadal bardzo dobrze widoczny, choć im bardziej jest on zakryty, tym trudniej go dostrzec. Z tego powodu autorzy powinni spróbować zaprojektować interakcje tak, aby zmniejszyć stopień i częstotliwość, z jaką element, który otrzymuje fokus, jest częściowo zakryty. Aby uzyskać najlepszą widoczność, żaden komponent otrzymujący fokus nie powinien być zakryty. Ten preferowany wynik jest objęty kryterium AAA Fokus niezakryty (ulepszone).
Typowe rodzaje treści, które mogą nakładać się na elementy z fokusem, to przyklejane stopki, przyklejane nagłówki i niemodalne okna dialogowe. Gdy użytkownik nawiguje tabulatorem po stronie, to te warstwy treści mogą ukryć element, który otrzymuje fokus wraz ze wskaźnikiem fokusu.
Powiadomienie zaimplementowane jako przyklejona treść, takie jak okienko ciasteczek, nie spełni tego kryterium sukcesu, jeśli całkowicie zakryje element, który ma fokus klawiatury. Sposoby spełnienia tego wymogu uwzględniają np. uczynienie okienka modalnym, aby użytkownik musiał je zamknąć przed nawigacją po stronie, lub użycie dopełnienia przewijania, aby okienko nie nachodziło na inną treść. Powiadomienia, które nie wymagają działania użytkownika, mogą również spełniać to kryterium, zamykając się po utracie fokusu.
Inna forma zasłaniania może wystąpić, gdy Lightbox lub inne półprzezroczyste efekty nakładają się na element z fokusem. Chociaż zakrycie mniejsze niż 100 procent nie powodujecałkowitego zakrycia
komponentu, takie półprzezroczyste nakładanie się może spowodować niespełnienie KS 1.4.11 Kontrast elementów nietekstowych. Gdy wskaźnik fokusu może być zakryty przez półprzezroczysty element, zdolność wskaźnika fokusu do spełnienia KS 1.4.11 powinna zostać oceniona (i zaliczona), dopóki wskaźnik fokusu znajduje się pod półprzezroczystym elementem. Intencją w obu przypadkach jest, aby komponent otrzymujący fokus nigdy nie był zasłonięty do tego stopnia, że użytkownik nie będzie w stanie określić, który element ma fokus.
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 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 pojawi się dodatkowa treść, wypiera ona treść istniejącą. Przykładem jest akordeon. Po otwarciu akordeonu odsłaniana treść przesuwa istniejącą treść w dół strony. Ponieważ nowa treść nie zasłania istniejącej, nie może przesłonić 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.
-
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ą.
Modalne okna dialogowe
Prawidłowo zbudowane modalne okno dialogowe zawsze spełni to KS. Okno dialogowe przejmuje fokus po pojawieniu się, nawet jeśli otwiera się bezpośrednio nad elementem z fokusem, a zatem element otrzymujący fokus - okno dialogowe lub jeden z jego składników - jest widoczny. Prawidłowo zbudowane modalne okno dialogowe utrzymuje fokus i zapobiega interakcji poza nim dopóki nie zostanie zamknięte.
Na niespełnienie tego KS będzie narażona nakładka przypominająca okno dialogowe, która nie przejmuje fokusu po pojawieniu się i nie ogranicza interakcji do nakładki, ani nie odrzuca jej po utracie fokusu (umożliwiając tym samym przeniesienie fokusu do treści znajdującej się za nią), jeśli jest umieszczona w taki sposób, że może zasłonić inne elementy, na których można ustawić fokus.
Korzyści
- Widzący użytkownicy, którzy w obsłudze strony polegają na interfejsie klawiatury, będą mogli zobaczyć komponent, który uzyskuje fokus klawiatury. Do takich użytkowników należą ci, którzy polegają na klawiaturze lub urządzeniach korzystających z interfejsu klawiatury, w tym na poleceniach głosowych, oprogramowaniu typu
dmuchnij-wciągnij
(sip-and-puff), klawiaturach ekranowych, oprogramowaniu do skanowania oraz różnych technologiach wspomagających i alternatywnych klawiaturach. - Osoby z ograniczonym lub słabym wzrokiem, które mogą przede wszystkim używać wskaźnika do orientacji na ekranie i zmiany położenia, korzystają z wyraźnie widocznego wskazania bieżącego punktu interakcji z klawiaturą, szczególnie tam, gdzie powiększenie zmniejsza ogólną wyświetlaną część ekranu.
- Osoby z ograniczeniami uwagi, pamięci krótkotrwałej lub ograniczeniami w wykonywaniu czynności odnoszą korzyści, ponieważ mogą łatwiej odkryć, gdzie znajduje się fokus.
Przykłady
- Strona ma przyklejoną stopkę (przymocowaną u dołu rzutni). Podczas przewijania strony w dół element z fokusem nie jest całkowicie ukrywany przez stopkę, ponieważ treść w rzutni przewija się w górę, aby zawsze wyświetlać element z fokusem klawiatury za pomocą dopełnienia przewijania.
- Na stronie znajduje się pełnowymiarowe okno dialogowe do akceptacji plików cookie. Okno dialogowe jest modalne, co zapobiega dostępowi do innych elementów sterujących na stronie, dopóki nie zostanie zamknięte. Fokus nie jest zasłaniany, ponieważ większa część okna dialogowego do akceptacji plików cookie pozostaje na ekranie (przesłania je do momentu dokonania wyboru), zatem większa część wskaźnika fokusu klawiatury pozostaje widoczna.
- Powiadomienie jest wyświetlane w postaci przyklejonego nagłówka, a fokus klawiatury jest przenoszony na powiadomienie, dzięki czemu przynajmniej część wskaźnika fokusu jest widoczna. Powiadomienie znika, gdy traci fokus, więc nie zasłania żadnych innych elementów sterujących, a część poprzedniego wskaźnika fokusu klawiatury jest widoczna.
Treści powiązane
Treści powiązane służą wyłącznie celom informacyjnym, nie sugeruje się ich poparcia.
Techniki
Każdy numerowany element w tej sekcji reprezentuje technikę lub kombinację technik, które Grupa Robocza WCAG uważa za wystarczające do spełnienia tego kryterium sukcesu. Nie jest jednak konieczne stosowanie tych konkretnych technik. Aby uzyskać informacje na temat stosowania z innych technik, zobacz Objaśnienie technik dla kryteriów sukcesu WCAG, w szczególności sekcję „Inne techniki”.
Wystarczające techniki
Błędy
Poniżej przedstawiono typowe błędy, które Grupa Robocza WCAG uważa za naruszenia tego kryterium sukcesu.
Kluczowe pojęcia
część treści internetowej postrzegana przez użytkownika jako pojedyncza kontrolka dla określonej funkcji
Złożone komponenty interfejsu użytkownika mogą być implementowane w postaci pojedynczego elementu. „Komponenty” nie są tu związane z konkretną techniką programistyczną, a raczej z tym, co użytkownik postrzega jako oddzielne elementy sterujące.
Do komponentów interfejsu użytkownika należą elementy formularzy i łączy, jak również komponenty generowane przez skrypty.
To, co rozumie się tutaj pod pojęciem „komponent” lub „składnik interfejsu użytkownika”, jest czasami nazywane także „elementem interfejsu użytkownika”.