Standardy · WCAG 2.2

SC 2.4.2 Poziom A WCAG 2.0

Tytuł strony

Każda strona musi mieć element `<title>` opisujący jej temat lub cel. Tytuł jest tym, co czytniki ekranu ogłaszają po załadowaniu strony i co użytkownicy widzą w zakładkach, zakładkach ulubionych, historii i wynikach wyszukiwania.

Co wymaga kryterium

Element <title> w nagłówku dokumentu musi opisywać, czego dotyczy strona. Użytkownicy czytników ekranu słyszą go w chwili załadowania strony — to pierwszy sygnał orientacyjny, jaki otrzymują. Użytkownicy widzący widzą go w zakładce przeglądarki, w historii, podczas tworzenia zakładki i w wynikach SERP. Tytuł niespełniający tego kryterium pozostawia wszystkich tych użytkowników w niepewności co do tego, gdzie wylądowali.

Tytuł nie musi być poetycki. Musi być konkretny. „Strona główna” nie spełnia wymagania. „Cennik — Acme CRM” — spełnia.

Jak spełnić wymaganie

  • Pisz tytuł, który zaczyna się od nazwy strony, a kończy nazwą witryny: "Hotele dostępne dla wózków w Berlinie — Disability World".
  • Aktualizuj tytuł po stronie klienta przy zmianie trasy w aplikacjach SPA. Next.js, React Router i Vue Router wymagają jawnych aktualizacji document.title lub pomocników specyficznych dla frameworka.
  • Odzwierciedlaj błędy formularza i wyniki wyszukiwania w tytule: "3 błędy — Ustawienia konta" lub "Wyszukiwanie: chroniczne zmęczenie — 47 wyników".
  • Umieszczaj najbardziej charakterystyczne informacje na początku. W pasku kart o szerokości 30 znaków „Disability World — Jak ubiegać się o SSDI” ukrywa temat.
  • W formularzach wieloetapowych podawaj etap: "Krok 2 z 4: Adres — Złóż wniosek o świadczenia".

Typowe błędy

  • Ogólne tytuły dla całej witryny: każda strona wyświetla "Acme Inc.", bo szablon nigdy nie nadpisuje wartości domyślnej.
  • Pusty element <title></title> — zaskakująco częsty, gdy szablony CMS zakładają, że redaktor zawsze go wypełni.
  • Strony SPA bez tytułu: początkowy HTML ma ogólny tytuł, a router nigdy go nie aktualizuje przy nawigacji.
  • Tytuł to wyłącznie nazwa marki bez tematu strony ("Acme" na stronach kontaktu, cennika i produktu).
  • „Untitled Document” pozostawiony po eksporcie z edytora WYSIWYG.

Dlaczego to ważne

Dla użytkownika czytnika ekranu tytuł strony jest odpowiednikiem spojrzenia na pasek adresu przeglądarki — informuje, czy trafił tam, gdzie chciał. Bez niego każda strona brzmi tak samo po załadowaniu. Tytuł jest też kluczowy dla SEO i podglądów linków, więc naprawa tego kryterium bywa łatwa do uzasadnienia przed zespołami produktowymi, marketingowymi i redakcyjnymi.