Atrybut lang i czytniki ekranu
Deklarowanie języka strony i elementów w celu zapewnienia prawidłowej wymowy
Atrybut lang i czytniki ekranu to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.
Działanie atrybutu lang
Atrybut lang deklaruje język treści elementu za pomocą znacznika językowego BCP-47. Czytniki ekranu używają go do wyboru właściwego mechanizmu i głosu wymowy, a wyszukiwarki wykorzystują go do indeksowania według języka.
Ustawianie na elemencie html
Każda strona musi deklarować swój główny język na elemencie głównym: <html lang="en"> dla angielskiego, <html lang="tr"> dla tureckiego oraz <html lang="ja"> dla japońskiego. Bez tego czytniki ekranu korzystają z domyślnego języka systemu użytkownika i często błędnie wymawiają każde słowo.
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>...</title></head>Znaczniki BCP-47
Znaczniki są zgodne z BCP-47: zawierają kod języka (en, tr, ja), opcjonalnie region (en-US, en-GB, zh-Hant, zh-Hans), a rzadziej także skrypt. Należy używać najbardziej szczegółowego, poprawnego znacznika; samo „en” wystarczy, gdy pisownia regionalna nie ma znaczenia.
Zmiany języka w środku strony
Sekcję w innym języku należy oznaczyć własnym atrybutem lang: <blockquote lang="fr">Bonjour</blockquote>. Czytnik ekranu przełączy głos na czas odczytywania tej sekcji, zapewniając poprawną wymowę nawet na stronach wielojęzycznych.
<p>The motto is <span lang="la">Carpe diem</span>, meaning "seize the day".</p>Selektory języka w CSS
CSS może wybierać język za pomocą :lang(en): blockquote:lang(fr)::before { content: "« "; }. Selektor dopasowuje najbliższego przodka z atrybutem lang. Należy go używać do reguł typograficznych, takich jak cudzysłowy i odstępy, które różnią się w zależności od języka.
Dlaczego ma to znaczenie dla wymowy
„Live” w języku angielskim i francuskim wymawia się inaczej. „Wir” po niemiecku wymawia się „veer”, a nie „wear”. Czytnik ekranu skonfigurowany dla języka angielskiego błędnie wymówi oba słowa, jeśli nie zostanie poinformowany, że otaczająca sekcja jest po niemiecku lub francusku.
hreflang dla powiązanych wersji językowych
Atrybut hreflang w odsyłaczach (<a href="/fr/" hreflang="fr">Français</a>) informuje wyszukiwarki i technologie wspomagające o języku strony, do której prowadzi odsyłacz. Należy połączyć go ze znacznikami link hreflang obowiązującymi w całej witrynie, aby uzyskać pełne pokrycie w zakresie międzynarodowego SEO.
Wykrywanie języka użytkownika
JavaScript może odczytać preferowane języki użytkownika z navigator.languages (tablicy znaczników BCP-47 uporządkowanych według priorytetu). Można użyć jej do wyboru domyślnego ustawienia regionalnego lub zasugerowania zmiany języka — należy jednak zawsze respektować wyraźny wybór użytkownika zamiast domyślnego ustawienia przeglądarki.
Wykrywanie po stronie serwera
Żądanie HTTP zawiera nagłówek Accept-Language, w którym przeglądarka przekazuje preferencje językowe użytkownika wynikające z jej konfiguracji. Należy użyć go na serwerze, aby przy pierwszym żądaniu wysłać właściwy, zlokalizowany HTML i wyświetlić użytkownikowi jego język, zanim wykona się jakikolwiek JavaScript.
Wiele języków na jednej stronie
Artykuły Wikipedii, aplikacje do nauki języków i słowniki często łączą wiele języków. Każdy fragment należy oznaczyć własnym atrybutem lang, nawet jeśli jest krótki. Bez atrybutu lang dla poszczególnych sekcji głos czytnika ekranu i cudzysłowy CSS powracają do ustawień domyślnych strony.
Typowe błędy
Brak lang na <html> (bardzo częsty błąd), nieprawidłowy kod języka (lang="english" zamiast lang="en") albo używanie kodów regionalnych tam, gdzie wystarczyłby sam język. Walidator W3C i audyt dostępności Lighthouse pomagają wykryć te problemy w CI.
Sprawdzenie wiedzy
Dlaczego atrybut lang na elemencie <html> jest szczególnie ważny dla użytkowników czytników ekranu?
Podsumowanie
Należy zadeklarować język strony na elemencie <html> za pomocą znacznika BCP-47 (en, tr, ja, zh-Hant). Zmiany języka w środku strony należy oznaczać atrybutem lang na elementach span/section, aby czytniki ekranu przełączały głosy. CSS :lang() może stosować typografię właściwą dla danego języka. Atrybut lang należy ustawiać zawsze — nic to nie kosztuje, a znacznie poprawia wymowę w czytnikach ekranu, SEO i wybieranie elementów w CSS.
Często zadawane pytania
Czy lekcja „Atrybut lang i czytniki ekranu” jest bezpłatna?
Tak — pełny tekst „Atrybut lang i czytniki ekranu” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Atrybut lang i czytniki ekranu”?
Deklarowanie języka strony i elementów w celu zapewnienia prawidłowej wymowy Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML Academy?
Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Atrybut lang i czytniki ekranu”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?
Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Atrybut lang i czytniki ekranu
- dir=rtl dla tekstu pisanego od prawej do lewej
- Elementy bdi i bdo
- charset i obsługa Unicode — znaki specjalne