2.4.11 - Nem elfedhető a fókusz

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

Röviden a szabványpontról

A WCAG 2.4.11 (Focus Not Obscured – Minimum) előírja, hogy amikor egy elem billentyűzet fókuszt kap, a fókusz jelzője nem lehet elrejtve vagy elfedve más tartalom által. Ez minden interaktív elemre vonatkozik egy weboldalon vagy alkalmazásban, amely billentyűzet fókuszt kaphat, mint linkek, gombok, űrlap vezérlők és egyéni widgetek.

Mire vonatkozik: Minden interaktív elemre, amely billentyűzet fókuszt kaphat: linkek, gombok, űrlap vezérlők és egyéni widgetek.

Cél: Biztosítani, hogy a billentyűzetes navigációra támaszkodó felhasználók:

Mindig láthassák, melyik elem van éppen fókuszban
Ne kerüljenek zavarba vagy dezorientációba
Egyértelműen követhessék a navigációt
Ne veszítsék el a helyüket az oldalon

Kiket érint

Elsődleges felhasználók: Csak billentyűzetet használók, beleértve a mozgáskorlátozottakat, akik nem tudnak egeret használni, és képernyőolvasó felhasználók, akik billentyűzet fókuszra támaszkodnak a tartalommal való interakcióhoz.

Másodlagos előnyök: Gyengénlátó vagy kognitív fogyatékossággal élő felhasználók profitálnak az egyértelmű vizuális fókusz jelzőkből, javítva az általános használhatóságot és navigációs egyértelműséget.

Tesztelés

Billentyűzetes navigációs teszt: Használd a billentyűzetet (Tab, Shift+Tab, nyíl billentyűk) az összes interaktív elemen való végignavigáláshoz és figyeld meg, hogy a fókusz jelző mindig látható és nincs elfedve más tartalom által
Képernyőnagyító teszt: Nagyítsd fel az oldalt (pl. 200%-ra) és ellenőrizd, hogy a fókusz jelző látható marad és nincs elzárva
CSS vizsgálat: Ellenőrizd a CSS stílusokat az outline, box-shadow vagy más fókusz stílusok esetén és győződj meg róla, hogy nincsenek elrejtve vagy levágva overflow: hidden vagy átfedő elemek által
Automatizált eszközök: Használj akadálymentességi tesztelő eszközöket, mint az axe DevTools a fókusz láthatósági problémák azonosítására
Dinamikus tartalom teszt: Modális ablakok, dialógusok vagy dinamikus átfedések esetén ellenőrizd, hogy ezeken a komponenseken belüli fókuszált elemek fókusz jelzője nincs elrejtve más oldal tartalom által

Jó megoldások

1. Natív fókusz jelző használata

<!-- Jó: Alapértelmezett böngésző fókusz látható és nem fedett -->
<button>Kattints rám</button>
<a href="/fooldal">Főoldal</a>
<input type="text" placeholder="Név">

<!-- Jó: Navigációs menü natív fókusszal -->
<nav>
  <ul>
    <li><a href="/termekek">Termékek</a></li>
    <li><a href="/szolgaltatasok">Szolgáltatások</a></li>
    <li><a href="/kapcsolat">Kapcsolat</a></li>
  </ul>
</nav>

<!-- Jó: Űrlap elemek természetes fókusszal -->
<form>
  <label for="email">E-mail cím:</label>
  <input type="email" id="email" name="email">
  
  <label for="uzenet">Üzenet:</label>
  <textarea id="uzenet" name="uzenet"></textarea>
  
  <button type="submit">Küldés</button>
</form>

A böngésző alapértelmezett fókusz körvonala látható és nincs elfedve más elemek által. Ez a legegyszerűbb és legmegbízhatóbb megoldás.

2. Egyéni fókusz stílusok nagy kontraszttal

<!-- Jó: Egyéni fókusz stílusok, amelyek nem fedettek -->
<button class="primary-btn">Elsődleges művelet</button>
<button class="secondary-btn">Másodlagos művelet</button>

<style>
.primary-btn {
  background: #0066cc;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  cursor: pointer;
}

/* Jó: Nagy kontrasztú fókusz, nincs elfedve */
.primary-btn:focus {
  outline: 3px solid #ffbf47; /* Narancssárga körvonal */
  outline-offset: 2px; /* Körvonal eltávolítása az elemtől */
  /* Biztosítja, hogy a körvonal nem vágódik le */
}

