WCAG 3.1.2: Język fragmentów

Co Oznacza Ta Zasada

WCAG 3.1.2 — Language of Parts (Język fragmentów) jest kryterium poziomu AA w ramach zasady Zrozumiałość (Understandable). Bezpośrednio opiera się na 3.1.1 (Language of Page), które wymaga zadeklarowania głównego języka całej strony. Kryterium 3.1.2 idzie dalej: za każdym razem, gdy fragment, fraza lub sekcja treści jest napisana w języku innym niż domyślny język strony, ta część musi mieć atrybut lang identyfikujący jej konkretny język.

W praktycznych kategoriach HTML oznacza to zastosowanie atrybutu lang do dowolnego elementu, który obejmuje przełączenie języka. Wartość atrybutu musi być prawidłowym tagiem języka BCP 47 — na przykład lang='en' dla angielskiego, lang='fr' dla francuskiego, lang='de' dla niemieckiego lub lang='tr' dla tureckiego. Podtagi regionu (takie jak lang='en-US' lub lang='tr-TR') są dozwolone i zalecane, gdy istotna jest wymowa specyficzna dla dialektu.

Pozytywny wynik ma miejsce, gdy każdy odrębny segment językowy, który czytelnik postrzega jako należący do innego języka, jest opakowany w element z poprawnym atrybutem lang. Negatywny wynik ma miejsce, gdy występuje fragment w innym języku, ale nie ma atrybutu lang lub ma on nieprawidłową wartość — na przykład oznaczenie francuskiego zdania jako lang='de'.

WCAG przewiduje trzy wyraźne wyjątki od tego kryterium. Po pierwsze, nazwy własne — imiona i nazwiska, nazwy marek, nazwy geograficzne — nie wymagają oznaczania języka, nawet jeśli pochodzą z innego języka. Po drugie, terminy techniczne, które są rozpoznawane jako elementy słownictwa w języku podstawowym (takie jak łacińska fraza in vitro używana na anglojęzycznej stronie medycznej), są zwolnione. Po trzecie, słowa o nieokreślonym języku — słowa, które zostały tak silnie zaadaptowane do języka podstawowego, że ich pochodzenie jest niejednoznaczne — również są zwolnione. Te wyjątki odzwierciedlają praktyczną rzeczywistość, że wiele zapożyczeń nie wymaga przełączenia wymowy, aby zostały poprawnie zrozumiane.

Atrybut lang można umieścić na dowolnym elemencie HTML, w tym <span>, <p>, <div>, <blockquote>, <section>, a nawet <td> w komórce tabeli. Atrybut jest dziedziczony przez wszystkie elementy potomne, więc oznaczenie kontenera wysokiego poziomu jest wystarczające, jeśli cały blok jest w języku docelowym. Indywidualne elementy inline trzeba oznaczać tylko wtedy, gdy krótkie frazy są wplecione w inaczej jednojęzyczne akapity.

Dlaczego To Ma Znaczenie

Głównymi beneficjentami tego kryterium są użytkownicy czytników ekranu, szczególnie osoby niewidome lub słabowidzące. Czytniki ekranu polegają na silnikach text-to-speech (TTS), które są specyficzne dla języka. Gdy turecki czytnik ekranu napotyka francuskie zdanie bez atrybutu lang='fr', próbuje wymówić francuskie słowa, używając tureckich reguł fonetycznych, co daje w efekcie w dużej mierze niezrozumiały dźwięk. Słuchacz może nawet nie zdać sobie sprawy, że nastąpiło przełączenie języka — po prostu słyszy zniekształcony dźwięk i całkowicie traci zrozumienie treści.

Rozważmy scenariusz z rzeczywistego świata, powszechny na tureckich stronach e-commerce i turystycznych: strona produktu napisana po turecku, która zawiera nazwę marki i krótkie hasło marketingowe po angielsku, a następnie zastrzeżenie prawne po francusku dla klientów z Europy. Bez oznaczenia języka dla segmentów angielskiego i francuskiego niewidomy użytkownik polegający na tureckim głosie TTS usłyszy trzy segmenty wymówione tak, jakby były po turecku. Angielskie hasło może być domyślone dzięki podobieństwu fonetycznemu, ale francuski tekst prawny staje się całkowicie niezrozumiały — co może spowodować, że użytkownik przeoczy kluczowe informacje umowne lub dotyczące bezpieczeństwa.

