2.4.2 - Oldalcím

Kategória: 2. Működtethető (Operable) Irányelv: 2.4. Navigálható Szint: A

Röviden a szabványpontról

A WCAG 2.4.2 (Page Titled) előírja, hogy a weboldalaknak olyan címekkel kell rendelkezniük, amelyek leírják azok témáját vagy célját. Ez azt jelenti, hogy minden HTML oldalnak tartalmaznia kell egy <title> elemet a <head> szakaszban, amely világosan és pontosan tükrözi az oldal tartalmát vagy funkcióját. A cél az, hogy segítse a felhasználókat, különösen azokat, akik kisegítő technológiákat használnak, gyorsan megérteni, miről szól az oldal.

Mire vonatkozik: Minden webes tartalomra, amely különálló oldallal vagy nézettel rendelkezik, beleértve az egyoldalas alkalmazásokat is, ahol az oldal címe dinamikusan változik.

Cél: Biztosítani, hogy a felhasználók képesek legyenek:

Azonosítani, hogy melyik oldalon vannak
Könnyedén különbséget tenni több nyitott lap vagy ablak között
Hatékonyan navigálni képernyőolvasó oldal listák vagy böngésző lapok használatával

Kiket érint

Elsődleges felhasználók: Képernyőolvasókra vagy más kisegítő technológiákra támaszkodó emberek profitálnak a legtöbbet. A képernyőolvasók bejelentik az oldal címét, amikor egy oldal betöltődik, azonnali kontextust adva a felhasználóknak.

Másodlagos előnyök: A kognitív fogyatékossággal élő felhasználók könnyebben tájékozódnak tiszta oldal címekkel. Emellett bárki, aki több böngésző lapot vagy ablakot kezel, profitál a leíró címekből.

Tesztelés

<title> elem ellenőrzése: Vizsgáld meg az oldal forrását vagy használd a böngésző fejlesztői eszközöket a <title> tag jelenlétének megerősítésére a <head> szakaszban
Cím tartalom ellenőrzése: Győződj meg róla, hogy a cím pontosan leírja az oldal tartalmát vagy célját és tömör
Képernyőolvasó használata: Navigálj az oldalra és hallgasd meg az oldal cím bejelentését betöltéskor vagy lap fókuszálásakor
Több lap teszt: Nyiss meg több oldalt a webhelyről külön lapokban és ellenőrizd, hogy minden lap címe egyedi és leíró
Dinamikus tartalom: Egyoldalas alkalmazások esetén erősítsd meg, hogy az oldal címe megfelelően frissül, amikor a tartalom vagy nézetek változnak

Jó gyakorlatok

1. Statikus HTML oldalak megfelelő címekkel

<!DOCTYPE html>
<html lang="hu">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- Főoldal cím -->
  <title>Főoldal - Példa Vállalat | Webfejlesztési szolgáltatások</title>
  
  <meta name="description" content="Példa Vállalat - professzionális webfejlesztési és design szolgáltatások vállalkozások számára.">
</head>
<body>
  <h1>Üdvözöljük a Példa Vállalatnál</h1>
  <p>Professzionális webfejlesztési szolgáltatások...</p>
</body>
</html>

<!-- Kapcsolat oldal -->
<!DOCTYPE html>
<html lang="hu">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- Világos és leíró cím -->
  <title>Kapcsolat - Példa Vállalat | Vegye fel velünk a kapcsolatot</title>
  
  <meta name="description" content="Vegye fel velünk a kapcsolatot - telefonszám, email cím és irodánk címe.">
</head>
<body>
  <h1>Kapcsolatfelvétel</h1>
  <div class="contact-info">
    <p>Telefon: +36 1 234 5678</p>
    <p>Email: info@peldavallalat.hu</p>
  </div>
</body>
</html>

<!-- Termék oldal -->
<!DOCTYPE html>
<html lang="hu">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- Specifikus termék információval -->
  <title>Férfi futócipő - SportMax Pro X1 | SportBolt</title>
  
  <meta name="description" content="SportMax Pro X1 férfi futócipő - kiváló minőség, kényelmes viselet. 45.990 Ft.">
</head>
<body>
  <h1>SportMax Pro X1 Férfi Futócipő</h1>
  <p>Professzionális futócipő kiváló teljesítményhez...</p>
</body>
</html>

Magyarázat: Minden oldal címe egyedileg azonosítja az oldal célját és tartalmát, megkönnyítve a felhasználóknak a tájékozódást.

2. Egyoldalas alkalmazás (SPA) dinamikus címkezeléssel

