1.4.5 - Szöveg képként
Röviden a szabványpontról
A WCAG 1.4.5 (Images of Text) előírja, hogy ha a használt technológiák lehetővé teszik a vizuális megjelenítést, akkor valódi szöveget kell használni az információ közvetítésére szövegképek helyett. Ez azt jelenti, hogy a fejlesztőknek kerülniük kell szöveg megjelenítését képek formájában, kivéve ha ez feltétlenül szükséges.
Mire vonatkozik: Minden szöveges tartalomra, amely képként van megjelenítve weboldalakon vagy alkalmazásokban – mint például címsorok, címkék, gombok vagy bármilyen szöveges információ.
Cél: Biztosítani, hogy a szöveges tartalom hozzáférhető, méretezhető, kereshető és adaptálható maradjon azoknak a felhasználóknak, akik kisegítő technológiákra támaszkodnak vagy személyre szeretnék szabni a szöveget (pl. átméretezés vagy színek megváltoztatása). A valódi szöveg használata segít a gyengénlátóknak, képernyőolvasót használóknak és azoknak, akik módosítják a megjelenítési beállításokat.
Kiket érint
Elsődleges felhasználók: Látássérült emberek, akik képernyőnagyítót vagy képernyőolvasót használnak, valamint kognitív fogyatékossággal élő felhasználók, akik számára előnyös a világos, kijelölhető szöveg.
Másodlagos előnyök:
- Javított SEO optimalizálás
- Jobb teljesítmény (kisebb fájlméretek)
- Könnyebb tartalomkarbantartás
Tesztelés
- Vizuális ellenőrzés: Nézd át az oldalt olyan szövegek után kutatva, amelyek képként jelennek meg (pl. logók, bannerek, gombok)
- Böngésző fejlesztői eszközök használata: Vizsgáld meg az elemeket annak ellenőrzésére, hogy a szöveg valóban szöveg-e vagy <img> elembe vagy CSS háttérbe van beágyazva
- Képernyőolvasó tesztelés: Használj képernyőolvasót annak biztosítására, hogy a szöveges tartalom felolvasásra kerül és kijelölhető
- Szöveg átméretezése: Próbáld átméretezni a szöveget 200%-ig annak ellenőrzésére, hogy a szövegképek megfelelően skálázódnak-e vagy a szöveg hozzáférhető marad-e
- Automatizált eszközök: Használj akadálymentességi tesztelő eszközöket, mint az axe DevTools a szövegképek jelzésére és alternatívák javaslására
Jó gyakorlatok
1. Valódi szöveg használata címsorokhoz és címkékhez
<!-- Jó: Valódi szöveg használata -->
<h1>Üdvözöljük weboldalunkon</h1>
<!-- Rossz lenne: -->
<!-- <img src="udvozlo-cim.png" alt="Üdvözöljük weboldalunkon"> -->Magyarázat: A valódi szöveg használata lehetővé teszi a képernyőolvasók számára a tartalom felolvasását és a felhasználók számára a szöveg kijelölését és másolását.
2. CSS használata szöveg stílusozásához képek helyett
<!-- Jó: CSS-el stílusozott szöveg -->
<button class="styled-button">Kattints rám</button>
<style>
.styled-button {
font-size: 24px;
color: #007acc;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
padding: 15px 30px;
border-radius: 8px;
color: white;
font-weight: bold;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.styled-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}
</style>Magyarázat: A CSS stílusozás lehetővé teszi a szöveg rugalmas megjelenítését anélkül, hogy elveszítenénk az akadálymentességi előnyöket.
3. SVG használata szövegelemekkel amikor grafikára van szükség
<!-- Jó: SVG kijelölhető szöveggel -->
<svg width="300" height="80" role="img" aria-label="Cégünk logója">
<rect x="10" y="10" width="280" height="60" fill="#f0f0f0" stroke="#333" stroke-width="2" rx="10"/>
<text x="150" y="45" font-family="Arial, sans-serif" font-size="24" fill="#333" text-anchor="middle">
MyCég Kft.
</text>
</svg>Magyarázat: Az SVG szövegelemek megőrzik a szöveg kijelölhetőségét és akadálymentességét, miközben grafikai flexibilitást biztosítanak.
4. Megfelelő alt szöveg biztosítása ha szövegképek szükségesek
<!-- Ha logó képként szükséges -->
<img src="ceg-logo.png" alt="MyCég Kft. - Innovatív megoldások"
width="200" height="60">
<!-- Dekoratív szövegkép esetén -->
<img src="dekorativ-idezet.png" alt="A siker kulcsa a kitartás - Napoleon Hill"
role="img">Magyarázat: Ha szövegképek elkerülhetetlenek, részletes alt szöveg biztosítja, hogy a tartalom hozzáférhető maradjon.
5. Web fontok használata egyedi tipográfiához
<!-- Google Fonts betöltése -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
<h1 class="custom-heading">Különleges címsor</h1>
<p class="custom-text">Egyedi tipográfiával formázott szöveg</p>
<style>
.custom-heading {
font-family: 'Roboto', sans-serif;
font-weight: 700;
font-size: 3rem;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-align: center;
}
.custom-text {
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 1.2rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
color: #333;
}
</style>Magyarázat: A web fontok és modern CSS technikák lehetővé teszik egyedi vizuális hatások elérését valódi szöveggel.
Rossz gyakorlatok
Képek használata címsorokhoz vagy fontos szövegekhez alt szöveg nélkül
<!-- Rossz: Címsor képként alt szöveg nélkül -->
<img src="fooldal-cim.png">Probléma: A képernyőolvasó felhasználók nem férnek hozzá a tartalom információhoz, és a szöveg nem méretezhető vagy kereshető.
CSS háttérképek használata szöveg megjelenítésére
<!-- Rossz: Szöveg háttérképként -->
<div class="header-text">Rejtett szöveg</div>
<style>
.header-text {
background-image: url('fejlec-szoveg.png');
width: 300px;
height: 50px;
text-indent: -9999px; /* valódi szöveg elrejtése */
}
</style>Probléma: A szöveg nem elérhető képernyőolvasókkal és nem méretezhető, miközben a rejtett szöveg zavaró lehet.
Szöveg beágyazása képekbe alternatív szöveg vagy feliratok nélkül
<!-- Rossz: Szövegkép üres alt szöveggel -->
<img src="banner-szoveg.png" alt="">Probléma: Az üres alt attribútum azt jelzi, hogy a kép dekoratív, de ha szöveget tartalmaz, az információ elvész a képernyőolvasó felhasználók számára.
Komplex szövegképek használata egyszerű alternatívák helyett
<!-- Rossz: Egész bekezdés képként -->
<img src="hosszu-szoveg-blokk.png" alt="Ez egy hosszú szöveges tartalom, amely nem megfelelően van megvalósítva képként...">Probléma: A hosszú szövegek képként történő megjelenítése megnehezíti a hozzáférést, átméretezést és a tartalom karbantartását.
Szövegképek használata reszponzív design helyett
<!-- Rossz: Rögzített méretű szövegkép -->
<img src="mobil-cim.png" width="320" alt="Mobilra optimalizált cím">
<img src="desktop-cim.png" width="1200" alt="Asztali számítógépre optimalizált cím">Probléma: Különböző eszközökhöz külön képek használata helyett a reszponzív CSS egyszerűbb és hatékonyabb megoldás lenne.
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!