2.5.8 - Interaktív mutató célpontok legkisebb mérete

Kategória: 2. Működtethető (Operable) Irányelv: 2.5. Beviteli módok Szint: AA

Röviden a szabványpontról

A WCAG 2.2 szabványpont 2.5.8 előírja, hogy az interaktív mutató célpontok—mint a gombok, linkek és űrlap vezérlők—legalább 24×24 CSS pixel méretűek legyenek, kivéve ha specifikus kivételek vonatkoznak rájuk. Ez a szabály minden olyan felhasználói felület komponensre vonatkozik, amely mutató bevitellel aktiválható (egér, érintés, stylus stb.). A cél biztosítani, hogy az interaktív elemek elég nagyok legyenek a könnyű érintéshez, vagy kattintáshoz, csökkentve a hibákat és a frusztrációt a korlátozott motoros kontrollal rendelkező felhasználók esetén, vagy a nagy pontosságot igénylő feladatok elvégzésénél.

Mire vonatkozik: Minden interaktív felhasználói felület komponensére, amely mutató bevitellel aktiválható: gombok, linkek, űrlap vezérlők, egyéni komponensek.

Cél: A méretkövetelmény segít:

Megakadályozni a közeli vezérlők véletlen aktiválását
Támogatni az érintőbevitelre támaszkodó felhasználókat
Javítani a finommotoros készségekkel rendelkező nehézségekkel élők élményét
Csökkenteni a kattintási/érintési hibákat

Kiket érint

Elsődleges felhasználók: Mozgássérült személyek, akiknek nehézséget okoz a pontos mutató mozgások végrehajtása, mint a remegéssel élők, korlátozott kézügyességgel rendelkezők, vagy segítő technológiákat használók (szájbot, fejmutató).

Másodlagos előnyök: A nagyobb célpontok javítják minden felhasználó élményét érintőeszközökön, beleértve a nagyobb ujjakkal rendelkezőket, vagy olyan helyzetekben, ahol a pontos mutatás nehéz (pl. járás közben vagy mozgó mobileszköz használatakor).

Tesztelés

Manuális mérés: Használd a böngésző fejlesztői eszközeit (pl. Chrome DevTools) az interaktív elemek számított méretének ellenőrzésére és győződj meg róla, hogy elérik a minimum 24×24 CSS pixelt
Automatizált eszközök: Futtass akadálymentességi szkennereket, mint az axe DevTools, amelyek jelzik a 24×24 pixelnél kisebb célpontokat
Érintőcélpont tesztelés: Érintőeszközökön próbáld meg megérinteni az interaktív elemeket, hogy megerősítsd, könnyű aktiválni őket anélkül, hogy véletlenül a szomszédos vezérlőket érintenéd
Billentyűzet fókusz tesztelés: Biztosítsd, hogy a billentyűzet fókusz stílusok egyértelműen jelzik a célpontot és hogy a célpontok nem túl kicsik a billentyűzetes működtetéshez
Felhasználói tesztelés: Végezz használhatósági teszteket mozgássérült felhasználókkal, hogy megerősítsd, a célpont méretek megfelelőek valós helyzetekben

Jó megoldások

1. Megfelelő méretű gombok

<!-- Jó: Gombok megfelelő minimum mérettel -->
<div class="gomb-pelda-container">
  <h3>Megfelelő méretű gombok</h3>
  
  <div class="gomb-sor">
    <button class="jo-gomb-alap" style="width: 32px; height: 32px;">
      ✓
    </button>
    <span class="magyarazat">32×32px - megfelel a minimum követelménynek</span>
  </div>
  
  <div class="gomb-sor">
    <button class="jo-gomb-kozepes">
      Mentés
    </button>
    <span class="magyarazat">Padding-gel megfelelő méret biztosítva</span>
  </div>
  
  <div class="gomb-sor">
    <button class="jo-gomb-nagy">
      🚀 Indítás
    </button>
    <span class="magyarazat">Nagy gomb jó kattintási élménnyel</span>
  </div>
  
  <div class="gomb-sor">
    <button class="jo-gomb-ikon" aria-label="Beállítások megnyitása">
      ⚙️
    </button>
    <span class="magyarazat">Ikon gomb megfelelő mérettel és leírással</span>
  </div>
  
  <div class="gomb-sor">
    <button class="jo-gomb-szoveg-ikon">
      <span class="ikon">📁</span>
      <span class="szoveg">Fájl megnyitása</span>
    </button>
    <span class="magyarazat">Kombinált ikon+szöveg gomb</span>
  </div>
</div>

