WCAG 3.1.2: Język części

Kryterium sukcesu WCAG 2.1 na poziomie AA 3.1.2, zatytułowane „Język części”, jest kluczowe dla zapewnienia dostępności treści wielojęzycznych w internecie. Wymaga ono, aby każdy fragment tekstu, którego język różni się od domyślnego języka strony, został programowo zidentyfikowany i oznaczony. Dzięki temu technologie asystujące, takie jak czytniki ekranu, mogą prawidłowo interpretować i odczytywać treść, co znacznie poprawia komfort użytkowania dla osób korzystających z tych narzędzi.

Czym jest WCAG 3.1.2 Język części?

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.

Dlaczego to ważne? Wpływ na dostępność

Programowe oznaczanie języka fragmentów tekstu ma fundamentalne znaczenie dla wielu grup użytkowników, zwłaszcza tych korzystających z technologii asystujących:

  • Użytkownicy czytników ekranu: Gdy czytnik ekranu napotka tekst w nieoznaczonym języku, będzie próbował odczytać go, używając reguł fonetycznych domyślnego języka strony. Skutkuje to zniekształconą wymową, brakiem zrozumienia treści i frustracją użytkownika. Oznaczenie języka pozwala czytnikowi przełączyć syntezator mowy na właściwy język, zapewniając płynne i zrozumiałe odczytywanie.
  • Użytkownicy z niepełnosprawnością poznawczą: Jasne wskazanie języka może pomóc w lepszym zrozumieniu treści, redukując obciążenie poznawcze związane z interpretacją obcojęzycznych fraz.
  • Użytkownicy dwujęzyczni lub wielojęzyczni: Dla osób, które posługują się kilkoma językami, prawidłowe oznaczenie języka ułatwia nawigację i przyswajanie treści.
  • Automatyczne tłumacze i słowniki: Programowo oznaczony język ułatwia narzędziom do automatycznego tłumaczenia tekstu prawidłowe rozpoznanie i przetłumaczenie fragmentów, co zwiększa ich dokładność i użyteczność.
  • Użytkownicy korzystający z brajlowskich wyświetlaczy: Poprawne oznaczenie języka pomaga w prawidłowym renderowaniu tekstu na wyświetlaczach brajlowskich.

Kryteria sukcesu i wymagania

Główne wymaganie kryterium 3.1.2 jest proste: gdy język fragmentu tekstu różni się od domyślnego języka strony, musi być programowo oznaczony. Oznacza to użycie atrybutu lang w HTML.

Atrybut lang może być stosowany do niemal wszystkich elementów HTML, w tym <p>, <span>, <div>, <blockquote>, <li>, itp. Wartością atrybutu powinien być prawidłowy kod języka zgodny ze standardem ISO 639-1 (dla języków dwuliterowych) lub ISO 639-2/3 (dla języków trzyliterowych, jeśli dwuliterowy kod nie istnieje), opcjonalnie uzupełniony o kod kraju zgodny z ISO 3166-1 Alpha-2 (np. en-US, fr-CA).

Przykłady popularnych kodów języków:

  • pl dla polskiego
  • en dla angielskiego
  • de dla niemieckiego
  • fr dla francuskiego
  • es dla hiszpańskiego

Praktyczne wskazówki dotyczące zgodności

Aby zapewnić zgodność z WCAG 3.1.2, należy przestrzegać następujących zasad:

  1. Identyfikuj zmiany języka: Przejrzyj całą treść strony i zidentyfikuj wszystkie fragmenty, które są w innym języku niż język domyślny strony. Dotyczy to zarówno pojedynczych słów, zwrotów, cytatów, jak i całych bloków tekstu.
  2. Stosuj atrybut lang: Dla każdego zidentyfikowanego fragmentu tekstu użyj atrybutu lang na odpowiednim elemencie HTML, który go zawiera.
    • Jeśli to pojedyncze słowo lub krótki zwrot, użyj <span>.
    • Jeśli to cały akapit, użyj <p>.
    • Jeśli to cytat, użyj <blockquote>.
  3. Prawidłowe kody języków: Zawsze używaj prawidłowych i aktualnych kodów języków (np. en, fr, de). Nie próbuj tworzyć własnych kodów.
  4. Zagnieżdżanie języków: Jeśli masz fragment tekstu w języku obcym, a w nim z kolei fragment w innym języku, możesz zagnieżdżać atrybuty lang. Najbardziej zagnieżdżony atrybut ma priorytet.
  5. Nie polegaj na CSS: Stylizowanie tekstu za pomocą CSS (np. zmiana czcionki lub koloru) nie jest wystarczające do programowego oznaczenia języka. Technologie asystujące ignorują takie zmiany stylistyczne w kontekście językowym.
  6. Dynamiczne treści: Jeśli treści są generowane dynamicznie (np. przez JavaScript), upewnij się, że atrybuty lang są prawidłowo dodawane do elementów wraz z ich zawartością.

