3.1.1 - Az oldal nyelve

Kategória: 3. Érthető (Understandable) Irányelv: 3.1. Olvasható Szint: A

Röviden a szabványpontról

A WCAG 3.1.1 (Language of Page) előírja, hogy minden weboldal alapértelmezett emberi nyelve programozottan meghatározható legyen. A gyakorlatban ez azt jelenti, hogy meg kell adnod az oldal elsődleges nyelvét a HTML jelölésben lévő lang attribútum használatával. Ez minden webes tartalomra vonatkozik, beleértve a HTML dokumentumokat, webalkalmazásokat és minden böngészőben megjelenített tartalmat.

Mire vonatkozik: Minden webes tartalomra: HTML dokumentumok, webalkalmazások, böngészőben megjelenített tartalom.

Cél: Biztosítani, hogy a segítő technológiák (mint a képernyőolvasók):

Helyesen azonosítsák és ejtsék ki a tartalmat a nyelvi kontextus ismeretében
Segítsék a kognitív fogyatékossággal vagy nyelvfeldolgozási nehézségekkel élőket
Támogassák a képernyőolvasóra támaszkodó felhasználókat a pontos tartalom megértésében
Nyelvspecifikus beszédszintézist biztosítsanak

Kiket érint

Elsődleges felhasználók: Képernyőolvasót használó személyek, akik a helyes kiejtéshez a megfelelő nyelvi beállításra támaszkodnak. Kognitív fogyatékossággal vagy tanulási nehézségekkel élők, akik profitálnak a nyelvspecifikus beszédszintézisből. Többnyelvű felhasználók, akik nyelvek között váltanak.

Másodlagos előnyök: A keresőmotorok és fordítóeszközök jobban értelmezhetik és feldolgozhatják a tartalmat. Javul a SEO és nemzetköziesítési támogatás.

Tesztelés

Lang attribútum ellenőrzése a <html> elemen: Győződj meg róla, hogy a gyökér <html> tag tartalmaz érvényes nyelvkódot, pl. <html lang=”hu”>
Böngésző fejlesztői eszközök vagy akadálymentességi tesztelő eszközök használata: Az axe DevTools eszközök felderíthetik a hiányzó vagy érvénytelen nyelvi deklarációkat
Képernyőolvasó tesztelés: Figyelj a tartalom helyes kiejtésére a várt nyelven
Nyelvkódok validálása: Erősítsd meg, hogy a nyelvkód megfelel a BCP 47 szabványnak (pl. hu, en-GB)
Oldalakon belüli nyelvváltások ellenőrzése: Ha az oldal részei különböző nyelveket használnak, győződj meg róla, hogy ezek a szekciók megfelelő lang attribútumokkal rendelkeznek

Jó gyakorlatok

1. Alap nyelvi deklaráció magyar weboldalhoz

<!-- Jó: Magyar weboldal helyes nyelvi beállítással -->
<!DOCTYPE html>
<html lang="hu">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vállalati honlap - Szolgáltatásaink</title>
  <meta name="description" content="Vállalati szolgáltatások és megoldások magyar nyelven">
</head>
<body>
  <header>
    <h1>Üdvözöljük weboldalunkon</h1>
    <nav aria-label="Főnavigáció">
      <ul>
        <li><a href="/fooldal">Főoldal</a></li>
        <li><a href="/szolgaltatasok">Szolgáltatások</a></li>
        <li><a href="/rolunk">Rólunk</a></li>
        <li><a href="/kapcsolat">Kapcsolat</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <section>
      <h2>Szolgáltatásaink</h2>
      <p>Vállalataink széles körű szolgáltatásokat nyújt ügyfelei számára. 
         Szakértői csapatunk több mint 10 éves tapasztalattal rendelkezik.</p>
      
      <div class="szolgaltatas-lista">
        <article>
          <h3>Webfejlesztés</h3>
          <p>Modern, reszponzív weboldalak készítése a legújabb technológiákkal.</p>
        </article>
        
        <article>
          <h3>Grafikai tervezés</h3>
          <p>Logótervezés, arculat kialakítás és nyomdai termékek.</p>
        </article>
        
        <article>
          <h3>Digitális marketing</h3>
          <p>SEO optimalizálás, közösségi média kezelés és online kampányok.</p>
        </article>
      </div>
    </section>
  </main>
  
  <footer>
    <p>&copy; 2024 Vállalati név. Minden jog fenntartva.</p>
    <address>
      <p>Cím: 1051 Budapest, Petőfi Sándor utca 1.</p>
      <p>Telefon: +36 1 234 5678</p>
      <p>Email: <a href="mailto:info@ceg.hu">info@ceg.hu</a></p>
    </address>
  </footer>
