WCAG 3.1.1: Język strony

Kryterium sukcesu WCAG 3.1.1 Język strony jest fundamentalne dla zapewnienia dostępności treści cyfrowych. Wymaga ono, aby domyślny język naturalny każdej strony internetowej mógł być programowo określony. Oznacza to, że przeglądarki internetowe, technologie wspomagające (takie jak czytniki ekranu) oraz inne narzędzia muszą być w stanie automatycznie zidentyfikować, w jakim języku napisana jest główna treść strony.

Czym jest kryterium WCAG 3.1.1 Język strony?

Zgodnie z WCAG 2.0 i 2.1, kryterium sukcesu 3.1.1 (na poziomie A) stwierdza, że: „Domyślny język naturalny każdej strony internetowej może być programowo określony.” W praktyce oznacza to wykorzystanie atrybutu lang w znaczniku <html> do wskazania głównego języka dokumentu. Jest to kluczowy element dla zapewnienia poprawnej interpretacji i prezentacji treści użytkownikom korzystającym z różnych technologii.

Dlaczego kryterium 3.1.1 jest ważne? (Wpływ na dostępność)

Prawidłowe określenie języka strony ma ogromny wpływ na dostępność i użyteczność dla szerokiej grupy użytkowników, w tym osób z niepełnosprawnościami. Oto główne powody:

  • Wsparcie dla czytników ekranu (screen readerów): Czytniki ekranu dostosowują swoją wymowę i intonację do zadeklarowanego języka. Jeśli język strony nie jest określony lub jest określony błędnie, czytnik może próbować odczytać tekst w niewłaściwym języku, co prowadzi do niezrozumiałej, zniekształconej mowy. Przykładowo, polski tekst odczytany z angielską intonacją będzie brzmiał obco i utrudni zrozumienie.
  • Ułatwienia dla narzędzi tłumaczących: Automatyczne narzędzia do tłumaczenia treści (np. Google Translate) polegają na programowo określonym języku źródłowym, aby prawidłowo przetłumaczyć stronę na język docelowy użytkownika. Brak deklaracji języka może skutkować błędnymi lub nieskutecznymi tłumaczeniami.
  • Użytkownicy z dysleksją lub trudnościami poznawczymi: Niektóre narzędzia wspomagające dla osób z dysleksją lub innymi trudnościami poznawczymi mogą wykorzystywać informację o języku do lepszego formatowania tekstu, podkreślania czy ułatwiania czytania.
  • Wpływ na wyszukiwarki i SEO: Wyszukiwarki internetowe, takie jak Google, również korzystają z informacji o języku strony do indeksowania i wyświetlania odpowiednich wyników wyszukiwania użytkownikom z różnych regionów językowych. Prawidłowa deklaracja może poprawić widoczność strony w wynikach dla konkretnego języka.
  • Poprawa ogólnego doświadczenia użytkownika: Nawet użytkownicy bez specjalnych potrzeb mogą odnieść korzyści, gdy ich przeglądarka automatycznie wykryje język i zaoferuje, na przykład, sprawdzenie pisowni w odpowiednim języku.

Wymagania kryterium sukcesu 3.1.1

Aby spełnić kryterium 3.1.1, należy upewnić się, że:

  • Główny język strony jest zadeklarowany za pomocą atrybutu lang w znaczniku <html>.
  • Użyty kod języka jest zgodny ze standardem ISO 639-1 (otwiera nową kartę) (np. pl dla polskiego, en dla angielskiego, de dla niemieckiego). Opcjonalnie można użyć rozszerzonych kodów BCP 47 (np. en-US dla angielskiego w USA, pl-PL dla polskiego w Polsce, choć dla 3.1.1 zazwyczaj wystarczy dwuliterowy kod).

Pamiętaj, że kryterium 3.1.1 odnosi się do domyślnego języka strony. Jeśli na stronie występują fragmenty tekstu w innym języku, należy je oznaczyć osobno, co jest wymaganiem kryterium WCAG 3.1.2 Język części.

Praktyczne wskazówki dotyczące zgodności

Deklarowanie języka głównego strony

