Nawigacja klawiaturowa

W Starożytnym Egipcie drogi i korytarze swiatyn byly precyzyjnie zaplanowane, aby każdy pielgrzym mogl dotrzec do celu. Podobnie strony internetowe muszą zapewniac jasne sciezki nawigacji dla użytkowników, ktorzy nie korzystają z myszy - nawigują wylacznie za pomocą klawiatury.

Dlaczego nawigacja klawiaturowa jest ważna?

Wiele osób korzysta że strony tylko za pomocą klawiatury:

• Osoby z ograniczoną sprawnością motoryczna
• Uzytkownicy czytników ekranowych
• Zaawansowani uzytkownicy (programisci, power users)
• Osoby z tymczasowymi urazami (np. złamaną ręką)

Podstawowe klawisze nawigacji

| Klawisz | Funkcja | |:---|:---| |

Tab

| Przejscie do nastepnego elementu interaktywnego | |

Shift + Tab

| Powrot do poprzedniego elementu | |

Enter

| Aktywacja linku lub przycisku | |

Spacja

| Aktywacja przycisku, zaznaczenie checkboxa | |

Strzalki

| Nawigacja w menu, radio buttons, tablist | |

Escape

| Zamkniecie okna dialogowego, anulowanie |

Focus i tabindex

Naturalny focus

Elementy HTML, które są naturalnie fokusowalne (można na nie przejsc Tabem):

1<!-- Te elementy są naturalnie fokusowalne -->
2<a href="/link">Link</a>
3<button>Przycisk</button>
4<input type="text">
5<select>...</select>
6<textarea>...</textarea>
7
8<!-- Te elementy NIE są naturalnie fokusowalne -->
9<div>Nie można przejsc Tabem</div>
10<span>To też nie</span>
11<p>I to nie</p>

Atrybut tabindex

tabindex

kontroluje, czy i kiedy element otrzymuje focus:

1<!-- tabindex="0" - element staje się fokusowalny w naturalnej kolejnosci -->
2<div tabindex="0" rolę="button" onclick="handleClick()">
3    Kliknij mnie
4</div>
5
6<!-- tabindex="-1" - fokusowalny programowo, ale NIE przez Tab -->
7<div tabindex="-1" id="error-message">
8    Wystapil błąd!
9</div>
10
11<!-- tabindex="1+" - UNIKAJ! Zmienia naturalna kolejnosc -->
12<!-- To jest antypattern i powoduje chaos w nawigacji -->
13<input tabindex="3" placeholder="Trzeci">
14<input tabindex="1" placeholder="Pierwszy">
15<input tabindex="2" placeholder="Drugi">

Zasada: Używaj tylko

tabindex="0"

i

tabindex="-1"

. Nigdy nie używaj wartości dodatnich!

Skip Links

Skip links pozwalaja uzytkownikom klawiatury przeskoczyc powtarzajaca się nawigacje i przejsc bezpośrednio do glownej treści:

1<!-- Skip link - pierwszy element na stronie -->
2<a href="#main-content" class="skip-link">
3    Przejdz do treści glownej
4</a>
5
6<header>
7    <nav>
8        <!-- Dluga nawigacja, która użytkownik może pominac -->
9        <a href="/">Strona główna</a>
10        <a href="/exhibitions">Wystawy</a>
11        <a href="/tickets">Bilety</a>
12        <a href="/contact">Kontakt</a>
13    </nav>
14</header>
15
16<main id="main-content">
17    <h1>Witaj w Muzeum Egipskim</h1>
18    <!-- ... -->
19</main>

1/* Skip link ukryty wizualnie, ale widoczny na focus */
2.skip-link {
3    position: absolute;
4    top: -40px;
5    left: 0;
6    background: #000;
7    color: #fff;
8    padding: 8px 16px;
9    z-index: 100;
10    transition: top 0.3s;
11}
12
13.skip-link:focus {
14    top: 0;
15}

Widoczny focus

Nigdy nie usuwaj outline z elementow fokusowalnych!

1/* ŹLE - ukrywanie focusu */
2*:focus {
3    outline: none; /* NIE ROB TEGO! */
4}
5
6/* DOBRZE - customowy, ale widoczny focus */
7a:focus-visible,
8button:focus-visible {
9    outline: 3px solid #d4af37;
10    outline-offset: 2px;
11    border-radius: 2px;
12}

Pseudoklasa

:focus-visible

jest lepsza niż

:focus

, bo pokazuje outline tylko przy nawigacji klawiaturowa, nie przy kliknieciu myszką.

Focus trap w oknach dialogowych

Gdy otwierasz modal, focus musi być "uwieziony" w jego wnetrzu:

1<dialog id="ticket-dialog" aria-labelledby="dialog-title">
2    <h2 id="dialog-title">Kup bilet</h2>
3    <form>
4        <label for="quantity">Liczba biletow:</label>
5        <input type="number" id="quantity" min="1" max="10" value="1">
6        <button type="submit">Kup</button>
7        <button type="button" onclick="closeDialog()">Anuluj</button>
8    </form>
9</dialog>

Element

<dialog>

automatycznie zarzadza focusem - przechwytuje Tab wewnątrz i przywraca focus po zamknieciu.

Dostepna nawigacja

1<nav aria-label="Nawigacja główna">
2    <ul rolę="menubar">
3        <li rolę="none">
4            <a href="/" rolę="menuitem">Strona główna</a>
5        </li>
6        <li rolę="none">
7            <a href="/exhibitions" rolę="menuitem"
8               aria-current="page">Wystawy</a>
9        </li>
10        <li rolę="none">
11            <a href="/tickets" rolę="menuitem">Bilety</a>
12        </li>
13    </ul>
14</nav>

Atrybut

aria-current="page"

informuje czytnik ekranowy, na której stronie aktualnie jest użytkownik.

Nawigacja klawiaturowa to jak jasno wytyczone korytarze w piramidzie - bez nich nawet najlepiej zdobiona komnata pozostanie niedostepna dla wielu odwiedzajacych.