WCAG 2.4.2 Tytuł strony

Kryterium sukcesu 2.4.2 pomaga zorientować się, gdzie się jest, bez czytania całej strony. Tytuł strony to pierwsze, co ogłasza czytnik ekranu, to tekst na karcie przeglądarki i w zakładkach, a pomaga też osobom z niepełnosprawnościami poznawczymi i każdemu, kto ma otwartych wiele kart. To poziom A, a kryterium należy do normy EN 301 549 (punkt 9.2.4.2).

Czego wymaga kryterium

Strony internetowe mają tytuły opisujące ich temat lub cel.

W HTML oznacza to niepusty element <title>. Wytyczne W3C dodają:

• tytuł powinien identyfikować treść strony, aby użytkownicy mogli odróżniać strony od siebie;
• w aplikacjach jednostronicowych (SPA) tytuł powinien być aktualizowany przy zmianie widoku;
• dopasowanie tytułu do tekstu linku lub głównego nagłówka, które prowadziły na stronę, ułatwia orientację.

Dobrą praktyką (nie ścisłym wymogiem) jest umieszczanie najbardziej szczegółowej informacji na początku: „Niebieska lniana koszula – Koszule męskie – Nazwa sklepu”, a nie „Nazwa sklepu – Nazwa sklepu – Koszula”.

Typowe błędy w sklepie internetowym

• wszystkie strony mają ten sam tytuł, czyli samą nazwę sklepu;
• strony produktów zatytułowane wewnętrznymi kodami („SKU 4471-B”);
• strony wyników wyszukiwania bez wyszukiwanej frazy w tytule;
• kroki zamówienia lub strony konta w aplikacji SPA, które zachowują tytuł pierwszego widoku;
• brakujący lub pusty <title> na stronach docelowych zbudowanych w kreatorze stron;
• strony błędów (404, „brak w magazynie”) z tytułem, który nic nie mówi o błędzie.

Jak to sprawdzić

Automatycznie: nasz skaner zgłasza strony bez elementu <title> lub z pustym tytułem (reguła document title). To, czy tytuł jest opisowy, wymaga ludzkiej oceny, dlatego ta część potrzebuje kontroli ręcznej.

Ręcznie: otworzyć główne typy stron — stronę główną, kategorię, produkt, wyszukiwanie, koszyk, każdy krok zamówienia, konto, 404 — i przeczytać kartę przeglądarki. Zadać sobie pytanie: czy wiedziałbym, co to za strona, gdybym widział tylko to? Czy dwie różne strony mają ten sam tytuł? W jednostronicowym procesie zamówienia sprawdzić, czy tytuł zmienia się z każdym krokiem.

Jak to naprawić

• Stosować szablon tytułu: {nazwa strony lub produktu} – {sekcja} – {nazwa sklepu}.
• Na stronach wyszukiwania i stronicowanych kategorii uwzględniać wyszukiwaną frazę i numer strony.
• Nadawać stronom błędów i potwierdzeń tytuły takie jak „Nie znaleziono strony – Nazwa sklepu” lub „Zamówienie potwierdzone – Nazwa sklepu”.
• W aplikacjach SPA ustawiać document.title przy każdej zmianie trasy.
• Większość platform (Shopify, WooCommerce, PrestaShop) pozwala ustawiać tytuły SEO; opisowe tytuły pomagają też wyszukiwarkom.

Powiązane kryteria

• 2.4.6 Nagłówki i etykiety — nagłówki muszą opisywać treść.
• 2.4.4 Cel łącza (w kontekście) — tekst linku powinien mówić, dokąd link prowadzi.
• Uruchomić bezpłatne sprawdzenie, aby zobaczyć, czy strony mają tytuły.

Najczęstsze pytania

Czego wymaga WCAG 2.4.2?

Każda strona internetowa musi mieć tytuł opisujący jej temat lub cel. W HTML jest to element title w sekcji head strony.

Dlaczego narzędzie do sprawdzania dostępności zgłasza błąd tytułu?

Zwykle dlatego, że strona nie ma elementu title albo jest on pusty. Narzędzia automatyczne potrafią wykryć tylko to; nie ocenią, czy istniejący tytuł jest opisowy.

Czy tytuły muszą być unikalne?

WCAG wymaga opisowych tytułów, a wytyczne W3C mówią, że tytuły powinny identyfikować stronę i pomagać odróżniać strony od siebie. W praktyce identyczne tytuły na każdej stronie to uniemożliwiają, więc każda strona powinna mieć własny.

A co z aplikacjami SPA i krokami zamówienia?

Tytuł należy aktualizować przy zmianie widoku, np. „Dostawa – Zamówienie – Nazwa sklepu”, aby zawsze odpowiadał bieżącej treści.