Użytkownicy z niepełnosprawnościami poznawczymi, którzy polegają na narzędziach do odczytu tekstu na głos (nie tylko dedykowanych czytnikach ekranu), również są dotknięci. Wiele popularnych rozszerzeń przeglądarkowych wspomagających czytanie używa atrybutu lang do wyboru właściwego głosu. Bez niego narzędzie albo ignoruje przełączenie języka, albo domyślnie używa jednego głosu dla całej strony, co podważa zrozumiałość.

Poza dostępnością, poprawne oznaczanie języka przynosi mierzalne korzyści SEO. Wyszukiwarki używają atrybutów lang do prawidłowego indeksowania treści wielojęzycznych, zwiększając prawdopodobieństwo, że strony w określonym języku pojawią się w wynikach wyszukiwania kierowanych geograficznie i językowo. Przeglądarki również używają tego atrybutu, aby oferować trafne sugestie tłumaczenia, a narzędzia sprawdzania pisowni odwołują się do niego, aby zastosować właściwy słownik. Krótko mówiąc, poprawne oznaczanie języka przynosi korzyści wszystkim użytkownikom — nie tylko osobom z niepełnosprawnościami.

Szacuje się, że ponad 2,2 miliarda ludzi na całym świecie ma jakąś formę upośledzenia wzroku, a dziesiątki milionów codziennie polegają na czytnikach ekranu. Treści wielojęzyczne w sieci stają się coraz częściej normą na rynkach międzynarodowych, co sprawia, że zgodność z Language of Parts jest kluczowa dla każdej witryny obsługującej globalną lub wielojęzyczną publiczność.

Powiązane Zasady Axe-core

WCAG 3.1.2 wymaga ręcznego testowania, ponieważ narzędzia automatyczne nie są w stanie wiarygodnie zidentyfikować, które fragmenty tekstu na stronie są napisane w języku innym niż domyślny język strony, bez zastosowania algorytmów wykrywania języka naturalnego (NLP) — a nawet one mogą być niepewne w przypadku krótkich fraz, nazw własnych i terminologii technicznej.

• Ręczna inspekcja — wykrywanie języka: Automatyczne skanery, takie jak axe-core, mogą zweryfikować, że atrybut lang na elemencie <html> jest obecny i prawidłowy (objęte zasadami html-has-lang i html-lang-valid), ale nie są w stanie przeczytać całego tekstu i określić, czy dany fragment jest językowo francuski, niemiecki czy japoński. Narzędzie nie ma semantycznego zrozumienia, czy ciąg "Bonjour tout le monde" jest francuski, czy jest zmyśloną frazą, więc nie może oznaczyć braku lang='fr' na otaczającym elemencie.
• Ręczna inspekcja — nieprawidłowe wartości lang: Jeśli deweloper umieścił atrybut lang na elemencie, ale przypisał błędny kod języka (na przykład oznaczając tekst hiszpański jako lang='pt'), narzędzia automatyczne zobaczą prawidłowy tag BCP 47 i nie zgłoszą błędu. Tylko recenzent, który zna oba języki, może zidentyfikować niezgodność.
• Ręczna inspekcja — zakres zmian języka: Nawet gdy atrybuty lang istnieją, człowiek musi potwierdzić, że atrybut obejmuje pełen zakres fragmentu w języku obcym — nie tylko pierwsze zdanie i nie wykracza na sąsiednią treść należącą do języka podstawowego. Narzędzia automatyczne nie mają zdolności rozumienia tekstu, aby dokonać takiej oceny.

Jak Testować

