1.3.4 - Elrendezés megőrzése

Kategória: 1. Érzékelhető (Perceivable) Irányelv: 1.3. Adaptálhatóság Szint: AA

Röviden a szabványpontról

A WCAG 1.3.4 (Orientation) előírja, hogy a tartalom nem korlátozhatja a megtekintését és működését egyetlen kijelző tájolásra – mint például álló vagy fekvő -, kivéve, ha egy konkrét tájolás elengedhetetlen. Ez azt jelenti, hogy a webes vagy alkalmazás tartalomnak elegánsan kell alkalmazkodnia a különböző eszköz tájolásokhoz információ vagy funkcionalitás elvesztése nélkül.

A cél az, hogy biztosítsa, hogy azok a felhasználók, akik a képernyő forgatására támaszkodnak, vagy olyan eszközöket használnak, amelyek csak egy bizonyos tájolást támogatnak, hozzáférjenek minden tartalomhoz és funkcióhoz.

Kiket érint

Ez a szabványpont elsősorban azokat a mozgásfogyatékossággal élő embereket érinti, akik rögzített tájolásban felszerelt eszközöket használhatnak, vagy azokat a felhasználókat, akik olyan kisegítő technológiákra támaszkodnak, amelyek egy tájolásban működnek a legjobban. De hasznos lehet akkor is, ha:

Javítja a használhatóságot minden felhasználó számára a rugalmas eszközhasználat támogatásával
Javítja a felhasználói élményt táblagépeken, telefonokon és hibrid eszközökön

Tesztelés

Manuális tájolás tesztelés: Forgasd el az eszközt vagy emulátort álló és fekvő módok között, és ellenőrizd, hogy a tartalom teljesen elérhető és funkcionális marad-e
Reszponzív dizájn ellenőrzések: Használd a böngésző fejlesztői eszközeit különböző képernyő tájolások szimulálásához, és győződj meg róla, hogy az elrendezés alkalmazkodik tartalom levágás vagy veszteség nélkül
Billentyűzet és érintés interakciós tesztek: Erősítsd meg, hogy minden interaktív elem működtethető marad mindkét tájolásban
Képernyőolvasó tesztelés: Ellenőrizd, hogy a képernyőolvasó fókusz és tartalom folyam logikus és következetes marad a tájolás változások után
Automatizált eszközök: Használj akadálymentességi tesztelő eszközöket, amelyek ellenőrzik a CSS-t vagy JavaScriptet, amely lezárja a tájolást vagy a tartalmat elérhetetlenné teszi tájolás változáskor

Jó gyakorlatok

1. Reszponzív elrendezések

<!-- CSS media query-k használata az elrendezés adaptálásához -->
<style>
  @media (orientation: portrait) {
    .container {
      flex-direction: column;
      padding: 20px;
    }
    .sidebar {
      width: 100%;
      margin-bottom: 20px;
    }
  }
  
  @media (orientation: landscape) {
    .container {
      flex-direction: row;
      padding: 40px;
    }
    .sidebar {
      width: 30%;
      margin-right: 20px;
    }
  }
</style>

Magyarázat: Ez a példa mutatja, hogyan alkalmazkodhat a tartalom vizuálisan a tájolás korlátozása nélkül.

2. Rugalmas UI komponensek

<div class="button-container">
  <button>Opció 1</button>
  <button>Opció 2</button>
  <button>Opció 3</button>
</div>

<style>
.button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.button-container button {
  flex: 1 1 150px; /* Min szélesség 150px, de nőhet */
  padding: 10px 20px;
}
</style>

Magyarázat: A flexbox lehetővé teszi a gombok újrarendezését az elérhető szélesség alapján, támogatva a különböző tájolásokat az elrendezés megtörése nélkül.

3. Tájolás változások kezelése dinamikus tartalomhoz

<script>
window.addEventListener('orientationchange', () => {
  // UI beállítása vagy tartalom újra renderelése szükség esetén
  console.log('Tájolás változott:', screen.orientation.type);
  
  // Példa: Grid elrendezés frissítése
  const grid = document.querySelector('.content-grid');
  if (screen.orientation.type.includes('landscape')) {
    grid.style.gridTemplateColumns = 'repeat(3, 1fr)';
  } else {
    grid.style.gridTemplateColumns = 'repeat(2, 1fr)';
  }
});
</script>

Magyarázat: A tájolás változási események kezelése biztosítja, hogy a dinamikus tartalom megfelelően frissül vagy újrarendeződik.

4. Viewport meta tag helyes használata

<!-- JÓ: Rugalmas viewport beállítás -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- ROSSZ: Ne korlátozd a felhasználói méretezést -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> -->

Magyarázat: A megfelelő viewport beállítás lehetővé teszi a tartalom alkalmazkodását különböző tájolásokhoz.

Rossz gyakorlatok

Rögzített szélességek/magasságok használata

<div style="width: 1024px; height: 768px; overflow: hidden;">
  <!-- Tartalom -->
</div>

Probléma: A rögzített méretek miatt a tartalom levágódik vagy elérhetetlenné válik különböző tájolásokban.

Tájolás zárolása JavaScript vagy meta tagekkel

<!-- Manifest.json példa - KERÜLENDŐ -->
{
  "orientation": "portrait"
}

<!-- JavaScript példa - KERÜLENDŐ -->
<script>
screen.orientation.lock('landscape').catch(() => {
  console.warn('Tájolás zárolás nem támogatott vagy megtagadva');
});
</script>

Probléma: Megakadályozza a felhasználókat a preferált vagy kisegítő eszköz által megkövetelt tájolás használatában.

Tájolás változások nem tesztelése

<div class="modal" style="position: fixed; top: 100px; left: 200px; width: 600px;">
  <!-- Modal tartalom -->
</div>

Probléma: A fix pozícionált elemek kívül eshetnek a látható területen tájolás váltáskor.

Rögzített tájolás feltételezése navigációhoz

<nav style="position: fixed; bottom: 0; width: 100%; height: 50px;">
  <!-- Csak fekvő módban működik jól -->
</nav>

Probléma: A navigáció használhatatlanná válhat vagy túl sok helyet foglalhat álló módban.

Források

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