Wróć do wszystkich kryteriów

3.1.1 Język strony (ang.) Language of Page

Specjalizacje:

  • Content Creator
  • Deweloper

Elementy:

  • Cała strona / widok

Poziomy:

  • A

Spis treści

    Istota i cel kryterium

    Kryterium sukcesu 3.1.1 nakłada obowiązek programowego określenia domyślnego języka naturalnego dla każdej tworzonej strony internetowej. Głównym celem tej wytycznej jest zapewnienie, że oprogramowanie użytkownika oraz technologie asystujące otrzymają precyzyjną informację, w jakim języku sformatowano zasadniczą część witryny.

    Gwarantuje to, że syntezatory mowy automatycznie dopasują właściwy zestaw reguł fonetycznych, a przeglądarki bezbłędnie wyrenderują znaki i litery specyficzne dla danego alfabetu. Wdrożenie tej reguły eliminuje sytuacje, w których systemy informatyczne muszą zgadywać przeznaczenie językowe tekstu, co drastycznie podnosi czytelność i eliminuje błędy w interpretacji.

    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.

    Definicja w j. angielskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/WAI/WCAG22/quickref/#language-of-page

    Definicja w j. polskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/Translations/WCAG21-pl/#jezyk-strony

    Słownik pojęć

    Język naturalny
    –

     język służący do tradycyjnej komunikacji ludzkiej (np. język polski czy niemiecki), odróżniający się od sztucznych języków programowania.

    Określenie programowe
    –

    metoda zapisu danych w kodzie źródłowym dokumentu, która umożliwia programom komputerowym oraz technologiom wspomagającym automatyczne odczytanie i przetworzenie konkretnych właściwości bez interwencji człowieka.

    Wpływ na dostępność (Kogo wspierasz?)

    • Osoby niewidome i słabowidzące korzystające z czytników ekranu ((ang.) Screen Readers): Urządzenie automatycznie ładuje odpowiedni słownik, zasady wymowy oraz intonację. Gdy pominiesz ten element, polski tekst przeczytany z angielską syntezą stanie się całkowicie losową i chaotyczną zniekształconą mową, wywołującą u odbiorcy ogromną frustrację.
    • Osoby z dysleksją oraz trudnościami poznawczymi: Specjalistyczne narzędzia powiększające lub formatujące tekst potrzebują informacji o języku naturalnym, aby poprawnie dzielić wyrazy, dobierać odpowiednie kroje pisma i ułatwiać płynne czytanie, co drastycznie zmniejsza zmęczenie psychiczne użytkownika.
    • Użytkowników korzystających z automatycznych translatorów: Narzędzia takie jak Google Translate opierają się na deklaracji źródłowej. Błędny znacznik sprawia, że system gubi się, generując bezużyteczne i wadliwe tłumaczenie, które uniemożliwia zrozumienie oferty.
    • Odbiorców poszukujących treści w sieci oraz specjalistów od SEO: Roboty wyszukiwarek używają tych danych do prawidłowego indeksowania i serwowania wyników w konkretnych regionach, co bezpośrednio przekłada się na widoczność Twojego serwisu.

    Zasady wdrażania i wymagania techniczne

    • Umieść atrybut lang bezpośrednio w znaczniku otwierającym <html> na samym początku dokumentu HTML. To ustawienie zdefiniuje domyślny język dla całej zawartości witryny.
    • Wykorzystaj poprawny, dwuliterowy kod języka zgodny z międzynarodowym standardem ISO 639-1 (np. pl dla języka polskiego, en dla angielskiego, de dla niemieckiego).
    • Zastosuj rozszerzony format krajów (np. pl-PL lub en-US), jeśli specyfika projektu wymaga wskazania konkretnego dialektu lub regionu geograficznego, choć do spełnienia poziomu A wystarczy kod dwuliterowy.
    • Zadbaj o dynamiczną aktualizację atrybutu lang za pomocą (ang.) JavaScript, jeżeli Twoja strona jest aplikacją typu (ang.) Single Page Aplication lub pozwala użytkownikowi na zmianę wersji językowej w locie. Kod musi zawsze wiernie odzwierciedlać aktualny stan prezentowanej treści.
    • Unikaj mylenia atrybutu języka z deklaracją kodowania znaków. Znacznik <meta charset="UTF-8"> odpowiada wyłącznie za poprawne wyświetlanie liter, natomiast atrybut lang określa język naturalny. Są to dwa odrębne parametry techniczne w drzewie DOM.
    • Pamiętaj o różnicach między standardami. Atrybut xml:lang stosuj wyłącznie w dokumentach XML oraz XHTML. Przy tworzeniu nowoczesnych stron w standardzie HTML5 jedynym wyborem powinien być klasyczny atrybut lang.

    Wyjątki i sytuacje szczególne

    Kryterium sukcesu 3.1.1 odnosi się bezwzględnie do domyślnego, głównego języka całej strony internetowej. W ramach tego kryterium nie przewidziano żadnych wyjątków zwalniających z tego obowiązku.

    Przykłady implementacji

    Najczęstsze błędy

    • Całkowite pominięcie atrybutu lang (lub xml:lang w dokumentach cyfrowych) w głównym znaczniku <html>. To krytyczne uchybienie, które skazuje użytkowników technologii wspomagających na całkowicie chaotyczną interpretację tekstu.
    • Brak spójności między zadeklarowanym atrybutem a faktyczną zawartością, czyli sytuacja, w której kod wskazuje np. lang="es", podczas gdy cała strona została napisana po polsku.
    • Stosowanie nieprawidłowych lub nieoficjalnych kodów językowych (np. lang="polski", lang="plk"), które nie są zgodne z oficjalną klasyfikacją standardu ISO 639-1.
    • Próba zastąpienia atrybutu języka deklaracją kodowania znaków charset lub nagłówkami odpowiedzi serwera HTTP, które nie są poprawnie interpretowane przez czytniki ekranu jako domyślny język dokumentu.

    Najlepsze praktyki

    • Zawsze łącz atrybut podstawowy z dokładnym podziałem regionalnym (np. lang="pl-PL"), co ułatwia pracę zaawansowanym systemom syntezy mowy i precyzyjnie wskazuje lokalizację.
    • Zweryfikuj automatycznie generowany kod w systemach zarządzania treścią – upewnij się, że instalacja wtyczek wielojęzycznych prawidłowo podmienia atrybut w elemencie nadrzędnym przy przełączaniu flag.
    • Dbaj o czystość kodu i usuwaj puste atrybuty lang="" z szablonów elementów, które mogą dezorientować technologie asystujące.

    Metody testowania

    • Narzędzie deweloperskie (ang.) Developer Tools: Przeanalizuj strukturę drzewa DOM i podpięte zdarzenia JavaScript. Upewnij się, że elementy obsługujące zaawansowane gesty mają zdublowane alternatywne kontrolki (np. przyciski) reagujące na standardowe kliknięcia, a elementy te posiadają poprawne etykiety dostępności.
    • NVDA: Uruchom czytnik ekranu i manualnie spróbuj wywołać funkcję przypisaną pierwotnie do gestu (np. powiększenie mapy), nawigując wyłącznie do alternatywnych przycisków, aby upewnić się, że operacja jest w pełni dostępna bez patrzenia na ekran.
    • Narzędzie deweloperskie (ang.) Developer Tools: Otwórz podgląd drzewa (ang.) DOM strony w przeglądarce, zlokalizuj element główny <html> i zweryfikuj, czy posiada poprawno skonfigurowany atrybut lang.
    • NVDA: Uruchom czytnik ekranu, przejdź do przeglądanej witryny i odsłuchaj próbkę tekstu. Sprawdź, czy syntezator mowy posługuje się właściwym akcentem i prawidłową intonacją, co potwierdzi poprawne zaczytanie metadanych.
    • (ang.) W3C Markup Validation Service: Prześlij kod źródłowy do oficjalnego walidatora konsorcjum. Narzędzie zweryfikuje poprawność semantyczną i upewni Cię, że zastosowany znacznik językowy odpowiada oficjalnym normom międzynarodowym.

    Sprawdź swoją wiedzę

    W linku poniżej znajduje się 6 miniaturowych okienek przeglądarki (ramki iframe) ładujących różne strony internetowe. Twoim zadaniem jest sprawdzenie, czy każda z nich ma prawidłowo zdefiniowany domyślny język naturalny.

    Jak to sprawdzić?

    1. Zbadaj zawartość każdej ramki za pomocą narzędzi deweloperskich (Zbadaj element).
    2. Odszukaj główny znacznik <html> wewnątrz dokumentu ramki.
    3. Sprawdź obecność i wartość atrybutu lang.
    4. Zwróć uwagę na zgodność zadeklarowanego języka z faktyczną treścią strony oraz poprawność kodu (ISO 639-1).

    Notatka: Zanim zajrzysz do rozwiązania, przetestuj i zapisz swoje wnioski na kartce.
    Proponowane narzędzia: Narzędzie deweloperskie (ang.) Developer Tools, NVDA

    Link: https://pdc.ambiscale.com/training/wcag-3-1-1/

    #1 BŁĄD

    Problem: Całkowite pominięcie atrybutu lang w głównym znaczniku <html>.
    Dlaczego: To krytyczne uchybienie. Bez tej deklaracji oprogramowanie użytkownika (np. czytnik ekranu) musi zgadywać język strony, co często kończy się użyciem domyślnego języka systemu operacyjnego.
    Naprawa: Dodaj atrybut: <html lang="pl">.

    #2 BŁĄD

    Problem: Użyto nieoficjalnego kodu języka: lang="polski".
    Dlaczego: Kod języka musi być zgodny ze standardem BCP 47, który opiera się m.in. na kodach dwuliterowych (ISO 639-1, np. „pl”, „en”) z opcjonalnymi rozszerzeniami regionu (np. „en-US”) lub rzadziej kodach trzyliterowych. Przeglądarki i czytniki nie zrozumieją pełnego słowa „polski”.
    Naprawa: Zmień wartość na poprawny kod: <html lang="pl">.

    #3 BŁĄD

    Problem: Brak spójności między zadeklarowanym atrybutem a faktyczną zawartością. Kod wskazuje lang="en", podczas gdy treść strony jest w języku polskim.
    Dlaczego: Chociaż technicznie język „da się programowo odczytać” (jest to „en”), to odczytywany jest błędnie względem treści. Standardowa interpretacja audytowa traktuje to jako niepowodzenie kryterium 3.1.1. Czytnik ekranu spróbuje przeczytać polski tekst używając angielskich reguł wymowy, co stworzy niezrozumiały bełkot.
    Naprawa: Dostosuj atrybut do treści: <html lang="pl">.

    #4 DOBRZE

    Dlaczego: Zastosowano poprawny, dwuliterowy kod języka pl zgodny ze standardem ISO 639-1 w znaczniku <html>. Treść strony jest w języku polskim, więc wszystko się zgadza.

    #5 DOBRZE

    Dlaczego: Zastosowano rozszerzony format z kodem kraju lang="en-US". Jest to dobra praktyka, ułatwiająca pracę zaawansowanym systemom syntezy mowy i precyzyjnie wskazująca lokalizację (amerykańska odmiana języka angielskiego).

    #6 BŁĄD

    Problem: Zamiast atrybutu lang w znaczniku <html>, użyto tagu <meta name="language" content="pl">.
    Dlaczego: Tagi meta (w tym deklaracja kodowania znaków charset) nie są poprawnie interpretowane przez czytniki ekranu jako domyślny język dokumentu. Jedynym poprawnym sposobem zadeklarowania języka naturalnego w HTML5 jest atrybut lang w elemencie nadrzędnym.
    Naprawa: Usuń meta tag i dodaj atrybut do HTML: <html lang="pl">.

    Źródła

    Dodatkowe linki

    Wróć do wszystkich kryteriów