2.4.1 - Blokkok kihagyása

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.1 (Bypass Blocks) előírja, hogy a weboldalaknak mechanizmust kell biztosítaniuk a felhasználók számára az ismétlődő tartalomblokkok megkerülésére, amelyek több oldalon jelennek meg, mint navigációs menük, fejlécek vagy oldalsávok. Ez lehetővé teszi a felhasználóknak, különösen azoknak, akik kisegítő technológiákat vagy billentyűzetes navigációt használnak, hogy gyorsan a fő tartalomhoz jussanak anélkül, hogy ismétlődő linkeken vagy szakaszokon kellene végiglapozniuk.

Mire vonatkozik: Minden olyan ismétlődő tartalomblokkra, amely egy weboldal vagy alkalmazás több oldalán megjelenik, mint globális navigációs menük, keresősávok vagy más állandó felhasználói felület komponensek.

Cél: Biztosítani, hogy a billentyűzetes navigációra vagy képernyőolvasókra támaszkodó felhasználók hatékonyan átugorhassák az ismétlődő tartalmat és hozzáférjenek az oldal elsődleges tartalmához, javítva a használhatóságot és csökkentve a frusztrációt.

Kiket érint

Elsődleges felhasználók:

Csak billentyűzetet használó felhasználók, akik szekvenciálisan navigálnak az oldal elemei között
Képernyőolvasót használó felhasználók, akik számára előnyös, ha gyorsan a fő tartalomhoz juthatnak anélkül, hogy minden oldalon ugyanazt a navigációt hallanák
Kognitív fogyatékossággal élő felhasználók, akik számára az ismétlődő navigáció zavaró vagy összezavaró lehet

Másodlagos előnyök:

Javítja az általános navigációs hatékonyságot minden felhasználó számára
Növeli a mobil és érintőeszközök hozzáférhetőségét a szükségtelen interakciók csökkentésével

Tesztelés

Billentyűzetes navigációs teszt: Használd a billentyűzetet (Tab billentyű) az oldal navigálásához és erősítsd meg egy „Ugrás a fő tartalomhoz” link vagy hasonló mechanizmus jelenlétét az első fókuszálható elemként
Képernyőolvasó teszt: Képernyőolvasó használatával ellenőrizd, hogy az ugrási link bejelentésre kerül és közvetlenül a fő tartalom területre mozgatja a fókuszt
Vizuális ellenőrzés: Erősítsd meg, hogy az ugrási link látható fókuszáláskor (gyakran alapértelmezetten rejtett, de fókuszkor látható)
Jelölő szerepek: Ellenőrizd, hogy a fő tartalom terület megfelelő landmark szerepkörrel rendelkezik (pl. <main> vagy role=”main”), így a kisegítő technológiák azonosíthatják a fő tartalmat
Konzisztens jelenlét: Ellenőrizd több oldalon, hogy az ugrási link és a fő tartalom jelölők konzisztensen jelen vannak

Jó gyakorlatok

1. Egyszerű ugrási link megvalósítás

<!DOCTYPE html>
<html lang="hu">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Példa weboldal - Ugrási linkekkel</title>
</head>
<body>
  <!-- Ugrási linkek az oldal tetején -->
  <div class="skip-links">
    <a href="#main-content" class="skip-link">Ugrás a fő tartalomhoz</a>
    <a href="#navigation" class="skip-link">Ugrás a navigációhoz</a>
    <a href="#footer" class="skip-link">Ugrás a lábléchez</a>
  </div>

  <header role="banner">
    <div class="site-header">
      <h1>Weboldal címe</h1>
      <div class="header-utilities">
        <button class="search-toggle" aria-expanded="false" aria-controls="search-form">
          Keresés
        </button>
        <a href="/bejelentkezes">Bejelentkezés</a>
      </div>
    </div>
  </header>

  <nav id="navigation" role="navigation" aria-label="Fő navigáció">
    <ul class="main-nav">
      <li><a href="/">Főoldal</a></li>
      <li>
        <a href="/termekek" aria-expanded="false" aria-haspopup="true">Termékek</a>
        <ul class="submenu">
          <li><a href="/termekek/kategoria1">Kategória 1</a></li>
          <li><a href="/termekek/kategoria2">Kategória 2</a></li>
          <li><a href="/termekek/kategoria3">Kategória 3</a></li>
        </ul>
      </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>

  <main id="main-content" role="main" tabindex="-1">
    <div class="content-wrapper">
      <h1>Oldal fő címe</h1>
      <p>Ez a fő tartalom területe, ahova az ugrási link közvetlenül vezet. 
      A felhasználók itt találják meg az oldal elsődleges információit.</p>
      
      <section class="content-section">
        <h2>Tartalom szakasz</h2>
        <p>További tartalom, amely az oldal fő céljához kapcsolódik...</p>
      </section>
    </div>
  </main>

  <aside role="complementary" aria-labelledby="sidebar-heading">
    <h2 id="sidebar-heading">Kapcsolódó információk</h2>
    <div class="sidebar-content">
      <p>Kiegészítő tartalom és linkek...</p>
    </div>
  </aside>

  <footer id="footer" role="contentinfo">
    <div class="footer-content">
      <p>&copy; 2024 Weboldal neve. Minden jog fenntartva.</p>
      <nav aria-label="Lábléc navigáció">
        <ul>
          <li><a href="/adatvedelmi-szabalyzat">Adatvédelmi szabályzat</a></li>
          <li><a href="/felhasznalasi-feltetelek">Felhasználási feltételek</a></li>
          <li><a href="/sitemap">Oldaltérkép</a></li>
        </ul>
      </nav>
    </div>
  </footer>
