2.5.3 - Címkék szövegezése és magyarázata

<!-- Jó: Explicit label elem kapcsolva az input-tal -->
<form class="regisztracios-form">
  <div class="form-group">
    <label for="email-cim">E-mail cím</label>
    <input type="email" id="email-cim" name="email" required>
    <!-- Az elérhető név "E-mail cím" - megegyezik a látható címkével -->
  </div>
  
  <div class="form-group">
    <label for="jelszo">Jelszó</label>
    <input type="password" id="jelszo" name="password" required>
    <!-- Az elérhető név "Jelszó" - megegyezik a látható címkével -->
  </div>
  
  <div class="form-group">
    <label for="jelszo-megerosites">Jelszó megerősítése</label>
    <input type="password" id="jelszo-megerosites" name="password_confirm" required>
    <!-- Az elérhető név "Jelszó megerősítése" - megegyezik a látható címkével -->
  </div>
  
  <div class="form-group">
    <label for="telefon">Telefonszám (opcionális)</label>
    <input type="tel" id="telefon" name="phone">
    <!-- Az elérhető név "Telefonszám (opcionális)" - teljes címke -->
  </div>
  
  <div class="form-group checkbox-group">
    <label for="feltetelek">
      <input type="checkbox" id="feltetelek" name="terms" required>
      Elfogadom az <a href="/aszf">Általános Szerződési Feltételeket</a>
    </label>
    <!-- Az elérhető név tartalmazza a teljes szöveget a linkkel együtt -->
  </div>
  
  <button type="submit">Regisztráció</button>
  <!-- Az elérhető név "Regisztráció" - megegyezik a gomb szövegével -->
</form>

<!-- Jó: Keresési form helyes címkézéssel -->
<form class="kereses-form" role="search">
  <div class="search-group">
    <label for="kereses-mezo">Keresés a weboldalon</label>
    <input type="search" 
           id="kereses-mezo" 
           name="q" 
           placeholder="Írja be a keresési kifejezést...">
    <!-- Az elérhető név "Keresés a weboldalon" - a label szövege -->
  </div>
  
  <button type="submit">Keresés indítása</button>
  <!-- Az elérhető név "Keresés indítása" - gomb szöveg -->
</form>

<style>
.regisztracios-form, .kereses-form {
  max-width: 400px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f9f9f9;
}

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

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="tel"],
.form-group input[type="search"] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

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

.checkbox-group label {
  display: flex;
  align-items: flex-start;
  font-weight: normal;
  cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
  margin-right: 8px;
  margin-top: 2px;
}

button[type="submit"] {
  background: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  width: 100%;
}

button[type="submit"]:hover {
  background: #0056b3;
}

button[type="submit"]:focus {
  outline: 2px solid #ffc107;
  outline-offset: 2px;
}

.search-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
</style>

<!-- Jó: aria-labelledby hivatkozás látható szövegre -->
<div class="felhasznalo-profil">
  <h2 id="profil-cim">Felhasználói profil szerkesztése</h2>
  
  <div class="profil-form">
    <span id="nev-cimke">Teljes név</span>
    <input type="text" 
           aria-labelledby="nev-cimke" 
           value="Kiss János"
           class="profil-input">
    <!-- Az elérhető név "Teljes név" - megegyezik a span szövegével -->
    
    <span id="eletkor-cimke">Életkor</span>
    <input type="number" 
           aria-labelledby="eletkor-cimke" 
           value="25"
           min="18" max="100"
           class="profil-input">
    <!-- Az elérhető név "Életkor" - megegyezik a span szövegével -->
  </div>
  
  <div class="action-buttons">
    <span id="mentes-szoveg">Változtatások mentése</span>
    <button aria-labelledby="mentes-szoveg" class="primary-button">
      💾 Változtatások mentése
    </button>
    <!-- Az elérhető név tartalmazza a "Változtatások mentése" szöveget -->
  </div>
</div>

