3.1.2 - Szövegrészek nyelve
Röviden a szabványpontról
A WCAG 3.1.2 (Language of Parts) előírja, hogy a tartalom minden egyes részének vagy kifejezésének emberi nyelve programozottan meghatározható legyen. Ez azt jelenti, hogy az oldal vagy alkalmazás azon részeinek, amelyek eltérő nyelven íródtak az alapértelmezett dokumentum nyelvétől, megfelelően jelölve kell lenniük, a megfelelő nyelvi attribútumokkal.
Mire vonatkozik: Az oldal azon szövegrészére, amelyek eltérő nyelven íródtak, mint az alapértelmezett: idézetek, idegen szavak, beágyazott tartalom, többnyelvű felületek.
Cél: Biztosítani, hogy a segítő technológiák:
- Helyes kiejtésre, hangra és olvasási szabályokra váltsanak az eltérő nyelvű szegmenseknél
- Megfelelő nyelvspecifikus szolgáltatásokat biztosítsanak
- Javítsák a megértést minden felhasználó számára
- Fordítóeszközök és keresők is jobban értsék a tartalmat
Kiket érint
Elsődleges felhasználók: Képernyőolvasót, vagy más segítő technológiákat használó személyek profitálnak a legtöbbet. A megfelelő nyelvi címkézés lehetővé teszi ezen eszközök számára a szavak pontos kiejtését, javítva a megértést.
Másodlagos előnyök: Fordítóeszközöket vagy nyelvspecifikus stílusokat használó felhasználók szintén profitálnak. A keresőmotorok és más automatizált eszközök jobban megértik a tartalom nyelvét, javítva a SEO-t és akadálymentességet.
Tesztelés
- Manuális kód áttekintés: Ellenőrizd, hogy a lang attribútum jelen van és helyesen van beállítva azokon az elemeken, ahol a nyelv eltér az oldal alapértelmezettjétől
- Képernyőolvasó tesztelés: Figyelj a helyes kiejtés változásokra, amikor a képernyőolvasó más nyelvű szöveggel találkozik
- Böngésző fejlesztői eszközök: Vizsgáld az elemeket a lang attribútum jelenlétének és helyességének ellenőrzésére
- Automatizált akadálymentességi szkennerek: Használj eszközöket, mint az axe DevTools a hiányzó vagy hibás nyelvi attribútumok jelzésére
- Fordító vagy nyelveszközök: Használd a böngésző fordítási funkcióit annak ellenőrzésére, hogy a nyelvváltások megfelelően észlelhetők-e
Jó gyakorlatok
1. Eltérő nyelvű bekezdések jelölése
<!-- Jó: Francia bekezdés megfelelő lang attribútummal -->
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<title>Nyelvek tanulása</title>
</head>
<body>
<article>
<h1>Francia nyelvi órák</h1>
<p>Mai leckénkben alapvető francia köszöntéseket tanulunk.</p>
<!-- Francia szöveg helyesen jelölve -->
<p lang="fr">Bonjour, comment ça va?</p>
<p>Ez azt jelenti magyarul: "Jó napot, hogy van?"</p>
<h2>További francia kifejezések</h2>
<!-- Francia lista elemek külön-külön jelölve -->
<ul>
<li><span lang="fr">Merci beaucoup</span> - Köszönöm szépen</li>
<li><span lang="fr">Au revoir</span> - Viszlát</li>
<li><span lang="fr">S'il vous plaît</span> - Kérem szépen</li>
<li><span lang="fr">Excuse-moi</span> - Elnézést</li>
</ul>
<!-- Hosszabb francia szöveg bekezdésként -->
<h3>Francia történet</h3>
<p lang="fr">
Il était une fois, dans une petite ville de France,
une boulangerie qui servait les meilleurs croissants
de toute la région. Chaque matin, les habitants
venaient acheter leur pain frais.
</p>
<p>Ez egy rövid francia történet volt egy péküzletről.</p>
</article>
</body>
</html>
<!-- Magyarázat: A francia szövegrészek lang="fr" attribútummal vannak jelölve,
így a képernyőolvasók francia kiejtéssel olvassák fel őket -->A francia szöveg lang=”fr” attribútummal van jelölve, így a képernyőolvasók átváltanak francia kiejtésre ezekhez a részekhez.
2. Idegen szavak beágyazott jelölése
<!-- Jó: Idegen szavak span elemben jelölve -->
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<title>Nemzetközi kifejezések</title>
</head>
<body>
<article>
<h1>Gyakran használt idegen kifejezések</h1>
<h2>Spanyol kifejezések</h2>
<p>A spanyol szó a <span lang="es">hola</span> jelentése "szia".</p>
<p>A <span lang="es">gracias</span> azt jelenti, hogy "köszönöm".</p>
<p>Ha valaki azt mondja <span lang="es">¿Cómo estás?</span>,
azt kérdezi, hogy "hogy vagy?".</p>
<h2>Német kifejezések</h2>
<p>A <span lang="de">Guten Tag</span> német köszöntés, jelentése "jó napot".</p>
<p>A <span lang="de">Danke schön</span> azt jelenti, hogy "köszönöm szépen".</p>
<p>A <span lang="de">Auf Wiedersehen</span> búcsúzáskor használatos.</p>
<h2>Angol kifejezések</h2>
<p>Az <span lang="en">hello</span> angol köszöntés.</p>
<p>A <span lang="en">thank you</span> jelentése "köszönöm".</p>
<p>Az <span lang="en">excuse me</span> udvarias figyelmeztetés.</p>
<h2>Olasz kifejezések</h2>
<p>A <span lang="it">ciao</span> informális köszöntés olaszul.</p>
<p>A <span lang="it">prego</span> jelentheti azt, hogy "szívesen".</p>
<p>A <span lang="it">arrivederci</span> udvarias búcsúzás.</p>
<h2>Francia kifejezések</h2>
<p>A <span lang="fr">bonjour</span> francia jó napot kívánás.</p>
<p>A <span lang="fr">bonsoir</span> este használatos köszöntés.</p>
<p>A <span lang="fr">bonne nuit</span> jó éjszakát kívánás.</p>
<h2>Orosz kifejezések</h2>
<p>A <span lang="ru">привет</span> informális orosz köszöntés.</p>
<p>A <span lang="ru">спасибо</span> azt jelenti, hogy "köszönöm".</p>
<p>A <span lang="ru">до свидания</span> formális búcsúzás.</p>
</article>
</body>
</html>
<!-- Magyarázat: Minden idegen nyelvű szó span elembe van csomagolva
a megfelelő lang attribútummal a pontos kiejtéshez -->Csak az idegen szavak kapnak lang attribútumot a span elemekben, így a mondat többi része magyar marad, de az idegen szavak is helyesen kiejtéssel lesznek felolvasva.
3. Idézetek különböző nyelveken
<!-- Jó: Idézetek megfelelő nyelvjelöléssel -->
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<title>Híres idézetek</title>
</head>
<body>
<article>
<h1>Inspiráló idézetek a világirodalomból</h1>
<section>
<h2>Angol irodalom</h2>
<blockquote lang="en">
<p>"To be or not to be, that is the question."</p>
<cite>William Shakespeare, Hamlet</cite>
</blockquote>
<p>Ez Shakespeare Hamlet című művének egyik legismertebb mondata.</p>
<blockquote lang="en">
<p>"It was the best of times, it was the worst of times."</p>
<cite>Charles Dickens, A Tale of Two Cities</cite>
</blockquote>
<p>Dickens művének emblematikus kezdő mondata.</p>
</section>
<section>
<h2>Francia irodalom</h2>
<blockquote lang="fr">
<p>"L'enfer, c'est les autres."</p>
<cite>Jean-Paul Sartre, Huis clos</cite>
</blockquote>
<p>Sartre egzisztencialista filozófiájának megnyilvánulása.</p>
<blockquote lang="fr">
<p>"Je pense, donc je suis."</p>
<cite>René Descartes</cite>
</blockquote>
<p>Descartes híres filozófiai alapelve.</p>
</section>
<section>
<h2>Német irodalom</h2>
<blockquote lang="de">
<p>"Hier stehe ich, ich kann nicht anders."</p>
<cite>Martin Luther</cite>
</blockquote>
<p>Luther híres kijelentése a wormsi birodalmi gyűlésen.</p>
<blockquote lang="de">
<p>"Wer fremde Sprachen nicht kennt, weiß nichts von seiner eigenen."</p>
<cite>Johann Wolfgang von Goethe</cite>
</blockquote>
<p>Goethe a nyelvek fontosságáról.</p>
</section>
<section>
<h2>Orosz irodalom</h2>
<blockquote lang="ru">
<p>"Все счастливые семьи похожи друг на друга, каждая несчастливая семья несчастлива по-своему."</p>
<cite>Лев Толстой, Анна Каренина</cite>
</blockquote>
<p>Tolsztoj Anna Karenina című regényének híres nyitó mondata.</p>
</section>
<section>
<h2>Latin kifejezések</h2>
<blockquote lang="la">
<p>"Veni, vidi, vici."</p>
<cite>Julius Caesar</cite>
</blockquote>
<p>Caesar híres rövid jelentése egy győzelemről: "Jöttem, láttam, győztem."</p>
<blockquote lang="la">
<p>"Cogito ergo sum."</p>
<cite>René Descartes</cite>
</blockquote>
<p>Descartes alapelve latin nyelven: "Gondolkozom, tehát vagyok."</p>
</section>
</article>
</body>
</html>
<!-- Magyarázat: Minden idézet blockquote elemben van a megfelelő
lang attribútummal a helyes kiejtéshez -->A különböző nyelvű idézetek külön-külön megfelelő lang attribútumokkal vannak jelölve, biztosítva a helyes kiejtést minden nyelven.
4. Beágyazott nyelvi változások
<!-- Jó: Összetett nyelvváltások helyes jelölése -->
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<title>Konferencia beszámoló</title>
</head>
<body>
<article>
<h1>Nemzetközi technológiai konferencia 2024</h1>
<section>
<h2>Plenáris előadások</h2>
<h3>Dr. Sarah Wilson előadása</h3>
<p>Az MIT kutatója, Dr. Sarah Wilson angol nyelven tartott előadást az AI fejlődéséről:</p>
<blockquote lang="en">
<p>"The future of artificial intelligence lies not just in processing power,
but in our ability to create systems that can adapt and learn from
human interaction in meaningful ways."</p>
<cite>Dr. Sarah Wilson, MIT</cite>
</blockquote>
<p>Ezt követően a japán <span lang="ja">人工知能</span> (mesterséges intelligencia)
kifejezést használva beszélt a japán fejlesztésekről.</p>
</section>
<section>
<h2>Prof. Hans Müller előadása</h2>
<p>A berlini egyetem professzora német nyelven mutatta be kutatásait:</p>
<blockquote lang="de">
<p>"Die Zukunft der Technologie hängt von unserer Fähigkeit ab,
nachhaltige und ethische Lösungen zu entwickeln, die allen Menschen zugutekommen."</p>
<cite>Prof. Dr. Hans Müller, Universität Berlin</cite>
</blockquote>
<p>Majd hozzátette: "A <span lang="de">Nachhaltigkeit</span> (fenntarthatóság)
kulcsfontosságú szerepet játszik a jövő technológiáiban."</p>
</section>
<section>
<h2>Panel beszélgetés</h2>
<p>A panel során felmerült a következő kérdés angolul:</p>
<p lang="en">"How can we ensure that emerging technologies serve
the needs of diverse global communities?"</p>
<p>Erre a francia résztvevő válaszolt:</p>
<blockquote lang="fr">
<p>"Il est essentiel de collaborer avec les communautés locales
dès le début du processus de développement technologique."</p>
<cite>Dr. Marie Dubois, Sorbonne</cite>
</blockquote>
<p>A spanyol kollégája ezt egészítette ki:</p>
<blockquote lang="es">
<p>"La inclusión digital debe ser una prioridad en el diseño
de nuevas tecnologías para evitar ampliar la brecha digital."</p>
<cite>Dr. Carlos García, Universidad de Madrid</cite>
</blockquote>
</section>
<section>
<h2>Összefoglalás</h2>
<p>A konferencia fő üzenete, hogy a technológiai innovációnak
az emberi értékeket kell szolgálnia. Ahogy Dr. Wilson fogalmazott:
<q lang="en">Technology should amplify human potential, not replace it.</q></p>
<p>A konferencia a latin mottóval zárult:
<span lang="la">Scientia potentia est</span>
(A tudás hatalom), hangsúlyozva a felelős tudományos kutatás fontosságát.</p>
</section>
</article>
</body>
</html>
<!-- Magyarázat: Minden idegen nyelvű rész külön lang attribútummal van jelölve,
beleértve a beágyazott idézeteket és kifejezéseket is -->Összetett dokumentumban minden nyelvi váltás pontosan jelölve van, beleértve a beágyazott idézeteket is, hogy a képernyőolvasók megfelelően váltsanak a nyelvek között.
Helytelen megoldások
Hiányzó lang attribútum idegen szavaknál
<!-- Rossz: Idegen szavak jelölés nélkül -->
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<title>Nyelvtanulás - rossz példa</title>
</head>
<body>
<article>
<h1>Angol szavak tanulása</h1>
<!-- Rossz: Angol szavak lang attribútum nélkül -->
<p>Az angol szó hello jelentése "szia".</p>
<p>A thank you azt jelenti, hogy "köszönöm".</p>
<p>Az excuse me udvarias felkiáltás.</p>
<h2>Francia kifejezések</h2>
<!-- Rossz: Francia szavak lang attribútum nélkül -->
<p>A bonjour francia köszöntés.</p>
<p>A merci jelentése "köszönöm".</p>
<p>Az au revoir búcsúzáskor használatos.</p>
<h2>Német szavak</h2>
<!-- Rossz: Német szavak lang attribútum nélkül -->
<p>A Guten Tag német köszöntés.</p>
<p>A Danke azt jelenti, hogy "köszönöm".</p>
<p>Az Auf Wiedersehen formális búcsúzás.</p>
</article>
</body>
</html>
<!-- Probléma: Az összes idegen nyelvű szó magyar kiejtéssel hangzik el,
ami érthetetlen és félrevezető a képernyőolvasó felhasználók számára -->Probléma: Az idegen nyelvű szavak nem kaptak lang attribútumot, így a képernyőolvasók magyar kiejtéssel próbálják felolvasni őket, ami érthetetlen eredményt ad.
Helytelen vagy hibás nyelvkódok
<!-- Rossz: Hibás nyelvkódok használata -->
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<title>Hibás nyelvkódok példa</title>
</head>
<body>
<article>
<h1>Nyelvek rossz jelölése</h1>
<!-- Rossz: Teljes nyelv név használata kód helyett -->
<p>Az <span lang="english">hello</span> angol szó.</p>
<!-- "english" nem érvényes BCP 47 kód! -->
<!-- Rossz: Helytelen nyelvkód francia szóhoz -->
<p>A <span lang="fr-FR">bonjour</span> azt jelenti "jó napot".</p>
<!-- Egy szóhoz nem kell regionális kód, csak "fr" -->
<!-- Rossz: Nem létező nyelvkód -->
<p>A <span lang="ger">Guten Tag</span> német köszöntés.</p>
<!-- "ger" helyett "de" a helyes -->
<!-- Rossz: Kitalált nyelvkód -->
<p>A <span lang="spa">hola</span> spanyol szó.</p>
<!-- "spa" helyett "es" a helyes -->
<!-- Rossz: Hibás eset használat -->
<p>Az <span lang="IT">ciao</span> olasz köszöntés.</p>
<!-- Nagybet\k helyett kisbetűs "it" -->
<!-- Rossz: Túl specifikus kód -->
<p>A <span lang="en-US-california">hello</span> amerikai szó.</p>
<!-- Túl specifikus, "en" elegendő lenne -->
<!-- Rossz: Régi ISO kód használata -->
<p>A <span lang="hun">szia</span> magyar szó.</p>
<!-- "hun" helyett "hu" a helyes BCP 47 kód -->
</article>
</body>
</html>
<!-- Helyes nyelvkódok összehasonlításképpen:
en - angol (nem "english", "eng", "EN")
fr - francia (nem "french", "fra")
de - német (nem "german", "ger", "deu")
es - spanyol (nem "spanish", "spa")
it - olasz (nem "italian", "ita")
hu - magyar (nem "hungarian", "hun")
pt - portugál (nem "portuguese", "por")
ru - orosz (nem "russian", "rus")
ja - japán (nem "japanese", "jpn")
zh - kínai (nem "chinese", "chi")
-->Probléma: A hibás nyelvkódok miatt a segítő technológiák nem tudják helyesen értelmezni a nyelvet, ami helytelen vagy hiányzó kiejtéshez vezet.
Nagy konténerek feleslegesen nyelv kóddal jelölve
<!-- Rossz: Túl tág nyelvi jelölés -->
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<title>Túl széles nyelvi jelölés</title>
</head>
<body>
<article>
<h1>Nyelvkeverési problémák</h1>
<!-- Rossz: Egész div angol nyelvként jelölve -->
<div lang="en">
<h2>Vegyes tartalom</h2>
<p>Ez a bekezdés valójában magyar nyelvű, de az egész div
angol nyelvként van jelölve.</p>
<p>A képernyőolvasók angol kiejtéssel próbálják olvasni
ezt a magyar szöveget.</p>
<!-- Csak ez kellene angol legyen -->
<p>Hello, this is actually English content.</p>
<p>De ez a bekezdés megint magyar, mégis angol kiejtéssel
hangzik el a hibás div jelölés miatt.</p>
</div>
<!-- Rossz: Section teljes francia jelölés -->
<section lang="fr">
<h2>Francia szakasz</h2>
<p>Ez itt most magyar szöveg, de a section lang="fr" miatt
francia kiejtéssel lesz felolvasva.</p>
<blockquote>
<p>Bonjour, c'est du français.</p>
<cite>Ez francia idézet</cite>
</blockquote>
<p>A cite elem szintén magyar, de francia nyelven ejti ki.</p>
<ul>
<li>Magyar lista elem 1</li>
<li>Magyar lista elem 2</li>
<li>Magyar lista elem 3</li>
</ul>
</section>
<!-- Rossz: Teljes táblázat német jelölés -->
<table lang="de">
<caption>Termékek listája</caption>
<thead>
<tr>
<th>Termék neve</th>
<th>Ár</th>
<th>Leírás</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptop</td>
<td>250 000 Ft</td>
<td>Modern laptop számítógép</td>
</tr>
<tr>
<td>Telefon</td>
<td>150 000 Ft</td>
<td>Okostelefon jó kamerával</td>
</tr>
</tbody>
</table>
<!-- Az egész táblázat német kiejtéssel lesz felolvasva -->
</article>
</body>
</html>
<!-- Probléma: A túl széles nyelvi jelölés miatt a magyar szövegek is
idegen nyelven ejtődnek ki, ami zavaró és érthetetlen -->Probléma: A nagy konténerek (div, section, table) nyelvi jelölése azt eredményezi, hogy a bennük lévő magyar szövegek is idegen nyelvként ejtődnek ki, ami zavaró.
Vegyes nyelvű tartalom helytelen kezelése
<!-- Rossz: Összetett nyelvváltások rossz jelölése -->
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<title>Vegyes nyelvű tartalom hibák</title>
</head>
<body>
<article>
<h1>Konferencia összefoglaló</h1>
<section>
<h2>Előadók bemutatása</h2>
<!-- Rossz: Vegyes angol-magyar tartalom jelölés nélkül -->
<p>Dr. John Smith az MIT-ről tartott előadást artificial intelligence
témában. Fő mondanivalója, hogy machine learning algorithms
segítségével dramatic improvements érhetők el a healthcare sektorban.</p>
<!-- Az angol kifejezések nem jelöltek, magyar kiejtés -->
<!-- Rossz: Francia-magyar keverék jelölés nélkül -->
<p>A francia kutató, Marie Dubois a sustainable development
fontosságáról beszélt. Hangsúlyozta, hogy l'innovation technologique
nem lehet célja önmagában, hanem az environnement protection
érdekében kell alkalmazni.</p>
<!-- Sem angol, sem francia kifejezések nincsenek jelölve -->
<!-- Rossz: Teljes idézet magyar jelölés, de angol -->
<blockquote>
<p>"The future belongs to those who understand that technology
must serve humanity, not the other way around."</p>
<cite>Dr. Smith, MIT</cite>
</blockquote>
<!-- Egész angol idézet magyar kiejtéssel -->
<!-- Rossz: Német-angol keverék helytelen jelölés -->
<p lang="de">Prof. Müller azt mondta: "Innovation and sustainability
müssen Hand in Hand gehen, um eine bessere future zu schaffen."</p>
<!-- Egész mondat német jelölés, de angol részek is vannak -->
<!-- Rossz: Lista elemek eltérő nyelvei jelölés nélkül -->
<h3>Kulcsszavak a prezentációkból</h3>
<ul>
<li>Artificial Intelligence</li>
<li>Machine Learning</li>
<li>Développement durable</li>
<li>Innovation technologique</li>
<li>Nachhaltigkeit</li>
<li>Zukunftstechnologie</li>
<li>Innovazione</li>
<li>Sostenibilità</li>
</ul>
<!-- Minden elem különböző nyelven, de nincs jelölés -->
<!-- Rossz: Táblázat vegyes nyelvű cellák jelölés nélkül -->
<table>
<caption>Előadások összefoglalója</caption>
<thead>
<tr>
<th>Előadó</th>
<th>Téma</th>
<th>Kulcsüzenet</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dr. Smith</td>
<td>AI in Healthcare</td>
<td>Technology must serve humanity</td>
</tr>
<tr>
<td>Marie Dubois</td>
<td>Innovation durable</td>
<td>L'environnement avant tout</td>
</tr>
<tr>
<td>Prof. Müller</td>
<td>Nachhaltige Technologie</td>
<td>Zukunft durch Innovation</td>
</tr>
</tbody>
</table>
<!-- Angol, francia, német cellák jelölés nélkül -->
</section>
</article>
</body>
</html>
<!-- Probléma: A vegyes nyelvű tartalom egyáltalán nincs jelölve,
így minden magyar kiejtéssel hangzik el, ami érthetetlen -->Probléma: A vegyes nyelvű tartalmak nem kaptak megfelelő nyelvi jelölést, így minden magyar kiejtéssel hangzik el, ami érthetetlen és zavaró a felhasználók számára.
Források
Iratkozz fel hírlevelünkre!
Amennyiben szeretnél első kézből értesülni az új bejegyzésekről, iratkozz fel hírlevelünkre!