2.5.4 - Mozgásaktivált vezérlés

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

Röviden a szabványpontról

A WCAG 2.5.4 (Motion Actuation) előírja, hogy minden funkcionalitás, amely eszközmozgással, vagy felhasználói mozgással működtethető (például eszköz rázása, döntése vagy forgatása), alternatív módon is elérhető legyen felhasználói felület elemeken keresztül. Ez azt jelenti, hogy minden mozgással vezérelt funkciónak van egy alternatív aktiválási módja, amely nem igényel fizikai mozgást.

Mire vonatkozik: Minden webes tartalomra és alkalmazásra, amely mozgásalapú interakciókat használ, különösen mobileszközökön vagy érzékelőkkel rendelkező eszközökön (gyorsulásmérő, giroszkóp).

Cél: Biztosítani, hogy azok a felhasználók, akik nem tudnak bizonyos fizikai mozgásokat végrehajtani:

Mozgássérülések vagy korlátozott mobilitás miatt
Segítő technológiákat használnak
Olyan helyzetben vannak, ahol a mozgás nem praktikus
Minden funkcionalitáshoz hozzáférjenek mozgás nélkül is

Kiket érint

Elsődleges felhasználók: Mozgássérült vagy korlátozott fizikai mobilitással rendelkező személyek, akik nem tudnak olyan gesztusokat végrehajtani, mint az eszköz rázása, döntése vagy forgatása. Ide tartoznak a kézsérültek, remegéssel élők és kerekesszéket használók.

Másodlagos előnyök: Olyan helyzetekben lévő felhasználók esetén, ahol a mozgás kényelmetlen, vagy lehetetlen (pl. zsúfolt helyen eszköz stabilan tartása), valamint segítő technológiákat használók, amelyek nem támogatják a mozgásbevitelt jelenthet megoldást.

Tesztelés

Mozgásalapú vezérlők azonosítása: Keress az oldalon vagy alkalmazásban mozgásalapú funkciókat, mint a rázás-frissítés vagy döntés-görgetés
Alternatív vezérlők tesztelése: Próbáld meg ugyanazt a funkcionalitást billentyűzettel vagy képernyőn lévő vezérlővel aktiválni. Győződj meg róla, hogy van látható és működtethető UI elem, amely helyettesíti a mozgásos műveletet
Segítő technológia tesztelés: Használj segítő eszközöket (képernyőolvasó, kapcsoló eszközök) annak ellenőrzésére, hogy az alternatív vezérlők elérhetők-e
Érzékelő nélküli tesztelés: Teszteld mozgásérzékelő nélküli eszközökön vagy kikapcsolt érzékelőkkel, hogy a mozgásalapú funkciók továbbra is működnek-e
Kód áttekintés: Ellenőrizd a dokumentációt és kódot deviceorientation, devicemotion vagy shake eseményfigyelőkért, és győződj meg róla, hogy léteznek tartalék UI vezérlők

Jó megoldások

1. Rázás visszavonáshoz gombbal is működtetve

<!-- Jó: Látható visszavonás gomb a rázás gesztus mellett -->
<div class="szerkeszto-fejlec">
  <h1>Szöveg szerkesztő</h1>
  <div class="muveletek">
    <button id="visszavonas-gomb" 
            aria-label="Utolsó művelet visszavonása"
            class="visszavonas-btn">
      ↶ Visszavonás
    </button>
    <button id="megismetles-gomb" 
            aria-label="Művelet megismétlése"
            class="megismetles-btn">
      ↷ Megismétlés
    </button>
  </div>
</div>

<div class="szerkeszto-terület">
  <textarea id="szoveg-mezo" 
            placeholder="Kezdj el írni..."
            aria-describedby="utasitas-szoveg"></textarea>
  <div id="utasitas-szoveg" class="sr-only">
    Rázd meg az eszközt a visszavonáshoz, vagy használd a visszavonás gombot
  </div>
</div>

<div class="mozgas-info">
  <p><strong>Tipp:</strong> Rázd meg az eszközt a gyors visszavonáshoz, vagy használd a ↶ gombot.</p>
</div>