1. Automatyczne skanowanie bazowe: Uruchom axe DevTools (rozszerzenie przeglądarki lub integracja CI) lub Google Lighthouse na stronie. Poszukaj naruszeń zasad html-has-lang lub html-lang-valid — wskazują one, że nawet deklaracja języka na poziomie strony jest brakująca lub nieprawidłowa, co jest problemem wstępnym do naprawienia przed zajęciem się 3.1.2. Zauważ, że żadne z tych narzędzi nie oznaczy brakujących atrybutów lang inline, więc ten krok jedynie ustala punkt wyjścia.
2. Wizualny audyt treści: Przeczytaj całą treść strony i zidentyfikuj każdy fragment, frazę lub blok, który jest widocznie napisany w języku innym niż zadeklarowany język strony. Utrzymuj listę tych elementów, notując ich lokalizację w DOM. Sprawdź każdy element (lub jego najbliższego przodka) pod kątem atrybutu lang w inspektorze DOM przeglądarki (Narzędzia deweloperskie przeglądarki → panel Elements). Zweryfikuj, że wartość jest prawidłowym tagiem BCP 47 odpowiadającym rzeczywistemu językowi treści.
3. Test z czytnikiem ekranu — NVDA + Firefox (Windows): Otwórz stronę z aktywnym NVDA, używając Firefoksa. Nawiguj po treści za pomocą klawiszy strzałek, koncentrując się na zidentyfikowanych fragmentach w języku obcym. Słuchaj uważnie: NVDA powinien automatycznie przełączać wymowę, gdy napotka poprawnie oznaczony atrybut lang. Jeśli tekst w języku obcym jest odczytywany z użyciem reguł wymowy języka domyślnego, bez zauważalnej zmiany głosu, atrybut lang prawdopodobnie jest brakujący lub nieprawidłowy.
4. Test z czytnikiem ekranu — JAWS + Chrome (Windows): Z uruchomionym JAWS w Chrome użyj kursora wirtualnego, aby przeczytać stronę. Zachowanie JAWS odzwierciedla NVDA — przełącza silniki TTS na podstawie wartości lang. Włącz tryb mowy szczegółowej, aby słyszeć komunikaty o języku. Zwróć uwagę na fragmenty, w których wymowa brzmi niepoprawnie dla widocznego języka.
5. Test z czytnikiem ekranu — VoiceOver + Safari (macOS/iOS): Aktywuj VoiceOver i nawiguj po stronie za pomocą VO+strzałka w prawo. Do testów mobilnych na iOS przesuwaj palcem po treści. VoiceOver w Safari również respektuje atrybuty lang i odpowiednio przełącza głosy. Jeśli na urządzeniu zainstalowane są pakiety głosowe dla oczekiwanych języków obcych, usłyszysz wyraźną zmianę głosu na poprawnie oznaczonych elementach.
6. Walidacja tagów BCP 47: Dla wszystkich znalezionych wartości lang zweryfikuj je w IANA Language Subtag Registry lub użyj internetowego walidatora BCP 47. Typowe błędy obejmują użycie lang='en-us' (małe litery w kodzie regionu są technicznie poprawne, ale niekonwencjonalne) lub nieprawidłowych kodów, takich jak lang='english'.

Jak Naprawić

Wstawka w języku obcym w tureckim akapicie — Niepoprawne

<p>
  Bu ürün uluslararası standartlara uygundur ve
  <em>state of the art</em> teknoloji kullanmaktadır.
</p>

Wstawka w języku obcym w tureckim akapicie — Poprawne

<p>
  Bu ürün uluslararası standartlara uygundur ve
  <!-- lang='en' tells screen readers to switch to an English TTS engine -->
  <em lang='en'>state of the art</em> teknoloji kullanmaktadır.
</p>

Wielozdaniowy cytat blokowy w języku obcym — Niepoprawne

<blockquote>
  <p>La liberté commence où l'ignorance finit.</p>
  <p>— Victor Hugo</p>
</blockquote>

Wielozdaniowy cytat blokowy w języku obcym — Poprawne

<!-- lang='fr' applied to the blockquote covers all descendant content -->
<blockquote lang='fr'>
  <p>La liberté commence où l'ignorance finit.</p>
  <p>— Victor Hugo</p>
</blockquote>

Dwujęzyczne menu nawigacyjne — Niepoprawne

<nav>
  <ul>
    <li><a href='/tr/anasayfa'>Anasayfa</a></li>
    <li><a href='/en/home'>Home</a></li>
    <li><a href='/de/startseite'>Startseite</a></li>
  </ul>
</nav>

Dwujęzyczne menu nawigacyjne — Poprawne

<nav>
  <ul>
    <!-- Primary language (Turkish) needs no extra attribute if html lang='tr' -->
    <li><a href='/tr/anasayfa'>Anasayfa</a></li>
    <!-- English and German links receive their own lang attributes -->
    <li><a href='/en/home' lang='en'>Home</a></li>
    <li><a href='/de/startseite' lang='de'>Startseite</a></li>
  </ul>
