A lang attribútum akadálymentességi vonzatai
A cikk témái:
Talán a WCAG 2.0 web akadálymentességi szabvány egyik legkönnyebben teljesíthető alapkövetelménye az, hogy a weboldalon használt emberi nyelv a kódban is definiálva legyen (lásd WCAG 2.0 3.1.1 teljesítési feltétel). Ezt a HTML kódban a lang attribútum segítségével biztosíthatjuk.
A lang attribútum egy globális attribútum, ami elvben azt jelenti, hogy például az id vagy a class attribútumhoz hasonlóan mindegyik HTML jelölőelemnél megadható. Viszont a gyakorlatban általában elég csak a html gyökérelemnél definiálni, mivel az ott megadott érték az egész weboldalra érvényes lesz.
A lang attribútum értéke hivatalosan egy BCP 47 nyelvi címke, ami az alkalmazott emberi nyelvet azonosítja. Például magyar nyelvű oldalon ez a „hu”, angolnál az „en”, németnél a „de” érték lehet.
Abba most nem bonyolódnék bele, hogy a nyelvi címke opcionálisan azt a földrajzi régiót is beazonosíthatja, ahol az adott nyelvet eltérően beszélik. Például a Nagy-Britanniában beszélt angol („en-GB”) eltér az Egyesült Államokban beszélt angoltól („en-US”).
Magyar oldalakon gyakran találkozni „hu-HU” értékkel is, ami ugyan nem hiba, de felesleges bonyolítás, mert azt jelöli, hogy a magyar nyelv Magyarországon beszélt dialektusa. Leszámítva a speciális tájszólásokat, a magyar nyelvet a határainkon belül és túl is ugyanúgy beszélik, tehát nálunk a földrajzi régió megjelölése felesleges.
Ezek alapján egy magyar nyelvű oldalon így érdemes a html jelölőelemet megadni:
<html lang="hu">
...
</html>
És ezzel eleget is tettünk a WCAG 2.0 említett teljesítési feltételének. De miért is fontos ez a definíció?
Akadálymentességi szempontból a lang attribútum és annak értéke leginkább azért fontos, mert ez határozhatja meg, hogy a képernyőolvasó program milyen nyelven szólaljon meg.
Egyes modern képernyőolvasó programok már több különböző nyelvű beszédszintetizátort is tartalmazhatnak (gyárilag vagy a felhasználó által feltelepítve), így a lang attribútum értékének változása tulajdonképpen ezek között kapcsol át.
Fontos tudni, hogy képernyőolvasó programot nem csak a vak, hanem bizonyos kognitív, nyelvi vagy tanulási képességzavarral élő emberek is használnak. Nem véletlen tehát, hogy a WCAG szabvány kötelező - úgynevezett „A” szintű - alapkövetelményként írja elő az oldal nyelvének definiálását.
Mi történik, ha nem adjuk meg a lang attribútumot a html elemben?
Ilyenkor a képernyőolvasó program azon a nyelven szólal meg, amit a felhasználó alapértelmezetten beállított. Ha ez pont megegyezik a weboldal nyelvével, akkor tulajdonképpen nincs komolyabb probléma. Ha viszont eltér tőle, akkor elég kellemetlen lesz a felhasználói élmény, hiszen érthetetlen és zagyva kiejtéssel fog megszólalni a program. Amennyiben a felhasználónak mégis sikerül kihámoznia, hogy milyen nyelvű az oldal tartalma, akkor is manuálisan kell átkapcsolnia a helyes nyelvre. Ezért sokkal biztosabb és felhasználóbarátabb megoldás, ha mi magunk adjuk meg az oldal nyelvét.
És mi történik, ha rossz értéket adunk meg?
Akadálymentességi auditok során gyakran tapasztalom azt a hibát, hogy a lang attribútum ugyan definiálva van, de helytelen értékkel. Ha például valaki egy külföldi sablont használt a magyar oldalához, de a lang értékét nem módosította „hu” értékre. Vagy egy magyar oldalnak készíti el az idegen nyelvű változatait, és ezeken a mutánsokon változatlanul a „hu” értéket használja. Az eredmény természetesen ezekben az esetekben is egy zagyva kiejtés lesz.
Példa a hibára
A következő hanganyagban meghallgatható, hogy ezt a magyar nyelvű bekezdést milyen furcsa kiejtéssel olvassa fel a képernyőolvasó program, ha a lang attribútum hibásan „en” értéken marad.
A dolog pikantériája, hogy ezt a hibát jellemzően az akadálymentességet ellenőrző automatikus rendszerek sem szúrják ki, hiszen ezek gyakran csak azt vizsgálják, hogy van-e lang attribútum. Azt már ritkábban, hogy annak értéke passzol-e az oldal nyelvével. Talán ez egy újabb érv, hogy a manuális akadálymentességi vizsgálat miért képes több hibát feltárni.
Idegen nyelvű szövegrészek jelölése
Innentől talán már logikus az is, hogy ha ugyanazon weboldalon belül több emberi nyelvet használunk, akkor a képernyőolvasó mindig azon a nyelven szólaljon meg, amivel az adott szövegrész (például bekezdés, mondat, szó, stb.) íródott. Természetesen a lang attribútum segítségével ez is megoldható.
Ehhez elsőként azt kell tisztázni, hogy mi a weboldal elsődleges (alapértelmezett) nyelve, azaz melyikből van rajta a legtöbb szöveg. Ezt adjuk meg a html jelölőelem lang attribútumában. Ezt követően minden ettől eltérő nyelvű szövegrésznél a szövegrészt befoglaló jelölőelem lang attribútumába definiáljuk az idegen nyelvet.
Ha például a szövegrész egy angol nyelvű idézet, akkor az idézet blockquote jelölőelemnél így adhatjuk meg a nyelvet:
<blockquote lang="en">How are you?</blockquote>
A nyelv mindig csak az adott jelölőelem hatókörében lévő szövegekre érvényes, ideértve a szöveget tartalmazó attribútumokat (például az alt attribútumot) is. Ez azért fontos, mert a jelölőelem zárása után, a következő szövegrésznél nem kell mesterségesen „visszakapcsolnunk” az oldal alapértelmezett nyelvére, hiszen ott újra a html jelölőelemnél beállított nyelv lesz érvényben. Hacsak nem adunk meg rögtön egy másik nyelvet.
Ismételten hangsúlyozom, hogy a lang attribútum minden HTML jelölőelemnél megadható. Jellemzően az idegen nyelvű szövegrész már amúgy is egy szemantikailag korrekt jelölőelemben van, de szavak vagy rövidebb mondatrészek esetén rákényszerülhetünk arra, hogy csak a nyelvváltás érdekében egy span jelölőelembe foglaljuk az idegen nyelvű szövegrészt.
Kivételek
Nem kell túlzásokba sem esni. Nem kell feltétlenül lang attribútummal ellátni az idegen nyelvű tulajdonneveket (például személyek, tárgyak, települések neveit), a technikai szakkifejezéseket, a meghatározhatatlan nyelvű szavakat, vagy azokat az idegen szavakat, amelyek egy adott szövegkörnyezetben már átkerültek a köznyelvbe.
A tartalomszerkesztők felelőssége (is)
Mindez elvben nagyon egyszerűen hangzik, de manapság, amikor a weboldalak tartalmát - jellemzően tartalomkezelő rendszeren keresztül - „laikus” szerkesztők írják, a helyzet bonyolultabb. Részben a tartalomkezelő rendszer adminisztrációs felületének tudásán múlik, hogy felkínálja-e a nyelvi váltás beállításának lehetőségét. De ez is csak akkor ér valamit, ha a tartalomszerkesztők is tisztában vannak azzal, hogy hol, miért és hogyan használják ezt a funkciót.
Talán éppen ezen tényezők miatt a WCAG szabvány „A” szintű alapkövetelményei között nem szerepel a szövegrészek nyelvének definiálása. Csak eggyel magasabb szinten - az úgynevezett „AA” szinten - írja elő kötelezően (lásd WCAG 2.0 3.1.2 teljesítési feltétel).
A lang attribútum használatának egyéb előnyei
A lang attribútum olyan funkciókra is hatással lehet, amelyek részben, vagy csak áttételesen kapcsolódnak az akadálymentességhez. Ezek közül néhány:
Tipográfia
Egyes böngészőprogramokban a q jelölőelemmel definiált mondatközi idézetek a lang attribútumban definiált nyelv helyesírásának megfelelő idézőjelekkel jelennek meg. Hasonló tipográfiai különbség lehet a sortörésnél, a szövegigazításnál és a kisbetű-nagybetű konverziónál is. A böngészőprogram akár az alkalmazott betűkészletet is a nyelvhez igazíthatja.
Szövegelválasztás
Egyes böngészőprogramokban az automatikus CSS3 alapú szövegelválasztás a lang attribútumban definiált nyelv helyesírását veszi alapul.
Helyesírás-ellenőrzés
Egyes böngészőprogramok a szövegbeviteli űrlapmezők, illetve a contenteditable attribútummal jelölt szövegek helyesírásának ellenőrzését a lang attribútumban definiált nyelv alapján végzik el.
Fordítóprogramok
Bizonyos fordítóprogramok a lang attribútumhoz igazíthatják a szöveg fordítását, de például azt is, hogy az adott szöveg változatlan maradjon-e a fordítás során.
Virtuális billentyűzet megjelenése
Egyes mobilos böngészőprogramok az <input type="number"> jelölőelemmel definiált űrlapmezőnél a lang attribútumban definiált nyelv alapján vagy tizedesvesszőt, vagy tizedespontot tartalmazó numerikus billentyűzetet mutatnak (angol nyelvű forrás: HTML5 number inputs - Comma and period as decimal marks).
Idegen nyelvű szövegrészek vizuális formázása
A CSS :lang() kiválasztójának segítségével könnyedén megformázhatjuk a lang attribútummal jelölt idegen nyelvű szövegrészeket. Ha például az oldalon az összes angol nyelvű szöveget dőlten szeretnénk megjeleníteni, akkor ezt a CSS szabályt alkalmazhatjuk:
:lang(en) {
font-style: italic;
}
Demonstráció
A cikkben leírtak demonstrálására készítettem egy egyszerű mintaoldalt és egy rövid videót. A mintaoldalon a Hamletből származó leghíresebb idézet szerepel magyarul, angolul és németül. Az oldal elsődleges nyelve a magyar, tehát a html jelölőelem lang attribútumában a „hu” érték szerepel. Az idegen nyelvű idézeteknél pedig a blockquote elemhez tettem a lang attribútumot.
A következő videón azt láthatjuk és hallhatjuk, amint a mintaoldalt egy iOS 9.3.2 operációs rendszert futtató okoseszközön, Safari böngészőben és VoiceOver képernyőolvasóval használom. Alapértelmezetten magyar női hangon szólal meg a képernyőolvasó, de amikor az angol és a német szövegrészhez érünk, akkor átvált angolra, illetve németre.