<!DOCTYPE html>
<html lang="hu">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title id="page-title">Betöltés... - MyApp</title>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#" onclick="navigateTo('home')">Főoldal</a></li>
      <li><a href="#" onclick="navigateTo('profile')">Profil</a></li>
      <li><a href="#" onclick="navigateTo('settings')">Beállítások</a></li>
      <li><a href="#" onclick="navigateTo('messages')">Üzenetek</a></li>
    </ul>
  </nav>
  
  <main id="main-content">
    <!-- Dinamikus tartalom ide kerül -->
  </main>

  <script>
    // Oldal címek konfigurációja
    const pageTitles = {
      'home': 'Főoldal - MyApp | Személyes irányítópult',
      'profile': 'Felhasználói profil - Kiss János | MyApp',
      'settings': 'Beállítások - MyApp | Fiók és adatvédelem',
      'messages': 'Üzenetek (3 új) - MyApp | Beszélgetések',
      'message-detail': 'Üzenet részletei - MyApp',
      'search': 'Keresési eredmények - MyApp',
      'error': 'Hiba történt - MyApp | Oldal nem található'
    };

    // Oldal cím frissítése
    function updatePageTitle(pageKey, customData = null) {
      let newTitle = pageTitles[pageKey] || 'MyApp';
      
      // Egyedi adatok beillesztése a címbe
      if (customData) {
        if (pageKey === 'profile' && customData.username) {
          newTitle = `Felhasználói profil - ${customData.username} | MyApp`;
        } else if (pageKey === 'message-detail' && customData.sender) {
          newTitle = `Üzenet tőle: ${customData.sender} - MyApp`;
        } else if (pageKey === 'search' && customData.query) {
          newTitle = `Keresési eredmények: "${customData.query}" - MyApp`;
        }
      }
      
      // Cím beállítása
      document.title = newTitle;
      
      // Képernyőolvasó értesítése a változásról
      announcePageChange(newTitle);
      
      // Böngésző előzmények frissítése
      if (window.history && window.history.pushState) {
        window.history.pushState({page: pageKey, title: newTitle}, newTitle, `#${pageKey}`);
      }
    }

    // Navigáció kezelése
    function navigateTo(page, data = null) {
      // Tartalom betöltése (szimulált)
      loadPageContent(page, data);
      
      // Cím frissítése
      updatePageTitle(page, data);
      
      // Fókusz kezelése
      document.getElementById('main-content').focus();
    }

    // Oldal tartalom betöltése (szimulált)
    function loadPageContent(page, data) {
      const content = document.getElementById('main-content');
      
      switch(page) {
        case 'home':
          content.innerHTML = `
            <h1>Üdvözöljük az irányítópulton</h1>
            <p>Itt láthatja a legfrissebb tevékenységeket és értesítéseket.</p>
          `;
          break;
        case 'profile':
          const username = data?.username || 'Kiss János';
          content.innerHTML = `
            <h1>Felhasználói profil: ${username}</h1>
            <p>Személyes adatok és beállítások kezelése.</p>
          `;
          break;
        case 'settings':
          content.innerHTML = `
            <h1>Beállítások</h1>
            <p>Fiók beállítások, adatvédelem és értesítések.</p>
          `;
          break;
        case 'messages':
          content.innerHTML = `
            <h1>Üzenetek <span class="badge">3 új</span></h1>
            <p>Beszélgetések és üzenetek kezelése.</p>
          `;
          break;
        default:
          content.innerHTML = `
            <h1>Oldal nem található</h1>
            <p>A keresett oldal nem elérhető.</p>
          `;
          updatePageTitle('error');
      }
    }

    // Képernyőolvasó értesítése oldal változásról
    function announcePageChange(newTitle) {
      const announcement = document.createElement('div');
      announcement.setAttribute('role', 'status');
      announcement.setAttribute('aria-live', 'polite');
      announcement.className = 'sr-only';
      announcement.textContent = `Oldal váltás: ${newTitle}`;
      document.body.appendChild(announcement);
      
      setTimeout(() => {
        document.body.removeChild(announcement);
      }, 1000);
    }

    // Böngésző vissza/előre gomb kezelése
    window.addEventListener('popstate', function(event) {
      if (event.state && event.state.page) {
        loadPageContent(event.state.page);
        document.title = event.state.title;
      }
    });

    // Kezdeti oldal betöltése
    document.addEventListener('DOMContentLoaded', function() {
      // URL hash alapján kezdeti oldal meghatározása
      const initialPage = window.location.hash.replace('#', '') || 'home';
      navigateTo(initialPage);
    });

    // Keresés funkció cím frissítéssel
    function performSearch(query) {
      if (query.trim()) {
        navigateTo('search', {query: query.trim()});
        
        // Keresési eredmények szimulációja
        setTimeout(() => {
          const content = document.getElementById('main-content');
          content.innerHTML = `
            <h1>Keresési eredmények: "${query}"</h1>
            <p>${Math.floor(Math.random() * 50) + 1} találat található.</p>
          `;
        }, 100);
      }
    }

    // Hibaoldalak kezelése
    function handleError(errorType, errorMessage) {
      const content = document.getElementById('main-content');
      
      let title, heading;
      switch(errorType) {
        case '404':
          title = 'Oldal nem található (404) - MyApp';
          heading = 'Oldal nem található';
          break;
        case '500':
          title = 'Szerver hiba (500) - MyApp';
          heading = 'Szerver hiba';
          break;
        default:
          title = 'Hiba történt - MyApp';
          heading = 'Váratlan hiba';
      }
      
      document.title = title;
      content.innerHTML = `
        <h1>${heading}</h1>
        <p>${errorMessage}</p>
        <button onclick="navigateTo('home')">Vissza a főoldalra</button>
      `;
      
      announcePageChange(title);
    }
  </script>

  <style>
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    
    .badge {
      background: #dc3545;
      color: white;
      padding: 2px 6px;
      border-radius: 10px;
      font-size: 0.8em;
    }
    
    nav ul {
      list-style: none;
      display: flex;
      gap: 1rem;
      padding: 1rem;
      background: #f8f9fa;
    }
    
    nav a {
      text-decoration: none;
      padding: 0.5rem 1rem;
      background: #007bff;
      color: white;
      border-radius: 4px;
    }
    
    nav a:hover, nav a:focus {
      background: #0056b3;
    }
    
    #main-content {
      padding: 2rem;
      outline: none;
    }
    
    #main-content:focus {
      outline: 2px solid #007bff;
      outline-offset: 2px;
    }
  </style>