<style>
.szerkeszto-fejlec {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
}

.muveletek {
  display: flex;
  gap: 10px;
}

.visszavonas-btn, .megismetles-btn {
  padding: 8px 16px;
  border: 1px solid #6c757d;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.visszavonas-btn:hover, .megismetles-btn:hover {
  background: #e9ecef;
}

.visszavonas-btn:focus, .megismetles-btn:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

.szerkeszto-terület {
  padding: 20px;
}

#szoveg-mezo {
  width: 100%;
  height: 300px;
  padding: 15px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  resize: vertical;
}

#szoveg-mezo:focus {
  outline: 2px solid #0066cc;
  border-color: #0066cc;
}

.mozgas-info {
  padding: 15px;
  background: #e7f3ff;
  border-left: 4px solid #0066cc;
  margin: 20px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
</style>

<script>
let szerkeszto_elozmeny = [];
let elozmeny_index = -1;

// Mozgás eseményfigyelő rázáshoz
let utolso_mozgas = 0;
let razas_kuszob = 15;

window.addEventListener('devicemotion', function(event) {
  if (event.accelerationIncludingGravity) {
    let gyorsulas = event.accelerationIncludingGravity;
    let mozgas_ero = Math.abs(gyorsulas.x) + Math.abs(gyorsulas.y) + Math.abs(gyorsulas.z);
    
    if (mozgas_ero > razas_kuszob) {
      let most = new Date().getTime();
      if (most - utolso_mozgas > 1000) { // 1 másodperc cooldown
        document.getElementById('visszavonas-gomb').click(); // Gomb aktiválása
        utolso_mozgas = most;
      }
    }
  }
});

// Visszavonás gomb funkcionalitás
document.getElementById('visszavonas-gomb').addEventListener('click', function() {
  visszavonas_mukodes();
});

// Megismétlés gomb funkcionalitás  
document.getElementById('megismetles-gomb').addEventListener('click', function() {
  megismetles_mukodes();
});

function visszavonas_mukodes() {
  const szoveg_mezo = document.getElementById('szoveg-mezo');
  
  if (elozmeny_index > 0) {
    elozmeny_index--;
    szoveg_mezo.value = szerkeszto_elozmeny[elozmeny_index];
    
    // Vizuális visszajelzés
    document.getElementById('visszavonas-gomb').style.background = '#28a745';
    document.getElementById('visszavonas-gomb').style.color = 'white';
    setTimeout(() => {
      document.getElementById('visszavonas-gomb').style.background = 'white';
      document.getElementById('visszavonas-gomb').style.color = 'black';
    }, 200);
    
    console.log('Visszavonás végrehajtva');
  }
}

function megismetles_mukodes() {
  const szoveg_mezo = document.getElementById('szoveg-mezo');
  
  if (elozmeny_index < szerkeszto_elozmeny.length - 1) {
    elozmeny_index++;
    szoveg_mezo.value = szerkeszto_elozmeny[elozmeny_index];
    
    // Vizuális visszajelzés
    document.getElementById('megismetles-gomb').style.background = '#28a745';
    document.getElementById('megismetles-gomb').style.color = 'white';
    setTimeout(() => {
      document.getElementById('megismetles-gomb').style.background = 'white';
      document.getElementById('megismetles-gomb').style.color = 'black';
    }, 200);
    
    console.log('Megismétlés végrehajtva');
  }
}

// Szöveg változás követése az előzményekhez
document.getElementById('szoveg-mezo').addEventListener('input', function() {
  const ertek = this.value;
  
  // Előzmény hozzáadása késleltetéssel
  setTimeout(() => {
    if (szerkeszto_elozmeny[elozmeny_index] !== ertek) {
      szerkeszto_elozmeny = szerkeszto_elozmeny.slice(0, elozmeny_index + 1);
      szerkeszto_elozmeny.push(ertek);
      elozmeny_index = szerkeszto_elozmeny.length - 1;
    }
  }, 500);
});

// Kezdeti állapot beállítása
szerkeszto_elozmeny.push('');
elozmeny_index = 0;
</script>

A rázás gesztus visszavonást indít, de a látható gomb alternatívát biztosít azoknak, akik nem tudják megrázni az eszközt. A gomb billentyűzettel is elérhető.

2. Döntés görgetéshez alternatívával

<!-- Jó: Görgetési alternatívák döntés gesztus mellett -->
<div class="galeria-container">
  <div class="galeria-fejlec">
    <h2>Képgaléria</h2>
    <div class="gorgetesi-vezerlok">
      <button id="balra-gomb" 
              aria-label="Előző kép"
              class="nav-gomb">
        ← Előző
      </button>
      <button id="jobbra-gomb" 
              aria-label="Következő kép"
              class="nav-gomb">
        Következő →
      </button>
    </div>
  </div>
  
  <div id="gorgetesi-terulet" 
       class="kep-lista" 
       tabindex="0" 
       role="region"
       aria-label="Görgetelhető képgaléria"
       aria-describedby="gorgetesi-utasitas">
    
    <div class="kep-elem">
      <img src="/kepek/kep1.jpg" alt="Természeti táj naplementével">
      <p>Gyönyörű naplementés táj</p>
    </div>
    
    <div class="kep-elem">
      <img src="/kepek/kep2.jpg" alt="Hegyi völgy ködben">
      <p>Ködös hegyi völgy</p>
    </div>
    
    <div class="kep-elem">
      <img src="/kepek/kep3.jpg" alt="Óceán hullámokkal">
      <p>Nyugodt óceán hullámok</p>
    </div>
    
    <div class="kep-elem">
      <img src="/kepek/kep4.jpg" alt="Erdei ösvény">
      <p>Erdei sétaútvonal</p>
    </div>
  </div>
  
  <div id="gorgetesi-utasitas" class="utasitas-szoveg">
    Döntsd az eszközt jobbra vagy balra a görgetéshez, vagy használd a nyíl gombokat. 
    Billentyűzettel: nyíl billentyűk vagy Tab.
  </div>
</div>

<style>
.galeria-container {
  max-width: 800px;
  margin: 20px auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.galeria-fejlec {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
}

.gorgetesi-vezerlok {
  display: flex;
  gap: 10px;
}

.nav-gomb {
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

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

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

.nav-gomb:disabled {
  background: #6c757d;
  cursor: not-allowed;
}

.kep-lista {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 20px;
  gap: 20px;
  background: white;
}

.kep-lista:focus {
  outline: 2px solid #0066cc;
  outline-offset: -2px;
}

.kep-elem {
  flex: 0 0 250px;
  text-align: center;
}

.kep-elem img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.kep-elem p {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}

.utasitas-szoveg {
  padding: 15px 20px;
  background: #e7f3ff;
  color: #0066cc;
  font-size: 14px;
  border-top: 1px solid #bee5eb;
}
</style>

<script>
let gorgetesi_sebesseg = 200;
let dontesi_kuszob = 20; // fok
let utolso_dontesi_ido = 0;

// Eszköz orientáció figyelése döntéshez
window.addEventListener('deviceorientation', function(event) {
  if (event.gamma !== null) {
    let dontesi_szog = event.gamma; // bal-jobb döntés
    let most = new Date().getTime();
    
    // Jobbra döntés
    if (dontesi_szog > dontesi_kuszob && most - utolso_dontesi_ido > 1000) {
      document.getElementById('jobbra-gomb').click();
      utolso_dontesi_ido = most;
    }
    // Balra döntés  
    else if (dontesi_szog < -dontesi_kuszob && most - utolso_dontesi_ido > 1000) {
      document.getElementById('balra-gomb').click();
      utolso_dontesi_ido = most;
    }
  }
});

// Gomb vezérlők
document.getElementById('jobbra-gomb').addEventListener('click', function() {
  gorgetés_jobbra();
});

document.getElementById('balra-gomb').addEventListener('click', function() {
  gorgetés_balra();
});

function gorgetés_jobbra() {
  const terulet = document.getElementById('gorgetesi-terulet');
  terulet.scrollLeft += gorgetesi_sebesseg;
  
  // Vizuális visszajelzés
  document.getElementById('jobbra-gomb').style.background = '#28a745';
  setTimeout(() => {
    document.getElementById('jobbra-gomb').style.background = '#007bff';
  }, 150);
}

function gorgetés_balra() {
  const terulet = document.getElementById('gorgetesi-terulet');
  terulet.scrollLeft -= gorgetesi_sebesseg;
  
  // Vizuális visszajelzés
  document.getElementById('balra-gomb').style.background = '#28a745';
  setTimeout(() => {
    document.getElementById('balra-gomb').style.background = '#007bff';
  }, 150);
}

// Billentyűzet támogatás a görgetési területhez
document.getElementById('gorgetesi-terulet').addEventListener('keydown', function(e) {
  switch(e.key) {
    case 'ArrowLeft':
      e.preventDefault();
      gorgetés_balra();
      break;
    case 'ArrowRight':
      e.preventDefault();
      gorgetés_jobbra();
      break;
    case 'Home':
      e.preventDefault();
      this.scrollLeft = 0;
      break;
    case 'End':
      e.preventDefault();
      this.scrollLeft = this.scrollWidth;
      break;
  }
});

// Görgetés állapot figyelése a gombok engedélyezéséhez/letiltásához
document.getElementById('gorgetesi-terulet').addEventListener('scroll', function() {
  const balra_gomb = document.getElementById('balra-gomb');
  const jobbra_gomb = document.getElementById('jobbra-gomb');
  
  // Balra gomb letiltása, ha a bal szélen vagyunk
  balra_gomb.disabled = this.scrollLeft === 0;
  
  // Jobbra gomb letiltása, ha a jobb szélen vagyunk
  jobbra_gomb.disabled = this.scrollLeft >= (this.scrollWidth - this.clientWidth);
});

// Kezdeti állapot beállítása
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('gorgetesi-terulet').dispatchEvent(new Event('scroll'));
});
</script>

A felhasználók döntéssel vagy gombokkal is görgethetnek. A billentyűzetes navigáció szintén támogatott, és vizuális visszajelzések segítik a használatot.

3. Forgatás nézet váltáshoz alternatívával

<!-- Jó: Nézet váltás gombbal és forgatással -->
<div class="nezet-valtó-container">
  <div class="fejlec-vezerlok">
    <h2>Termék áttekintés</h2>
    <button id="nezet-valto-gomb" 
            aria-label="Nézet váltása: álló/fektetett"
            class="nezet-gomb">
      <span id="nezet-ikon">📱</span> Álló nézet
    </button>
  </div>
  
  <div id="tartalom-terulet" class="allo-nezet">
    <div class="termek-info">
      <h3>Okostelefon XYZ</h3>
      <div class="termek-kepek">
        <img src="/termekek/telefon1.jpg" alt="Telefon elölnézet">
        <img src="/termekek/telefon2.jpg" alt="Telefon hátlap">
      </div>
      <div class="termek-leiras">
        <p>Modern okostelefon kiváló kamerával és hosszú akkumulátor élettartammal.</p>
        <ul>
          <li>6.1" OLED kijelző</li>
          <li>128GB tárhely</li>
          <li>Dual kamera rendszer</li>
          <li>Víz- és porálló</li>
        </ul>
      </div>
    </div>
  </div>
  
  <div class="mozgas-utasitas">
    <p><strong>Tipp:</strong> Forgasd el az eszközt a nézet váltáshoz, vagy használd a 📱 gombot.</p>
  </div>
</div>

<style>
.nezet-valtó-container {
  max-width: 900px;
  margin: 20px auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background: white;
}

.fejlec-vezerlok {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
}

.nezet-gomb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.nezet-gomb:hover {
  background: #0056b3;
  transform: translateY(-1px);
}

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

.nezet-gomb:active {
  transform: translateY(0);
}

.tartalom-terulet {
  padding: 20px;
  transition: all 0.5s ease;
}

/* Álló nézet stílusok */
.allo-nezet .termek-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.allo-nezet .termek-kepek {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
}

.allo-nezet .termek-kepek img {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.allo-nezet .termek-leiras {
  text-align: left;
}

/* Fektetett nézet stílusok */
.fektetett-nezet .termek-info {
  display: flex;
  flex-direction: row;
  gap: 30px;
  align-items: flex-start;
}

.fektetett-nezet .termek-kepek {
  display: flex;
  flex-direction: row;
  gap: 15px;
  flex: 1;
}

.fektetett-nezet .termek-kepek img {
  width: 200px;
  height: 250px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.fektetett-nezet .termek-leiras {
  flex: 1;
  text-align: left;
}

.termek-leiras ul {
  padding-left: 20px;
}

.termek-leiras li {
  margin-bottom: 5px;
}

.mozgas-utasitas {
  padding: 15px 20px;
  background: #e7f3ff;
  color: #0066cc;
  font-size: 14px;
  border-top: 1px solid #bee5eb;
}

/* Responsive viselkedés */
@media (max-width: 768px) {
  .fektetett-nezet .termek-info {
    flex-direction: column;
  }
  
  .fektetett-nezet .termek-kepek {
    flex-direction: column;
    align-items: center;
  }
  
  .fektetett-nezet .termek-kepek img {
    width: 100%;
    max-width: 250px;
    height: auto;
  }
}
</style>

<script>
let jelenlegi_nezet = 'allo'; // 'allo' vagy 'fektetett'
let orientacio_kuszob = 45; // fok
let utolso_orientacio_valtás = 0;

// Eszköz orientáció figyelése forgatáshoz
window.addEventListener('deviceorientation', function(event) {
  if (event.beta !== null && event.gamma !== null) {
    let doltesi_szog = Math.abs(event.gamma); // eszköz dőlése
    let most = new Date().getTime();
    
    // Álló pozícióba forgatás
    if (doltesi_szog < orientacio_kuszob && jelenlegi_nezet === 'fektetett' && 
        most - utolso_orientacio_valtás > 1500) {
      nezet_valtas_allo();
      utolso_orientacio_valtás = most;
    }
    // Fektetett pozícióba forgatás
    else if (doltesi_szog > orientacio_kuszob && jelenlegi_nezet === 'allo' && 
             most - utolso_orientacio_valtás > 1500) {
      nezet_valtas_fektetett();
      utolso_orientacio_valtás = most;
    }
  }
});

// Nézet váltó gomb eseménykezelő
document.getElementById('nezet-valto-gomb').addEventListener('click', function() {
  if (jelenlegi_nezet === 'allo') {
    nezet_valtas_fektetett();
  } else {
    nezet_valtas_allo();
  }
});

function nezet_valtas_allo() {
  const tartalom = document.getElementById('tartalom-terulet');
  const gomb = document.getElementById('nezet-valto-gomb');
  const ikon = document.getElementById('nezet-ikon');
  
  tartalom.className = 'tartalom-terulet allo-nezet';
  jelenlegi_nezet = 'allo';
  
  // Gomb szöveg és ikon frissítése
  ikon.textContent = '📱';
  gomb.innerHTML = '<span id="nezet-ikon">📱</span> Álló nézet';
  
  // Vizuális visszajelzés
  gomb.style.background = '#28a745';
  setTimeout(() => {
    gomb.style.background = '#007bff';
  }, 300);
  
  console.log('Váltás álló nézetre');
}

function nezet_valtas_fektetett() {
  const tartalom = document.getElementById('tartalom-terulet');
  const gomb = document.getElementById('nezet-valto-gomb');
  const ikon = document.getElementById('nezet-ikon');
  
  tartalom.className = 'tartalom-terulet fektetett-nezet';
  jelenlegi_nezet = 'fektetett';
  
  // Gomb szöveg és ikon frissítése
  ikon.textContent = '📱';
  gomb.innerHTML = '<span id="nezet-ikon" style="transform: rotate(90deg); display: inline-block;">📱</span> Fektetett nézet';
  
  // Vizuális visszajelzés
  gomb.style.background = '#28a745';
  setTimeout(() => {
    gomb.style.background = '#007bff';
  }, 300);
  
  console.log('Váltás fektetett nézetre');
}

// Billentyűzet támogatás nézet váltáshoz
document.addEventListener('keydown', function(e) {
  // Ctrl + R a nézet váltáshoz
  if (e.ctrlKey && e.key === 'r') {
    e.preventDefault();
    document.getElementById('nezet-valto-gomb').click();
  }
});

// Kezdeti állapot beállítása
document.addEventListener('DOMContentLoaded', function() {
  nezet_valtas_allo();
});
</script>

Az eszköz forgatása válthat a nézetek között, de a gomb mindig elérhető alternatívát biztosít. Billentyűzet paranccsal (Ctrl+R) is elérhető a gyors váltás.

Helytelen megoldások

Csak mozgásos vezérlés, alternatíva nélkül

<!-- Rossz: Csak rázás frissítés, nincs gomb -->
<div class="lista-container">
  <h2>Hírek listája</h2>
  <div id="hirek-lista">
    <div class="hir-elem">Első hír...</div>
    <div class="hir-elem">Második hír...</div>
  </div>
  <p class="utasitas">Rázd meg az eszközt a frissítéshez!</p>
</div>

<script>
// Rossz: Csak mozgás esemény, nincs alternatív vezérlő
window.addEventListener('devicemotion', function(event) {
  if (detectShake(event)) {
    hirek_frissites(); // Csak rázással elérhető
  }
});

function detectShake(event) {
  if (event.accelerationIncludingGravity) {
    let gyorsulas = event.accelerationIncludingGravity;
    let mozgas_ero = Math.abs(gyorsulas.x) + Math.abs(gyorsulas.y) + Math.abs(gyorsulas.z);
    return mozgas_ero > 15;
  }
  return false;
}

function hirek_frissites() {
  // Frissítési logika, de csak rázással elérhető
  console.log('Hírek frissítve');
  location.reload(); // Rossz: teljes oldal újratöltése
}
</script>

Probléma: A funkció csak rázással érhető el, ami kizárja azokat a felhasználókat, akik nem tudják vagy nem szeretnék megrázni az eszközt.

Rejtett mozgásos vezérlés

<!-- Rossz: Titkos mozgásos funkciók dokumentáció nélkül -->
<div class="interaktiv-terkep">
  <h2>Térképnézet</h2>
  <div id="terkep-container"></div>
  <!-- Nincs információ a mozgásos vezérlésről -->
</div>

<script>
// Rossz: Rejtett funkciók, nincs alternatív elérés
window.addEventListener('deviceorientation', function(event) {
  if (event.gamma > 30) {
    terkep_nagyitas(); // Rejtett funkció
  }
  if (event.gamma < -30) {
    terkep_kicsinyites(); // Rejtett funkció
  }
  if (event.beta > 45) {
    terkep_reset(); // Rejtett funkció
  }
});

// Rossz: Dupla érintés helyett csak két ujjal való döntés
let dupla_dontesi_szamlalo = 0;
window.addEventListener('devicemotion', function(event) {
  if (event.rotationRate.alpha > 90) {
    dupla_dontési_szamlalo++;
    if (dupla_dontesi_szamlalo === 2) {
      titkos_menu_megnyitas(); // Nagyon rejtett funkció
      dupla_dontesi_szamlalo = 0;
    }
  }
});

function terkep_nagyitas() {
  // Nagyítás csak döntéssel
  console.log('Térkép nagyítva');
}

function terkep_kicsinyites() {
  // Kicsinyítés csak döntéssel
  console.log('Térkép kicsinyítve');
}

function terkep_reset() {
  // Reset csak előre döntéssel
  console.log('Térkép visszaállítva');
}

function titkos_menu_megnyitas() {
  // Titkos menü csak dupla döntéssel
  console.log('Titkos menü megnyitva');
}
</script>

Probléma: A mozgásos funkciók rejtettek, nincsenek dokumentálva, és nincs alternatív elérési mód. A felhasználók nem is tudnak róluk.

Nem testreszabható mozgás érzékenység

<!-- Rossz: Fix mozgás küszöbök, nincs beállítási lehetőség -->
<div class="jatek-vezerlok">
  <h2>Akció játék</h2>
  <div id="jatek-terület"></div>
</div>

<script>
// Rossz: Fix küszöb értékek, nem állíthatók
const FIX_RAZASI_KUSZOB = 20; // Túl magas sokaknál
const FIX_DONTESI_KUSZOB = 15; // Túl alacsony másoknál
const FIX_FORGÁSI_SEBESSEG = 5; // Nem mindenkinek megfelelő

// Rossz: Kényszerített mozgás vezérlés
window.addEventListener('devicemotion', function(event) {
  if (event.accelerationIncludingGravity) {
    let mozgas = Math.abs(event.accelerationIncludingGravity.x) + 
                 Math.abs(event.accelerationIncludingGravity.y) + 
                 Math.abs(event.accelerationIncludingGravity.z);
    
    if (mozgas > FIX_RAZASI_KUSZOB) {
      karakter_ugras(); // Kötelező mozgás, nem kikapcsolható
    }
  }
});

window.addEventListener('deviceorientation', function(event) {
  if (Math.abs(event.gamma) > FIX_DONTESI_KUSZOB) {
    karakter_mozgas(event.gamma * FIX_FORGÁSI_SEBESSEG);
    // Nincs alternatív vezérlés
  }
});

// Rossz: Nincs lehetőség a mozgás kikapcsolására
function karakter_ugras() {
  console.log('Karakter ugrik - csak rázással!');
  // Nincs gomb alternatíva
}

function karakter_mozgas(irany) {
  console.log('Karakter mozog: ' + irany);
  // Nincs billentyűzet alternatíva
}

// Rossz: Nincs hozzáférési beállítások
// Nincs mozgás kikapcsolás opció
// Nincs érzékenység állítás
// Nincs alternatív vezérlési mód
</script>

Probléma: A fix küszöbértékek nem minden felhasználónak megfelelők, és nincs mód a mozgásos vezérlés kikapcsolására vagy testreszabására.

Véletlen aktiválás megelőzés hiánya

<!-- Rossz: Túl érzékeny mozgás detektálás -->
<div class="kereskedelmi-alkalmazas">
  <h2>Online bolt</h2>
  <div class="termek-lista">
    <div class="termek">Termék 1 - 1000 Ft</div>
    <div class="termek">Termék 2 - 2000 Ft</div>
  </div>
</div>

<script>
// Rossz: Túl alacsony küszöb, véletlen aktiválások
const ALACSONY_KUSZOB = 5; // Túl érzékeny
let utolso_mozgas = 0;

window.addEventListener('devicemotion', function(event) {
  if (event.accelerationIncludingGravity) {
    let mozgas_ero = Math.abs(event.accelerationIncludingGravity.x);
    
    // Rossz: Túl gyakori triggering, nincs cooldown
    if (mozgas_ero > ALACSONY_KUSZOB) {
      kosar_hozzaadas(); // Véletlen vásárlások!
    }
  }
});

// Rossz: Kritikus műveletek mozgással
window.addEventListener('deviceorientation', function(event) {
  if (event.gamma > 10) { // Túl alacsony küszöb
    vasarlas_visszaigazolas(); // Veszélyes!
  }
  
  if (event.beta > 20) {
    fizetesi_adatok_torles(); // Nagyon veszélyes!
  }
});

function kosar_hozzaadas() {
  // Rossz: Fontos művelet véletlenül aktiválódhat
  console.log('Termék hozzáadva kosárhoz!');
  // Nincs megerősítés, nincs visszavonás lehetőség
}

function vasarlas_visszaigazolas() {
  // Rossz: Kritikus művelet mozgással
  console.log('Vásárlás megerősítve!');
  // Pénzügyi tranzakció mozgással!
}

function fizetesi_adatok_torles() {
  // Rossz: Destruktív művelet mozgással
  console.log('Fizetési adatok törölve!');
  // Nincs visszavonás lehetőség
}

// Rossz: Nincs mozgás validáció
// Nincs felhasználói megerősítés
// Nincs visszavonási lehetőség
// Nincs undo funkció
</script>

Probléma: A túl érzékeny mozgás detektálás véletlen aktiválásokhoz vezethet, különösen kritikus műveleteknél (vásárlás, törlés). Nincs megfelelő védelem vagy megerősítés.

Források

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