2.1.1 - Billentyűzet

Kategória: 2. Működtethető (Operable) Irányelv: 2.1. Billentyűzet által működtethető Szint: A

Röviden a szabványpontról

A WCAG 2.1.1 (Keyboard) előírja, hogy a webes tartalom minden funkcionalitása működtethető legyen billentyűzet interfészen keresztül anélkül, hogy egyedi billentyű leütésekhez specifikus időzítést igényelne. Ez minden interaktív elemre vonatkozik, mint gombok, linkek, űrlap vezérlők és egyedi widgetek.

Mire vonatkozik: Minden felhasználói felület komponensre és funkcionalitásra weboldalakon, beleértve az egyedi vezérlőket, dialógusokat, menüket és médialejátszókat.

Cél: Biztosítani, hogy azok a felhasználók, akik nem tudnak egeret vagy más mutatóeszközt használni, teljes mértékben működtethessék a weboldalt csak billentyűzet használatával. Ez létfontosságú a mozgássérült, látássérült emberek vagy a billentyűzet bemenetét emuláló kisegítő technológiákra támaszkodó felhasználók számára.

Kiket érint

Elsődleges felhasználók: Mozgássérült emberek, akik nem tudnak egeret vagy érintőképernyőt használni és billentyűzetes navigációra vagy alternatív beviteli eszközökre támaszkodnak, mint kapcsoló vezérlők vagy billentyűzet műveletekre leképezett hangvezérlés.

Másodlagos előnyök: A billentyűzetes működtethetőség előnyös a billentyűparancsokat előnyben részesítő haladó felhasználóknak, átmeneti sérüléssel élőknek vagy korlátozott beviteli lehetőségekkel rendelkező eszközöket használóknak is.

Tesztelés

Csak billentyűzetes navigáció: Használd a Tab billentyűt, Shift+Tab, Enter, Space, nyílbillentyűket és más billentyűzetes bemeneteket minden interaktív elem navigálásához és aktiválásához. Ellenőrizd, hogy minden funkcionalitás hozzáférhető és működtethető
Fókusz láthatóság: Győződj meg róla, hogy a billentyűzet fókusz tisztán látható és logikusan mozog az interaktív elemek között kiszámítható sorrendben
Nincs billentyűzet csapda: Erősítsd meg, hogy a billentyűzet fókusz soha nem kerül csapdába az oldal vagy widget bármely részében. A felhasználóknak képesnek kell lenniük a fókusz elmozgatására standard billentyűzetes navigációval
Gyorsbillentyű ütközések: Ellenőrizd, hogy az egyedi gyorsbillentyűk vagy hozzáférési billentyűk nem ütköznek közös képernyőolvasó vagy böngésző gyorsbillentyűkkel
Egyedi vezérlők: Egyedi widgetek esetén (pl. csúszkák, fülek) ellenőrizd, hogy a billentyűzetes vezérlők utánozzák a natív viselkedést és támogatják a standard billentyűzetes interakciókat (Enter, Space, nyílbillentyűk)

Jó gyakorlatok

1. Natív HTML vezérlők használata amikor lehetséges

<!-- Natív elemek automatikusan billentyűzet hozzáférhetőek -->
<form class="native-form">
  <div class="form-group">
    <label for="username">Felhasználónév:</label>
    <input type="text" id="username" name="username" required>
  </div>
  
  <div class="form-group">
    <label for="country">Ország:</label>
    <select id="country" name="country">
      <option value="">Válassz országot</option>
      <option value="hu">Magyarország</option>
      <option value="at">Ausztria</option>
      <option value="de">Németország</option>
    </select>
  </div>
  
  <div class="form-group">
    <fieldset>
      <legend>Előnyben részesített kapcsolat:</legend>
      <label>
        <input type="radio" name="contact" value="email"> E-mail
      </label>
      <label>
        <input type="radio" name="contact" value="phone"> Telefon
      </label>
    </fieldset>
  </div>
  
  <button type="submit">Küldés</button>
  <button type="button">Mégse</button>
