Funkcjonalność · Poziom A

2.4.2 Tytuł strony

Tytuł w elemencie `title` powinien jasno mówić, czego dotyczy aktualna strona.

Krótko

Każda strona powinna mieć sensowny tytuł w `title`. Tytuł pomaga rozpoznać kartę, wynik wyszukiwania, historię przeglądarki i miejsce w serwisie.

Problem w praktyce

Użytkownik ma otwartych kilka kart. Wszystkie nazywają się „Strona główna”, „Untitled” albo „Panel”. Nie wiadomo, która karta zawiera formularz zamówienia, a która szczegóły szkolenia.

2.4.2 dotyczy elementu `title` w dokumencie HTML. Nie zastępuje `h1`. Nagłówek `h1` jest ważny dla treści strony, ale tytuł strony działa w karcie przeglądarki i jest często odczytywany jako pierwszy przez technologie wspomagające.

Kogo to dotyczy

  • Osób korzystających z czytników ekranu, które słyszą tytuł strony po przejściu na nową stronę.
  • Osób korzystających z wielu kart lub okien przeglądarki.
  • Osób z trudnościami poznawczymi, które potrzebują jasnego potwierdzenia miejsca.
  • Osób korzystających z historii przeglądarki, zakładek i wyników wyszukiwania.
  • Użytkowników aplikacji, w których kolejne kroki procesu są do siebie podobne.

Dobry przykład

  • `Koszyk - Sklep Accessibility First`.
  • `Krok 2 z 4: Dane do faktury - Rejestracja na szkolenie`.
  • `Błąd płatności - Panel klienta`.
  • `1.4.4 Zmiana rozmiaru tekstu - WCAG prostym językiem`.
  • `Wyniki wyszukiwania dla "audyt WCAG" - Baza wiedzy`.

Zły przykład

  • `Untitled`.
  • `Strona`.
  • `Panel` na każdej podstronie panelu.
  • `Accessibility First` jako jedyny tytuł dla całego serwisu.
  • Tytuł niezmieniany po przejściu do kolejnego kroku formularza.

Przykłady kodu

Dobry przykład: konkretny tytuł strony

Tytuł mówi, co to za strona i w jakim serwisie się znajduje.

Kod — HTML

<head>
  <title>
    Koszyk - Sklep Accessibility First
  </title>
</head>

Dobry przykład: krok procesu

W procesach warto podać nazwę kroku i kontekst.

Kod — HTML

<title>
  Krok 2 z 4: Dane do faktury - Rejestracja na szkolenie
</title>

Zły przykład: ten sam tytuł wszędzie

Użytkownik nie dowie się, która podstrona jest otwarta.

Kod — HTML

<title>Panel</title>

Przykład graficzny

Źle

  • Panel
  • Panel
  • Panel

Trzy różne strony mają identyczny tytuł.

Dobrze

  • Zamówienia - Panel
  • Faktury - Panel
  • Profil - Panel

Tytuły pomagają rozpoznać właściwą kartę.

Statyczne demo pokazuje, że tytuł strony działa jak etykieta karty przeglądarki.

Jak sprawdzić

  1. Sprawdź zawartość elementu `title` w kodzie strony.
  2. Porównaj tytuł z rzeczywistą treścią strony.
  3. Otwórz kilka podstron w kartach i sprawdź, czy da się je odróżnić.
  4. Sprawdź kroki formularza, błędy, wyniki wyszukiwania i strony szczegółów.
  5. W aplikacji SPA sprawdź, czy tytuł zmienia się po zmianie widoku.
  6. Nie oceniaj tylko `h1`. To osobny element i osobne wymaganie.

Co sprawdzi automat, a czego nie

Automat może wykryć

  • brak elementu `title`,
  • pusty tytuł,
  • taki sam tytuł na wielu podstronach,
  • bardzo ogólne tytuły w prostych przypadkach.

Automat nie oceni pewnie

  • czy tytuł dobrze opisuje konkretny krok procesu,
  • czy kolejność informacji w tytule jest praktyczna,
  • czy tytuł po błędzie lub wyszukiwaniu nadal jest wystarczająco jasny,
  • czy tytuł jest zrozumiały dla użytkownika w kontekście serwisu.

Typowe błędy

  • Ten sam `title` na wszystkich podstronach.
  • Tytuł techniczny, na przykład `index`, `app` albo `React App`.
  • Brak aktualizacji tytułu po przejściu do kolejnego kroku procesu.
  • Brak informacji o błędzie w tytule strony błędu.
  • Tytuł zawiera tylko nazwę firmy, bez nazwy aktualnej strony.