</body>
</html>

2. CSS stílusok fókuszkor látható ugrási linkekkel

<style>
/* Ugrási linkek konténere */
.skip-links {
  position: relative;
  z-index: 1000;
}

/* Ugrási linkek alapstílusa */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  font-weight: bold;
  z-index: 1001;
  transition: top 0.3s ease;
}

/* Ugrási link fókuszkor */
.skip-link:focus {
  top: 0;
  outline: 2px solid #ffff00;
  outline-offset: 2px;
}

/* Ugrási link hover állapot */
.skip-link:hover {
  background: #333;
  color: #fff;
}

/* Oldal elrendezés */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
}

.site-header h1 {
  margin: 0;
  font-size: 1.5rem;
  color: #333;
}

.header-utilities {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.search-toggle,
.header-utilities a {
  padding: 0.5rem 1rem;
  background: #007bff;
  color: white;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.search-toggle:hover,
.search-toggle:focus,
.header-utilities a:hover,
.header-utilities a:focus {
  background: #0056b3;
  outline: 2px solid #333;
  outline-offset: 2px;
}

/* Navigáció stílusok */
.main-nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 1rem;
  background: #343a40;
}

.main-nav > li {
  position: relative;
  margin-right: 2rem;
}

.main-nav a {
  color: #fff;
  text-decoration: none;
  padding: 0.5rem 1rem;
  display: block;
  border-radius: 4px;
}

.main-nav a:hover,
.main-nav a:focus {
  background: #495057;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Almenü stílusok */
.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #495057;
  min-width: 200px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.main-nav li:hover .submenu,
.main-nav li:focus-within .submenu {
  display: block;
}

.submenu a {
  border-radius: 0;
  border-bottom: 1px solid #6c757d;
}

.submenu a:hover,
.submenu a:focus {
  background: #6c757d;
}

/* Fő tartalom stílusok */
#main-content {
  outline: none; /* Programmatic focus outline elrejtése */
}

#main-content:focus {
  outline: 2px solid #007bff;
  outline-offset: 4px;
}

.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.content-wrapper h1 {
  color: #333;
  margin-bottom: 1rem;
}

.content-section {
  margin: 2rem 0;
  padding: 1.5rem;
  background: #f8f9fa;
  border-left: 4px solid #007bff;
}

/* Oldalsáv stílusok */
aside {
  background: #f1f3f4;
  padding: 1.5rem;
  margin: 1rem 0;
}

aside h2 {
  margin-top: 0;
  color: #333;
}

/* Lábléc stílusok */
footer {
  background: #343a40;
  color: #fff;
  padding: 2rem 0;
  margin-top: 2rem;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

footer nav ul {
  display: flex;
  list-style: none;
  gap: 2rem;
  margin: 1rem 0 0 0;
  padding: 0;
}

footer nav a {
  color: #adb5bd;
  text-decoration: none;
}

footer nav a:hover,
footer nav a:focus {
  color: #fff;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Képernyőolvasó-csak tartalom */
.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;
}
</style>

3. JavaScript funkciók a fókusz kezeléshez

<script>
// Fő tartalom fókusz kezelése
document.addEventListener('DOMContentLoaded', function() {
  const skipLinks = document.querySelectorAll('.skip-link');
  
  skipLinks.forEach(function(link) {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      
      const targetId = this.getAttribute('href').substring(1);
      const targetElement = document.getElementById(targetId);
      
      if (targetElement) {
        // Fókusz mozgatása a célzott elemre
        targetElement.focus();
        
        // Görgetés a célzott elemhez sima animációval
        targetElement.scrollIntoView({
          behavior: 'smooth',
          block: 'start'
        });
        
        // Vizuális visszajelzés a fókusz helyzetéről
        targetElement.classList.add('skip-target-focused');
        
        // Képernyőolvasó értesítése
        announceToScreenReader(`Ugrás végrehajtva: ${this.textContent}`);
        
        // Vizuális jelzés eltávolítása 2 másodperc után
        setTimeout(function() {
          targetElement.classList.remove('skip-target-focused');
        }, 2000);
      }
    });
  });
  
  // Első oldalbetöltéskor ellenőrzés, hogy van-e fragment identifier
  if (window.location.hash) {
    const targetElement = document.querySelector(window.location.hash);
    if (targetElement) {
      setTimeout(function() {
        targetElement.focus();
      }, 100);
    }
  }
});

