Wróć do wszystkich kryteriów

3.1.2 Język części (ang.) Language of parts

Specjalizacje:

  • Content Creator
  • Deweloper

Elementy:

  • Tekst i treść

Poziomy:

  • AA

Spis treści

    Istota i cel kryterium

    Kryterium 3.1.2 stanowi uzupełnienie dla kryterium WCAG 3.1.1 „Język strony”, które dotyczy ustawienia głównego języka całej strony internetowej. Podczas gdy WCAG 3.1.1 określa domyślny język dokumentu HTML (np. <html lang="pl">), 3.1.2 koncentruje się na sytuacjach, gdy w obrębie tego dokumentu pojawiają się fragmenty tekstu (pojedyncze słowa, zdania, akapity, bloki tekstu) w innym języku. W takich przypadkach niezbędne jest użycie odpowiednich atrybutów HTML, aby programowo wskazać zmianę języka.

    Gwarantuje to, że syntezatory mowy automatycznie przełączą się na właściwy zestaw reguł fonetycznych i poprawną artykulację, a urządzenia brajlowskie bezbłędnie wyrenderują znaki oraz litery specyficzne dla danego alfabetu. Wdrożenie tej reguły eliminuje sytuacje, w których systemy informatyczne muszą czytać obcą treść z domyślną, niedopasowaną fonetyką języka głównego, co drastycznie zmniejsza zmęczenie psychiczne i całkowicie eliminuje frustrację odbiorcy.

    Definicja w j. angielskim

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

    Definicja w j. polskim

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

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

    • Osoby korzystające z wyświetlaczy brajlowskich: Zapewniasz bezbłędne renderowanie i prawidłowe generowanie znaków na urządzeniu brajlowskim, co daje pewność płynnego odbioru tekstu.
    • Automatyczne tłumacze i słowniki: Umożliwiasz automatycznym translatorom bezbłędne rozpoznawanie oraz precyzyjne, wysoce dokładne tłumaczenie poszczególnych partii materiału.
    • Użytkownicy czytników ekranu: Zapobiegasz sytuacji, w której syntezator mowy bezmyślnie kaleczy obcojęzyczne słowa, stosując do nich reguły fonetyczne języka domyślnego. Właściwe oznaczenie eliminuje głęboką frustrację i pozwala na automatyczne przełączenie mowy na poprawny akcent i artykulację.
    • Osoby z niepełnosprawnością poznawczą: Zdejmujesz z nich ogromne obciążenie psychiczne. Wyraźne zdefiniowanie granic językowych ułatwia właściwą interpretację trudnych, obcojęzycznych fraz i redukuje chaos poznawczy.
    • Osoby dwujęzyczne oraz wielojęzyczne: Radykalnie ułatwiasz im komfortowe przyswajanie zróżnicowanej treści oraz sprawne poruszanie się po serwisie.

    Kryteria sukcesu i wymagania

    • Zastosuj jasne, bezkompromisowe reguły programistyczne, aby spełnić standardy dostępności cyfrowej.
    • Zadbaj o bezwzględne wdrożenie atrybutu lang w kodzie HTML wszędzie tam, gdzie następuje jakakolwiek zmiana języka. Atrybut ten możesz i powinieneś aplikować bezpośrednio do elementów strukturalnych, takich jak akapity <p>, sekcje <div>, cytaty blokowe <blockquote>, elementy list <li> czy śródtekstowe znaczniki <span>.
    • Używaj wyłącznie oficjalnych i aktualnych kodów językowych zgodnych ze standardem ISO 639. Jeśli zachodzi taka potrzeba regionalna, uzupełnij je o kod kraju na podstawie specyfikacji ISO 3166 (np. en-US, fr-CA).
    • Przeanalizuj drobiazgowo całą strukturę strony i zidentyfikuj każdą modyfikację językową, od całych bloków tekstu, przez cytaty, aż po pojedyncze słowa i zwroty.
    • Pamiętaj o możliwości zagnieżdżania atrybutów lang – w takim układzie technologie asystujące nadadzą najwyższy priorytet elementowi znajdującemu się najgłębiej w strukturze.
    • Nigdy nie polegaj na stylach CSS. Wizualna zmiana kroju pisma czy wyróżnienie kolorem za pomocą klas nie niesie żadnej wartości semantycznej i jest całkowicie ignorowane przez czytniki ekranu.
    • W przypadku dynamicznego generowania komponentów przez JavaScript, bezwzględnie dopilnuj, aby Twoje skrypty poprawnie wstrzykiwały atrybut lang wraz z nowo pojawiającą się treścią w drzewie DOM.

    Wyjątki i sytuacje szczególne

    W przeciwieństwie do powszechnego przekonania, oficjalna specyfikacja W3C definiuje cztery wyraźne oraz formalne grupy wyjątków, w których programowe oznaczanie zmian językowych nie jest wymagane:

    • Nazwy własne ((ang.) proper names): Imiona, nazwiska, nazwy własne marek, miast czy państw (np. „Steve Jobs”, „Paris”) nie podlegają obowiązkowi tagowania.
    • Terminy techniczne ((ang.) technical terms): Specjalistyczne pojęcia naukowe, medyczne czy techniczne zapożyczone z obcych lub martwych języków (np. Homo sapiens, hertz, habeas corpus) są zwolnione z kryterium.
    • Słowa o nieokreślonym języku ((ang.) words of indeterminate language): Wyrazy, których pochodzenia językowego nie można jednoznacznie zidentyfikować w ludzkiej mowie.
    • Słowa lub frazy zakorzenione w języku otaczającym: Zapożyczenia, które na stałe weszły do słownika i powszechnego użytku w danym języku (np. słowo „podcast” użyte w tekście francuskim czy „rendezvous” w zdaniu angielskim). Ponieważ syntezatory mowy zazwyczaj radzą sobie z ich prawidłową fonetyką w kontekście języka natywnego, nie musisz ich dodatkowo oznaczać.
    • Ograniczenia (ang.) user agentów: Problemy wynikające z błędów samych technologii asystujących nie obciążają twórcy strony i nie stanowią naruszenia tego kryterium.

    Przykłady implementacji

    Najczęstsze błędy

    • Błędy w kodach językowych: Stosowanie niepoprawnych, zdezaktualizowanych lub własnoręcznie wymyślonych oznaczeń (np. używanie kodu eng zamiast en, bądź pol zamiast pl), co całkowicie uniemożliwia poprawną interpretację przez oprogramowanie.
    • Używanie CSS do oznaczania języka: Próby zastąpienia semantycznego kodu poprzez style wizualne, np. tworzenie klas .jezyk-angielski { font-style: italic; }, które są całkowicie niewidoczne dla technologii wspomagających.
    • Brak oznaczeń dla elementów interfejsu: Ignorowanie zmian językowych w komponentach interaktywnych, takich jak etykiety formularzy, przyciski akcji czy komunikaty systemowe.
    • Zapominanie o krótkich frazach i cytatach: Pozostawianie bez znaczników obcojęzycznych zdań, rozbudowanych cytatów bądź zwrotów, które nie spełniają ścisłej definicji powszechnych zapożyczeń.

    Najlepsze praktyki

    • Testowanie z technologiami asystującymi: Regularnie weryfikuj działanie serwisu za pomocą czytników ekranu (np. NVDA), sprawdzając, czy akcent oraz wymowa obcych fraz zmieniają się prawidłowo.
    • Przeszkolenie twórców treści: Zadbaj o to, aby każda osoba publikująca materiały na stronie rozumiała wymagania techniczne i potrafiła właściwie posługiwać się edytorami tekstu w celu oznaczania języka.
    • Walidacja kodów językowych: Wykorzystuj oficjalne walidatory i narzędzia programistyczne do stałej kontroli poprawności używanych tagów ISO.
    • Systematyczność: Przyjmij żelazną zasadę, że każda intencjonalna zmiana języka – niezależnie od jej długości – musi zostać odzwierciedlona w kodzie HTML strony.

    Metody testowania

    • Narzędzie deweloperskie (ang.) Developer Tools: Dokonaj szczegółowej inspekcji drzewa DOM i zweryfikuj, czy wszystkie fragmenty tekstu w obcym języku posiadają właściwie przypisany atrybut lang.
    • NVDA: Uruchom czytnik ekranu i odsłuchaj treści wielojęzyczne, aby upewnić się, że syntezator mowy bezbłędnie przełącza pakiety językowe i stosuje poprawną fonetykę bez zniekształceń.
    • (ang.) W3C Markup Validation Service: Przetestuj kod strony w oficjalnym walidatorze, aby upewnić się, że znaczniki oraz wartości subtagów językowych są w pełni poprawne i zgodne ze standardami.

    Sprawdź swoją wiedzę

    W linku poniżej znajduje się 6 przykładów fragmentów tekstu oraz elementów interfejsu w języku polskim, które zawierają wtrącenia w innych językach. Twoim zadaniem jest sprawdzenie, czy zmiana języka została poprawnie oznaczona programowo.

    Jak to sprawdzić?

    1. Zbadaj obcojęzyczne słowa, cytaty lub przyciski za pomocą narzędzi deweloperskich (Zbadaj element).
    2. Sprawdź, czy element otaczający obcojęzyczną treść (np. <span>, <blockquote>, <button>) posiada atrybut lang.
    3. Zwróć uwagę, czy stylizacja CSS nie jest używana jako jedyny sposób na wyróżnienie obcego języka.
    4. Pamiętaj o wyjątkach: nazwy własne, terminy techniczne i powszechne zapożyczenia nie wymagają oznaczania.

    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-2/

    #1 BŁĄD

    Problem: Francuskie zdanie „c’est la vie” nie zostało w żaden sposób oznaczone programowo.
    Dlaczego: Czytnik ekranu z domyślnym polskim syntezatorem przeczyta tę frazę polską fonetyką (mniej więcej „cest la wje”), co zniekształca wymowę i utrudnia zrozumienie.
    Naprawa: Należy otoczyć obcojęzyczny fragment znacznikiem <span> z odpowiednim atrybutem: <span lang="fr">c'est la vie</span>.
    Uwaga: Choć zwrot ten bywa używany w polszczyźnie, wprowadzenie „Jak to mówią Francuzi” jawnie sygnalizuje zamierzoną zmianę języka — dlatego wyjątek dla powszechnych zapożyczeń tutaj nie obowiązuje.

    #2 DOBRZE

    Dlaczego: Angielski zwrot „game changer” został poprawnie otoczony znacznikiem <span lang="en">. Dzięki temu syntezator mowy automatycznie przełączy się na angielski akcent na czas czytania tych dwóch słów, a następnie wróci do języka polskiego.

    #3 BŁĄD

    Problem: Włoski zwrot „dolce far niente” został wyróżniony jedynie wizualnie za pomocą klasy CSS (inna czcionka, kolor).
    Dlaczego: Style CSS są całkowicie ignorowane przez czytniki ekranu. Wizualna zmiana nie niesie żadnej wartości semantycznej, więc program nie wie, że nastąpiła zmiana języka.
    Naprawa: Dodaj atrybut języka do istniejącego znacznika: <span class="tc-foreign-css" lang="it">dolce far niente</span>.

    #4 DOBRZE

    Dlaczego: Cały łaciński cytat blokowy został poprawnie oznaczony atrybutem lang="la" bezpośrednio w znaczniku <blockquote>. Nie trzeba dodawać dodatkowego <span> wewnątrz, atrybut można aplikować do elementów strukturalnych.
    Uwaga: Syntezatory mowy zazwyczaj nie mają osobnego głosu łacińskiego, więc wymowa może się nie zmienić — oznaczenie jest jednak wymagane i poprawne: czytnik nie zastosuje ślepo polskich reguł, a np. automatyczne tłumacze i słowniki prawidłowo rozpoznają język fragmentu.

    #5 BŁĄD

    Problem: Etykieta przycisku „Subscribe now” jest w języku angielskim, ale nie posiada atrybutu lang.
    Dlaczego: Kryterium 3.1.2 dotyczy nie tylko tekstu w akapitach, ale również elementów interfejsu (przycisków, etykiet formularzy). Brak oznaczenia spowoduje błędne odczytanie etykiety przez polski syntezator.
    Naprawa: Dodaj atrybut bezpośrednio do przycisku: <button class="tc-btn" lang="en">Subscribe now</button>.

    #6 DOBRZE

    Dlaczego: Słowo „podcast” to powszechne zapożyczenie, które na stałe weszło do języka polskiego. „Apple” i „Steve Jobs” to nazwy własne (marka i imię/nazwisko). Zgodnie z oficjalną specyfikacją W3C, nazwy własne oraz słowa zakorzenione w języku otaczającym są zwolnione z obowiązku oznaczania atrybutem lang.

    Źródła

    Dodatkowe linki

    Wróć do wszystkich kryteriów