1.4.10 - Átméretezhető tartalom
Röviden a szabványpontról
A WCAG 1.4.10 (Reflow) előírja, hogy a tartalom információ vagy funkcionalitás elvesztése nélkül megjeleníthető legyen, és ne igényeljen görgetést két dimenzióban (vízszintes és függőleges irányban egyidejűleg) akár 400%-os nagyításnál vagy kis képernyőkön (mint a mobileszközök) történő megtekintéskor. Ez minden webes tartalomra vonatkozik, beleértve a szöveget, képeket és interaktív elemeket.
Cél: Biztosítani, hogy azok a felhasználók, akiknek nagyobb szövegre van szükségük vagy kis képernyőket használnak, könnyedén hozzáférjenek minden tartalomhoz vízszintes görgetés vagy levágott tartalom nélkül.
Kiket érint
Elsődleges felhasználók: Gyengénlátó vagy más látássérüléssel élő emberek, akik nagyításra vagy nagyítóra támaszkodnak a tartalom olvasásához.
Másodlagos előnyök: A mobileszközöket vagy kis képernyőket használó felhasználók profitálnak a jobb reszponzív elrendezésekből és könnyebb navigációból vízszintes görgetősávok nélkül.
Tesztelés
A megfelelőség ellenőrzéséhez próbáld ki ezeket a tesztelési módszereket:
- Nagyítási teszt: Használd a böngésző nagyítási vezérlőit a tartalom 400%-ig történő nagyításához és ellenőrizd a vízszintes görgetést vagy tartalom levágását
- Reszponzív design tesztelés: Méretezd át a böngészőablakot kis szélességekre (pl. 320px) és ellenőrizd, hogy a tartalom függőlegesen újrarendeződik vízszintes görgetés nélkül
- Képernyőolvasó és billentyűzet tesztelés: Győződj meg róla, hogy minden tartalom hozzáférhető és működtethető marad az újrarendezés után
- Automatizált eszközök: Használj akadálymentességi tesztelő eszközöket, mint az axe DevTools az újrarendezéssel kapcsolatos elrendezési problémák szkennelésére
- Manuális ellenőrzés: Nézd át a rögzített szélességű konténereket vagy elemeket, amelyek megakadályozzák az újrarendezést, mint a rögzített méretű képek vagy táblázatok
Jó gyakorlatok
1. Rugalmas elrendezések CSS Flexbox vagy Grid használatával
<!-- A konténer alkalmazkodik a képernyő méretéhez és függőlegesen rakja egymásra a tartalmat szűk képernyőkön -->
<div class="flex-container">
<div class="content-block">Tartalom blokk 1</div>
<div class="content-block">Tartalom blokk 2</div>
<div class="content-block">Tartalom blokk 3</div>
</div>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.content-block {
flex: 1 1 200px; /* grow, shrink, basis */
min-width: 150px;
padding: 1rem;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
</style>Magyarázat: A flex-wrap: wrap lehetővé teszi a blokkok függőleges egymásra rakását kis szélességeknél, elkerülve a vízszintes görgetést.
2. Rögzített szélességek kerülése
<!-- Kerüld a rögzített szélességeket, mint a width: 600px -->
<div class="responsive-container">
<h2>Reszponzív konténer</h2>
<p>Ez a konténer alkalmazkodik a képernyő méretéhez és soha nem okoz vízszintes görgetést.</p>
</div>
<style>
.responsive-container {
width: 100%;
max-width: 600px; /* maximum szélesség, de rugalmas */
margin: 0 auto;
padding: 1rem;
box-sizing: border-box;
}
</style>Magyarázat: A relatív szélességek használata, mint a 100% max-width-tel, lehetővé teszi a skálázást túlcsordulás nélkül.
3. Media query-k használata az elrendezés módosításához
<nav class="main-navigation">
<ul class="nav-menu">
<li><a href="/">Főoldal</a></li>
<li><a href="/termekek">Termékek</a></li>
<li><a href="/szolgaltatasok">Szolgáltatások</a></li>
<li><a href="/kapcsolat">Kapcsolat</a></li>
</ul>
</nav>
<style>
.nav-menu {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
.nav-menu li {
margin-right: 2rem;
}
.nav-menu a {
text-decoration: none;
padding: 0.5rem 1rem;
display: block;
}
/* Szűk viewport-ok esetén függőleges elrendezés */
@media (max-width: 400px) {
.nav-menu {
display: block; /* Navigációs elemek függőleges egymásra rakása */
}
.nav-menu li {
margin-right: 0;
margin-bottom: 0.5rem;
}
}
</style>Magyarázat: Az elrendezés módosítása szűk viewport-okhoz biztosítja, hogy a tartalom vízszintes görgetés nélkül férjen el.
4. Képek és média elemek rugalmas kezelése
<div class="media-container">
<img src="pelda-kep.jpg" alt="Példa kép leírása" class="responsive-image">
<video class="responsive-video" controls>
<source src="pelda-video.mp4" type="video/mp4">
A böngésző nem támogatja a video elemet.
</video>
</div>
<style>
.media-container {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.responsive-image {
max-width: 100%;
height: auto;
display: block;
margin-bottom: 1rem;
}
.responsive-video {
width: 100%;
height: auto;
max-width: 100%;
}
</style>Magyarázat: A max-width: 100% beállítása megakadályozza, hogy a képek túllépjék a konténerük határait.
5. CSS Grid reszponzív elrendezéshez
<div class="grid-container">
<header class="header">Fejléc</header>
<nav class="sidebar">Oldalsáv</nav>
<main class="main-content">Fő tartalom</main>
<footer class="footer">Lábléc</footer>
</div>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
gap: 1rem;
min-height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main-content { grid-area: main; }
.footer { grid-area: footer; }
/* Kis képernyőkön egyoszlopos elrendezés */
@media (max-width: 600px) {
.grid-container {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
}
}
</style>Magyarázat: A CSS Grid lehetővé teszi összetett elrendezések létrehozását, amelyek automatikusan alkalmazkodnak különböző képernyőméretekhez.
Rossz gyakorlatok
Rögzített szélességek konténereken vagy elemeken
<div style="width: 600px;">Rögzített szélességű konténer</div>Probléma: Vízszintes görgetést okoz kisebb képernyőkön vagy nagyított nézetekben.
Táblázatok használata elrendezéshez
<table width="800">
<tr>
<td>Elrendezési tartalom</td>
<td>Másik oszlop</td>
</tr>
</table>Probléma: A rögzített szélességű táblázatok vízszintes túlcsordulást okozhatnak és megakadályozzák a rugalmas újrarendezést.
Nem tördelődő szöveg vagy hosszú törhetetlen karakterláncok
<p>Szupertöbbszörösenösszetettmegszentségteleníthetetetlenségeskedéseitekértszupertöbbszörösenösszetett</p>Probléma: A hosszú, törés nélküli szavak kényszeríthetik a vízszintes görgetést.
Overflow hidden beállítása konténereken
<style>
.container {
overflow-x: hidden;
width: 300px;
}
</style>Probléma: Elrejti a vízszintesen túlcsorduló tartalmat, információvesztést okozva.
Abszolút pozicionálás rögzített értékekkel
<style>
.fixed-position {
position: absolute;
left: 500px;
width: 400px;
}
</style>Probléma: Az abszolút pozicionálás rögzített értékekkel nem alkalmazkodik a különböző képernyőméretekhez és túlcsordulást okozhat.
Nem reszponzív iframe-ek
<iframe src="https://example.com" width="800" height="600"></iframe>Probléma: A rögzített méretű iframe-ek nem alkalmazkodnak a képernyő méretéhez és vízszintes görgetést okozhatnak.
Források
Iratkozz fel hírlevelünkre!
Amennyiben szeretnél első kézből értesülni az új bejegyzésekről, iratkozz fel hírlevelünkre!