</body>
</html>

3. Speciális oldalak címeinek kezelése

<!-- Blog bejegyzés oldal -->
<head>
  <title>Webes akadálymentesség alapjai - Blog | TechCikkek.hu</title>
  <meta name="description" content="Teljes útmutató a webes akadálymentesség alapjaihoz. WCAG irányelvek, gyakorlati tippek és eszközök.">
</head>

<!-- Űrlap oldal -->
<head>
  <title>Regisztráció - Új fiók létrehozása | MyApp</title>
  <meta name="description" content="Hozzon létre új fiókot a MyApp szolgáltatáshoz. Gyors és egyszerű regisztrációs folyamat.">
</head>

<!-- Keresési eredmények oldal -->
<head>
  <title>Keresési eredmények: "webfejlesztés" - 127 találat | JobPortal</title>
  <meta name="description" content="127 állásajánlat található webfejlesztés területén. Szűrje és rendezze az eredményeket.">
</head>

<!-- Hibaoldal -->
<head>
  <title>Oldal nem található (404) | WebsiteName</title>
  <meta name="description" content="A keresett oldal nem található. Térjen vissza a főoldalra vagy használja a keresést.">
</head>

<!-- Bejelentkezési oldal -->
<head>
  <title>Bejelentkezés - Hozzáférés a fiókjához | SecureApp</title>
  <meta name="description" content="Jelentkezzen be biztonságosan a SecureApp fiókjába. Kétfaktoros hitelesítés támogatással.">
</head>

<script>
// Dinamikus cím generátor függvény
function generatePageTitle(pageType, data = {}) {
  const siteName = data.siteName || 'MyWebsite';
  
  const titleTemplates = {
    // Általános oldalak
    home: () => `Főoldal - ${siteName}`,
    about: () => `Rólunk - ${siteName}`,
    contact: () => `Kapcsolat - ${siteName}`,
    
    // Blog és tartalom
    blogPost: () => `${data.title} - Blog | ${siteName}`,
    blogCategory: () => `${data.category} kategória - Blog | ${siteName}`,
    blogArchive: () => `Archívum - ${data.month} ${data.year} | ${siteName}`,
    
    // E-commerce
    product: () => `${data.productName} | ${siteName}`,
    category: () => `${data.categoryName} - Termékek | ${siteName}`,
    cart: () => `Kosár (${data.itemCount} termék) | ${siteName}`,
    checkout: () => `Pénztár - Rendelés véglegesítése | ${siteName}`,
    
    // Felhasználói fiókok
    login: () => `Bejelentkezés | ${siteName}`,
    register: () => `Regisztráció - Új fiók | ${siteName}`,
    profile: () => `Profil - ${data.username} | ${siteName}`,
    settings: () => `Beállítások | ${siteName}`,
    
    // Keresés és szűrés
    search: () => `Keresés: "${data.query}" - ${data.resultCount} találat | ${siteName}`,
    searchNoResults: () => `Nincs találat: "${data.query}" | ${siteName}`,
    
    // Hibaoldalak
    error404: () => `Oldal nem található (404) | ${siteName}`,
    error500: () => `Szerver hiba (500) | ${siteName}`,
    errorGeneric: () => `Hiba történt | ${siteName}`,
    
    // Űrlapok
    form: () => `${data.formName} | ${siteName}`,
    formSuccess: () => `Sikeres küldés - ${data.formName} | ${siteName}`,
    
    // Többlépéses folyamatok
    wizard: () => `${data.stepName} (${data.currentStep}/${data.totalSteps}) | ${siteName}`,
  };
  
  const generator = titleTemplates[pageType];
  return generator ? generator() : `${siteName}`;
}