.secondary-btn {
  background: #6c757d;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  cursor: pointer;
}

.secondary-btn:focus {
  outline: 3px solid #17a2b8; /* Kék körvonal */
  outline-offset: 2px;
  box-shadow: 0 0 0 1px #fff; /* Fehér belső árnyék a jobb láthatóságért */
}

/* Jó: Linkek egyéni fókusza */
a:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
  background-color: rgba(0, 102, 204, 0.1);
  border-radius: 2px;
  text-decoration: none;
}

/* Jó: Űrlap elemek fókusza */
input:focus, 
textarea:focus, 
select:focus {
  outline: 2px solid #0066cc;
  outline-offset: 1px;
  border-color: #0066cc;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}
</style>

Az egyéni fókusz stílusok javítják a láthatóságot, miközben biztosítják, hogy nem vágódnak le vagy rejtődnek el.

3. Overflow levágás elkerülése

<!-- Jó: Konténerek, amelyek nem vágják le a fókusz jelzőt -->
<div class="good-container">
  <button>Gomb a konténerben</button>
  <a href="/link">Link a konténerben</a>
</div>

<div class="card-container">
  <div class="card">
    <h3>Kártya címe</h3>
    <p>Kártya tartalma...</p>
    <button class="card-button">Művelet</button>
  </div>
</div>

<!-- Jó: Navigációs sáv megfelelő overflow kezeléssel -->
<nav class="navbar">
  <div class="nav-container">
    <a href="/" class="logo">Logo</a>
    <ul class="nav-menu">
      <li><a href="/termekek">Termékek</a></li>
      <li><a href="/szolgaltatasok">Szolgáltatások</a></li>
      <li><a href="/rolunk">Rólunk</a></li>
    </ul>
  </div>
</nav>

<style>
/* Jó: Konténerek, amelyek nem vágják le a fókusz körvonalakat */
.good-container {
  overflow: visible; /* Megakadályozza a fókusz körvonalak levágását */
  padding: 10px; /* Extra hely a fókusz körvonalaknak */
  border: 1px solid #ddd;
  margin: 10px;
}

.card-container {
  display: flex;
  gap: 20px;
  overflow: visible; /* Fontos: nem rejti el a fókusz jelzőt */
  padding: 10px; /* Extra hely a szélek körül */
}

.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  background: white;
  /* Nincs overflow: hidden, amely elfedné a fókuszt */
}

.card-button {
  background: #28a745;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}

.card-button:focus {
  outline: 3px solid #ffc107;
  outline-offset: 2px;
  /* A kártya nem vágja le ezt a körvonalat */
}

/* Jó: Navigációs sáv fókusz kezelése */
.navbar {
  background: #333;
  padding: 0 20px;
  overflow: visible; /* Fókusz körvonalak láthatók maradnak */
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  overflow: visible; /* Kritikus a fókusz láthatósághoz */
}

.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 20px;
}

.nav-menu a {
  color: white;
  text-decoration: none;
  padding: 15px 10px;
  display: block;
}

.nav-menu a:focus {
  outline: 2px solid #ffc107;
  outline-offset: 2px;
  background: rgba(255, 255, 255, 0.1);
  /* A navbar nem vágja le ezt a fókuszt */
}

.logo:focus {
  outline: 2px solid #ffc107;
  outline-offset: 2px;
  border-radius: 4px;
}
</style>

A konténerek ne vágják le a fókusz jelzőket overflow: hidden vagy hasonló stílusok használatával. Az overflow: visible biztosítja a fókusz láthatóságát.

4. Átfedő elemek megfelelő kezelése

<!-- Jó: Z-index használata a fókusz láthatóságának biztosítására -->
<div class="layout-container">
  <div class="background-element">Háttér elem</div>
  <div class="interactive-element">
    <button class="focus-button">Fókuszálható gomb</button>
    <a href="/link" class="focus-link">Fókuszálható link</a>
  </div>
</div>

<!-- Jó: Modális ablak megfelelő z-index kezeléssel -->
<div class="modal-overlay" style="display: none;" id="modal">
  <div class="modal-content">
    <h2>Modális ablak</h2>
    <p>Ez egy modális ablak tartalma.</p>
    <button class="modal-button">OK</button>
    <button class="modal-close">Bezárás</button>
  </div>
</div>