</body>
</html>

<!-- Magyarázat: A lang="hu" attribútum jelzi a segítő technológiáknak, 
     hogy az oldal magyar nyelvű -->

A lang=”hu” attribútum a HTML gyökérelemén jelzi a segítő technológiáknak, hogy az oldal magyar nyelvű. Ez biztosítja a helyes kiejtést és nyelvfeldolgozást.

2. Érvényes nyelvkódok használata

<!-- Jó: Szabványos BCP 47 nyelvkódok -->

<!-- Magyar weboldal -->
<!DOCTYPE html>
<html lang="hu">
<head>
  <meta charset="UTF-8">
  <title>Magyar weboldal</title>
</head>
<body>
  <h1>Üdvözöljük magyar nyelvű weboldalunkon</h1>
  <p>A teljes oldal magyar nyelvű, minden tartalma helyesen jelenik meg 
     a képernyőolvasókban.</p>
</body>
</html>

<!-- Angol weboldal -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>English Website</title>
</head>
<body>
  <h1>Welcome to our English website</h1>
  <p>All content is in English and will be properly pronounced 
     by screen readers.</p>
</body>
</html>

<!-- Német weboldal -->
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Deutsche Webseite</title>
</head>
<body>
  <h1>Willkommen auf unserer deutschen Webseite</h1>
  <p>Alle Inhalte sind auf Deutsch verfügbar.</p>
</body>
</html>

<!-- Francia weboldal -->
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Site Web Français</title>
</head>
<body>
  <h1>Bienvenue sur notre site français</h1>
  <p>Tout le contenu est en français.</p>
</body>
</html>

<!-- Helyes nyelvkódok listája:
     hu - Magyar
     en - Angol
     de - Német
     fr - Francia
     es - Spanyol
     it - Olasz
     ro - Román
     sk - Szlovák
     pl - Lengyel
     hr - Horvát
     sr - Szerb
     cs - Cseh
     bg - Bolgár
     ru - Orosz
     uk - Ukrán
     ja - Japán
     zh - Kínai
     ko - Koreai
     ar - Arab
     he - Héber
     tr - Török
     el - Görög
     pt - Portugál
     nl - Holland
     sv - Svéd
     no - Norvég
     da - Dán
     fi - Finn
-->

A szabványos BCP 47 nyelvkódok használata biztosítja, hogy minden segítő technológia helyesen értelmezze az oldal nyelvét.

3. Regionális nyelvkódok használata

<!-- Jó: Regionális nyelvváltozatok megjelölése -->

<!-- Magyar (Magyarország) -->
<!DOCTYPE html>
<html lang="hu-HU">
<head>
  <title>Magyarországi weboldal</title>
</head>
<body>
  <h1>Magyarországi tartalom</h1>
  <p>A dátum formátum: 2024. december 15.</p>
  <p>Az ár: 15 000 Ft</p>
</body>
</html>

<!-- Brit angol -->
<!DOCTYPE html>
<html lang="en-GB">
<head>
  <title>British English Website</title>
</head>
<body>
  <h1>Welcome to our British site</h1>
  <p>Date format: 15th December 2024</p>
  <p>Price: £150.00</p>
  <p>We specialise in quality services.</p>
</body>
</html>

<!-- Amerikai angol -->
<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>American English Website</title>
</head>
<body>
  <h1>Welcome to our American site</h1>
  <p>Date format: December 15, 2024</p>
  <p>Price: $150.00</p>
  <p>We specialize in quality services.</p>
</body>
</html>

<!-- Svájci német -->
<!DOCTYPE html>
<html lang="de-CH">
<head>
  <title>Schweizer Website</title>
</head>
<body>
  <h1>Willkommen auf unserer Schweizer Seite</h1>
  <p>Datumformat: 15.12.2024</p>
  <p>Preis: CHF 150.–</p>
</body>
</html>

<!-- Kanadai francia -->
<!DOCTYPE html>
<html lang="fr-CA">
<head>
  <title>Site Web Canadien Français</title>
</head>
<body>
  <h1>Bienvenue sur notre site canadien</h1>
  <p>Format de date: 15 décembre 2024</p>
  <p>Prix: 150,00 $ CA</p>