<!-- Jó: Komplex navigáció aria-labelledby-jal -->
<nav class="oldal-navigacio">
  <h2 id="nav-cim">Fő navigáció</h2>
  
  <ul aria-labelledby="nav-cim">
    <li>
      <span id="fooldal-szoveg">Főoldal</span>
      <a href="/" aria-labelledby="fooldal-szoveg">🏠 Főoldal</a>
    </li>
    
    <li>
      <span id="termekek-szoveg">Termékek böngészése</span>
      <a href="/termekek" aria-labelledby="termekek-szoveg">🛍️ Termékek böngészése</a>
    </li>
    
    <li>
      <span id="kapcsolat-szoveg">Kapcsolatfelvétel</span>
      <a href="/kapcsolat" aria-labelledby="kapcsolat-szoveg">📞 Kapcsolatfelvétel</a>
    </li>
  </ul>
</nav>

<!-- Jó: Adattábla aria-labelledby címkékkel -->
<div class="termek-tablazat">
  <h3 id="tablazat-cim">Termékek listája</h3>
  
  <table aria-labelledby="tablazat-cim">
    <thead>
      <tr>
        <th id="termek-nev">Termék neve</th>
        <th id="termek-ar">Ár (Ft)</th>
        <th id="termek-keszlet">Készlet</th>
        <th id="termek-muvelet">Műveletek</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Laptop Acer Aspire</td>
        <td>299.990</td>
        <td>5 db</td>
        <td>
          <span id="szerkeszt-laptop">Laptop Acer Aspire szerkesztése</span>
          <button aria-labelledby="szerkeszt-laptop" class="edit-btn">
            ✏️ Szerkesztés
          </button>
          
          <span id="torles-laptop">Laptop Acer Aspire törlése</span>
          <button aria-labelledby="torles-laptop" class="delete-btn">
            🗑️ Törlés
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<style>
.felhasznalo-profil {
  max-width: 500px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  background: white;
}

.profil-form {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 10px 15px;
  align-items: center;
  margin: 20px 0;
}

.profil-form span {
  font-weight: bold;
  color: #495057;
}

.profil-input {
  padding: 8px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 14px;
}

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

.action-buttons {
  margin-top: 20px;
  text-align: center;
}

.action-buttons span {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
  color: #495057;
}

.primary-button {
  background: #28a745;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.primary-button:hover {
  background: #218838;
}

.primary-button:focus {
  outline: 2px solid #ffc107;
  outline-offset: 2px;
}

.oldal-navigacio {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin: 20px auto;
  max-width: 600px;
}

.oldal-navigacio ul {
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;
}

.oldal-navigacio li {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.oldal-navigacio span {
  font-weight: bold;
  color: #495057;
  min-width: 150px;
}

.oldal-navigacio a {
  text-decoration: none;
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border-radius: 4px;
  font-size: 14px;
}

.oldal-navigacio a:hover {
  background: #0056b3;
}

.oldal-navigacio a:focus {
  outline: 2px solid #ffc107;
  outline-offset: 2px;
}

.termek-tablazat {
  margin: 20px auto;
  max-width: 800px;
}

.termek-tablazat table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #dee2e6;
}

.termek-tablazat th,
.termek-tablazat td {
  padding: 12px;
  text-align: left;
  border: 1px solid #dee2e6;
}

.termek-tablazat th {
  background: #e9ecef;
  font-weight: bold;
}

.edit-btn, .delete-btn {
  margin: 0 5px;
  padding: 5px 10px;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}

.edit-btn {
  background: #17a2b8;
  color: white;
}

.delete-btn {
  background: #dc3545;
  color: white;
}

.edit-btn:hover {
  background: #138496;
}

.delete-btn:hover {
  background: #c82333;
}

.edit-btn:focus, .delete-btn:focus {
  outline: 2px solid #ffc107;
  outline-offset: 2px;
}

/* Elrejtjük a span elemeket vizuálisan, de elérhetők maradnak */
.termek-tablazat span,
.action-buttons span:first-child,
.oldal-navigacio span,
.profil-form span {
  /* Ezek láthatók maradnak ebben a példában a bemutató kedvéért */
}
</style>