<!-- Jó: Dropdown menü megfelelő rétegezéssel -->
<div class="dropdown-container">
  <button class="dropdown-trigger">Menü megnyitása</button>
  <ul class="dropdown-menu" style="display: none;">
    <li><a href="/option1">1. opció</a></li>
    <li><a href="/option2">2. opció</a></li>
    <li><a href="/option3">3. opció</a></li>
  </ul>
</div>

<style>
/* Jó: Megfelelő z-index hierarchia */
.layout-container {
  position: relative;
}

.background-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background: #f0f0f0;
  z-index: 1; /* Alacsony z-index */
}

.interactive-element {
  position: relative;
  z-index: 10; /* Magasabb z-index az interaktív elemeknek */
  padding: 20px;
}

.focus-button, .focus-link {
  position: relative;
  z-index: 20; /* Még magasabb z-index a fókuszálható elemeknek */
}

.focus-button:focus, .focus-link:focus {
  outline: 3px solid #ff6b35;
  outline-offset: 2px;
  z-index: 30; /* Legmagasabb z-index a fókusz állapotban */
  /* Biztosítja, hogy a fókusz jelző minden más elem felett van */
}

/* Jó: Modális ablak z-index kezelése */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000; /* Magas z-index a modális overlay-nek */
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: white;
  padding: 30px;
  border-radius: 8px;
  position: relative;
  z-index: 1010; /* Még magasabb a tartalomnak */
  max-width: 500px;
  width: 90%;
}

.modal-button, .modal-close {
  position: relative;
  z-index: 1020; /* Legmagasabb az interaktív elemeknek */
  margin: 10px 5px 0 0;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.modal-button {
  background: #007bff;
  color: white;
}

.modal-close {
  background: #6c757d;
  color: white;
}

.modal-button:focus, .modal-close:focus {
  outline: 3px solid #ffc107;
  outline-offset: 2px;
  z-index: 1030; /* Legnagyobb z-index fókusz esetén */
  /* Garantálja, hogy a fókusz jelző látható minden más elem felett */
}

/* Jó: Dropdown menü z-index */
.dropdown-container {
  position: relative;
  display: inline-block;
}

.dropdown-trigger {
  background: #17a2b8;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  z-index: 50;
}

.dropdown-trigger:focus {
  outline: 3px solid #ffc107;
  outline-offset: 2px;
  z-index: 60; /* Fókusz esetén magasabb */
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  list-style: none;
  padding: 0;
  margin: 5px 0 0 0;
  min-width: 200px;
  z-index: 100; /* Magas z-index a dropdown tartalomnak */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.dropdown-menu li {
  border-bottom: 1px solid #eee;
}

.dropdown-menu li:last-child {
  border-bottom: none;
}

.dropdown-menu a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
  position: relative;
  z-index: 110; /* Magasabb z-index a linkeknek */
}

.dropdown-menu a:focus {
  outline: 2px solid #007bff;
  outline-offset: -2px;
  background: #f8f9fa;
  z-index: 120; /* Legmagasabb fókusz esetén */
  /* Biztosítja, hogy a dropdown linkek fókusza látható */
}
</style>

Használj megfelelő rétegezési kontextust (z-index) annak biztosítására, hogy a fókuszált elemek és jelzőik más tartalom felett legyenek.

Hibás megoldások

Levágott fókusz jelző

<!-- Rossz: Konténer levágja a fókusz körvonalat -->
<div class="bad-container">
  <button>Gomb</button>
  <a href="/link">Link</a>
</div>

<style>
.bad-container {
  overflow: hidden; /* Rossz: a fókusz körvonal levágódik */
  border: 1px solid #ddd;
  padding: 5px; /* Túl kevés hely a fókusz körvonalnak */
}
</style>

Probléma: Az overflow: hidden CSS tulajdonság levágja a fókusz körvonalat, így az nem látható teljesen.

Fókusz jelző elrejtése overlay által

<!-- Rossz: Overlay elfedi a gomb fókusz körvonalát -->
<div class="layout">
  <button class="hidden-focus-button">Gomb</button>
  <div class="overlay"></div>
</div>

<style>
.layout {
  position: relative;
}

.hidden-focus-button {
  position: relative;
  z-index: 1; /* Alacsony z-index */
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 2; /* Magasabb z-index, elfedi a fókuszt */
  pointer-events: none; /* Nem blokkolja a kattintást, de elfedi a fókuszt */
}
</style>

Probléma: Az overlay elfedi a gomb fókusz körvonalát, elrejtve azt a felhasználók elől.

Fókusz körvonal eltávolítása helyettesítés nélkül

<!-- Rossz: Fókusz eltávolítása látható alternatíva nélkül -->
<button class="no-focus-button">Gomb</button>
<a href="/link" class="no-focus-link">Link</a>

<style>
.no-focus-button:focus,
.no-focus-link:focus {
  outline: none; /* Rossz: nincs látható fókusz jelző */
}

/* Vagy még rosszabb: globális eltávolítás */
* {
  outline: none; /* Nagyon rossz: minden fókusz eltűnik */
}

*:focus {
  outline: 0; /* Ugyanilyen káros */
}
</style>

Probléma: A körvonal eltávolítása látható alternatíva nélkül megtöri a billentyűzetes akadálymentességet.

Dinamikus tartalom fókusz problémái

<!-- Rossz: Modális ablak rossz z-index kezeléssel -->
<div class="bad-modal-overlay">
  <div class="bad-modal-content">
    <h2>Rossz modális</h2>
    <button class="bad-modal-button">OK</button>
  </div>
</div>

<!-- Rossz: Tooltip elfedi a fókuszt -->
<div class="tooltip-container">
  <button class="tooltip-trigger">Hover/Focus rám</button>
  <div class="bad-tooltip">Ez egy tooltip</div>
</div>

<style>
/* Rossz modális z-index kezelés */
.bad-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
}