</form>

<style>
.native-form {
  max-width: 400px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input[type="text"], select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type="radio"] {
  margin-right: 5px;
}

button {
  padding: 10px 20px;
  margin-right: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover, button:focus {
  background-color: #0056b3;
  outline: 2px solid #80bdff;
  outline-offset: 2px;
}

button[type="button"] {
  background-color: #6c757d;
}

button[type="button"]:hover, button[type="button"]:focus {
  background-color: #545b62;
}
</style>

Magyarázat: A natív elemek mint <button>, <input>, <select> és <a> billentyűzettel hozzáférhetőek és követik a standard billentyűzetes interakciós mintákat.

2. Fókusz programozott kezelése szükség esetén

<button id="open-modal-btn">Modál megnyitása</button>

<div id="modal" class="modal" hidden>
  <div class="modal-content">
    <h2 id="modal-title">Megerősítés szükséges</h2>
    <p>Biztosan folytatni szeretnéd ezt a műveletet?</p>
    <div class="modal-actions">
      <button id="confirm-btn">Igen, folytatás</button>
      <button id="cancel-btn">Mégse</button>
    </div>
  </div>
</div>

<style>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal[hidden] {
  display: none;
}

.modal-content {
  background-color: white;
  padding: 30px;
  border-radius: 8px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.modal-actions {
  margin-top: 20px;
  text-align: right;
}

.modal-actions button {
  margin-left: 10px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#confirm-btn {
  background-color: #dc3545;
  color: white;
}

#cancel-btn {
  background-color: #6c757d;
  color: white;
}

button:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const openBtn = document.getElementById('open-modal-btn');
  const modal = document.getElementById('modal');
  const confirmBtn = document.getElementById('confirm-btn');
  const cancelBtn = document.getElementById('cancel-btn');
  
  let lastFocusedElement;

  function openModal() {
    // Aktuális fókusz mentése
    lastFocusedElement = document.activeElement;
    
    // Modál megjelenítése
    modal.hidden = false;
    
    // Fókusz áthelyezése a modálba (első fókuszálható elemre)
    confirmBtn.focus();
    
    // Fókusz csapdázása a modálban
    trapFocus();
  }

  function closeModal() {
    // Modál elrejtése
    modal.hidden = true;
    
    // Fókusz visszaadása az eredeti elemnek
    if (lastFocusedElement) {
      lastFocusedElement.focus();
    }
  }

  function trapFocus() {
    const focusableElements = modal.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );
    const firstElement = focusableElements[0];
    const lastElement = focusableElements[focusableElements.length - 1];

    modal.addEventListener('keydown', function(e) {
      if (e.key === 'Tab') {
        if (e.shiftKey) {
          // Shift + Tab: hátrafelé
          if (document.activeElement === firstElement) {
            e.preventDefault();
            lastElement.focus();
          }
        } else {
          // Tab: előre
          if (document.activeElement === lastElement) {
            e.preventDefault();
            firstElement.focus();
          }
        }
      } else if (e.key === 'Escape') {
        e.preventDefault();
        closeModal();
      }
    });
  }

  // Esemény figyelők
  openBtn.addEventListener('click', openModal);
  cancelBtn.addEventListener('click', closeModal);
  confirmBtn.addEventListener('click', function() {
    alert('Művelet megerősítve!');
    closeModal();
  });

  // Modál háttérre kattintás
  modal.addEventListener('click', function(e) {
    if (e.target === modal) {
      closeModal();
    }
  });
});
</script>

Magyarázat: Dialógusok vagy modálok megnyitásakor a billentyűzet fókuszt a dialógusba kell mozgatni és ott csapdázni, amíg a dialógus be nem záródik, majd visszaadni az eredeti elemnek.

3. Egyedi vezérlők billentyűzettel való elérhetősége

