Funkcjonalność · Poziom AA

2.4.11 Fokus niezakryty (minimum)

Element z fokusem nie może być całkowicie zasłonięty przez przyklejone lub nachodzące elementy strony.

Krótko

Element z fokusem nie może być całkowicie zasłonięty przez przyklejone lub nachodzące elementy strony.

Problem w praktyce

Użytkownik przechodzi po stronie klawiaturą. Fokus trafia na link albo przycisk, ale element znika pod przyklejonym nagłówkiem, paskiem cookie, widgetem czatu, dolnym paskiem akcji, modalem albo panelem bocznym.

Problem widać szczególnie przy automatycznym przewijaniu do kotwicy, przy linkach „przejdź do treści”, po walidacji formularza, przy dynamicznie otwieranych panelach i na małych ekranach. Strona technicznie przenosi fokus, ale użytkownik nie widzi, gdzie aktualnie jest.

W 2.4.11 chodzi o minimum: element z fokusem nie może być całkowicie zasłonięty przez treść utworzoną przez autora strony. Częściowe zasłonięcie jest ryzykowne i może łączyć się z 2.4.12 albo 2.4.13, ale nie opisujemy go automatycznie jako naruszenia 2.4.11.

Kogo to dotyczy

  • Osób korzystających z klawiatury, które śledzą aktualne położenie fokusu wzrokiem.
  • Osób słabowidzących, które powiększają stronę i widzą tylko fragment ekranu.
  • Osób korzystających z czytników ekranu razem z widocznym fokusem albo trybem powiększenia.
  • Osób używających przełączników, urządzeń alternatywnych albo sterowania głosem.
  • Wszystkich użytkowników na małych ekranach, gdzie sticky nagłówki, banery i czaty łatwo zasłaniają treść.

Dobry przykład

Strona ma przyklejony nagłówek, ale po przejściu do sekcji link lub nagłówek nie ląduje pod menu. Autor przewidział odstęp dla przewijania do kotwic i testuje stronę klawiaturą przy wszystkich nakładkach.

  • Przy sticky headerze użyj `scroll-padding-top` albo `scroll-margin-top` dla sekcji i kotwic.
  • Zostaw odpowiedni odstęp przy dolnych paskach, banerach cookie i widgetach czatu.
  • Gdy otwierasz modal albo panel, przenieś fokus do warstwy i nie zostawiaj fokusu na przykrytej treści.
  • Jeśli element jest ukryty za warstwą, nie powinien być osiągalny klawiaturą, dopóki warstwa jest modalna.
  • Sprawdź stronę Tabem, Shift+Tabem i linkami do kotwic na desktopie oraz mobile.

Zły przykład

Użytkownik naciska Tab, ale aktualny link trafia dokładnie pod przyklejony nagłówek. Fokus istnieje w DOM i czytnik ekranu może go ogłosić, ale wizualnie użytkownik nie widzi aktywnego elementu.

  • Sticky header całkowicie zasłania link po przewinięciu do sekcji.
  • Fokus przechodzi do treści pod otwartym modalem albo panelem bocznym.
  • Dolny pasek akcji zakrywa aktywny przycisk.
  • Widget czatu zasłania link lub przycisk w prawym dolnym rogu.
  • Przewinięcie do kotwicy chowa nagłówek albo kontrolkę pod przyklejonym menu.

Przykłady kodu

Kod — CSS

html {
  scroll-padding-top: 5rem;
}

.article-section {
  scroll-margin-top: 5rem;
}

`scroll-padding-top` pomaga przy przewijaniu całej strony, a `scroll-margin-top` pomaga konkretnym sekcjom i kotwicom. Wartość powinna odpowiadać realnej wysokości przyklejonego nagłówka z zapasem.

Kod — CSS

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
}

.main-content {
  padding-top: 1rem;
}

.main-content :focus-visible {
  outline: 3px solid #5b2aa0;
  outline-offset: 4px;
}

Przyklejony nagłówek jest dopuszczalny, ale trzeba zostawić przestrzeń i testować, czy fokusowane elementy nie chowają się pod warstwą. Sam wyraźny outline nie wystarczy, jeśli cały element jest zasłonięty.