</nav>

Tabela z wielojęzycznymi komórkami danych — Niepoprawne

<table>
  <tr>
    <th>Ülke</th>
    <th>Slogan</th>
  </tr>
  <tr>
    <td>Fransa</td>
    <td>Liberté, Égalité, Fraternité</td>
  </tr>
  <tr>
    <td>Almanya</td>
    <td>Einigkeit und Recht und Freiheit</td>
  </tr>
</table>

Tabela z wielojęzycznymi komórkami danych — Poprawne

<table>
  <tr>
    <th>Ülke</th>
    <th>Slogan</th>
  </tr>
  <!-- lang applied to individual td elements containing foreign text -->
  <tr>
    <td>Fransa</td>
    <td lang='fr'>Liberté, Égalité, Fraternité</td>
  </tr>
  <tr>
    <td>Almanya</td>
    <td lang='de'>Einigkeit und Recht und Freiheit</td>
  </tr>
</table>

Typowe Błędy

• Pomijanie atrybutów lang przy krótkich wstawkach inline: Deweloperzy często oznaczają duże sekcje w języku obcym, ale pomijają krótkie frazy, takie jak dwuwyrazowe angielskie hasło marketingowe wplecione w inaczej tureckie zdanie. Nawet pojedyncze słowa w języku obcym, które nie są zwolnionymi nazwami własnymi lub terminami technicznymi, wymagają oznaczenia.
• Używanie nieprawidłowego tagu BCP 47: Zapisanie lang='english', lang='turkish' lub lang='français' zamiast poprawnych kodów ISO (lang='en', lang='tr', lang='fr') powoduje, że atrybut jest nieprawidłowy i czytniki ekranu mogą go całkowicie zignorować.
• Poleganie na CSS lub stylach wizualnych, aby zasugerować przełączenie języka: Zmiana czcionki, koloru lub kursywa dla tekstu w języku obcym sygnalizuje różnicę języka użytkownikom widzącym, ale nie dostarcza żadnej informacji programistycznej technologiom asystującym. Atrybut lang jest jedynym mechanizmem, który działa dla czytników ekranu.
• Założenie, że użytkownicy czytników ekranu „domyślą się” z kontekstu: Oczekiwanie, że niewidomy użytkownik wywnioskuje, iż zniekształcony fragment jest po francusku, ponieważ otaczający turecki tekst odnosił się do Francji, jest nierozsądnym oczekiwaniem, które przerzuca ciężar zrozumienia na użytkownika.
• Oznaczanie tylko pierwszego elementu w wieloelementowym bloku w języku obcym: Jeśli trzy kolejne elementy <p> zawierają fragment po francusku, umieszczenie lang='fr' tylko na pierwszym akapicie pozostawia pozostałe dwa akapity bez oznaczenia. Poprawne podejście to albo opakowanie wszystkich trzech w element nadrzędny z lang='fr', albo dodanie atrybutu do każdego akapitu z osobna.
• Mylenie nazw własnych z pełnymi frazami w języku obcym: Wyjątek WCAG dla nazw własnych obejmuje nazwy takie jak „Paris” czy „Volkswagen” — nie całe zdania lub tekst marketingowy napisany po francusku lub niemiecku. Deweloperzy czasem błędnie stosują ten wyjątek, aby uzasadnić pominięcie oznaczania lang przy istotnej treści w języku obcym.
• Dynamicznie wstrzykiwana treść bez atrybutów języka: Gdy treść w języku obcym jest ładowana za pomocą JavaScript (na przykład blok FAQ z CMS lub przetłumaczony opis produktu pobierany z API), deweloperzy często zapominają o uwzględnieniu atrybutu lang w wstrzykiwanym znaczniku. Potoki renderowania po stronie serwera lub klienta muszą przekazywać metadane językowe wraz z treścią tekstową.
• Używanie xml:lang w dokumentach HTML5 bez lang: W kontekstach XHTML odpowiednim atrybutem był xml:lang. W HTML5 poprawnym atrybutem jest lang. Używanie wyłącznie xml:lang w dokumencie HTML5 może działać w niektórych przeglądarkach, ale nie jest powszechnie obsługiwane przez wszystkie technologie asystujące.
• Umieszczanie lang na zbyt szerokim kontenerze, który zawiera także treść w języku podstawowym: Opakowanie sekcji, która zawiera zarówno tekst turecki, jak i francuski, w całości w lang='fr' spowoduje, że fragmenty tureckie będą źle wymawiane. Zakres atrybutu musi dokładnie odpowiadać granicy języka.
• Brak testów z użyciem rzeczywistych czytników ekranu po wprowadzeniu poprawek: Deweloperzy często dodają atrybuty lang i uznają poprawkę za zakończoną, nie weryfikując faktycznego wyjścia TTS. Testowanie z NVDA, JAWS lub VoiceOver jest jedynym sposobem, aby potwierdzić, że poprawa wymowy jest zauważalna dla użytkowników końcowych.

