Kryteria sukcesu WCAG · Level A
WCAG 2.4.2: Strona zatytułowana
- Zrozumiem znaczenie, ton i styl oryginalnego tekstu. - Przetłumaczę treść, zachowując sens i rejestr językowy. - Zachowam wszystkie liczby, nazwy własne i formatowanie. - Zadbam o poprawne, neutralne płciowo sformułowania. - Sprawdzę, czy układ akapitów i znaczenie zostały wiernie oddane. WCAG 2.4.2 wymaga, aby każda strona internetowa miała opisowy, znaczący tytuł, który identyfikuje jej temat lub cel. Zapewnia to, że użytkownicy — zwłaszcza ci polegający na czytnikach ekranu lub zarządzający wieloma kartami — mogą szybko się zorientować i sprawnie nawigować.
Co oznacza ta zasada
WCAG 2.4.2 Page Titled to kryterium sukcesu na poziomie A w ramach zasady Operable. Stwierdza: „Strony internetowe mają tytuły opisujące temat lub cel.” W praktyce oznacza to, że każdy dokument HTML dostarczany użytkownikowi musi zawierać element <title> wewnątrz sekcji <head>, a ten element musi zawierać tekst, który w sposób znaczący identyfikuje treść strony, jej funkcję lub kontekst w obrębie serwisu.
Kryterium ma zastosowanie do każdej odrębnej strony internetowej — niezależnie od tego, czy jest to statyczny plik HTML, dynamicznie renderowany widok aplikacji typu single-page application (SPA), strona modalna czy krok w wieloetapowym kreatorze. Każdy odrębny „ekran”, do którego użytkownik może przejść bezpośrednio lub który zastępuje bieżący widok, powinien mieć własny, unikalny, opisowy tytuł.
Strona spełnia to kryterium, gdy jej element <title> jest obecny, niepusty i zawiera tekst, który w wystarczającym stopniu opisuje temat lub cel strony. Tytuł nie musi być unikalny w całym internecie, ale powinien być na tyle konkretny, aby użytkownik, który tylko usłyszy lub przeczyta tytuł, mógł zrozumieć, czego dotyczy strona, bez potrzeby dodatkowego kontekstu.
Strona nie spełnia tego kryterium, gdy spełniony jest którykolwiek z poniższych warunków: element <title> jest całkowicie nieobecny w sekcji <head>; element <title> jest obecny, ale pusty (nie zawiera tekstu); tytuł zawiera jedynie ogólny tekst zastępczy, taki jak „Untitled Document”, „New Page” lub samą nazwę domeny bez treści opisowej; albo aplikacja typu single-page application przechodzi do nowego logicznego widoku bez dynamicznej aktualizacji tytułu dokumentu.
WCAG nie definiuje żadnych wyraźnych wyjątków dla tego kryterium na poziomie A. Każda strona internetowa — niezależnie od jej rozmiaru, grupy docelowej czy celu — musi mieć opisowy tytuł. Dokument Understanding wyjaśnia jednak, że tytuł nie musi być jedynym środkiem identyfikacji; musi po prostu istnieć i być na tyle opisowy, by pełnić funkcję podstawowej wskazówki orientacyjnej.
Dlaczego to ma znaczenie
Tytuł strony jest jedną z pierwszych informacji, z jakimi użytkownik styka się po wejściu na stronę lub podczas nawigacji między stronami. Jego brak lub niewystarczająca jakość tworzy bariery dla kilku odrębnych grup użytkowników.
Użytkownicy czytników ekranu — z których większość jest niewidoma lub ma poważne wady wzroku — słyszą tytuł strony ogłaszany natychmiast po załadowaniu strony lub gdy fokus przechodzi do nowego dokumentu. Dla około 2,2 miliarda osób na całym świecie, które mają jakąś formę upośledzenia wzroku (według Światowej Organizacji Zdrowia), to ogłoszenie jest podstawowym sposobem potwierdzenia, że załadowała się właściwa strona, oraz zrozumienia, co zawiera, zanim zaczną ją dalej eksplorować. Bez znaczącego tytułu niewidomy użytkownik, nawigując między kartami lub wracając na stronę po przerwie, musi przeczytać całą treść strony tylko po to, by ponownie się zorientować — zadanie, które przy złożonym układzie może zająć kilka minut.
Użytkownicy z niepełnosprawnościami poznawczymi i trudnościami w uczeniu się odnoszą ogromne korzyści z jasnych, spójnych tytułów stron. Gdy użytkownik z problemami z pamięcią otwiera wiele kart podczas sesji badawczej, tytuł karty jest często jedyną widoczną etykietą każdej karty. Tytuł taki jak „Account Settings — Accsible Dashboard” pozwala natychmiast zidentyfikować właściwą kartę; tytuł typu „Page” lub pusty tytuł zmusza do klikania każdej karty, aby odkryć jej zawartość, co tworzy obciążenie poznawcze i potencjalne zamieszanie.
Użytkownicy z niepełnosprawnościami ruchowymi, którzy polegają na oprogramowaniu sterowanym głosem (takim jak Dragon NaturallySpeaking), mogą używać tytułów stron do weryfikacji, że dotarli do zamierzonego miejsca po wydaniu poleceń nawigacyjnych. Jasne tytuły zmniejszają potrzebę powtarzania korekt i ponownej nawigacji, oszczędzając czas i wysiłek fizyczny.
Rozważmy konkretny scenariusz: pacjent szpitala w Turcji używa wspomagającego czytnika ekranu, aby wypełnić internetowy formularz rejestracji na wizytę w kilku krokach. Jeśli każdy krok nie aktualizuje tytułu strony, aby odzwierciedlić bieżący etap — na przykład „Step 2 of 4: Personal Information — Appointment Booking — Hospital Name” — pacjent nie ma szybkiego sposobu potwierdzenia swojego postępu po ponownym załadowaniu strony lub po przełączeniu karty, aby sprawdzić inne okno przeglądarki. Musi ponownie przeczytać cały formularz, aby zrozumieć, gdzie się znajduje, co jest szczególnie uciążliwe dla osoby, która może już być chora lub zestresowana.
Poza dostępnością, tytuły stron mają istotną wartość SEO. Wyszukiwarki używają elementu <title> jako głównej etykiety dla wyników wyszukiwania. Opisowy, bogaty w słowa kluczowe tytuł poprawia współczynnik klikalności i wykrywalność. Strony, które prawidłowo wdrażają WCAG 2.4.2, przynoszą zatem korzyści nie tylko użytkownikom z niepełnosprawnościami, ale także całej swojej organicznej obecności w wyszukiwarkach — czyniąc dostępność jednocześnie korzyścią biznesową i techniczną.
Powiązane reguły Axe-core
- document-title: Jest to główna reguła axe-core powiązana z WCAG 2.4.2. Sprawdza, czy bieżący dokument HTML zawiera element
<title>w sekcji<head>oraz czy element ten zawiera co najmniej pewną treść tekstową inną niż białe znaki. Reguła zgłasza naruszenie, gdy element<title>jest całkowicie nieobecny, gdy istnieje, ale jest pusty, lub gdy zawiera wyłącznie znaki odstępu. Axe-core raportuje to jako krytyczne naruszenie mapowane na WCAG 2.4.2 poziom A. Reguła uruchamia się automatycznie przy załadowaniu strony i niezawodnie wychwytuje braki strukturalne. - Dlaczego wymagane są także testy manualne: Narzędzia automatyczne, takie jak axe-core, mogą potwierdzić, że element
<title>istnieje i nie jest pusty, ale nie są w stanie ocenić, czy tytuł jest znaczący lub opisowy. Strona z<title>aaa</title>lub<title>Untitled Document</title>przejdzie automatyczną regułę, ponieważ element jest obecny i niepusty, a jednak wyraźnie nie spełnia ducha WCAG 2.4.2. Wymagana jest ocena człowieka, aby stwierdzić, czy tytuł dokładnie odzwierciedla temat i cel strony. Podobnie, w aplikacjach typu single-page, skany automatyczne zazwyczaj wychwytują tylko tytuł przy początkowym załadowaniu strony i mogą pominąć przypadki, w których tytuł nie jest aktualizowany przy zmianach tras po stronie klienta — te przejścia wymagają manualnego testowania nawigacji.
Jak testować
- Automatyczne skanowanie za pomocą axe DevTools lub Lighthouse: Otwórz docelową stronę internetową w Chrome lub Firefox. Otwórz DevTools (F12), przejdź do panelu axe DevTools (jeśli jest zainstalowany) lub zakładki Lighthouse. Uruchom audyt dostępności. W wynikach axe poszukaj konkretnie naruszeń reguły
document-titlew kategorii „Critical” lub „Serious”. Lighthouse podobnie oznaczy brakujący lub pusty tytuł w swoim audycie Accessibility. Zanotuj dokładny adres URL strony i tekst tytułu (lub jego brak) do raportu. Powtórz ten test dla każdej unikalnej trasy lub widoku w aplikacji, w tym stron błędów (404, 500) i stron potwierdzeń. - Ręczna inspekcja w przeglądarce: W dowolnej przeglądarce sprawdź etykietę karty przeglądarki — powinna wyświetlać znaczący, opisowy tytuł identyfikujący stronę. Kliknij prawym przyciskiem na stronę i wybierz „View Page Source” lub otwórz DevTools i przejdź do panelu Elements. Zlokalizuj sekcję
<head>i zweryfikuj, że element<title>jest obecny i zawiera odpowiednią, nieogólnikową treść tekstową. Sprawdź, czy tytuł jest powiązany z widoczną treścią strony i — w przypadku serwisów wielostronicowych — czy różni się od tytułów innych stron w sposób odzwierciedlający unikalny cel danej strony. - Testowanie z czytnikiem ekranu NVDA + Firefox: Otwórz stronę w Firefox i włącz NVDA. Gdy strona się załaduje, NVDA powinien natychmiast ogłosić tytuł strony. Przejdź na inną stronę i wróć (używając Alt+Left Arrow, a następnie Alt+Right Arrow) i potwierdź, że właściwy tytuł jest ogłaszany ponownie. W aplikacji typu single-page wywołaj zmianę trasy po stronie klienta i nasłuchuj zaktualizowanego tytułu. Jeśli NVDA nic nie odczytuje lub odczytuje ogólny/nieprzydatny ciąg przy załadowaniu strony, jest to błąd.
- Testowanie z czytnikiem ekranu VoiceOver + Safari (macOS/iOS): Włącz VoiceOver (Command+F5 na Macu). Załaduj stronę. VoiceOver ogłasza tytuł strony po załadowaniu. Użyj Rotor (Control+Option+U) i przejdź do listy Web Spots lub Headings — tytuł okna wyświetlany na górze strony powinien odpowiadać treści elementu
<title>. Na iOS tytuł pojawia się w przełączniku kart Safari; zweryfikuj, że jest opisowy. - Testowanie z czytnikiem ekranu JAWS + Chrome: Otwórz stronę w Chrome z uruchomionym JAWS. JAWS ogłasza tytuł strony przy załadowaniu. Naciśnij Insert+F1, aby otworzyć okno pomocy JAWS i potwierdzić zgłoszony tytuł strony. Użyj Insert+T, aby w dowolnym momencie sesji odczytać tytuł i zweryfikować, że został poprawnie zaktualizowany po zdarzeniach nawigacji SPA.
- Test zmiany trasy w aplikacji typu single-page (SPA): Przejdź przez różne widoki SPA (na przykład z strony głównej na stronę produktu, a następnie na stronę koszyka). Po każdej nawigacji sprawdź etykietę karty przeglądarki i użyj czytnika ekranu, aby potwierdzić, że tytuł został zaktualizowany. Jeśli etykieta karty pozostaje taka sama przez całą sesję niezależnie od bieżącego widoku, jest to naruszenie 2.4.2 dla każdego widoku, który nie ma odrębnego tytułu.
Jak naprawić
Brakujący element title — niepoprawne
<!DOCTYPE html>
<html lang='tr'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<!-- No <title> element present -->
</head>
<body>
<h1>Ürünlerimiz</h1>
</body>
</html>Brakujący element title — poprawne
<!DOCTYPE html>
<html lang='tr'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<!-- Title added: describes the page topic and includes the site name for context -->
<title>Ürünlerimiz — Accsible Mağaza</title>
</head>
<body>
<h1>Ürünlerimiz</h1>
</body>
</html>Ogólny tytuł zastępczy — niepoprawne
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<!-- Generic title provides no useful context to the user -->
<title>Untitled Document</title>
</head>
<body>
<h1>Contact Us</h1>
</body>
</html>Ogólny tytuł zastępczy — poprawne
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<!-- Descriptive title: page function first, then site name -->
<title>Contact Us — Accsible Support</title>
</head>
<body>
<h1>Contact Us</h1>
</body>
</html>Aplikacja typu single-page nie aktualizuje tytułu przy zmianie trasy — niepoprawne
<!-- React Router example: title is set only once at app root and never updated -->
<!DOCTYPE html>
<html lang='en'>
<head>
<title>My App</title>
</head>
<body>
<div id='root'></div>
<!-- JavaScript bundle loads React SPA; title never changes during navigation -->
</body>
</html>Aplikacja typu single-page nie aktualizuje tytułu przy zmianie trasy — poprawne
<!-- Use document.title in each route component or a head-management library -->
<!-- Example using React with react-helmet-async -->
<!-- In your ProductPage component: -->
<!-- import { Helmet } from 'react-helmet-async'; -->
<!-- <Helmet><title>{product.name} — Accsible Store</title></Helmet> -->
<!-- Or using plain JavaScript on each route render: -->
<script>
// Called whenever the SPA navigates to a new view
function updatePageTitle(pageTitle, siteName) {
document.title = pageTitle + ' — ' + siteName;
}
// Example: updatePageTitle('Shopping Cart', 'Accsible Store');
// Results in: <title>Shopping Cart — Accsible Store</title>
</script>Wieloetapowy formularz z identycznymi tytułami na każdym kroku — niepoprawne
<!-- Step 1 -->
<title>Checkout — Accsible Store</title>
<!-- Step 2 (same title — user cannot distinguish steps) -->
<title>Checkout — Accsible Store</title>
<!-- Step 3 (same title again) -->
<title>Checkout — Accsible Store</title>Wieloetapowy formularz z identycznymi tytułami na każdym kroku — poprawne
<!-- Step 1: title reflects the current step's purpose -->
<title>Step 1 of 3: Shipping Address — Checkout — Accsible Store</title>
<!-- Step 2: clearly distinct and descriptive -->
<title>Step 2 of 3: Payment Details — Checkout — Accsible Store</title>
<!-- Step 3: confirmation step identified clearly -->
<title>Step 3 of 3: Order Review — Checkout — Accsible Store</title>Typowe błędy
- Pozostawienie domyślnego tytułu CMS-a lub frameworka w środowisku produkcyjnym: Wiele systemów zarządzania treścią (WordPress, Drupal, własne frameworki) jest dostarczanych z tytułami zastępczymi, takimi jak „Just another WordPress site” lub surowy adres URL serwisu. Deweloperzy zapominają skonfigurować szablon tytułu przed uruchomieniem, pozostawiając każdą stronę z nieprzydatnym lub identycznym tytułem. Zawsze weryfikuj konfigurację tytułu w ustawieniach CMS i przetestuj działający adres URL przed wydaniem.
- Używanie samej nazwy serwisu jako tytułu każdej strony: Ustawienie
<title>Accsible</title>na każdej stronie serwisu przechodzi automatyczną kontrolędocument-title(element nie jest pusty), ale nie spełnia wymogu opisowości WCAG 2.4.2. Każda strona musi mieć tytuł, który odróżnia ją od innych stron w tym samym serwisie. - Umieszczanie nazwy serwisu przed treścią specyficzną dla strony: Wzorzec
<title>Accsible — Contact</title>zmusza użytkowników czytników ekranu do wysłuchania nazwy marki, zanim dowiedzą się, czego dotyczy strona. Zalecany wzorzec to<title>Contact — Accsible</title>— najpierw temat strony, potem nazwa serwisu — aby użytkownicy natychmiast otrzymywali najbardziej istotną informację. - Zapominanie o aktualizacji
document.titlew aplikacjach typu single-page po nawigacji po stronie klienta: Frameworki takie jak React, Vue i Angular nie aktualizują tytułu dokumentu automatycznie przy zmianie trasy. Deweloperzy muszą jawnie ustawiaćdocument.titlelub używać biblioteki do zarządzania sekcją head (takiej jak react-helmet-async lub Vue Meta) w każdym komponencie trasy. Zaniedbanie tego oznacza, że każdy widok SPA po początkowym załadowaniu ma ten sam tytuł. - Używanie pustych elementów title lub zawierających wyłącznie białe znaki: Element
<title> </title>zawierający tylko spacje lub znaki końca linii jest funkcjonalnie równoważny brakującemu tytułowi dla użytkowników technologii asystujących, ale może zostać przeoczony w wizualnym QA, ponieważ karta przeglądarki po prostu wydaje się pusta, zamiast zgłaszać błąd. Axe-core to wychwytuje, ale może umknąć recenzentom manualnym. - Nieaktualizowanie tytułu na stronach błędów (404, 500, błędy walidacji): Strony błędów często dziedziczą tytuł poprzedniej strony lub wracają do ogólnego tytułu serwisu. Użytkownik czytnika ekranu, który wywoła błąd 404, musi usłyszeć „Page Not Found — Accsible”, a nie tytuł strony, na której był wcześniej, aby zrozumieć, że jego nawigacja się nie powiodła.
- Zduplikowane tytuły na różnych stronach o odmiennej treści: Gdy strona listy produktów i strona szczegółów produktu mają ten sam tytuł „Products — Accsible Store”, użytkownicy z niepełnosprawnościami poznawczymi lub osoby zarządzające wieloma kartami nie mogą ich odróżnić. Każda logicznie odrębna strona powinna mieć unikalny tytuł odzwierciedlający jej specyficzną treść.
- Dynamicznie generowane tytuły zawierające surowe nazwy zmiennych szablonu: Błędy renderowania po stronie serwera mogą skutkować tytułami takimi jak
<title>{{page.title}} — MySite</title>, gdy zmienne szablonu nie zostaną wyrenderowane. Takie tytuły przechodzą kontrolę „niepusty”, ale nie dostarczają żadnych znaczących informacji. Wdróż automatyczne kontrole treści tytułów w swoim pipeline CI/CD, aby wychwycić błędy renderowania szablonów przed wdrożeniem. - Zbyt długie tytuły lub przeładowane słowami kluczowymi: Choć WCAG nie określa limitu znaków, nadmiernie długie tytuły (powyżej 60–70 znaków) są obcinane na kartach przeglądarki i w wynikach wyszukiwania, a czytniki ekranu muszą odczytać cały ciąg, zanim ogłoszą najbardziej istotną część. Utrzymuj tytuły zwięzłe, konkretne i tak skonstruowane, by najważniejsze informacje znajdowały się na początku.
- Pomijanie tytułów w dokumentach iframe: Ramki osadzone (
<iframe>), które ładują pełny dokument HTML, również powinny mieć znaczący element<title>. Choć sam elementiframepowinien mieć atrybuttitleopisujący cel ramki, dokument ładowany w jej wnętrzu także korzysta z elementu<title>w swojej sekcji<head>dla technologii asystujących, które nawigują do treści ramki.
Związek z tureckimi regulacjami dotyczącymi dostępności
Prezydencki okólnik Turcji 2025/10, opublikowany w Dzienniku Urzędowym nr 32933 w dniu 21 czerwca 2025 r., ustanawia wiążące wymagania dotyczące dostępności dla szerokiego zakresu cyfrowych usług sektora publicznego i prywatnego. WCAG 2.4.2 Page Titled jest kryterium sukcesu na poziomie A, a zgodność z poziomem A jest obowiązkowym minimum na mocy tego okólnika. Podmioty objęte regulacją są zobowiązane osiągnąć zgodność z poziomem A w ciągu jednego roku, jeśli są instytucjami publicznymi, oraz w ciągu dwóch lat w przypadku organizacji sektora prywatnego.
Okólnik obejmuje szeroki zestaw typów podmiotów, co sprawia, że WCAG 2.4.2 ma znaczenie dla istotnej części tureckiej gospodarki cyfrowej. Podmioty objęte regulacją obejmują wszystkie instytucje publiczne i organy rządowe, platformy e-commerce, banki i instytucje finansowe, szpitale i świadczeniodawców opieki zdrowotnej, firmy telekomunikacyjne z 200 000 lub większą liczbą abonentów, licencjonowane biura podróży, prywatne firmy transportowe oraz szkoły prywatne upoważnione przez Ministerstwo Edukacji Narodowej (MoNE).
Dla tych organizacji brak zapewnienia znaczącego tytułu strony nie jest jedynie przeoczeniem w zakresie dobrych praktyk — stanowi ryzyko niezgodności regulacyjnej. Rozważ praktyczne konsekwencje: turecka platforma e-commerce, na której strony kategorii produktów mają ten sam ogólny tytuł, lub system rezerwacji wizyt w publicznym szpitalu, w którym każdy etap procesu rezerwacji ma ten sam, nieodróżnialny tytuł — oba przypadki byłyby w bezpośrednim naruszeniu wymogów dostępności okólnika. Regulatorzy lub skarżący mogliby wskazać te uchybienia jako naruszenia obowiązkowego standardu poziomu A.
Prawidłowe wdrożenie WCAG 2.4.2 jest jednym z najmniej pracochłonnych, a jednocześnie najbardziej efektywnych działań naprawczych w zakresie dostępności, ponieważ zazwyczaj wymaga jedynie zmiany na poziomie szablonu, aby zapewnić, że każda strona ma poprawnie zdefiniowany, opisowy element <title>. Dla organizacji podlegających okólnikowi 2025/10 uregulowanie tytułów stron powinno znaleźć się wśród pierwszych pozycji do realizacji w każdym planie naprawczym dostępności — jest to proste do wdrożenia, łatwe do zweryfikowania i bezpośrednio testowalne za pomocą reguły axe-core document-title, co ułatwia wykazanie zgodności przed audytorami lub organami regulacyjnymi.
Organizacje obsługujące odbiorców posługujących się językiem tureckim powinny również zadbać o to, by tytuły stron były podawane we właściwym języku, odpowiadającym treści strony, uzupełniając wymóg atrybutu lang (WCAG 3.1.1), tak aby czytniki ekranu w środowiskach użytkowników tureckojęzycznych poprawnie interpretowały i wymawiały ogłaszany tytuł po załadowaniu strony.