# Zarządzanie fokusem Source: https://ordergroup.co/pl/slownik/zarzadzanie-fokusem/ Last updated: 2026-10-10 > Zarządzanie fokusem dla zamawiających aplikację: kryteria WCAG dotyczące fokusu, okna dialogowe i pułapka fokusu, fokus po nawigacji oraz React Native i iOS. [Dostępność](https://ordergroup.co/pl/slownik/dostepnosc/) 3 min czytania # Zarządzanie fokusem Zarządzanie fokusem (fokus klawiatury i czytnika ekranu) Inne nazwy: kolejność fokusu, pułapka fokusu, focus management Definicja Zarządzanie fokusem to sposób, w jaki aplikacja wybiera element, który dostaje fokus klawiatury lub czytnika ekranu, gdy ekran się zmienia: po nawigacji, przy oknie dialogowym albo błędzie. Dzięki niemu użytkownik zawsze wie, gdzie jest, i nie trafia na ukryte kontrolki. Cytuj hasło Tekst "Zarządzanie fokusem". Order Group, Słownik oprogramowania, 10 października 2026. https://ordergroup.co/pl/slownik/zarzadzanie-fokusem/ HTML `Zarządzanie fokusem - Order Group` Sprawdzone przez [Daria Gusieva](https://ordergroup.co/pl/autorzy/daria-gusieva/), Head of Design Ostatni przegląd 10 października 2026 ## Jak działa zarządzanie fokusem Fokus klawiatury wskazuje element, który przyjmuje działania użytkownika; osoba korzystająca z klawiatury widzi go jako wyróżnioną ramkę i przesuwa klawiszem Tab. Czytnik ekranu ma własny fokus, który użytkownik przesuwa gestami lub klawiszami i słyszy zamiast widzieć. Oba często stoją na tym samym elemencie, ale czytnik odczyta też tekst, do którego fokus klawiatury nigdy nie trafia. Gdy nic na ekranie się nie zmienia, kolejność fokusu wynika z kolejności elementów w kodzie. Zarządzanie fokusem dotyczy chwil, w których ekran się zmienia: ładuje się nowa strona, otwiera się okno dialogowe, treść zostaje dodana lub usunięta albo pojawia się błąd. W każdej takiej chwili aplikacja musi celowo gdzieś ustawić fokus. Jeśli tego nie zrobi, zgaduje platforma. Na stronie internetowej fokus może zostać na przycisku, którego już nie ma, i wrócić na początek dokumentu. W aplikacji mobilnej czytnik ekranu może trafić na pierwszy znaleziony element, często przycisk na pasku narzędzi zamiast tytułu ekranu. Użytkownik musi wtedy przeszukać ekran, żeby dowiedzieć się, co się stało. Najwięcej uwagi wymagają okna dialogowe. Wzorzec modalnego okna dialogowego z W3C ARIA Authoring Practices Guide opisuje trzy zachowania: gdy okno modalne się otwiera, fokus przechodzi do niego; dopóki jest otwarte, fokus zostaje w środku i nie dociera do strony pod spodem; gdy się zamyka, fokus wraca do elementu, który je otworzył, zwykle do naciśniętego przycisku. W przeglądarce aria-modal i natywny element dialog otwierany metodą showModal() pomagają utrzymać czytnik ekranu w oknie. Na iOS odpowiednikiem jest właściwość accessibilityViewIsModal, a na Androidzie treść za oknem można ukryć przed TalkBackiem za pomocą importantForAccessibility. Kryteria WCAG, którym służy zarządzanie fokusem KryteriumPoziomCo oznacza w aplikacji 2.1.2 Brak pułapki klawiaturowejAFokus klawiatury zawsze może opuścić komponent; okno modalne spełnia to kryterium, bo użytkownik może je zamknąć, np. klawiszem Escape2.4.3 Kolejność fokusuAFokus przechodzi w kolejności, która zachowuje sens i obsługę, także przy wejściu do okien dialogowych i wyjściu z nich2.4.7 Widoczny fokusAAFokus klawiatury ma widoczny wskaźnik2.4.11 Fokus niezasłonięty (minimum)AAPrzyklejone nagłówki, banery i okna czatu nie zasłaniają całkowicie kontrolki z fokusem3.2.1 Po otrzymaniu fokusuASamo otrzymanie fokusu nie zmienia kontekstu, np. nie otwiera nowej strony4.1.3 Komunikaty o stanieAAKomunikaty takie jak {qzapisano} są odczytywane bez odciągania fokusu od zadania użytkownika ## Co zarządzanie fokusem oznacza dla Twojego oprogramowania Problemy z fokusem rzadko widać na zrzutach ekranu i w przeglądach projektu, bo kryją się w przejściach. Wymagania dla zamawianej aplikacji: - Dla każdego ekranu projekt określa, gdzie trafia fokus po wejściu: zwykle na nagłówek ekranu albo na przycisk wstecz, jeśli tego oczekuje konwencja platformy. - Po czynności, która zmienia ekran, np. wysłaniu formularza, fokus przechodzi do wyniku: nagłówka potwierdzenia albo pierwszego pola z błędem. - Każde okno dialogowe działa według tych samych zasad: fokus wchodzi, zostaje w środku i wraca do przycisku, który je otworzył. Buduje się to raz, we wspólnym komponencie, i testuje na każdej platformie. - Treść, która pojawia się bez działania użytkownika, np. pasek postępu albo odliczanie, jest ogłaszana jako komunikat o stanie, a nie przejmuje fokusu. - Strony z przyklejonym nagłówkiem albo banerem cookies lub czatu są sprawdzane klawiaturą, bo te elementy mogą zasłonić pole z fokusem. - Testy obejmują klawiaturę i czytnik ekranu na każdej platformie. Poprawka, która działa na Androidzie, może zawieść na iOS, więc retesty obejmują obie. Piszesz specyfikację? Dodaj Zarządzanie fokusem do checklisty wymagań Zbierz hasła, których dotyczy Twój projekt, i dostań ich wymagania wobec systemu w jednym mailu, gotowe do zapytania ofertowego. ## Z naszych projektów W aplikacji mobilnej Centrum Komunikacji, zbudowanej w React Native dla osób głuchych, słabosłyszących, niewidomych i głuchoniewidomych, w sierpniu 2026 r. ustaliliśmy, że właściwość accessibilityViewIsModal ustawiona na komponencie Modal z React Native nigdy nie docierała do widoku natywnego. Modal przekazuje dalej tylko wymienione w nim właściwości, a tej wśród nich nie było. Okno wyboru źródła pliku było wyświetlane jako przezroczysta nakładka (styl prezentacji overFullScreen), przy której ekran pod spodem zostaje w drzewie dostępności. Nasza analiza drzewa komponentów wykazała za oknem 25 kontrolek dostępnych dla VoiceOvera, w tym menu i powiadomienia, a w samym oknie 4. Tło okna i tak było w pełni nieprzezroczyste, więc przełączyliśmy je na styl fullScreen, w którym iOS sam usuwa ekran pod spodem z drzewa dostępności, i usunęliśmy martwą właściwość z trzech komponentów, które jej używały. Analiza obejmowała tylko drzewo Reacta, więc przed scaleniem zmian poprosiliśmy o test na fizycznym urządzeniu z VoiceOverem. We wrześniu 2026 r. niewidomy ekspert ds. dostępności, testując aplikację produkcyjną, zgłosił, że fokus na ekranie usługi zaczynał się od przycisku zamówienia, a użytkownicy oczekują go na górze ekranu. Po poprawce fokus na ostatnim ekranie zamawiania trafiał na przycisk rozmiaru tekstu zamiast na nagłówek zamówienie przyjęte, więc zmiana przeszła kolejną rundę poprawek i retestów. W projekcie dla PSONI testy mobilne Generatora ETR we wrześniu i październiku 2026 r. wykazały, że po otwarciu dokumentu fokus przeskakiwał na przycisk zamknięcia zamiast na tekst, a podczas wgrywania pliku trafiał na nagłówek strony zamiast na informację o postępie. Te punkty są częścią mobilnej rundy z czytnikiem ekranu, która wciąż jest w testach. ## Powiązane hasła - [Audyt dostępności](https://ordergroup.co/pl/slownik/audyt-dostepnosci/) Audyt dostępności (audyt WCAG) Audyt dostępności to uporządkowane sprawdzenie strony lub aplikacji pod kątem standardu, zwykle WCAG 2.1 lub 2.2 AA. Łączy automatyczne skany z ręcznymi testami klawiaturą i czytnikiem ekranu, a kończy się raportem z każdym niespełnionym kryterium, miejscem błędu i sposobem poprawy. - [Testy z czytnikiem ekranu](https://ordergroup.co/pl/slownik/testy-z-czytnikiem-ekranu/) Testy z czytnikiem ekranu (VoiceOver, TalkBack, NVDA) Testy z czytnikiem ekranu to sprawdzanie aplikacji lub strony VoiceOverem, TalkBackiem lub NVDA, czyli programami, dzięki którym osoby niewidome i słabowidzące słyszą interfejs. Tester sprawdza na każdym ekranie, co jest odczytywane, w jakiej kolejności i czy da się dokończyć każde zadanie. - [WCAG 2.2](https://ordergroup.co/pl/slownik/wcag-2-2/) Web Content Accessibility Guidelines 2.2 WCAG 2.2 to standard W3C dotyczący dostępności treści internetowych. Zawiera 86 sprawdzalnych kryteriów sukcesu na trzech poziomach: A, AA i AAA. Treść zgodna z WCAG 2.2 spełnia też wersję 2.1, do której na poziomie AA odsyłają przepisy UE i Polski o stronach i aplikacjach. ## Źródła 1. [Understanding Success Criterion 2.4.3: Focus Order](https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html) - W3C 2. [Understanding Success Criterion 2.4.11: Focus Not Obscured (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html) - W3C 3. [ARIA Authoring Practices Guide: Dialog (Modal) Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) - W3C 4. [Accessibility in React Native](https://reactnative.dev/docs/accessibility) - React Native To hasło sprawdza Daria Gusieva. Zapytaj, co oznacza w Twoim projekcie. [Zapytaj inżyniera](https://ordergroup.co/pl/kontakt/) ## Najczęstsze pytania ![Daria Gusieva](https://ordergroup.co/media/images/T02DHCC1Z-U0B48S6GQTV-7fae05753481-512.format-webp.webp) Daria Gusieva Head of Design [Porozmawiaj z inżynierem](https://ordergroup.co/pl/kontakt/) ### Czym jest pułapka fokusu? Pułapka fokusu (focus trap) utrzymuje fokus klawiatury i czytnika ekranu w komponencie, zwykle w modalnym oknie dialogowym, do jego zamknięcia. W oknach modalnych jest poprawna, a wszędzie indziej błędna: pułapka na zwykłej stronie nie pozwala osobie z klawiaturą jej opuścić i narusza kryterium 2.1.2. ### Gdzie ustawić fokus, gdy otwiera się nowy ekran? Na elemencie, który mówi użytkownikowi, gdzie jest: zwykle na nagłówku ekranu albo na przycisku Wstecz, jeśli tego oczekuje konwencja platformy. Ustal jedną zasadę dla całej aplikacji i przetestuj ją na każdej platformie. ### Czy zarządzanie fokusem dotyczy tylko osób korzystających z klawiatury? Nie. Osoby korzystające z czytnika ekranu zależą od niego tak samo, a na urządzeniach mobilnych to właśnie one są główną grupą. Fokus w złym miejscu na telefonie oznacza, że użytkownik najpierw usłyszy niewłaściwą treść. ### Dlaczego okno dialogowe działało na Androidzie, a na iOS nie? Każda platforma inaczej izoluje okna dialogowe, a frameworki wieloplatformowe nie zawsze przekazują właściwości dostępności do widoku natywnego. Testuj okna osobno z VoiceOverem i TalkBackiem i sprawdzaj zachowanie natywne, a nie tylko właściwości komponentu. Budujesz system, w którym liczy się Zarządzanie fokusem? Zobacz, jak budujemy oprogramowanie w tej dziedzinie: case studies i technologie, których używamy. [Zobacz: Projektowanie UX](https://ordergroup.co/pl/uslugi/projektowanie/projektowanie-ux/) Checklista wymagań Do każdego hasła wyślemy definicję i to, czego wymaga od Twojego oprogramowania. Bezpłatnie, bez rozmowy handlowej. Checklista jest pusta. Dodaj hasło plusem przy jego nazwie.