Przykłady implementacji

Poprawne implementacje

To jest zdanie w języku polskim. Czasami używamy obcojęzycznych zwrotów, np. carpe diem (łacińskie wyrażenie oznaczające „chwytaj dzień”).

Mój ulubiony cytat to The only way to do great work is to love what you do. (Steve Jobs).

W restauracji zamówiłem crème brûlée na deser.

Strona ma domyślny język polski (<html lang="pl">).

Accessibility is not a feature, it’s a right.

Ensuring that digital content is available to everyone, regardless of their abilities, should be a core principle of web development.

Po angielskim cytacie wracamy do języka polskiego.

Niepoprawne implementacje

To jest zdanie w języku polskim. Czasami używamy obcojęzycznych zwrotów, np. carpe diem (łacińskie wyrażenie oznaczające „chwytaj dzień”).

W restauracji zamówiłem crème brûlée na deser.

Strona ma domyślny język polski (<html lang="pl">).

Accessibility is not a feature, it’s a right.

Ensuring that digital content is available to everyone, regardless of their abilities, should be a core principle of web development.

Tutaj anglojęzyczny cytat nie ma oznaczenia języka.

Najlepsze praktyki i typowe pułapki

Najlepsze praktyki:

  • Systematyczność: Przyjmij zasadę, że każda zmiana języka, niezależnie od tego, jak krótka, powinna być oznaczona.
  • Walidacja kodów językowych: Używaj tylko standardowych kodów ISO. Wiele narzędzi deweloperskich i walidatorów może pomóc w ich sprawdzeniu.
  • Testowanie z technologiami asystującymi: Regularnie testuj swoje strony za pomocą czytników ekranu (np. NVDA, JAWS, VoiceOver), aby upewnić się, że obcojęzyczne fragmenty są poprawnie odczytywane.
  • Przeszkolenie twórców treści: Jeśli za treści odpowiadają różne osoby, upewnij się, że są świadome wymogów WCAG 3.1.2 i wiedzą, jak prawidłowo oznaczać język.

Typowe pułapki:

  • Zapominanie o krótkich frazach: Łatwo jest zapomnieć o oznaczeniu pojedynczych słów lub krótkich zwrotów, które często pojawiają się w tekście (np. „OK”, „status quo”, „rendezvous”).
  • Poleganie na kontekście: Użytkownicy wzrokowi często rozpoznają język po kontekście lub stylizacji, ale technologie asystujące nie mają takiej zdolności.
  • Błędy w kodach językowych: Użycie nieprawidłowych kodów (np. eng zamiast en, pol zamiast pl) uniemożliwia prawidłową interpretację.
  • Używanie CSS do oznaczania języka: CSS służy do stylizacji, nie do semantycznego oznaczania języka. Nie należy tworzyć klas typu .jezyk-angielski { font-style: italic; } i liczyć na to, że to wystarczy.
  • Brak oznaczeń dla elementów interfejsu: Jeśli w interfejsie użytkownika pojawiają się etykiety lub komunikaty w innym języku, one również muszą być prawidłowo oznaczone.

Podsumowanie

Kryterium WCAG 3.1.2 „Język części” jest niezbędne dla tworzenia w pełni dostępnych i użytecznych stron internetowych, zwłaszcza w kontekście treści wielojęzycznych. Poprawne stosowanie atrybutu lang dla fragmentów tekstu w różnych językach to prosta, ale niezwykle skuteczna praktyka, która znacząco poprawia doświadczenie użytkowników technologii asystujących i wspiera globalne dotarcie do odbiorców. Pamiętaj o konsekwencji i dokładności w jego implementacji.

Powiązane wpisy

Nadal szukasz odpowiedzi?

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

Skontaktuj się z nami