// Képernyőolvasó értesítése
function announceToScreenReader(message) {
  const announcement = document.createElement('div');
  announcement.setAttribute('role', 'status');
  announcement.setAttribute('aria-live', 'polite');
  announcement.className = 'sr-only';
  announcement.textContent = message;
  document.body.appendChild(announcement);
  
  setTimeout(function() {
    document.body.removeChild(announcement);
  }, 1000);
}

// Billentyűzet navigáció fejlesztése
document.addEventListener('keydown', function(e) {
  // Escape billentyű az ugrási linkek megjelenítéséhez
  if (e.key === 'Escape') {
    const firstSkipLink = document.querySelector('.skip-link');
    if (firstSkipLink) {
      firstSkipLink.focus();
    }
  }
  
  // Ctrl + Home kombináció a fő tartalomhoz ugráshoz
  if (e.ctrlKey && e.key === 'Home') {
    e.preventDefault();
    const mainContent = document.getElementById('main-content');
    if (mainContent) {
      mainContent.focus();
      mainContent.scrollIntoView({ behavior: 'smooth' });
    }
  }
});

// Almenü kezelés billentyűzettel
document.querySelectorAll('.main-nav > li > a[aria-haspopup="true"]').forEach(function(menuItem) {
  menuItem.addEventListener('keydown', function(e) {
    const submenu = this.nextElementSibling;
    
    if (e.key === 'ArrowDown' || e.key === 'Enter') {
      e.preventDefault();
      this.setAttribute('aria-expanded', 'true');
      if (submenu) {
        const firstSubmenuItem = submenu.querySelector('a');
        if (firstSubmenuItem) {
          firstSubmenuItem.focus();
        }
      }
    }
  });
});

// Almenü elem kezelés
document.querySelectorAll('.submenu a').forEach(function(submenuItem) {
  submenuItem.addEventListener('keydown', function(e) {
    const parentMenuItem = this.closest('li').querySelector('a[aria-haspopup="true"]');
    
    if (e.key === 'Escape') {
      e.preventDefault();
      if (parentMenuItem) {
        parentMenuItem.setAttribute('aria-expanded', 'false');
        parentMenuItem.focus();
      }
    }
  });
});
</script>

<style>
/* Fókusz célpont vizuális jelzése */
.skip-target-focused {
  outline: 3px solid #007bff !important;
  outline-offset: 2px !important;
  background-color: rgba(0, 123, 255, 0.1) !important;
  transition: all 0.3s ease;
}

/* Animált fókusz jelzés */
@keyframes focusGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
  }
}

.skip-target-focused {
  animation: focusGlow 1s ease-out;
}
</style>

Rossz gyakorlatok

Nem fókuszálható ugrási link

<a href="#maincontent" class="skip-link" tabindex="-1">Ugrás a fő tartalomhoz</a>

Probléma: A tabindex="-1" eltávolítja a linket a billentyűzetes navigációból, megszüntetve a célját.

Teljesen elrejtett ugrási link

<style>
.skip-link {
  display: none;
}
</style>

<a href="#maincontent" class="skip-link">Ugrás a fő tartalomhoz</a>

Probléma: A link teljesen elrejtése hozzáférhetetlenné teszi a billentyűzetes felhasználók számára.

Hiányzó célelem azonosítóval

<a href="#maincontent" class="skip-link">Ugrás a fő tartalomhoz</a>
<nav>...navigáció...</nav>
<main>
  <!-- Nincs id="maincontent" attribútum -->
  <h1>Fő tartalom</h1>
</main>

Probléma: A link nem visz sehova, mivel nincs megfelelő célelem.

Túl késői ugrási link a DOM-ban

<header>
  <h1>Weboldal címe</h1>
</header>
<nav>
  <ul>
    <li><a href="/">Főoldal</a></li>
    <li><a href="/termekek">Termékek</a></li>
    <li><a href="/szolgaltatasok">Szolgáltatások</a></li>
  </ul>
</nav>
<a href="#maincontent" class="skip-link">Ugrás a fő tartalomhoz</a>
<main id="maincontent">...</main>

Probléma: Az ugrási linknek az első fókuszálható elemnek kell lennie, nem a navigáció után.

Nem működő ugrási link

<a href="#maincontent" class="skip-link" onclick="return false;">Ugrás a fő tartalomhoz</a>
<main id="maincontent">...</main>

Probléma: A JavaScript megakadályozza a link működését, így nem történik ugrás.

Nem megfelelő landmark szerepek

<a href="#content" class="skip-link">Ugrás a tartalomhoz</a>
<div id="content">
  <!-- Nincs main elem vagy role="main" -->
  <h1>Oldal címe</h1>
  <p>Tartalom...</p>
</div>

Probléma: A fő tartalom nincs megfelelően jelölve landmark szerepkörrel, megnehezítve a kisegítő technológiák számára az azonosítást.

Források

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