</body>
</html>

<!-- Magyarázat: A regionális kódok (pl. hu-HU, en-GB, de-CH) pontosabb
     nyelvi és kulturális kontextust biztosítanak -->

A regionális nyelvkódok (pl. hu-HU, en-GB) specifikusabb nyelvi és kulturális kontextust biztosítanak, segítve a helyesebb kiejtést és formázást.

Helytelen megoldások

Hiányzó lang attribútum a HTML elemen

<!-- Rossz: Nincs nyelvi deklaráció -->
<!DOCTYPE html>
<html>
<!-- Nincs lang attribútum! -->
<head>
  <meta charset="UTF-8">
  <title>Vállalati weboldal</title>
</head>
<body>
  <h1>Üdvözöljük weboldalunkon</h1>
  <p>Ez egy magyar nyelvű weboldal, de a képernyőolvasók nem tudják, 
     milyen nyelven ejtsék ki a szövegeket.</p>
  <p>A segítő technológiák a böngésző vagy operációs rendszer 
     alapértelmezett nyelvét használják, ami lehet helytelen.</p>
     
  <section>
    <h2>Szolgáltatásaink</h2>
    <ul>
      <li>Webfejlesztés</li>
      <li>Grafikai tervezés</li>
      <li>Digital marketing</li>
    </ul>
  </section>
  
  <footer>
    <p>© 2024 Cég neve. Minden jog fenntartva.</p>
  </footer>
</body>
</html>

<!-- Probléma: A képernyőolvasók nem tudják, hogy magyar nyelvű az oldal,
     így rossz kiejtést vagy helytelen nyelvfelismerést alkalmazhatnak -->

Probléma: Nincs nyelvi deklaráció, így a képernyőolvasók a böngésző, vagy az operációs rendszer alapértelmezett nyelvét használják, ami helytelen kiejtést eredményezhet.

Helytelen vagy érvénytelen nyelvkódok

<!-- Rossz: Érvénytelen nyelvkódok -->

<!-- Rossz: Teljes nyelv neve érvénytelen kódként -->
<!DOCTYPE html>
<html lang="magyar">
<!-- "magyar" nem érvényes BCP 47 kód! -->
<head>
  <title>Hibás nyelvkód példa</title>
</head>
<body>
  <h1>Ez nem fog jól működni</h1>
</body>
</html>

<!-- Rossz: Helytelen angolo nyelvkód -->
<!DOCTYPE html>
<html lang="english">
<!-- "english" nem érvényes BCP 47 kód! -->
<head>
  <title>Invalid Language Code Example</title>
</head>
<body>
  <h1>This will not work correctly</h1>
</body>
</html>

<!-- Rossz: Túl specifikus vagy hibás regionális kód -->
<!DOCTYPE html>
<html lang="hu-HU-budapest">
<!-- Túl specifikus, nem standard BCP 47 -->
<head>
  <title>Túl specifikus nyelvkód</title>
</head>
<body>
  <h1>Ez nem megfelelő formátum</h1>
</body>
</html>

<!-- Rossz: Hibás ISO kódok -->
<!DOCTYPE html>
<html lang="hun">
<!-- "hun" ISO 639-2 kód, de BCP 47-ben "hu" a helyes -->
<head>
  <title>Hibás ISO kód</title>
</head>
<body>
  <h1>A "hun" helyett "hu"-t kell használni</h1>
</body>
</html>

<!-- Rossz: Kitalált kódok -->
<!DOCTYPE html>
<html lang="xyz">
<!-- "xyz" nem létező nyelvkód -->
<head>
  <title>Kitalált nyelvkód</title>
</head>
<body>
  <h1>Ez teljesen hibás</h1>
</body>
</html>

<!-- Helyes példák összehasonlításképpen: -->
<!-- lang="hu" (Magyar) -->
<!-- lang="en" (Angol) -->
<!-- lang="de" (Német) -->
<!-- lang="fr" (Francia) -->
<!-- lang="hu-HU" (Magyar - Magyarország) -->
<!-- lang="en-US" (Amerikai angol) -->
<!-- lang="en-GB" (Brit angol) -->

Probléma: Az érvénytelen nyelvkódok miatt a segítő technológiák nem tudják helyesen értelmezni a tartalmat, ami helytelen kiejtéshez vezet.

Források

Amennyiben szeretnél első kézből értesülni az új bejegyzésekről, iratkozz fel hírlevelünkre!