2.5.8 - Interaktív mutató célpontok legkisebb mérete
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.