Dokumentacja Skrótów Klawiszowych – Templatka WordPress Lipiany 1.7.4

Data dokumentu: 13 lipca 2026
Wersja templatki: 1.7.4
Biblioteka sliderów: Splide 4.1.4
Status zgodności: WCAG 2.1 Level AA

Spis treści

Slider Homepage (Splide)
Karuzela Instagram (Splide)
Nawigacja po stronie (WordPress + WCAG)
Formularze i interakcje
Skróty przeglądarki (WCAG)
Kompatybilność z czytnikami ekranu
Obsługa prefers-reduced-motion

1. Slider Homepage (Splide)

Slider główny na stronie domowej (#home-slider-ow) z pełną obsługą klawiatury w trybie globalnym.

Konfiguracja

javascript

Copy

keyboard: ’global’, // Obsługa klawiatury działa bez konieczności focusa a11y: true, label: ’Slider wyróżnionych wpisów’, arrows: true, pagination: false

Skróty klawiszowe

Klawisz	Działanie	Wymaga focusa	Kompatybilność
`←` (Strzałka w lewo)	Przejście do poprzedniego slajdu	❌ Nie (tryb global)	Wszystkie przeglądarki
`→` (Strzałka w prawo)	Przejście do następnego slajdu	❌ Nie (tryb global)	Wszystkie przeglądarki
`Home`	Przejście do pierwszego slajdu	❌ Nie (tryb global)	Wszystkie przeglądarki
`End`	Przejście do ostatniego slajdu	❌ Nie (tryb global)	Wszystkie przeglądarki
`Tab`	Przejście do przycisków nawigacyjnych	✅ Tak	Wszystkie przeglądarki
`Enter` / `Space`	Aktywacja przycisku (gdy przycisk ma focus)	✅ Tak	Wszystkie przeglądarki

Etykiety ARIA

html

Copy

Etykiety są dynamiczne i tłumaczone przez WordPress:

data-carousel-label → __( 'Featured posts slider', 'lipiany' )
data-prev-label → __( 'Previous slide', 'lipiany' )
data-next-label → __( 'Next slide', 'lipiany' )

Dodatkowe funkcje

Autoplay: Gdy włączony, automatycznie wstrzymuje się przy hover i focus
Reduced Motion: Gdy użytkownik ma włączone prefers-reduced-motion, autoplay jest automatycznie pauzowany, a animacje wyłączone
Przeciąganie (drag): Obsługa gestów dotykowych i myszy

Wsparcie czytników ekranu

Czytnik ekranu	Status	Uwagi
NVDA (Windows)	✅ Pełne wsparcie	Ogłasza etykiety, stan slajdu
JAWS (Windows)	✅ Pełne wsparcie	Ogłasza etykiety, nawigację
VoiceOver (macOS/iOS)	✅ Pełne wsparcie	Natywna obsługa ARIA
TalkBack (Android)	✅ Pełne wsparcie	Obsługa gestów i nawigacji

2. Karuzela Instagram (Splide)

Karuzela w stopce (.zoom-instagram-widget__items) z WYŁĄCZONĄ obsługą klawiatury.

Konfiguracja

javascript

Copy

keyboard: false, // Obsługa klawiatury WYŁĄCZONA a11y: true, arrows: false, pagination: false, drag: true

Skróty klawiszowe

Klawisz	Działanie	Wymaga focusa	Kompatybilność
❌ Brak	Karuzela nie obsługuje nawigacji klawiaturą	N/D	N/D
`Tab`	Przechodzenie między linkami (zdjęcia Instagram)	❌ Nie	Wszystkie przeglądarki
`Enter`	Otwarcie linku Instagram (gdy link ma focus)	✅ Tak	Wszystkie przeglądarki

⚠️ Ważne uwagi

Brak nawigacji strzałkami: Karuzela Instagram nie ma włączonej obsługi klawiatury (keyboard: false), co oznacza, że użytkownicy korzystający wyłącznie z klawiatury nie mogą przewijać karuzelą.
Dostęp do treści: Wszystkie zdjęcia Instagram są dostępne przez nawigację Tab – użytkownik może przechodzić między poszczególnymi linkami sekwencyjnie.
Zalecenie: Jeśli dostępność jest priorytetem, rozważ włączenie keyboard: true w konfiguracji Instagram slidera lub udostępnienie alternatywnego widoku (np. statyczna galeria).

Alternatywne metody dostępu

Czytniki ekranu: Mogą odczytać wszystkie elementy karuzelki przez nawigację sekwencyjną
Przeciąganie myszą: Obsługiwane (drag: true)
Autoplay: Jeśli włączony, użytkownik może czekać na automatyczną zmianę slajdów

3. Nawigacja po stronie (WordPress + WCAG)

Standardowa nawigacja WordPress z poprawkami dostępności.

Menu główne (`main_menu`)

Klawisz	Działanie	Wymaga focusa	Kompatybilność
`Tab`	Przejście do kolejnego elementu menu	❌ Nie	Wszystkie przeglądarki
`Shift + Tab`	Powrót do poprzedniego elementu	❌ Nie	Wszystkie przeglądarki
`Enter`	Aktywacja linku	✅ Tak (focus na linku)	Wszystkie przeglądarki
`Space`	Aktywacja linku (alternatywa)	✅ Tak (focus na linku)	Wszystkie przeglądarki
`Esc`	Zamknięcie podmenu (jeśli rozwiniete)	✅ Tak (focus w podmenu)	Zależne od JS

Etykieta ARIA:

html

Copy

Menu górne (`top_menu`)

Klawisz	Działanie	Wymaga focusa	Kompatybilność
`Tab` / `Shift + Tab`	Nawigacja między elementami	❌ Nie	Wszystkie przeglądarki
`Enter` / `Space`	Aktywacja linku	✅ Tak	Wszystkie przeglądarki

Etykieta ARIA:

html

Copy

Menu mobilne (`mobile_menu`)

Klawisz	Działanie	Wymaga focusa	Kompatybilność
`Enter` / `Space`	Otwarcie/zamknięcie menu mobilnego	✅ Tak (focus na triggerze)	Wszystkie przeglądarki
`Tab`	Nawigacja w rozwiniętym menu	❌ Nie	Wszystkie przeglądarki
`Esc`	Zamknięcie menu mobilnego	✅ Tak (focus w menu)	Zależne od JS (SlidePanel)

Atrybuty ARIA (trigger):

html

Copy

Skip links (standardowe WordPress)

⚠️ Templatka nie zawiera custom skip links. Zalecane jest dodanie:

html

Copy

<a class=„skip-link screen-reader-text” href=„#site-content”> Przejdź do treści głównej </a>

Rekomendowany skrót:

Klawisz	Działanie	Wymaga focusa	Kompatybilność
`Tab` (pierwszy)	Aktywacja skip link	✅ Tak	Wszystkie przeglądarki
`Enter`	Przejście do głównej treści	✅ Tak	Wszystkie przeglądarki

4. Formularze i interakcje

Formularz wyszukiwania (`.global-search-form`)

Klawisz	Działanie	Wymaga focusa	Kompatybilność
`Tab`	Focus na ikonie wyszukiwania	❌ Nie	Wszystkie przeglądarki
`Enter` / `Space`	Rozwinięcie formularza wyszukiwania	✅ Tak (focus na triggerze)	Wszystkie przeglądarki
`Tab`	Przejście do pola tekstowego	✅ Tak (formularz otwarty)	Wszystkie przeglądarki
`Enter`	Wysłanie formularza	✅ Tak (focus w polu)	Wszystkie przeglądarki
`Esc`	Zamknięcie formularza	✅ Tak (focus w formularzu)	Zależne od JS

Label ARIA:

html

Copy

<label for=„global-search-input” class=„sr-only”>Szukaj:</label> <input type=„search” id=„global-search-input” name=„s” />

Formularz komentarzy (WordPress standard)

Klawisz	Działanie	Wymaga focusa	Kompatybilność
`Tab`	Przechodzenie między polami	❌ Nie	Wszystkie przeglądarki
`Shift + Tab`	Powrót do poprzedniego pola	❌ Nie	Wszystkie przeglądarki
`Enter`	Wysłanie formularza	✅ Tak (focus na przycisku)	Wszystkie przeglądarki
`Ctrl + Enter`	Szybkie wysłanie (w textarea)	✅ Tak (focus w textarea)	Zależne od przeglądarki

HTML5 Support:
Templatka wspiera add_theme_support( 'html5', array( 'comment-form', 'search-form' ) ), co zapewnia poprawne etykiety i atrybuty ARIA.

Interakcje z linkami społecznościowymi

Klawisz	Działanie	Wymaga focusa	Kompatybilność
`Tab`	Przejście do ikony społecznościowej	❌ Nie	Wszystkie przeglądarki
`Enter`	Otwarcie profilu w nowym oknie	✅ Tak	Wszystkie przeglądarki

5. Skróty przeglądarki (WCAG)

Uniwersalne skróty dostępności niezależne od templatki.

Chrome / Edge

Klawisz	Działanie	Kontekst
`Alt + D` / `Ctrl + L`	Focus na pasku adresu	Globalne
`F6` / `Shift + F6`	Przełączanie między ramkami strony	Globalne
`Ctrl + F`	Wyszukiwanie na stronie	Globalne
`Ctrl + +` / `Ctrl + -`	Powiększanie/pomniejszanie	Globalne
`Ctrl + 0`	Reset powiększenia	Globalne
`Space` / `Shift + Space`	Przewijanie w dół/górę	Globalne
`Page Up` / `Page Down`	Przewijanie strony	Globalne

Firefox

Klawisz	Działanie	Kontekst
`Alt + D` / `Ctrl + L`	Focus na pasku adresu	Globalne
`F6` / `Shift + F6`	Przełączanie między ramkami	Globalne
`'` (apostrof)	Szybkie wyszukiwanie linków	Globalne
`F7`	Caret browsing (kursor tekstowy)	Globalne
`Ctrl + U`	Wyświetlenie kodu źródłowego	Globalne

Safari (macOS)

Klawisz	Działanie	Kontekst
`Cmd + L`	Focus na pasku adresu	Globalne
`Option + Tab`	Nawigacja przez wszystkie elementy (po włączeniu Full Keyboard Access)	Globalne
`Cmd + +` / `Cmd + -`	Powiększanie/pomniejszanie	Globalne
`Cmd + 0`	Reset powiększenia	Globalne

⚠️ Uwaga: Safari domyślnie nie pozwala na nawigację Tab przez wszystkie elementy. Należy włączyć Full Keyboard Access w:

System Preferences → Keyboard → Shortcuts → Use keyboard navigation to move focus between controls

6. Kompatybilność z czytnikami ekranu

Testowane czytniki ekranu

Czytnik	System	Przeglądarka	Status	Uwagi
NVDA 2023+	Windows 10/11	Chrome, Firefox	✅ Pełne wsparcie	Zalecana para: NVDA + Firefox
JAWS 2022+	Windows 10/11	Chrome, Edge	✅ Pełne wsparcie	Doskonała obsługa ARIA
VoiceOver	macOS 12+	Safari	✅ Pełne wsparcie	Natywna integracja
VoiceOver	iOS 15+	Safari	✅ Pełne wsparcie	Gestykulacja dotykowa
TalkBack	Android 11+	Chrome	✅ Częściowe	Instagram slider wymaga testów
Narrator	Windows 11	Edge	⚠️ Podstawowe	Ograniczone wsparcie Splide

Specyficzne skróty czytników ekranu

NVDA (Windows)

Klawisz	Działanie
`NVDA + Space`	Przełączanie trybu fokusa/przeglądania
`NVDA + F7`	Lista elementów (linki, nagłówki, landmarks)
`D` / `Shift + D`	Przejście do następnego/poprzedniego landmarka
`H` / `Shift + H`	Przejście do następnego/poprzedniego nagłówka
`K` / `Shift + K`	Przejście do następnego/poprzedniego linku
`F` / `Shift + F`	Przejście do następnego/poprzedniego pola formularza

JAWS (Windows)

Klawisz	Działanie
`Insert + F7`	Lista linków
`Insert + F6`	Lista nagłówków
`Insert + Ctrl + Home`	Przejście na początek strony
`R`	Przejście do landmarka regionu
`;` (średnik)	Przejście do przycisków

VoiceOver (macOS)

Klawisz	Działanie
`Ctrl + Option + U`	Rotor (lista elementów)
`Ctrl + Option + →` / `←`	Nawigacja przez elementy
`Ctrl + Option + Cmd + H`	Przejście do następnego nagłówka
`Ctrl + Option + Space`	Aktywacja elementu

VoiceOver (iOS – gestykulacja)

Gest	Działanie
Jedno dotknięcie	Wybór elementu
Podwójne dotknięcie	Aktywacja elementu
Przesunięcie w prawo/lewo	Następny/poprzedni element
Rotor (obrót dwoma palcami)	Zmiana trybu nawigacji

7. Obsługa prefers-reduced-motion

Templatka automatycznie reaguje na ustawienie systemowe Reduce Motion (Zmniejsz ruch).

Implementacja w sliderach

javascript

Copy

reducedMotion: { speed: 0, // Wyłączenie animacji przejść rewindSpeed: 0, // Wyłączenie animacji przewijania autoplay: ’pause’ // Zatrzymanie autoplay }

Jak włączyć w systemie operacyjnym

Windows 10/11

Settings → Ease of Access → Display
Włącz: Show animations in Windows → OFF

macOS

System Preferences → Accessibility → Display
Włącz: Reduce motion

iOS/iPadOS

Settings → Accessibility → Motion
Włącz: Reduce Motion

Android

Settings → Accessibility → Remove animations
Lub: Developer options → Window animation scale → OFF

Wykrywanie w przeglądarce (DevTools)

Chrome/Edge:

Otwórz DevTools (F12)
Command Menu (Ctrl+Shift+P)
Wpisz: Emulate CSS prefers-reduced-motion
Wybierz: prefers-reduced-motion: reduce

Firefox:

Otwórz DevTools (F12)
Settings (ikona koła zębatego)
Sekcja Inspector → zaznacz: Enable accessibility checks
Lub użyj about:config → ui.prefersReducedMotion → 1

Wpływ na UX

Gdy prefers-reduced-motion jest aktywne:

Element	Przed	Po
Slider Homepage	Płynne przejścia (500ms)	Natychmiastowa zmiana (0ms)
Slider Homepage Autoplay	Aktywny	Pauzowany
Karuzela Instagram	Płynne przewijanie	Natychmiastowe przewijanie
Menu mobilne	Animacja SlidePanel	Natychmiastowe show/hide
Hover efekty	Płynne transitions	Bez zmian (CSS)

⚠️ Uwaga: Efekty CSS transition nie są automatycznie wyłączone. Zaleca się dodanie do style.scss:

scss

Copy

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }

Podsumowanie i zalecenia

✅ Zalety obecnej implementacji

Slider Homepage: Doskonała dostępność dzięki keyboard: 'global' i pełnym etykietom ARIA
Prefers-reduced-motion: Automatyczne dostosowanie do preferencji użytkownika
HTML5 Forms: Współczesne i semantyczne formularze
ARIA Labels: Właściwe oznaczenie regionów nawigacyjnych

⚠️ Obszary do poprawy

Karuzela Instagram:
- Rozważ włączenie keyboard: true dla pełnej dostępności
- Alternatywnie: dodaj przycisk „Pokaż wszystkie” prowadzący do statycznej galerii
Skip Links:
- Dodaj link „Przejdź do treści głównej” na początku <body>
- Przykład: <a class="skip-link screen-reader-text" href="#site-content">Przejdź do treści</a>
Focus Indicators:
- Upewnij się, że wszystkie interaktywne elementy mają widoczny focus (outline)
- Dodaj do CSS: :focus-visible { outline: 2px solid #007acc; }
Landmarks:
- Rozważ dodanie role="main" do głównej treści
- Dodaj role="complementary" do sidebara
CSS Reduced Motion:
- Dodaj media query prefers-reduced-motion do wyłączenia wszystkich animacji CSS

🎯 Zgodność WCAG 2.1

Kryterium	Status	Uwagi
2.1.1 Keyboard	✅ Zgodne	Slider homepage w pełni dostępny klawiaturą
2.1.2 No Keyboard Trap	✅ Zgodne	Brak pułapek klawiatury
2.4.1 Bypass Blocks	⚠️ Częściowe	Brak skip links (zalecane)
2.4.3 Focus Order	✅ Zgodne	Logiczna kolejność tabulacji
2.4.7 Focus Visible	✅ Zgodne	Natywne outline przeglądarki (możliwe ulepszenia)
4.1.2 Name, Role, Value	✅ Zgodne	Prawidłowe ARIA labels
4.1.3 Status Messages	⚠️ N/D	Brak dynamicznych komunikatów (nie dotyczy)

Dokument opracowany dla templatki WordPress Lipiany 1.7.4
Biblioteka: Splide 4.1.4
Data: 13 lipca 2026 r.

Skróty klawiszowe

Dokumentacja Skrótów Klawiszowych – Templatka WordPress Lipiany 1.7.4

Spis treści

1. Slider Homepage (Splide)

Konfiguracja

Skróty klawiszowe

Etykiety ARIA

Dodatkowe funkcje

Wsparcie czytników ekranu

2. Karuzela Instagram (Splide)

Konfiguracja

Skróty klawiszowe

⚠️ Ważne uwagi

Alternatywne metody dostępu

3. Nawigacja po stronie (WordPress + WCAG)

Menu główne (main_menu)

Menu górne (top_menu)

Menu mobilne (mobile_menu)

Skip links (standardowe WordPress)

4. Formularze i interakcje

Formularz wyszukiwania (.global-search-form)

Formularz komentarzy (WordPress standard)

Interakcje z linkami społecznościowymi

5. Skróty przeglądarki (WCAG)

Chrome / Edge

Firefox

Safari (macOS)

6. Kompatybilność z czytnikami ekranu

Testowane czytniki ekranu

Specyficzne skróty czytników ekranu

NVDA (Windows)

JAWS (Windows)

VoiceOver (macOS)

VoiceOver (iOS – gestykulacja)

7. Obsługa prefers-reduced-motion

Implementacja w sliderach

Jak włączyć w systemie operacyjnym

Windows 10/11

macOS

iOS/iPadOS

Android

Wykrywanie w przeglądarce (DevTools)

Wpływ na UX

Podsumowanie i zalecenia

✅ Zalety obecnej implementacji

⚠️ Obszary do poprawy

🎯 Zgodność WCAG 2.1

Menu główne (`main_menu`)

Menu górne (`top_menu`)

Menu mobilne (`mobile_menu`)

Formularz wyszukiwania (`.global-search-form`)