<style>
.gomb-pelda-container {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.gomb-sor {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 15px;
  padding: 10px;
  background: white;
  border-radius: 6px;
  border: 1px solid #dee2e6;
}

.magyarazat {
  font-size: 14px;
  color: #6c757d;
  flex: 1;
}

/* Alap gomb 32x32px */
.jo-gomb-alap {
  background: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jo-gomb-alap:hover {
  background: #218838;
}

.jo-gomb-alap:focus {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
}

/* Közepes gomb padding-gel */
.jo-gomb-kozepes {
  background: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 12px 20px; /* Biztosítja a min. 24x24px méretet */
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  min-width: 24px;
  min-height: 24px;
}

.jo-gomb-kozepes:hover {
  background: #0056b3;
}

.jo-gomb-kozepes:focus {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
}

/* Nagy gomb */
.jo-gomb-nagy {
  background: #fd7e14;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 16px 32px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  min-width: 44px; /* Még nagyobb jobb élményért */
  min-height: 44px;
}

.jo-gomb-nagy:hover {
  background: #e8630a;
  transform: translateY(-1px);
}

.jo-gomb-nagy:focus {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
}

/* Ikon gomb */
.jo-gomb-ikon {
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jo-gomb-ikon:hover {
  background: #5a6268;
}

.jo-gomb-ikon:focus {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
}

/* Szöveg+ikon gomb */
.jo-gomb-szoveg-ikon {
  background: #17a2b8;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 24px;
  min-height: 24px;
}

.jo-gomb-szoveg-ikon:hover {
  background: #138496;
}

.jo-gomb-szoveg-ikon:focus {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
}

.jo-gomb-szoveg-ikon .ikon {
  font-size: 16px;
}

.jo-gomb-szoveg-ikon .szoveg {
  font-weight: 500;
}
</style>

Ezek a gombok mind megfelelnek a 24×24 pixel minimum követelménynek. A padding, explicit width/height vagy nagyobb méretek biztosítják a megfelelő kattintási területet.

2. Linkek padding-gel növelt kattintási területtel

<!-- Jó: Linkek megfelelő kattintási területtel -->
<div class="link-pelda-container">
  <h3>Megfelelő méretű linkek</h3>
  
  <div class="link-sor">
    <a href="#" class="jo-link-padding">Bővebben</a>
    <span class="magyarazat">Padding biztosítja a megfelelő kattintási területet</span>
  </div>
  
  <div class="link-sor">
    <a href="#" class="jo-link-gomb">
      <span class="link-ikon">📎</span>
      <span class="link-szoveg">Fájl letöltése</span>
    </a>
    <span class="magyarazat">Gomb-szerű link megfelelő mérettel</span>
  </div>
  
  <div class="link-sor">
    <a href="#" class="jo-link-ikon" aria-label="Szerkesztés">
      ✏️
    </a>
    <span class="magyarazat">Ikon link megfelelő mérettel és alt szöveggel</span>
  </div>
  
  <nav class="navigacio-pelda">
    <h4>Navigációs linkek</h4>
    <ul class="nav-lista">
      <li><a href="#" class="nav-link">Főoldal</a></li>
      <li><a href="#" class="nav-link">Termékek</a></li>
      <li><a href="#" class="nav-link">Szolgáltatások</a></li>
      <li><a href="#" class="nav-link">Kapcsolat</a></li>
    </ul>
    <span class="magyarazat">Navigációs linkek megfelelő padding-gel</span>
  </nav>
  
  <div class="breadcrumb-pelda">
    <h4>Breadcrumb navigáció</h4>
    <nav aria-label="Breadcrumb">
      <ol class="breadcrumb-lista">
        <li><a href="#" class="breadcrumb-link">Kezdőlap</a></li>
        <li><span class="breadcrumb-elvalaszto">/</span></li>
        <li><a href="#" class="breadcrumb-link">Kategória</a></li>
        <li><span class="breadcrumb-elvalaszto">/</span></li>
        <li><span class="breadcrumb-jelenlegi">Jelenlegi oldal</span></li>
      </ol>
    </nav>
    <span class="magyarazat">Breadcrumb linkek megfelelő mérettel</span>
  </div>
</div>

<style>
.link-pelda-container {
  max-width: 700px;
  margin: 20px auto;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.link-sor {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 15px;
  padding: 10px;
  background: white;
  border-radius: 6px;
  border: 1px solid #dee2e6;
}

.navigacio-pelda, .breadcrumb-pelda {
  margin: 20px 0;
  padding: 15px;
  background: white;
  border-radius: 6px;
  border: 1px solid #dee2e6;
}

/* Padding-gel növelt link */
.jo-link-padding {
  display: inline-block;
  padding: 12px 16px; /* Biztosítja a min. 24x24px méretet */
  background: #e7f3ff;
  color: #0066cc;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 500;
  min-width: 24px;
  min-height: 24px;
  text-align: center;
}

.jo-link-padding:hover {
  background: #cce7ff;
  text-decoration: underline;
}

.jo-link-padding:focus {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
}

/* Gomb-szerű link */
.jo-link-gomb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #28a745;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  min-width: 24px;
  min-height: 24px;
}

.jo-link-gomb:hover {
  background: #218838;
  color: white;
  text-decoration: none;
}

.jo-link-gomb:focus {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
}

.link-ikon {
  font-size: 16px;
}

/* Ikon link */
.jo-link-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #6c757d;
  color: white;
  text-decoration: none;
  border-radius: 50%;
  font-size: 16px;
}

.jo-link-ikon:hover {
  background: #5a6268;
  color: white;
  text-decoration: none;
}

.jo-link-ikon:focus {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
}

/* Navigációs linkek */
.nav-lista {
  list-style: none;
  padding: 0;
  margin: 10px 0;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.nav-lista li {
  margin: 0;
}

.nav-link {
  display: block;
  padding: 12px 16px; /* Megfelelő kattintási terület */
  background: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 500;
  min-width: 24px;
  min-height: 24px;
  text-align: center;
}

.nav-link:hover {
  background: #0056b3;
  color: white;
  text-decoration: none;
}

.nav-link:focus {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
}

/* Breadcrumb navigáció */
.breadcrumb-lista {
  list-style: none;
  padding: 0;
  margin: 10px 0;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.breadcrumb-lista li {
  margin: 0;
}

.breadcrumb-link {
  display: inline-block;
  padding: 8px 12px; /* Megfelelő kattintási terület */
  color: #0066cc;
  text-decoration: none;
  border-radius: 3px;
  min-width: 24px;
  min-height: 24px;
  text-align: center;
}

.breadcrumb-link:hover {
  background: #e7f3ff;
  text-decoration: underline;
}

.breadcrumb-link:focus {
  outline: 2px solid #ffbf47;
  outline-offset: 2px;
  background: #e7f3ff;
}

.breadcrumb-elvalaszto {
  color: #6c757d;
  margin: 0 5px;
}

.breadcrumb-jelenlegi {
  padding: 8px 12px;
  color: #6c757d;
  font-weight: 500;
}

.magyarazat {
  font-size: 14px;
  color: #6c757d;
  flex: 1;
}
</style>

A linkek padding-gel vagy explicit méretekkel biztosítják a 24×24 pixel minimum kattintási területet, javítva a használhatóságot minden eszközön.

3. Kis ikon gomb szomszédos nagyobb célponttal

<!-- Jó: Kis ikon gomb nagyobb alternatívával -->
<div class="szomszedos-celpontok-container">
  <h3>Kis gombok nagyobb alternatívákkal</h3>
  
  <div class="celpontok-sor">
    <div class="info-kombináció">
      <!-- 20x20px kis ikon gomb (kivétel a szabály alól) -->
      <button class="kis-info-gomb" 
              style="width: 20px; height: 20px;" 
              aria-label="Információ">
        ℹ️
      </button>
      <!-- Szomszédos nagyobb link célpont -->
      <a href="#" class="nagyobb-info-link">
        További információk
      </a>
    &div>
    <span class="magyarazat">20×20px gomb megengedett, mert van szomszédos nagyobb célpont</span>
  </div>
  
  <div class="celpontok-sor">
    <div class="szerkesztesi-kombináció">
      <button class="kis-szerkesztes-gomb" 
              style="width: 18px; height: 18px;" 
              aria-label="Gyors szerkesztés">
        ✏️
      </button>
      <a href="#" class="nagyobb-szerkesztes-link">
        Szerkesztés
      </a>
    </div>
    <span class="magyarazat">18×18px gomb + nagyobb szerkesztés link</span>
  </div>
  
  <div class="celpontok-sor">
    <div class="torles-kombináció">
      <button class="kis-torles-gomb" 
              style="width: 16px; height: 16px;" 
              aria-label="Gyors törlés">
        ❌
      </button>
      <button class="nagyobb-torles-gomb">
        🗑️ Törlés
      </button>
    </div>
    <span class="magyarazat">16×16px kis gomb + nagy törlés gomb</span>
  </div>
  
  <div class="lista-elemek-pelda">
    <h4>Lista elemek kis és nagy vezérlőkkel</h4>
    <ul class="elemek-lista">
      <li class="lista-elem">
        <span class="elem-tartalom">Dokumentum 1.pdf</span>
        <div class="elem-muveletek">
          <button class="kis-letoltes" 
                  style="width: 20px; height: 20px;"
                  aria-label="Gyors letöltés">
            ⬇️
          </button>
          <a href="#" class="nagy-letoltes-link">
            💾 Letöltés
          </a>
          <button class="kis-megosztás" 
                  style="width: 20px; height: 20px;"
                  aria-label="Gyors megosztás">
            🔗
          </button>
          <button class="nagy-megosztás-gomb">
            📤 Megosztás
          </button>
        </div>
      </li>
      
      <li class="lista-elem">
        <span class="elem-tartalom">Kép_2024.jpg</span>
        <div class="elem-muveletek">
          <button class="kis-letoltes" 
                  style="width: 20px; height: 20px;"
                  aria-label="Gyors letöltés">
            ⬇️
          </button>
          <a href="#" class="nagy-letoltes-link">
            💾 Letöltés
          </a>
          <button class="kis-megosztás" 
                  style="width: 20px; height: 20px;"
                  aria-label="Gyors megosztás">
            🔗
          </button>
          <button class="nagy-megosztás-gomb">
            📤 Megosztás
          </button>
        </div>
      </li>
    </ul>
  </div>
</div>

<style>
.szomszedos-celpontok-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.celpontok-sor {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 15px;
  padding: 15px;
  background: white;
  border-radius: 6px;
  border: 1px solid #dee2e6;
}

.info-kombináció, .szerkesztesi-kombináció, .torles-kombináció {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Kis info gomb */
.kis-info-gomb {
  background: #17a2b8;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kis-info-gomb:hover {
  background: #138496;
}

.kis-info-gomb:focus {
  outline: 2px solid #ffbf47;
  outline-offset: 2px;
}

/* Nagyobb info link */
.nagyobb-info-link {
  display: inline-block;
  padding: 8px 16px;
  background: #e7f3ff;
  color: #0066cc;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
  min-width: 24px;
  min-height: 24px;
}

.nagyobb-info-link:hover {
  background: #cce7ff;
  text-decoration: underline;
}

.nagyobb-info-link:focus {
  outline: 2px solid #ffbf47;
  outline-offset: 2px;
}

/* Kis szerkesztés gomb */
.kis-szerkesztes-gomb {
  background: #ffc107;
  color: #212529;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kis-szerkesztes-gomb:hover {
  background: #e0a800;
}

.kis-szerkesztes-gomb:focus {
  outline: 2px solid #ffbf47;
  outline-offset: 2px;
}

/* Nagyobb szerkesztés link */
.nagyobb-szerkesztes-link {
  display: inline-block;
  padding: 8px 16px;
  background: #fff3cd;
  color: #856404;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
  min-width: 24px;
  min-height: 24px;
}

.nagyobb-szerkesztes-link:hover {
  background: #ffeaa7;
  text-decoration: underline;
}

.nagyobb-szerkesztes-link:focus {
  outline: 2px solid #ffbf47;
  outline-offset: 2px;
}

/* Kis törlés gomb */
.kis-torles-gomb {
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kis-torles-gomb:hover {
  background: #c82333;
}

.kis-torles-gomb:focus {
  outline: 2px solid #ffbf47;
  outline-offset: 2px;
}

/* Nagyobb törlés gomb */
.nagyobb-torles-gomb {
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  min-width: 24px;
  min-height: 24px;
}

.nagyobb-torles-gomb:hover {
  background: #c82333;
}

.nagyobb-torles-gomb:focus {
  outline: 2px solid #ffbf47;
  outline-offset: 2px;
}

/* Lista elemek */
.lista-elemek-pelda {
  margin-top: 30px;
  padding: 15px;
  background: white;
  border-radius: 6px;
  border: 1px solid #dee2e6;
}

.elemek-lista {
  list-style: none;
  padding: 0;
  margin: 15px 0;
}

.lista-elem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  margin-bottom: 10px;
  background: #f8f9fa;
  border-radius: 4px;
  border: 1px solid #dee2e6;
}

.elem-tartalom {
  font-weight: 500;
  flex: 1;
}

.elem-muveletek {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Kis letöltés gomb */
.kis-letoltes {
  background: #28a745;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kis-letoltes:hover {
  background: #218838;
}

.kis-letoltes:focus {
  outline: 2px solid #ffbf47;
  outline-offset: 2px;
}

/* Nagy letöltés link */
.nagy-letoltes-link {
  display: inline-block;
  padding: 6px 12px;
  background: #d4edda;
  color: #155724;
  text-decoration: none;
  border-radius: 4px;
  font-size: 12px;
  min-width: 24px;
  min-height: 24px;
}

.nagy-letoltes-link:hover {
  background: #c3e6cb;
  text-decoration: underline;
}

.nagy-letoltes-link:focus {
  outline: 2px solid #ffbf47;
  outline-offset: 2px;
}

/* Kis megosztás gomb */
.kis-megosztás {
  background: #6f42c1;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kis-megosztás:hover {
  background: #5a32a3;
}

.kis-megosztás:focus {
  outline: 2px solid #ffbf47;
  outline-offset: 2px;
}

/* Nagy megosztás gomb */
.nagy-megosztás-gomb {
  background: #6f42c1;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 12px;
  min-width: 24px;
  min-height: 24px;
}

.nagy-megosztás-gomb:hover {
  background: #5a32a3;
}

.nagy-megosztás-gomb:focus {
  outline: 2px solid #ffbf47;
  outline-offset: 2px;
}

.magyarazat {
  font-size: 14px;
  color: #6c757d;
  flex: 1;
}
</style>

A kis gombok (16-20px) megengedettek, mert szomszédos nagyobb célpontok biztosítják az alternatív elérést ugyanahhoz a funkcióhoz.

4. CSS media query-k érintőeszközökhöz

<!-- Jó: Adaptív célpont méretek eszköz típus szerint -->
<div class="adaptiv-celpontok-container">
  <h3>Adaptív célpont méretek</h3>
  
  <div class="adaptiv-gombok">
    <button class="adaptiv-gomb-1">Adaptív gomb</button>
    <button class="adaptiv-gomb-2">Másik gomb</button>
    <a href="#" class="adaptiv-link">Adaptív link</a>
  </div>
  
  <div class="adaptiv-navigacio">
    <nav>
      <ul class="adaptiv-nav-lista">
        <li><a href="#" class="adaptiv-nav-link">Kezdőlap</a></li>
        <li><a href="#" class="adaptiv-nav-link">Szolgáltatások</a></li>
        <li><a href="#" class="adaptiv-nav-link">Kapcsolat</a></li>
      </ul>
    </nav>
  </div>
  
  <div class="adaptiv-ikon-sor">
    <button class="adaptiv-ikon-gomb" aria-label="Keresés">🔍</button>
    <button class="adaptiv-ikon-gomb" aria-label="Beállítások">⚙️</button>
    <button class="adaptiv-ikon-gomb" aria-label="Profil">👤</button>
    <button class="adaptiv-ikon-gomb" aria-label="Értesítések">🔔</button>
  </div>
  
  <div class="info-szoveg">
    <p><strong>Működés:</strong></p>
    <ul>
      <li>🖱️ Egérrel (fine pointer): Alapértelmezett méretek</li>
      <li>👆 Érintéssel (coarse pointer): Nagyobb méretek automatikusan</li>
      <li>📱 Kis képernyő: Még nagyobb méretek jobb használhatóságért</li>
    </ul>
  </div>
</div>

<style>
.adaptiv-celpontok-container {
  max-width: 700px;
  margin: 20px auto;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

/* Alapértelmezett méretek (fine pointer - egér, trackpad) */
.adaptiv-gomb-1, .adaptiv-gomb-2 {
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  margin: 5px;
  cursor: pointer;
  font-size: 14px;
  min-width: 24px;
  min-height: 24px;
}

.adaptiv-link {
  display: inline-block;
  padding: 8px 16px;
  margin: 5px;
  background: #e7f3ff;
  color: #0066cc;
  text-decoration: none;
  border-radius: 4px;
  min-width: 24px;
  min-height: 24px;
}

.adaptiv-nav-lista {
  list-style: none;
  padding: 0;
  margin: 20px 0;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.adaptiv-nav-link {
  display: block;
  padding: 10px 15px;
  background: #6c757d;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  min-width: 24px;
  min-height: 24px;
}

.adaptiv-ikon-sor {
  display: flex;
  gap: 10px;
  margin: 20px 0;
  flex-wrap: wrap;
}

.adaptiv-ikon-gomb {
  background: #28a745;
  color: white;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Érintőeszközök (coarse pointer) */
@media (pointer: coarse) {
  .adaptiv-gomb-1, .adaptiv-gomb-2 {
    padding: 12px 20px;
    font-size: 16px;
    min-width: 44px;  /* Nagyobb érintőcélpont */
    min-height: 44px;
  }
  
  .adaptiv-link {
    padding: 12px 20px;
    font-size: 16px;
    min-width: 44px;
    min-height: 44px;
  }
  
  .adaptiv-nav-link {
    padding: 14px 18px;
    font-size: 16px;
    min-width: 44px;
    min-height: 44px;
  }
  
  .adaptiv-ikon-gomb {
    width: 48px;     /* Nagyobb ikon gombok érintéshez */
    height: 48px;
    font-size: 20px;
  }
}

/* Kis képernyők (mobil eszközök) */
@media (max-width: 768px) {
  .adaptiv-gomb-1, .adaptiv-gomb-2 {
    padding: 14px 24px;
    font-size: 18px;
    min-width: 48px;  /* Még nagyobb mobil eszközökön */
    min-height: 48px;
  }
  
  .adaptiv-link {
    padding: 14px 24px;
    font-size: 18px;
    min-width: 48px;
    min-height: 48px;
  }
  
  .adaptiv-nav-link {
    padding: 16px 20px;
    font-size: 18px;
    min-width: 48px;
    min-height: 48px;
  }
  
  .adaptiv-ikon-gomb {
    width: 52px;     /* Maximum méret kis képernyőkön */
    height: 52px;
    font-size: 22px;
  }
  
  .adaptiv-ikon-sor {
    justify-content: center;
  }
  
  .adaptiv-nav-lista {
    flex-direction: column;
    align-items: center;
  }
}

/* Hover és focus állapotok */
.adaptiv-gomb-1:hover, .adaptiv-gomb-2:hover {
  background: #0056b3;
}

.adaptiv-gomb-1:focus, .adaptiv-gomb-2:focus {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
}

.adaptiv-link:hover {
  background: #cce7ff;
  text-decoration: underline;
}

.adaptiv-link:focus {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
}

.adaptiv-nav-link:hover {
  background: #5a6268;
}

.adaptiv-nav-link:focus {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
}

.adaptiv-ikon-gomb:hover {
  background: #218838;
}

.adaptiv-ikon-gomb:focus {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
}

.info-szoveg {
  margin-top: 30px;
  padding: 15px;
  background: #e7f3ff;
  border-radius: 6px;
  border-left: 4px solid #0066cc;
}

.info-szoveg ul {
  margin: 10px 0;
  padding-left: 20px;
}

.info-szoveg li {
  margin-bottom: 5px;
}
</style>

A CSS media query-k automatikusan nagyobb célpontokat biztosítanak érintőeszközökön és kis képernyőkön, ahol a pontosság kritikusabb.

Helytelen megoldások

Apró kattintási területek padding nélkül

<!-- Rossz: Túl kicsi kattintási területek -->
<div class="rossz-celpontok-container">
  <h3>Túl kicsi célpontok (ROSSZ példák)</h3>
  
  <div class="rossz-pelda">
    <!-- Rossz: Túl kicsi X gomb -->
    <a href="#" class="rossz-x-gomb">X</a>
    <span class="hibajelzes">❌ Gyakran kevesebb mint 24×24px, nehéz eltalálni</span>
  </div>
  
  <div class="rossz-pelda">
    <!-- Rossz: Ikon csak font-size-szal, padding nélkül -->
    <button class="rossz-ikon-gomb">✕</button>
    <span class="hibajelzes">❌ Vizuális méret kicsi, tényleges célpont még kisebb</span>
  </div>
  
  <div class="rossz-pelda">
    <!-- Rossz: Kicsi checkbox és radio gombok -->
    <label class="rossz-checkbox-label">
      <input type="checkbox" class="rossz-checkbox">
      Elfogadom
    </label>
    <span class="hibajelzes">❌ Alapértelmezett checkbox túl kicsi érintéshez</span>
  </div>
  
  <div class="rossz-pelda">
    <!-- Rossz: Kicsi linkek lista formában -->
    <ul class="rossz-linkek-lista">
      <li><a href="#" class="rossz-lista-link">Link 1</a></li>
      <li><a href="#" class="rossz-lista-link">Link 2</a></li>
      <li><a href="#" class="rossz-lista-link">Link 3</a></li>
    </ul>
    <span class="hibajelzes">❌ Linkek túl közel egymáshoz, kis célpont</span>
  </div>
</div>

<style>
.rossz-celpontok-container {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  background: #fff5f5;
  border: 2px solid #dc3545;
  border-radius: 8px;
}

.rossz-pelda {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  padding: 15px;
  background: white;
  border-radius: 6px;
  border: 1px solid #f5c6cb;
}

.hibajelzes {
  color: #721c24;
  font-size: 14px;
  font-weight: 500;
  flex: 1;
}

/* Rossz: Túl kicsi X gomb */
.rossz-x-gomb {
  color: #dc3545;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  /* Nincs padding, nincs minimum méret */
  /* Tényleges kattintási terület ~16x16px vagy kevesebb */
}

/* Rossz: Ikon gomb csak font-size-szal */
.rossz-ikon-gomb {
  background: #dc3545;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 16px;
  /* Nincs padding, nincs width/height */
  /* Célpont méret ismeretlen és valószínűleg kicsi */
}

/* Rossz: Kicsi checkbox */
.rossz-checkbox-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
}

.rossz-checkbox {
  /* Alapértelmezett böngésző méret, általában ~13x13px */
  /* Túl kicsi érintőeszközökön */
}

/* Rossz: Kicsi linkek lista */
.rossz-linkek-lista {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rossz-linkek-lista li {
  margin-bottom: 2px; /* Túl kis távolság */
}

.rossz-lista-link {
  color: #007bff;
  text-decoration: none;
  font-size: 14px;
  /* Nincs padding, nincs minimum méret */
  /* Kattintási terület csak a szöveg mérete */
}

.rossz-lista-link:hover {
  text-decoration: underline;
}
</style>

Probléma: Ezek az elemek nem érik el a 24×24 pixel minimum méretet, nehézzé téve a pontos kattintást vagy érintést, különösen mozgássérült felhasználók számára.

Átfedő kis célpontok véletlen aktiválást váltanak ki

<!-- Rossz: Átfedő kis gombok -->
<div class="atfedo-celpontok-container">
  <h3>Átfedő kis célpontok (ROSSZ példák)</h3>
  
  <div class="rossz-pelda">
    <div class="atfedo-gombok-1">
      <!-- Rossz: Túl közel egymáshoz, kis méretek -->
      <button class="rossz-kis-gomb" style="position: absolute; left: 10px; top: 10px;">A</button>
      <button class="rossz-kis-gomb" style="position: absolute; left: 25px; top: 10px;">B</button>
      <button class="rossz-kis-gomb" style="position: absolute; left: 40px; top: 10px;">C</button>
    </div>
    <span class="hibajelzes">❌ 20×20px gombok 15px távolságra - átfedő célterületek</span>
  </div>
  
  <div class="rossz-pelda">
    <div class="zsufolt-ikonok">
      <!-- Rossz: Túl sok kis ikon egy helyen -->
      <button class="rossz-ikon-kicsi">📝</button>
      <button class="rossz-ikon-kicsi">🗑️</button>
      <button class="rossz-ikon-kicsi">📤</button>
      <button class="rossz-ikon-kicsi">⚙️</button>
      <button class="rossz-ikon-kicsi">❤️</button>
    </div>
    <span class="hibajelzes">❌ Zsúfolt kis ikon gombok nehéz célzással</span>
  </div>
  
  <div class="rossz-pelda">
    <div class="rossz-navigacio">
      <!-- Rossz: Navigációs linkek túl közel -->
      <a href="#" class="rossz-nav-link">Főoldal</a> |
      <a href="#" class="rossz-nav-link">Termékek</a> |
      <a href="#" class="rossz-nav-link">Szolgáltatások</a> |
      <a href="#" class="rossz-nav-link">Kapcsolat</a>
    </div>
    <span class="hibajelzes">❌ Inline linkek elválasztó karakterekkel - kis célpontok</span>
  </div>
  
  <div class="rossz-pelda">
    <div class="rossz-tabla-muveletek">
      <!-- Rossz: Táblázat műveletek kis gombokkal -->
      <table class="rossz-tabla">
        <tr>
          <td>Elem 1</td>
          <td class="muveletek-oszlop">
            <button class="rossz-tabla-gomb">📝</button>
            <button class="rossz-tabla-gomb">👁️</button>
            <button class="rossz-tabla-gomb">🗑️</button>
          </td>
        </tr>
        <tr>
          <td>Elem 2</td>
          <td class="muveletek-oszlop">
            <button class="rossz-tabla-gomb">📝</button>
            <button class="rossz-tabla-gomb">👁️</button>
            <button class="rossz-tabla-gomb">🗑️</button>
          </td>
        </tr>
      </table>
    </div>
    <span class="hibajelzes">❌ Táblázat műveletek túl kicsi gombokkal</span>
  </div>
</div>

<style>
.atfedo-celpontok-container {
  max-width: 700px;
  margin: 20px auto;
  padding: 20px;
  background: #fff5f5;
  border: 2px solid #dc3545;
  border-radius: 8px;
}

.rossz-pelda {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 25px;
  padding: 20px;
  background: white;
  border-radius: 6px;
  border: 1px solid #f5c6cb;
  position: relative;
}

.atfedo-gombok-1 {
  position: relative;
  width: 80px;
  height: 40px;
  background: #f8f9fa;
  border: 1px dashed #dc3545;
}

/* Rossz: Kis gombok túl közel */
.rossz-kis-gomb {
  width: 20px;
  height: 20px;
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  /* Átfedő pozíciók miatt véletlen kattintások */
}

/* Rossz: Zsúfolt ikonok */
.zsufolt-ikonok {
  display: flex;
  gap: 2px; /* Túl kicsi távolság */
}

.rossz-ikon-kicsi {
  width: 18px;
  height: 18px;
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  font-size: 10px;
  /* Túl kicsi érintéshez */
}

/* Rossz: Navigációs linkek */
.rossz-navigacio {
  font-size: 14px;
}

.rossz-nav-link {
  color: #007bff;
  text-decoration: none;
  padding: 2px 4px; /* Túl kicsi padding */
  /* Kattintási terület túl kicsi */
}

.rossz-nav-link:hover {
  text-decoration: underline;
}

/* Rossz: Táblázat gombok */
.rossz-tabla {
  border-collapse: collapse;
  width: 100%;
}

.rossz-tabla td {
  padding: 5px;
  border: 1px solid #dee2e6;
}

.muveletek-oszlop {
  text-align: center;
}

.rossz-tabla-gomb {
  width: 16px;
  height: 16px;
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  font-size: 8px;
  margin: 0 1px;
  /* Túl kicsi minden eszközön */
}

.hibajelzes {
  color: #721c24;
  font-size: 14px;
  font-weight: 500;
  flex: 1;
}
</style>

Probléma: Az átfedő vagy túl közeli kis célpontok véletlen aktiválásokat okoznak és megnehezítik a pontos interakciót, különösen érintőeszközökön.

Responsive hiány kis képernyőkön

<!-- Rossz: Nem adaptív célpontok -->
<div class="nem-adaptiv-container">
  <h3>Nem adaptív célpontok (ROSSZ példák)</h3>
  
  <div class="rossz-pelda">
    <div class="fix-meretu-gombok">
      <!-- Rossz: Fix kicsi méretek minden eszközön -->
      <button class="fix-kicsi-gomb">Mentés</button>
      <button class="fix-kicsi-gomb">Mégse</button>
      <button class="fix-kicsi-gomb">Törlés</button>
    </div>
    <span class="hibajelzes">❌ Fix 20×20px méret minden eszközön - mobilon használhatatlan</span>
  </div>
  
  <div class="rossz-pelda">
    <div class="egesz-ikon-sor">
      <!-- Rossz: Képernyő mérettől függetlenül ugyanaz -->
      <button class="nem-adaptiv-ikon">🏠</button>
      <button class="nem-adaptiv-ikon">🔍</button>
      <button class="nem-adaptiv-ikon">⚙️</button>
      <button class="nem-adaptiv-ikon">❤️</button>
      <button class="nem-adaptiv-ikon">📧</button>
      <button class="nem-adaptiv-ikon">🔔</button>
    </div>
    <span class="hibajelzes">❌ Ikonok nem nőnek mobilon - túl kicsik érintéshez</span>
  </div>
  
  <div class="rossz-pelda">
    <form class="nem-adaptiv-form">
      <!-- Rossz: Űrlap elemek nem adaptívok -->
      <input type="text" class="fix-input" placeholder="Név">
      <input type="email" class="fix-input" placeholder="Email">
      <button type="submit" class="fix-submit">Küldés</button>
    </form>
    <span class="hibajelzes">❌ Űrlap elemek nem növekednek mobilon</span>
  </div>
  
  <div class="rossz-pelda">
    <div class="apro-vezerlok">
      <!-- Rossz: Minuscule vezérlők mobilon -->
      <div class="szam-bevitel">
        <button class="apro-csokkento">-</button>
        <span class="szam-kijelzo">5</span>
        <button class="apro-novelo">+</button>
      </div>
    </div>
    <span class="hibajelzes">❌ Szám vezérlők túl kicsik mobilon</span>
  </div>
</div>

<style>
.nem-adaptiv-container {
  max-width: 700px;
  margin: 20px auto;
  padding: 20px;
  background: #fff5f5;
  border: 2px solid #dc3545;
  border-radius: 8px;
}

.rossz-pelda {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 25px;
  padding: 20px;
  background: white;
  border-radius: 6px;
  border: 1px solid #f5c6cb;
}

/* Rossz: Fix kicsi gombok */
.fix-meretu-gombok {
  display: flex;
  gap: 5px;
}

.fix-kicsi-gomb {
  width: 20px;              /* Fix kicsi méret */
  height: 20px;             /* Fix kicsi méret */
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 10px;
  /* Nincs @media query, nincs adaptivitás */
  /* Mobilon használhatatlan */
}

/* Rossz: Nem adaptív ikonok */
.egesz-ikon-sor {
  display: flex;
  gap: 8px;
}

.nem-adaptiv-ikon {
  width: 22px;              /* Fix méret */
  height: 22px;             /* Fix méret */
  background: #17a2b8;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  /* Mobilon és érintőeszközökön túl kicsi */
}

/* Rossz: Nem adaptív űrlap */
.nem-adaptiv-form {
  display: flex;
  gap: 5px;
  align-items: center;
}

.fix-input {
  width: 80px;              /* Fix keskeny */
  height: 20px;             /* Fix alacsony */
  padding: 2px 4px;         /* Kicsi padding */
  border: 1px solid #ced4da;
  border-radius: 3px;
  font-size: 12px;
  /* Mobilon nehéz használni */
}

.fix-submit {
  width: 40px;              /* Fix kicsi */
  height: 24px;             /* Fix kicsi */
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 10px;
  /* Mobilon eltalálhatatlan */
}

/* Rossz: Apró szám vezérlők */
.szam-bevitel {
  display: flex;
  align-items: center;
  gap: 5px;
}

.apro-csokkento, .apro-novelo {
  width: 16px;              /* Nagyon kicsi */
  height: 16px;             /* Nagyon kicsi */
  background: #ffc107;
  color: #212529;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  font-size: 10px;
  font-weight: bold;
  /* Mobilon szinte használhatatlan */
}

.szam-kijelzo {
  padding: 2px 8px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 3px;
  font-size: 12px;
  min-width: 20px;
  text-align: center;
}

.hibajelzes {
  color: #721c24;
  font-size: 14px;
  font-weight: 500;
  flex: 1;
}

/* Nincs @media (pointer: coarse) - ez a probléma! */
/* Nincs @media (max-width: ...) - ez is probléma! */
/* A célpontok sosem növekednek mobilon vagy érintőeszközökön */
</style>

Probléma: A fix kicsi méretű interaktív mutató célpontok minden eszközön ugyanakkorák maradnak, amelyek így mobileszközökön és érintőeszközökön használhatatlanul kicsik lesznek.

Források

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