Kod — CSS

.site-header {
  position: fixed;
  top: 0;
  z-index: 100;
}

.section-heading {
  scroll-margin-top: 0;
}

To zły przykład. Nagłówek jest przyklejony nad treścią, ale sekcje nie mają żadnego marginesu przewijania. Po przejściu do kotwicy element z fokusem może znaleźć się całkowicie pod nagłówkiem.

Kod — HTML

<main inert>
  <a href="/konto/ustawienia">
    Ustawienia konta
  </a>
</main>

<dialog open>
  <h2>Potwierdź działanie</h2>
  <p>Fokus powinien pozostać w tym oknie, dopóki jest otwarte.</p>
  <button type="button">
    Zamknij
  </button>
</dialog>

To skrócony wzorzec koncepcyjny. Gdy warstwa modalna przykrywa stronę, treść pod spodem nie powinna dalej przyjmować fokusu. W realnym komponencie trzeba też zadbać o przeniesienie fokusu do okna i logiczny powrót po zamknięciu.

Przykład graficzny

Źle

Przyklejony nagłówek
Link z fokusem
Treść strony

Element z fokusem jest całkowicie pod warstwą.

Ryzykownie

Przyklejony nagłówek
Przycisk z fokusem
Treść strony

Fokus jest widoczny tylko częściowo albo za blisko warstwy.

Dobrze

Przyklejony nagłówek
Link z fokusem
Treść strony

Element z fokusem ma odstęp i jest widoczny w całości.

To jest statyczny schemat zasłonięcia fokusu. Pokazuje, czy przyklejona warstwa całkowicie ukrywa aktualny element, czy zostawia go widocznym.

Jak sprawdzić

  1. Znajdź elementy przyklejone albo nachodzące na treść: nagłówki, banery, czaty, paski dolne, modale i panele.
  2. Przejdź po stronie klawiaturą od początku do końca, używając Tab i Shift+Tab.
  3. Sprawdź, czy każdy element z fokusem jest przynajmniej częściowo widoczny.
  4. Użyj linków do kotwic, skip linków i linków prowadzących do sekcji w środku strony.
  5. Otwórz modal, menu albo panel i sprawdź, czy fokus nie trafia do treści przykrytej warstwą.
  6. Sprawdź stronę przy powiększeniu, na wąskim ekranie i z otwartymi banerami, które zwykle pojawiają się użytkownikowi.
  7. Jeśli fokus chowa się całkowicie, popraw odstępy, przewijanie albo zarządzanie fokusem.

Co sprawdzi automat, a czego nie

Automat może wykryć

  • część elementów `position: fixed` i `position: sticky`, które mogą zasłaniać treść,
  • część problemów z fokusem w modalach i panelach,
  • brak widocznego wskaźnika fokusu, choć to jest głównie temat 2.4.7,
  • część błędów struktury, które prowadzą do fokusu pod warstwą.

Automat nie oceni pewnie

  • czy element z fokusem jest całkowicie zasłonięty w konkretnym widoku,
  • czy baner cookie, czat albo pasek dolny pojawia się tylko w wybranych warunkach,
  • czy przewinięcie do kotwicy ustawia aktywny element pod nagłówkiem,
  • czy problem występuje przy powiększeniu albo na małym ekranie,
  • czy częściowe zasłonięcie jest tylko ryzykiem, czy wchodzi już w zakres innego kryterium.

Typowe błędy

  • Sticky header bez `scroll-margin-top` albo `scroll-padding-top` dla kotwic.
  • Skip link prowadzący do elementu schowanego pod nagłówkiem.
  • Baner cookie zasłaniający przyciski na dole ekranu.
  • Widget czatu przykrywający aktywny link lub przycisk.
  • Modal, który wizualnie przykrywa stronę, ale fokus nadal trafia do elementów pod spodem.
  • Panel boczny zasłaniający część strony bez ograniczenia fokusu do panelu.
  • Testowanie fokusu tylko na dużym ekranie, bez powiększenia i bez banerów widocznych dla użytkownika.

Powiązane kryteria