// Cím frissítése dinamikus adatokkal
function updateDynamicTitle(pageType, data = {}) {
  const newTitle = generatePageTitle(pageType, data);
  document.title = newTitle;
  
  // Historie API frissítése
  if (window.history && window.history.replaceState) {
    window.history.replaceState(
      {title: newTitle, pageType, data}, 
      newTitle, 
      window.location.href
    );
  }
  
  return newTitle;
}

// Példák a használatra:

// Blog bejegyzés
updateDynamicTitle('blogPost', {
  title: 'Webes akadálymentesség alapjai',
  siteName: 'TechCikkek.hu'
});

// Termék oldal
updateDynamicTitle('product', {
  productName: 'iPhone 15 Pro - 256GB Fehér',
  siteName: 'TechShop'
});

// Keresési eredmények
updateDynamicTitle('search', {
  query: 'laptop',
  resultCount: 45,
  siteName: 'ElektronikaBolt'
});

// Többlépéses űrlap
updateDynamicTitle('wizard', {
  stepName: 'Személyes adatok',
  currentStep: 2,
  totalSteps: 4,
  siteName: 'Biztosítás Online'
});
</script>

Magyarázat: A dinamikus címek segítik a felhasználókat a navigálásban és egyértelmű kontextust biztosítanak minden oldalnézethez.

Rossz gyakorlatok

Hiányzó <title> elem

<!DOCTYPE html>
<html lang="hu">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Nincs <title> tag -->
</head>
<body>
  <h1>Oldal tartalma</h1>
</body>
</html>

Probléma: A képernyőolvasók és böngészők nem tudnak oldal címet bejelenteni vagy megjeleníteni.

Homályos vagy általános címek

<title>Oldal</title>
<title>Weboldal</title>
<title>Üdvözöljük</title>
<title>Főoldal</title>

Probléma: Ezek a címek nem adnak hasznos információt a felhasználóknak az oldal tartalmáról.

Azonos címek több oldalon

<!-- Minden oldal ugyanazzal a címmel -->
<title>Példa Vállalat</title> <!-- főoldal -->
<title>Példa Vállalat</title> <!-- kapcsolat oldal -->
<title>Példa Vállalat</title> <!-- szolgáltatások oldal -->

Probléma: A felhasználók nem tudnak különbséget tenni a különböző oldalak vagy lapok között.

Túl hosszú címek

<title>Ez egy nagyon hosszú cím, amely folyamatosan megy tovább és tovább, és valószínűleg levágásra kerül a böngésző lapokban, ami megnehezíti az olvasást és megértést a felhasználók számára</title>

Probléma: A hosszú címek csonkolva jelennek meg a lapokban és zavarhatják a felhasználókat.

Nem frissülő címek SPA-ban

<script>
// Hibás: nem frissíti a címet navigációkor
function navigateTo(page) {
  // Csak a tartalom változik, a cím nem
  document.getElementById('content').innerHTML = getPageContent(page);
  // document.title frissítés hiányzik!
}
</script>

Probléma: A felhasználók nem tudják, hogy melyik nézeten vannak az alkalmazásban.

Technikai hibák a címben

<!-- HTML entitások hibás használata -->
<title>Termék &amp; Szolgáltatás</title>

<!-- JavaScript hibák a címben -->
<title>Profil - undefined | MyApp</title>

<!-- Üres vagy null értékek -->
<title> - MyApp</title>
<title>null - MyApp</title>

Probléma: Technikai hibák zavarják a felhasználói élményt és professzionálisan hatnak.

Források

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