Najprostszą i najbardziej efektywną metodą jest umieszczenie atrybutu lang bezpośrednio w znaczniku <html> na początku dokumentu HTML. To ustawia domyślny język dla całej zawartości strony.

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="UTF-8">
        <title>Tytuł mojej strony</title>
    </head>
    <body>
        <!-- Treść strony w języku polskim -->
    </body>
</html>

Nie myl z xml:lang ani charset

  • Atrybut xml:lang jest używany w dokumentach XML i XHTML i choć pełni podobną funkcję, dla HTML5 preferowane jest użycie atrybutu lang.
  • Meta tag charset (np. <meta charset="UTF-8">) określa kodowanie znaków dokumentu, a nie język naturalny. Oba są ważne, ale służą do różnych celów i nie mogą się nawzajem zastępować.

Przykłady implementacji

Przykład prawidłowy

Poniższy przykład pokazuje prawidłową deklarację języka polskiego dla całej strony.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Witamy na naszej stronie!</title>
</head>
<body>
    <h1>Oto nasza oferta</h1>
    <p>Prezentujemy szeroki wybór produktów i usług, dostosowanych do Państwa potrzeb. Zapraszamy do zapoznania się z naszą pełną ofertą.</p>
</body>
</html>

Przykład nieprawidłowy: Brak deklaracji języka

W tym przykładzie atrybut lang został pominięty. Czytniki ekranu mogą mieć problem z prawidłowym odczytaniem tekstu, a narzędzia tłumaczące nie będą wiedziały, w jakim języku jest strona.

<!DOCTYPE html>
<html> <!-- Brak atrybutu lang -->
<head>
    <meta charset="UTF-8">
    <title>Welcome to our website!</title>
</head>
<body>
    <h1>Our offer</h1>
    <p>We present a wide selection of products and services tailored to your needs.</p>
</body>
</html>

Przykład nieprawidłowy: Błędny kod języka

Deklaracja języka jest obecna, ale użyty kod języka (polski) nie jest zgodny ze standardem ISO 639-1, który wymaga dwuliterowego kodu (pl).

<!DOCTYPE html>
<html lang="polski"> <!-- Nieprawidłowy kod języka -->
<head>
    <meta charset="UTF-8">
    <title>Witaj na mojej stronie internetowej!</title>
</head>
<body>
    <h1>O nas</h1>
    <p>Jesteśmy firmą z wieloletnim doświadczeniem.</p>
</body>
</html>

Najlepsze praktyki i typowe pułapki

  • Zawsze deklaruj język: To podstawowa zasada. Nigdy nie pomijaj atrybutu lang w znaczniku <html>.
  • Używaj prawidłowych kodów języków: Zawsze sprawdzaj i używaj standardowych kodów języków, najlepiej ISO 639-1 (dwuliterowe) lub BCP 47 dla większej precyzji (np. en-GB, fr-CA).
  • Domyślny język vs. język części: Pamiętaj, że 3.1.1 dotyczy domyślnego języka całej strony. Jeśli na stronie pojawiają się fragmenty tekstu w innym języku (np. cytaty, frazy), należy je oznaczyć osobno atrybutem lang na odpowiednich elementach (<p>, <span> itd.). Jest to wymóg kryterium WCAG 3.1.2 Język części. Nie polegaj na atrybucie lang w <html> do obsługi takich przypadków.
  • Spójność: Upewnij się, że język deklarowany w atrybucie lang faktycznie odpowiada głównemu językowi treści strony.
  • Dynamiczne strony: Jeśli Twoja strona zmienia język na podstawie preferencji użytkownika lub innych czynników, upewnij się, że atrybut lang jest dynamicznie aktualizowany, aby zawsze odzwierciedlał aktualny język treści.

Podsumowanie

Spełnienie kryterium WCAG 3.1.1 Język strony jest prostym, ale niezwykle ważnym krokiem w kierunku zapewnienia dostępności i użyteczności strony internetowej. Prawidłowa deklaracja języka za pomocą atrybutu lang w znaczniku <html> znacząco poprawia doświadczenie użytkowników technologii wspomagających, narzędzi tłumaczących oraz wpływa pozytywnie na SEO. Zawsze pamiętaj o tej podstawowej zasadzie tworzenia dostępnych stron.

Powiązane wpisy

Nadal szukasz odpowiedzi?

Zapytaj naszych specjalistów używając czatu online.

Skontaktuj się z nami