Związek z Tureckimi Regulacjami Dotyczącymi Dostępności

Turecka Okrężnica Prezydencka 2025/10, opublikowana w Dzienniku Urzędowym nr 32933 w dniu 21 czerwca 2025 r., ustanawia wiążące ramy dla dostępności cyfrowej w szerokim zakresie podmiotów publicznych i prywatnych. Okrężnica formalnie włącza WCAG 2.2 jako standard techniczny, przy czym zgodność na poziomie AA stanowi podstawowy wymóg dla zgodności z prawem.

WCAG 3.1.2 — Language of Parts jest kryterium poziomu AA, co plasuje je bezpośrednio w obowiązkowym celu zgodności zdefiniowanym przez okrężnicę. Podmioty prowadzące witryny wielojęzyczne — co jest powszechne w Turcji, biorąc pod uwagę położenie kraju na skrzyżowaniu handlu europejskiego, bliskowschodniego i środkowoazjatyckiego — mają zwiększony obowiązek prawidłowego wdrożenia tego kryterium. Turecki bank publikujący warunki dotyczące walut obcych po angielsku, operator telekomunikacyjny zamieszczający klauzule dotyczące roamingu po niemiecku czy strona szpitala, która udostępnia formularze zgody pacjenta po arabsku — wszyscy muszą zapewnić, że każdy fragment w języku obcym jest programistycznie oznaczony.

Typy podmiotów objętych okrężnicą obejmują instytucje i agencje publiczne, platformy e-commerce, banki i instytucje finansowe, szpitale i świadczeniodawców opieki zdrowotnej, firmy telekomunikacyjne z 200,000 lub większą liczbą abonentów, biura podróży, prywatne firmy transportowe oraz szkoły prywatne upoważnione przez Ministerstwo Edukacji Narodowej (MoNE). Dla wszystkich tych podmiotów brak spełnienia wymogów poziomu AA — w tym 3.1.2 — może skutkować sankcjami administracyjnymi oraz brakiem kwalifikacji do uzyskania Logotypu Dostępności (Erişilebilirlik Logosu) wydawanego przez Ministerstwo Rodziny i Usług Społecznych.

Erişilebilirlik Logosu jest coraz częściej rozpoznawany jako sygnał zaufania na rynku tureckim, szczególnie w e-commerce i usługach finansowych. Uzyskanie i utrzymanie logotypu wymaga wykazania zgodności ze wszystkimi kryteriami poziomu AA, a Language of Parts jest szczególnie istotne dla tureckich podmiotów obsługujących klientów międzynarodowych lub publikujących prawnie wiążące dokumenty w wielu językach. Biorąc pod uwagę, że prawo tureckie wymaga, aby niektóre informacje (takie jak powiadomienia o prawach konsumenta i warunki produktów finansowych) były zrozumiałe dla użytkowników z niepełnosprawnościami, oznaczanie języka nie jest jedynie techniczną najlepszą praktyką — jest częścią obowiązku zapewnienia dostępnej komunikacji wpisanego w szerszy mandat okrężnicy.

Organizacjom ubiegającym się o logotyp zaleca się przeprowadzenie ustrukturyzowanych audytów treści w celu zidentyfikowania wszystkich fragmentów w językach obcych w ich zasobach cyfrowych, wdrożenie procesu deweloperskiego, który wymusza stosowanie atrybutu lang na poziomie warstwy zarządzania treścią, oraz uwzględnienie Language of Parts w regularnych protokołach testowania dostępności, obok automatycznych i ręcznych cykli przeglądu.