<!-- Jó: Aria-label tartalmazza a látható szöveget -->
<div class="interface-gombok">
  <h3>Felhasználói felület vezérlők</h3>
  
  <!-- Bezárás gomb - X látható, de teljes leírás az aria-label-ben -->
  <div class="modal-header">
    <h4>Ablak címe</h4>
    <button class="close-button" 
            aria-label="Ablak bezárása - X">
      X
    </button>
    <!-- Az elérhető név "Ablak bezárása - X" tartalmazza a látható "X" szöveget -->
  </div>
  
  <!-- Ikon gombok leíró aria-label-lel -->
  <div class="icon-buttons">
    <button class="icon-btn" aria-label="Mentés - 💾">
      💾
    </button>
    <!-- Az elérhető név "Mentés - 💾" tartalmazza a látható emoji-t -->
    
    <button class="icon-btn" aria-label="Nyomtatás - 🖨️">
      🖨️
    </button>
    <!-- Az elérhető név "Nyomtatás - 🖨️" tartalmazza a látható emoji-t -->
    
    <button class="icon-btn" aria-label="Beállítások - ⚙️">
      ⚙️
    </button>
    <!-- Az elérhető név "Beállítások - ⚙️" tartalmazza a látható emoji-t -->
  </div>
  
  <!-- Szöveges gombok kiegészítő információval -->
  <div class="text-buttons">
    <button aria-label="Mentés (Ctrl+S)">Mentés</button>
    <!-- Az elérhető név "Mentés (Ctrl+S)" tartalmazza a látható "Mentés" szót -->
    
    <button aria-label="Törlés - visszavonhatatlan művelet">Törlés</button>
    <!-- Az elérhető név "Törlés - visszavonhatatlan művelet" tartalmazza a látható "Törlés" szót -->
    
    <button aria-label="Küldés - form adatok elküldése">Küldés</button>
    <!-- Az elérhető név "Küldés - form adatok elküldése" tartalmazza a látható "Küldés" szót -->
  </div>
</div>

<!-- Jó: Linkek aria-label-lel kiegészítve -->
<div class="linkek-kiegeszitett">
  <h3>Kiegészített linkek</h3>
  
  <ul class="dokumentum-lista">
    <li>
      <a href="/eves-jelentes-2023.pdf" 
         aria-label="Éves jelentés 2023 - PDF letöltése">
        Éves jelentés 2023
      </a>
      <!-- Az elérhető név tartalmazza a "Éves jelentés 2023" látható szöveget -->
    </li>
    
    <li>
      <a href="/uzleti-terv.docx" 
         aria-label="Üzleti terv - Word dokumentum letöltése">
        Üzleti terv
      </a>
      <!-- Az elérhető név tartalmazza az "Üzleti terv" látható szöveget -->
    </li>
    
    <li>
      <a href="mailto:info@ceg.hu" 
         aria-label="E-mail küldése - info@ceg.hu">
        info@ceg.hu
      </a>
      <!-- Az elérhető név tartalmazza a látható e-mail címet -->
    </li>
  </ul>
</div>

<!-- Jó: Kereső mezők kiegészítő információval -->
<div class="kereses-mezo-bovitett">
  <h3>Speciális keresőmezők</h3>
  
  <div class="search-container">
    <label for="termek-kereses">Termék keresése</label>
    <input type="search" 
           id="termek-kereses"
           name="product_search"
           aria-label="Termék keresése - írj be termék nevet vagy kódot"
           placeholder="pl: laptop, egér, billentyűzet...">
    <!-- Az elérhető név tartalmazza a "Termék keresése" látható címkét -->
    <button type="submit" aria-label="Keresés indítása - enter vagy klikk">
      Keresés
    </button>
    <!-- Az elérhető név tartalmazza a "Keresés" látható szöveget -->
  </div>
  
  <div class="filter-container">
    <label for="kategoria-filter">Kategória szűrő</label>
    <select id="kategoria-filter" 
            aria-label="Kategória szűrő - válassz kategóriát a szűréshez">
      <option value="">Minden kategória</option>
      <option value="laptop">Laptopok</option>
      <option value="eger">Egerek</option>
      <option value="billentyuzet">Billentyűzetek</option>
    </select>
    <!-- Az elérhető név tartalmazza a "Kategória szűrő" látható címkét -->
  </div>
