blog na temat dostępności stron internetowych

Przejdź do głównej treści

Kilka słów na temat elementu <title>

Znacznik <title> (“tytuł”), zawarty wewnątrz elemetu <head>, jest wymagany we wszystkich dokumentach HTML. Znacznik ten ma za zadanie opisać temat danego dokumentu; jak sama nazwa wskazuje pełni on rolę jego tytułu. Tytuł strony internetowej wyświetlany jest w zakładkach niektórych przeglądarek, w menu “ulubionych” stron (gdy strona zostanie do niego dodana), oraz w rezultatach wyszukiwania. Zawartość znacznika <title> jest też automatycznie odczytywana przez czytnik ekranu, gdy użytkownik otwiera nową stronę. Jak widać więc element ten jest niezwykle przydatny dla wszystkich użytkowników, gdyż pozwala zorientować się, jaki jest temat danej strony przed zapoznaniem się z jej treścią.

O czym należy pamiętać tworząc tytuły stron internetowych?

Poniżej opisane jest kilka prostych zasad, które powinniśmy pamiętać tworząc strony internetowe:

Element <title> jest obowiązkowy

Każdy dokument HTML musi posiadać element <title> zawarty w elemencie <head>. Niestety zdarza się czasem, że tytuł strony nie jest zdefiniowany w kodzie HTML. Różne przeglądarki róznie sobie z tym radzą; niektóre nie podają żadnej informacji w zastępstwie brakującego tytułu, niektóre używają w zamian nazwę serwisu internetowego, inne zaś zastępują tytuł adresem URL danej strony, który może być typu: “webapp/wcs/stores/servlet/OrderItemDisplay?URL=OrderItemDisplay%3ForderType%3Dregular&storeId=10052&orderType=regular&updatePrices=1&calculationUsageId=-1&langId=-1&catalogId=11051”.
Nie należy chyba nikogo przekonywać, że tytuł taki nie jest pomocny; widzący użytkownicy nie będą w stanie zorientować się na podstawie zakładki w oknie przeglądarki jaka jest treść takiej strony, a osoby korzystające z czytnika ekranu nie będą pewne, czy trafiły na właściwą stronę.

Element <title> musi określać temat strony

Tytuł dokumentu HTML powinien wiernie opisywać jego treść, np. strona zawierajaca dane kontaktowe może być zatytułowana “Kontakt”.
Zdarza się, że wszystkie strony wchodzące w skład danego serwisu internetowego mają nadany taki sam tytuł, z reguły podający nazwę serwisu internetowego, zamiast informujący o treści danej strony (np. “Biuro podróży XYZ”). Osoba widząca nie będzie w stanie rozróżnić pomiędzy kilkoma stronami tego samego serwisu internetowego na podstawie tytułu wyświetlonego w zakładkach, a osoba korzystająca z czytnika ekranu nie zostanie poinformowana, na której stronie serwisu się znajduje.

Powyższe dwie zasady są głównymi regułami tworzenia tytułów zgodnie z zasadami dostępności, których spełnienie wymagane jest przez wytyczne WCAG 2.0. Stanowią one absolutne minimum; istnieje jednak również szereg innych zaleceń, które opisują jak tworzyć szczególnie dobre i przyjazne użytkownikom tytuły stron.

Tytuły powinny być możliwie zwięzłe

Niektóre firmy ze względów marketingowych próbują zawrzeć w tytule jak najwięcej kluczowych słów, co skutkuje niepotrzebnie długimi tytułami typu:
“Biuro podróży XYZ – niezapomniane wakacje – tanie przeloty i hotele – południe Europy – satysfakcja gwarantowana”.

Za każdym razem, gdy osoba korzystająca z czytnika ekranu otwiera stronę serwisu używajacego tego typu tytuły, osoba ta jest zasypywana mnóstwem zbytecznej informacji. Tytuły powinny być możliwie krótkie, by użytkownik mógł szybko zorientować się, czy dana strona go interesuje.

Tytuły stron powinny być unikalne

Żadne dwie strony należące do tego samego serwisu internetowego nie powinny mieć identycznego tytułu.

Tytuł strony powininen informować, do jakiego serwisu strona ta należy

Element <title> może też zawierać nazwę sekcji serwisu internetowego, do której dana strona należy, np:

<title>Nagrody i wyróżnienia - O nas – Biuro podróży XYZ</title>

(gdzie “Nagrody i wyróżnienia” jest stroną trzeciego poziomu, należącą do sekcji “O nas” serwisu “Biuro podróży XYZ”).

Najważniesza informacja powinna być podana na początku

Treść tytułu powinna najpierw określać temat bieżącej strony, a dopiero później do której sekcji i do jakiego serwisu należy (innymi słowy informacja powinna być uporządkowana od najbardziej unikalnej do najbardziej ogólnej).
Zatem np. tytuł “Biuro podróży XYZ – Lato 2015 – Grecja” nie jest dobrym tytułem. Jeśli użytkownik czytnika ekranu otworzy kilka stron serwisu “Biura podróży XYZ”, za każdym razem najpierw usłyszy nazwę serwisu, a dopiero na samym końcu najważniejszą dla niego informację – na jakiej stronie się aktualnie znajduje. Natomiast jeśli widzący użytkownicy otworzą kilka stron tego serwisu w różnych zakładkach okna przeglądarki, nie będą oni w stanie szybko zorientować się, która strona jest otwarta w której zakładce.

Fragment okna przeglądarki z czterema zakładkami; każda z nich zawiera tekst 'Biuro podróży XYZ - Lato
Nieprawidłowe tytuły utrudniają użytkownikowi rozróżnienie pomiędzy kilkoma stronami tego samego serwisu

Podsumowując:

  • każdy element <head> musi zawierać element <title>
  • tekst zawarty w elemencie <title> musi zwięźle opisywać treść danej strony
  • tytuł każdej strony musi być unikalny
  • tytuł strony powininen również zawierać nazwę serwisu, do którego należy (oraz ewentualnie nazwę sekcji nadrzędnej)
  • najważniejsza informacja powinna być podana na początku (czyli tytuł danej strony powinien być podany przed nazwą serwisu, do którego należy).

Dodaj komentarz

Należy wypełnić wszystkie pola oznaczone asteryskiem (*).
Zanim komentarz zostanie opublikowany będzie musiał zostać zatwierdzony przez moderatora.

Możesz wykorzystać następujące elementy HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>