<div class="custom-controls">
  <h3>Egyedi kapcsoló widget</h3>
  <div role="switch" tabindex="0" aria-checked="false" id="customSwitch" class="custom-switch">
    <span class="switch-label">Értesítések engedélyezése</span>
    <span class="switch-toggle"></span>
  </div>
  
  <h3>Egyedi csúszka widget</h3>
  <div class="slider-container">
    <label for="customSlider">Hangerő: <span id="volume-value">50</span>%</label>
    <div role="slider" 
         tabindex="0" 
         aria-valuemin="0" 
         aria-valuemax="100" 
         aria-valuenow="50" 
         id="customSlider" 
         class="custom-slider">
      <div class="slider-track">
        <div class="slider-thumb"></div>
      </div>
    </div>
  </div>
  
  <h3>Egyedi fül widget</h3>
  <div class="tabs-container">
    <div role="tablist" class="tab-list">
      <button role="tab" aria-selected="true" aria-controls="panel1" id="tab1" class="tab-button">
        Első fül
      </button>
      <button role="tab" aria-selected="false" aria-controls="panel2" id="tab2" class="tab-button">
        Második fül
      </button>
      <button role="tab" aria-selected="false" aria-controls="panel3" id="tab3" class="tab-button">
        Harmadik fül
      </button>
    </div>
    <div role="tabpanel" id="panel1" aria-labelledby="tab1" class="tab-panel">
      <p>Ez az első fül tartalma. Itt találod az alapvető információkat.</p>
    </div>
    <div role="tabpanel" id="panel2" aria-labelledby="tab2" class="tab-panel" hidden>
      <p>Ez a második fül tartalma. Itt részletesebb adatok találhatók.</p>
    </div>
    <div role="tabpanel" id="panel3" aria-labelledby="tab3" class="tab-panel" hidden>
      <p>Ez a harmadik fül tartalma. Itt további beállítások érhetők el.</p>
    </div>
  </div>
</div>

<style>
.custom-controls {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
}

/* Egyedi kapcsoló stílusok */
.custom-switch {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 20px;
}

.custom-switch:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
  border-color: #007bff;
}

.switch-label {
  flex: 1;
  margin-right: 15px;
}

.switch-toggle {
  width: 50px;
  height: 24px;
  background-color: #ccc;
  border-radius: 12px;
  position: relative;
  transition: background-color 0.3s;
}

.switch-toggle::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background-color: white;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: transform 0.3s;
}

.custom-switch[aria-checked="true"] .switch-toggle {
  background-color: #007bff;
}

.custom-switch[aria-checked="true"] .switch-toggle::before {
  transform: translateX(26px);
}

/* Egyedi csúszka stílusok */
.slider-container {
  margin-bottom: 20px;
}

.custom-slider {
  margin: 10px 0;
}

.custom-slider:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

.slider-track {
  width: 100%;
  height: 8px;
  background-color: #ddd;
  border-radius: 4px;
  position: relative;
}

.slider-thumb {
  width: 20px;
  height: 20px;
  background-color: #007bff;
  border-radius: 50%;
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
}

/* Fül widget stílusok */
.tab-list {
  display: flex;
  border-bottom: 2px solid #ddd;
  margin-bottom: 10px;
}

.tab-button {
  background-color: transparent;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-right: 5px;
}

.tab-button:hover, .tab-button:focus {
  background-color: #f8f9fa;
  outline: 2px solid #007bff;
  outline-offset: -2px;
}

.tab-button[aria-selected="true"] {
  border-bottom-color: #007bff;
  font-weight: bold;
}