</div>

<style>
.interface-gombok, .linkek-kiegeszitett, .kereses-mezo-bovitett {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  background: #f8f9fa;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  margin-bottom: 20px;
}

.modal-header h4 {
  margin: 0;
  color: #495057;
}

.close-button {
  background: #dc3545;
  color: white;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-button:hover {
  background: #c82333;
}

.close-button:focus {
  outline: 2px solid #ffc107;
  outline-offset: 2px;
}

.icon-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.icon-btn {
  background: #007bff;
  color: white;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 8px;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-btn:hover {
  background: #0056b3;
}

.icon-btn:focus {
  outline: 2px solid #ffc107;
  outline-offset: 2px;
}

.text-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.text-buttons button {
  background: #6c757d;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

.text-buttons button:hover {
  background: #5a6268;
}

.text-buttons button:focus {
  outline: 2px solid #ffc107;
  outline-offset: 2px;
}

.dokumentum-lista {
  list-style: none;
  padding: 0;
  margin: 10px 0;
}

.dokumentum-lista li {
  margin-bottom: 10px;
}

.dokumentum-lista a {
  display: inline-block;
  padding: 10px 15px;
  background: #17a2b8;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.dokumentum-lista a:hover {
  background: #138496;
}

.dokumentum-lista a:focus {
  outline: 2px solid #ffc107;
  outline-offset: 2px;
}

.search-container, .filter-container {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.search-container label, .filter-container label {
  font-weight: bold;
  color: #495057;
}

.search-container input, .filter-container select {
  padding: 8px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 14px;
}

.search-container input:focus, .filter-container select:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
  border-color: #007bff;
}

.search-container button {
  background: #28a745;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 10px;
}

.search-container button:hover {
  background: #218838;
}

.search-container button:focus {
  outline: 2px solid #ffc107;
  outline-offset: 2px;
}
</style>

<!-- Jó: Konzisztens látható és elérhető nevek -->
<div class="konzisztens-cimkek">
  <h3>Konzisztens címkézés példái</h3>
  
  <!-- Egyszerű gombok - teljes egyezés -->
  <div class="egyszerű-gombok">
    <button aria-label="Mentés">Mentés</button>
    <!-- Az elérhető név "Mentés" pontosan megegyezik a gomb szövegével -->
    
    <button aria-label="Mégse">Mégse</button>
    <!-- Az elérhető név "Mégse" pontosan megegyezik a gomb szövegével -->
    
    <button aria-label="Törlés">Törlés</button>
    <!-- Az elérhető név "Törlés" pontosan megegyezik a gomb szövegével -->
  </div>
  
  <!-- Form vezérlők - label egyezések -->
  <form class="form-konzisztens">
    <div class="field-group">
      <label for="felhasznalo-nev">Felhasználónév</label>
      <input type="text" 
             id="felhasznalo-nev" 
             name="username"
             aria-label="Felhasználónév">
      <!-- Elérhető név és label szöveg tökéletesen egyezik -->
    </div>
    
    <div class="field-group">
      <label for="email-address">E-mail cím</label>
      <input type="email" 
             id="email-address" 
             name="email"
             aria-label="E-mail cím">
      <!-- Elérhető név és label szöveg tökéletesen egyezik -->
    </div>
    
    <div class="field-group">
      <label for="birth-date">Születési dátum</label>
      <input type="date" 
             id="birth-date" 
             name="birthdate"
             aria-label="Születési dátum">
      <!-- Elérhető név és label szöveg tökéletesen egyezik -->
    </div>
  </form>
  
  <!-- Linkek - konzisztens szövegek -->
  <nav class="konzisztens-nav">
    <ul>
      <li>
        <a href="/kezdolap" aria-label="Kezdőlap">Kezdőlap</a>
        <!-- Elérhető név és link szöveg egyezik -->
      </li>
      <li>
        <a href="/termekek" aria-label="Termékek">Termékek</a>
        <!-- Elérhető név és link szöveg egyezik -->
      </li>
      <li>
        <a href="/szolgaltatasok" aria-label="Szolgáltatások">Szolgáltatások</a>
        <!-- Elérhető név és link szöveg egyezik -->
      </li>
      <li>
        <a href="/kapcsolat" aria-label="Kapcsolat">Kapcsolat</a>
        <!-- Elérhető név és link szöveg egyezik -->
      </li>
    </ul>
  </nav>
  
  <!-- Választható elemek - radio és checkbox -->
  <fieldset class="valaszthato-elemek">
    <legend>Előnyben részesített kapcsolatfelvételi mód</legend>
    
    <div class="radio-group">
      <label for="email-contact">
        <input type="radio" 
               id="email-contact" 
               name="contact_method" 
               value="email"
               aria-label="E-mail kapcsolat">
        E-mail kapcsolat
      </label>
      <!-- Elérhető név és label szöveg egyezik -->
    </div>
    
    <div class="radio-group">
      <label for="phone-contact">
        <input type="radio" 
               id="phone-contact" 
               name="contact_method" 
               value="phone"
               aria-label="Telefonos kapcsolat">
        Telefonos kapcsolat
      </label>
      <!-- Elérhető név és label szöveg egyezik -->
    </div>
    
    <div class="checkbox-group">
      <label for="newsletter-subscribe">
        <input type="checkbox" 
               id="newsletter-subscribe" 
               name="newsletter"
               aria-label="Hírlevél feliratkozás">
        Hírlevél feliratkozás
      </label>
      <!-- Elérhető név és label szöveg egyezik -->
    </div>
  </fieldset>
</div>

<style>
.konzisztens-cimkek {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #28a745;
  border-radius: 8px;
  background: #f8fff9;
}

.egyszerű-gombok {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.egyszerű-gombok button {
  background: #28a745;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  font-weight: bold;
}

.egyszerű-gombok button:hover {
  background: #218838;
}

.egyszerű-gombok button:focus {
  outline: 2px solid #ffc107;
  outline-offset: 2px;
}

.form-konzisztens {
  margin-bottom: 30px;
}

.field-group {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.field-group label {
  font-weight: bold;
  color: #495057;
}

.field-group input {
  padding: 8px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 14px;
}

.field-group input:focus {
  outline: 2px solid #28a745;
  outline-offset: 2px;
  border-color: #28a745;
}

.konzisztens-nav ul {
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.konzisztens-nav a {
  text-decoration: none;
  padding: 10px 15px;
  background: #17a2b8;
  color: white;
  border-radius: 4px;
  font-weight: bold;
  transition: background 0.2s ease;
}

.konzisztens-nav a:hover {
  background: #138496;
}

.konzisztens-nav a:focus {
  outline: 2px solid #ffc107;
  outline-offset: 2px;
}

.valaszthato-elemek {
  border: 1px solid #ced4da;
  border-radius: 4px;
  padding: 15px;
  background: white;
}

.valaszthato-elemek legend {
  font-weight: bold;
  color: #495057;
  padding: 0 10px;
}

.radio-group, .checkbox-group {
  margin-bottom: 10px;
}

.radio-group label, .checkbox-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: normal;
}

.radio-group input, .checkbox-group input {
  margin: 0;
}

.radio-group input:focus, .checkbox-group input:focus {
  outline: 2px solid #28a745;
  outline-offset: 2px;
}
</style>

<!-- Rossz: Eltérés a látható és elérhető név között -->
<div class="rossz-cimkek">
  <h3>Hibás címkézési példák</h3>
  
  <!-- Rossz: Látható "X" de elérhető név "Bezárás" -->
  <button aria-label="Bezárás">X</button>
  <!-- Hiba: A látható "X" szöveg nincs benne az elérhető névben -->
  
  <!-- Rossz: Látható "Küldés" de elérhető név "Elküld" -->
  <button aria-label="Elküld">Küldés</button>
  <!-- Hiba: Az elérhető név nem tartalmazza a látható "Küldés" szót -->
  
  <!-- Rossz: Látható "Regisztráció" de elérhető név "Feliratkozás" -->
  <button aria-label="Feliratkozás">Regisztráció</button>
  <!-- Hiba: Teljesen más szöveg az elérhető névben -->
  
  <!-- Rossz: Látható link "Termékek" de elérhető név "Áruk" -->
  <a href="/termekek" aria-label="Áruk böngészése">Termékek</a>
  <!-- Hiba: A "Termékek" szó nincs az elérhető névben -->
</div>

<!-- Rossz: Csak placeholder, nincs proper label -->
<div class="rossz-placeholder">
  <h3>Hibás placeholder használat</h3>
  
  <!-- Rossz: Csak placeholder szöveg -->
  <input type="text" placeholder="Felhasználónév" name="username">
  <!-- Hiba: A placeholder látható, de nem elérhető név -->
  
  <!-- Rossz: Placeholder mint egyetlen címke -->
  <input type="email" placeholder="E-mail cím megadása" name="email">
  <!-- Hiba: Nincs megfelelő elérhető név -->
  
  <!-- Rossz: Placeholder és rossz aria-label kombináció -->
  <input type="password" 
         placeholder="Jelszó" 
         name="password"
         aria-label="Titkos kód">
  <!-- Hiba: A látható "Jelszó" nincs az elérhető névben ("Titkos kód") -->
  
  <!-- Rossz: Üres aria-label placeholder mellett -->
  <input type="tel" 
         placeholder="Telefonszám" 
         name="phone"
         aria-label="">
  <!-- Hiba: Üres elérhető név, csak placeholder -->
</div>

<!-- Rossz: Kép/ikon gombok megfelelő elérhető név nélkül -->
<div class="rossz-ikonok">
  <h3>Hibás ikon/kép gombok</h3>
  
  <!-- Rossz: Üres alt attribútum -->
  <button>
    <img src="save-icon.png" alt="">
  </button>
  <!-- Hiba: Nincs elérhető név, mert az alt üres -->
  
  <!-- Rossz: Hiányzó alt attribútum -->
  <button>
    <img src="delete-icon.png">
  </button>
  <!-- Hiba: Nincs alt attribútum, nincs elérhető név -->
  
  <!-- Rossz: Icon font elérhető név nélkül -->
  <button>
    <i class="fas fa-trash"></i>
  </button>
  <!-- Hiba: Az ikon látható, de nincs elérhető név -->
  
  <!-- Rossz: SVG ikon title/desc nélkül -->
  <button>
    <svg width="24" height="24" viewBox="0 0 24 24">
      <path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"></path>
    </svg>
  </button>
  <!-- Hiba: SVG ikon látható (hamburger menü), de nincs elérhető név -->
  
  <!-- Rossz: Emoji gomb aria-label nélkül -->
  <button>❤️</button>
  <!-- Hiba: Az emoji látható, de az elérhető név lehet hogy nem érthető -->
  
  <!-- Rossz: Kép link alt nélkül -->
  <a href="/kezdolap">
    <img src="logo.png">
  </a>
  <!-- Hiba: Logo látható, de nincs elérhető név -->
</div>

<!-- Rossz: ARIA címke nem egyezik a látható szöveggel -->
<div class="rossz-aria">
  <h3>Hibás ARIA címkézés</h3>
  
  <!-- Rossz: Label és aria-label ütközés -->
  <label for="kereses-input">Keresés</label>
  <input id="kereses-input" aria-label="Találás">
  <!-- Hiba: Látható "Keresés", elérhető "Találás" -->
  
  <!-- Rossz: Gomb szöveg és aria-label eltérés -->
  <button aria-label="Eltávolítás">Törlés</button>
  <!-- Hiba: Látható "Törlés", elérhető "Eltávolítás" -->
  
  <!-- Rossz: aria-labelledby rossz elemre mutat -->
  <span id="wrong-label">Mentés</span>
  <button aria-labelledby="wrong-label">Küldés</button>
  <!-- Hiba: Gomb "Küldés", de elérhető név "Mentés" -->
  
  <!-- Rossz: aria-label felülír látható szöveget -->
  <a href="/kapcsolat" aria-label="Elérhetőségek">Kapcsolat</a>
  <!-- Hiba: Látható "Kapcsolat", elérhető "Elérhetőségek" -->
  
  <!-- Rossz: Komplex aria-labelledby rossz hivatkozásokkal -->
  <span id="wrong-action">Szerkesztés</span>
  <span id="user-name">Kiss János</span>
  <button aria-labelledby="wrong-action user-name">Törlés</button>
  <!-- Hiba: Gomb "Törlés", de elérhető név "Szerkesztés Kiss János" -->
  
  <!-- Rossz: title attribútum és látható szöveg eltérése -->
  <button title="Bezárás">X</button>
  <!-- Hiba: A title nem elérhető név, és nem tartalmazza az "X"-et -->
</div>

<!-- Rossz: Zavaró többszörös címkézés -->
<div class="rossz-tobbszoros">
  <h3>Hibás többszörös címkézés</h3>
  
  <!-- Rossz: Dupla label különböző szövegekkel -->
  <label for="name-field">Név</label>
  <input id="name-field" aria-label="Teljes név megadása">
  <label for="name-field">Teljes név</label>
  <!-- Hiba: Két label, eltérő szövegek, zavaró -->
  
  <!-- Rossz: aria-label és aria-labelledby együtt ütközve -->
  <span id="confusing-label">E-mail</span>
  <input aria-label="Elektronikus levelezési cím" 
         aria-labelledby="confusing-label">
  <!-- Hiba: Két különböző ARIA címkézés egyszerre -->
  
  <!-- Rossz: Label + aria-label + placeholder mind más -->
  <label for="multi-confuse">Telefonszám</label>
  <input id="multi-confuse" 
         aria-label="Mobil szám" 
         placeholder="Hívószám">
  <!-- Hiba: Három különböző "címke" -->
  
  <!-- Rossz: Gomb szöveg + title + aria-label mind eltér -->
  <button title="Dokumentum letöltése" 
          aria-label="Fájl mentése">
    Letöltés
  </button>
  <!-- Hiba: "Letöltés", "Dokumentum letöltése", "Fájl mentése" -->
  
  <!-- Rossz: aria-describedby-t címkeként használni -->
  <span id="not-label">Jelszó megadása</span>
  <input type="password" aria-describedby="not-label">
  <!-- Hiba: aria-describedby nem címke, és nincs proper label -->
</div>

<style>
.rossz-cimkek, .rossz-placeholder, .rossz-ikonok, .rossz-aria, .rossz-tobbszoros {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 2px solid #dc3545;
  border-radius: 8px;
  background: #f8d7da;
}

.rossz-cimkek h3, .rossz-placeholder h3, .rossz-ikonok h3, .rossz-aria h3, .rossz-tobbszoros h3 {
  color: #721c24;
  margin-top: 0;
}

.rossz-cimkek button, .rossz-aria button, .rossz-tobbszoros button {
  background: #dc3545;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  margin: 5px;
  cursor: pointer;
}

.rossz-placeholder input, .rossz-aria input, .rossz-tobbszoros input {
  display: block;
  width: 100%;
  padding: 8px 12px;
  margin: 8px 0;
  border: 2px solid #dc3545;
  border-radius: 4px;
  box-sizing: border-box;
}

.rossz-ikonok button {
  background: #6c757d;
  color: white;
  border: none;
  padding: 10px;
  margin: 5px;
  border-radius: 4px;
  cursor: pointer;
}

.rossz-ikonok img {
  width: 20px;
  height: 20px;
}

.rossz-aria a, .rossz-cimkek a {
  color: #721c24;
  text-decoration: underline;
  margin: 5px;
  display: inline-block;
}

.rossz-tobbszoros label {
  display: block;
  font-weight: bold;
  color: #721c24;
  margin: 5px 0;
}
</style>