.bad-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  z-index: 999; /* Rossz: alacsonyabb mint az overlay */
}

.bad-modal-button:focus {
  outline: 3px solid #007bff;
  outline-offset: 2px;
  /* A fókusz alatt van az overlay z-index miatt */
}

/* Rossz tooltip, amely elfedi a fókuszt */
.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip-trigger:focus + .bad-tooltip,
.tooltip-trigger:hover + .bad-tooltip {
  display: block;
}

.bad-tooltip {
  display: none;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  z-index: 1000; /* Rossz: elfedi a fókusz jelzőt */
  white-space: nowrap;
}

.tooltip-trigger:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
  /* A tooltip elfedi ezt a fókusz jelzőt */
}
</style>

Probléma: A dinamikus elemek (modális ablakok, tooltip-ek) rossz z-index kezelése miatt elfedik a fókusz jelzőket.

Pozícionálási problémák

<!-- Rossz: Abszolút pozícionálás fókusz problémákkal -->
<div class="positioning-problems">
  <button class="floating-button">Lebegő gomb</button>
  <div class="content-blocker">Blokkoló tartalom</div>
</div>

<!-- Rossz: Sticky elemek fókusz elfedéssel -->
<div class="sticky-header">Sticky fejléc</div>
<div class="main-content">
  <button class="content-button">Tartalom gomb</button>
</div>

<style>
.positioning-problems {
  position: relative;
  height: 200px;
}

.floating-button {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 5;
  padding: 10px 20px;
  background: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
}

.content-blocker {
  position: absolute;
  top: 45px; /* Átfedi a gombot */
  left: 45px;
  width: 150px;
  height: 50px;
  background: rgba(255, 0, 0, 0.3);
  z-index: 10; /* Magasabb mint a gomb */
}

.floating-button:focus {
  outline: 3px solid #ffc107;
  outline-offset: 2px;
  /* Ez a fókusz jelző elfedve lesz a content-blocker által */
}

/* Rossz sticky fejléc */
.sticky-header {
  position: sticky;
  top: 0;
  background: #007bff;
  color: white;
  padding: 15px;
  z-index: 100;
}

.main-content {
  padding: 20px;
  margin-top: -10px; /* Rossz: átfedés a sticky headerrel */
}

.content-button {
  position: relative;
  top: -5px; /* Rossz: a gomb a sticky header alá kerül */
  padding: 10px 20px;
  background: #17a2b8;
  color: white;
  border: none;
  border-radius: 4px;
}

.content-button:focus {
  outline: 3px solid #ffc107;
  outline-offset: 2px;
  /* A fókusz jelző egy része elfedve lesz a sticky header által */
}
</style>

Probléma: A rossz pozícionálás és z-index kezelés miatt, a fókusz jelzők részben, vagy teljesen elfedettek lehetnek más elemek által.

Források

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