.tab-panel {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  
  // Egyedi kapcsoló kezelése
  const customSwitch = document.getElementById('customSwitch');
  customSwitch.addEventListener('keydown', function(e) {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      const checked = this.getAttribute('aria-checked') === 'true';
      this.setAttribute('aria-checked', String(!checked));
    }
  });
  
  customSwitch.addEventListener('click', function() {
    const checked = this.getAttribute('aria-checked') === 'true';
    this.setAttribute('aria-checked', String(!checked));
  });

  // Egyedi csúszka kezelése
  const customSlider = document.getElementById('customSlider');
  const volumeValue = document.getElementById('volume-value');
  const sliderThumb = customSlider.querySelector('.slider-thumb');
  
  function updateSlider(value) {
    customSlider.setAttribute('aria-valuenow', value);
    volumeValue.textContent = value;
    sliderThumb.style.left = value + '%';
  }
  
  customSlider.addEventListener('keydown', function(e) {
    let currentValue = parseInt(this.getAttribute('aria-valuenow'));
    const step = 5;
    
    switch(e.key) {
      case 'ArrowRight':
      case 'ArrowUp':
        e.preventDefault();
        updateSlider(Math.min(100, currentValue + step));
        break;
      case 'ArrowLeft':
      case 'ArrowDown':
        e.preventDefault();
        updateSlider(Math.max(0, currentValue - step));
        break;
      case 'Home':
        e.preventDefault();
        updateSlider(0);
        break;
      case 'End':
        e.preventDefault();
        updateSlider(100);
        break;
    }
  });

  // Fül widget kezelése
  const tabButtons = document.querySelectorAll('[role="tab"]');
  const tabPanels = document.querySelectorAll('[role="tabpanel"]');
  
  function showTab(targetTab) {
    // Minden fül deaktiválása
    tabButtons.forEach(tab => {
      tab.setAttribute('aria-selected', 'false');
      tab.setAttribute('tabindex', '-1');
    });
    
    // Minden panel elrejtése
    tabPanels.forEach(panel => {
      panel.hidden = true;
    });
    
    // Kiválasztott fül aktiválása
    targetTab.setAttribute('aria-selected', 'true');
    targetTab.setAttribute('tabindex', '0');
    
    // Megfelelő panel megjelenítése
    const panelId = targetTab.getAttribute('aria-controls');
    document.getElementById(panelId).hidden = false;
  }
  
  tabButtons.forEach((tab, index) => {
    tab.addEventListener('click', function() {
      showTab(this);
    });
    
    tab.addEventListener('keydown', function(e) {
      let targetIndex = index;
      
      switch(e.key) {
        case 'ArrowRight':
          e.preventDefault();
          targetIndex = (index + 1) % tabButtons.length;
          break;
        case 'ArrowLeft':
          e.preventDefault();
          targetIndex = (index - 1 + tabButtons.length) % tabButtons.length;
          break;
        case 'Home':
          e.preventDefault();
          targetIndex = 0;
          break;
        case 'End':
          e.preventDefault();
          targetIndex = tabButtons.length - 1;
          break;
        default:
          return;
      }
      
      tabButtons[targetIndex].focus();
      showTab(tabButtons[targetIndex]);
    });
  });
});
</script>

Magyarázat: Ha egyedi vezérlőt (widgetet) készítesz, gondoskodj róla, hogy az billentyűzettel is használható legyen. Adj hozzá tabindex=”0″ attribútumot, hogy a vezérlő fókuszálható legyen, és kezeld a keydown eseményeket, például az Enter és a szóköz (Space) lenyomását. Emellett figyelj arra is, hogy a vezérlő megfelelően reagáljon a click eseményre is, mivel a képernyőolvasók Enter lenyomásakor jellemzően click eseményt küldenek a böngészőnek. A vezérlők működése feleljen meg a szokásos, elvárt billentyűzetes interakciós mintáknak.

4. Logikus tab sorrend biztosítása

<div class="logical-layout">
  <header class="page-header">
    <h1>Weboldal címe</h1>
    <nav>
      <a href="#main">Ugrás a főtartalomra</a> <!-- Skip link első -->
      <a href="/">Főoldal</a>
      <a href="/termekek">Termékek</a>
      <a href="/kapcsolat">Kapcsolat</a>
    </nav>
  </header>
  
  <main id="main">
    <article>
      <h2>Főcikk címe</h2>
      <p>A főtartalom itt található. A tab sorrend követi a vizuális és logikai olvasási sorrendet.</p>
      
      <form class="article-form">
        <div>
          <label for="name">Név:</label>
          <input type="text" id="name" tabindex="1">
        </div>
        <div>
          <label for="email">E-mail:</label>
          <input type="email" id="email" tabindex="2">
        </div>
        <div>
          <label for="message">Üzenet:</label>
          <textarea id="message" tabindex="3"></textarea>
        </div>
        <button type="submit" tabindex="4">Küldés</button>
      </form>
    </article>
  </main>
  
  <aside class="sidebar">
    <h3>Oldalsáv</h3>
    <ul>
      <li><a href="/hirek">Hírek</a></li>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/archivum">Archívum</a></li>
    </ul>
  </aside>
  
  <footer>
    <p>© 2024 Weboldal. Minden jog fenntartva.</p>
    <nav>
      <a href="/adatkezeles">Adatkezelés</a>
      <a href="/felhasznalasi-feltetelek">Felhasználási feltételek</a>
    </nav>
  </footer>
</div>

<style>
.logical-layout {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-areas: 
    "header header"
    "main sidebar"
    "footer footer";
  gap: 20px;
  padding: 20px;
}

.page-header {
  grid-area: header;
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
}

.page-header nav a {
  margin-right: 15px;
  text-decoration: none;
  color: #007bff;
  padding: 5px 10px;
  border-radius: 4px;
}

.page-header nav a:hover,
.page-header nav a:focus {
  background-color: #e9ecef;
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

main {
  grid-area: main;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.sidebar {
  grid-area: sidebar;
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
}

footer {
  grid-area: footer;
  background-color: #343a40;
  color: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

footer a {
  color: #adb5bd;
  margin: 0 10px;
}

footer a:hover,
footer a:focus {
  color: white;
  outline: 2px solid #80bdff;
  outline-offset: 2px;
}

.article-form div {
  margin-bottom: 15px;
}

.article-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.article-form input,
.article-form textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.article-form input:focus,
.article-form textarea:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
  border-color: #007bff;
}

.article-form button {
  background-color: #28a745;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.article-form button:hover,
.article-form button:focus {
  background-color: #218838;
  outline: 2px solid #80e5a3;
  outline-offset: 2px;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar li {
  margin-bottom: 10px;
}

.sidebar a {
  color: #007bff;
  text-decoration: none;
  padding: 5px 10px;
  display: block;
  border-radius: 4px;
}

.sidebar a:hover,
.sidebar a:focus {
  background-color: #e9ecef;
  outline: 2px solid #007bff;
  outline-offset: -2px;
}

/* Skip link stílus */
.page-header nav a[href="#main"] {
  position: absolute;
  left: -9999px;
  top: auto;
  background-color: #000;
  color: white;
  padding: 8px 16px;
  z-index: 999;
}

.page-header nav a[href="#main"]:focus {
  position: static;
  left: auto;
}

@media (max-width: 768px) {
  .logical-layout {
    grid-template-columns: 1fr;
    grid-template-areas: 
      "header"
      "main"
      "sidebar"
      "footer";
  }
}
</style>

Magyarázat: A tab sorrend kövesse a vizuális és logikai olvasási sorrendet a zűrzavar elkerülése érdekében. A tabindex értékeinek megadása nem ajánlott, a nullánál nagyobb értékek csak összezavarják a böngészőket.

Rossz gyakorlatok

Nem fókuszálható interaktív elemek

<!-- ROSSZ: Nincs billentyűzetes hozzáférés -->
<div onclick="doAction()" class="fake-button">Kattints rám</div>
<span onclick="submitForm()" class="fake-submit">Küldés</span>

Probléma: A <div> vagy <span> elemek gombokként vagy linkekként való használata tabindex=”0″ és megfelelő ARIA szerepek nélkül billentyűzettel elérhetetlenné teszi őket.

Hibás tabindex értékek

<!-- ROSSZ: Össze-vissza tabindex értékek -->
<form>
  <label for="name">Név:</label>
  <input type="text" id="name" tabindex="3">
  
  <label for="email">E-mail:</label>
  <input type="email" id="email" tabindex="1">
  
  <label for="phone">Telefon:</label>
  <input type="tel" id="phone" tabindex="5">
  
  <button type="submit" tabindex="2">Küldés</button>
  <button type="reset" tabindex="4">Törlés</button>
</form>

Probléma: A pozitív tabindex értékek összezavarják a természetes tab sorrendet. A fókusz nem a logikai/vizuális sorrendben mozog (e-mail → küldés → név → törlés → telefon), ami frusztrációt okoz a felhasználóknak.

Csak egér vagy csak billentyűzet eseményekre támaszkodás

<!-- ROSSZ PÉLDA 1: Csak egér események -->
<button onmouseover="showTooltip()" onmouseout="hideTooltip()">
  Csak egérrel működik
</button>

<!-- ROSSZ PÉLDA 2: Csak billentyűzet események -->
<button id="keyboard-only-btn">Csak billentyűzettel működik</button>

<script>
// ROSSZ: Csak egér eseménykezelők billentyűzetes alternatívák nélkül
function initBadMouseOnly() {
  const element = document.querySelector('.bad-element');
  
  // Csak onmouseover és onclick, nincs billentyűzetes támogatás
  element.onmouseover = function() { /* működés */ };
  element.onclick = function() { /* működés */ };
  // Hiányzik: onkeydown, onfocus, onblur
}

// ROSSZ: Csak billentyűzet események, click nélkül
document.getElementById('keyboard-only-btn').addEventListener('keydown', function(e) {
  if (e.key === 'Enter') {
    // Csak Enter-re reagál, de click-re nem
    doAction();
  }
});
// Probléma: A képernyőolvasók gyakran "click" eseményt küldnek Enter billentyűre
</script>

Probléma: Csak egér vagy csak billentyűzet eseménykezelők használata kizárja egyes felhasználókat. A képernyőolvasók gyakran „click” eseményt generálnak Enter billentyű lenyomásakor, így ha csak keydown eseményt kezelsz, a képernyőolvasó felhasználók nem tudják aktiválni az elemet.

Következetlen billentyűzetes viselkedés

<div class="bad-tabs">
  <button onclick="showTab(1)">Fül 1</button> <!-- Nem reagál Enter/Space-re -->
  <button onclick="showTab(2)">Fül 2</button> <!-- Nem reagál nyílbillentyűkre -->
</div>

<div class="bad-slider">
  <!-- Csúszka, amely nem reagál nyílbillentyűkre vagy Home/End billentyűkre -->
  <div tabindex="0" onclick="moveSlider(event)">Rossz csúszka</div>
</div>

Probléma: Az egyedi vezérlők, amelyek nem reagálnak standard billentyűkre (Enter, Space, nyilak) zavarják a felhasználókat, akik megszokott billentyűzetes mintákat várnak.

Hiányzó vagy helytelen fókusz kezelés

<style>
/* ROSSZ: Fókusz jelző eltávolítása */
button:focus, a:focus, input:focus {
  outline: none; /* Fókusz láthatatlanná tétele */
}

/* ROSSZ: Negatív tabindex minden elemen */
* {
  tabindex: -1; /* Minden elem kivétele a tab sorrendből */
}
</style>

<script>
// ROSSZ: Fókusz programozott irányítása rossz helyre
function badFocusManagement() {
  // Dialog megnyitása után fókusz nem kerül a dialogba
  document.getElementById('dialog').style.display = 'block';
  // document.getElementById('first-input').focus(); <-- Ez hiányzik
  
  // Dialog bezárása után fókusz nem tér vissza
  document.getElementById('dialog').style.display = 'none';
  // returnFocusToTrigger(); <-- Ez is hiányzik
}
</script>

Probléma: A fókusz jelzők eltávolítása vagy helytelen fókusz kezelés megnehezíti vagy lehetetlenné teszi a billentyűzetes navigációt.

Források

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