1.4.4 - Szöveg átméretezése

Kategória: 1. Érzékelhető (Perceivable) Irányelv: 1.4. Megkülönböztethetőség Szint: AA

Röviden a szabványpontról

A WCAG 1.4.4 (Resize Text) előírja, hogy a weboldalon lévő szöveg 200%-ig nagyítható legyen kisegítő technológia nélkül, tartalom vagy funkcionalitás elvesztése nélkül. Ez minden szöveges tartalomra vonatkozik, beleértve a törzsszöveget, címsorokat, címkéket és minden információt közvetítő szöveget. A cél az, hogy biztosítsa, hogy a gyengénlátó vagy más látássérült felhasználók nagyíthatják a szöveget a kényelmes olvasás érdekében anélkül, hogy megtörnék az elrendezést vagy elveszítenék a hozzáférést bármilyen információhoz vagy vezérlőhöz.

Kiket érint

Ez a szabványpont elsősorban a gyengénlátó vagy életkorral összefüggő látásvesztéssel küzdő embereket érinti, akiknek nagyítaniuk kell a szöveget a tartalom kényelmes olvasásához. De hasznos lehet akkor is, ha:

Átmeneti károsodások vannak jelen (pl. szem fáradtság)
Kis képernyőket használnak
Bárki, aki nagyobb szöveget részesít előnyben az olvashatóság érdekében

Tesztelés

Manuális nagyítási teszt: Használd a böngésző nagyítást (Ctrl + Plus vagy Cmd + Plus) a szövegméret 200%-ig történő növelésére és ellenőrizd, hogy semmi tartalom nem vágódik le vagy funkcionalitás nem törik el
Reszponzív elrendezés ellenőrzése: Győződj meg róla, hogy az oldal elrendezése elegánsan alkalmazkodik vízszintes görgetés vagy átfedő elemek nélkül
Szöveg átméretező eszközök: Használd az operációs rendszer vagy böngésző szöveg átméretező eszközeit annak megerősítésére, hogy a szöveg megfelelően nagyítódik
Képernyőolvasó ellenőrzés: Erősítsd meg, hogy a szöveg átméretezése nem zavarja a billentyűzetes navigációt vagy fókusz sorrendet
Automatizált tesztelő eszközök: Használj eszközöket, mint az axe DevTools a szöveg átméretezéssel és elrendezéssel kapcsolatos potenciális problémák észlelésére

Jó gyakorlatok

1. Relatív egységek használata szövegméretezéshez

<!-- rem vagy em egységek használata px helyett -->
<style>
body {
  font-size: 1rem; /* alap betűméret */
  line-height: 1.5;
}

h1 {
  font-size: 2rem; /* skálázható címsor */
}

h2 {
  font-size: 1.5rem;
}

p {
  font-size: 1rem;
  margin-bottom: 1rem;
}

.small-text {
  font-size: 0.875rem; /* 14px ekvivalens */
}
</style>

<h1>Főcím</h1>
<h2>Alcím</h2>
<p>Ez egy bekezdés, amely megfelelően skálázódik nagyításkor.</p>
<p class="small-text">Ez kisebb szöveg, de még mindig skálázható.</p>

Magyarázat: Ez lehetővé teszi a szöveg arányos skálázását nagyításkor.

2. Rögzített szélességű konténerek kerülése

<style>
/* Rögzített szélesség helyett */
.container {
  max-width: 100%; /* rugalmas konténer */
  padding: 1rem;
  margin: 0 auto;
}

.flexible-box {
  width: 100%;
  max-width: 800px; /* maximum, de rugalmas */
  box-sizing: border-box;
}

/* Responsive design */
@media (max-width: 768px) {
  .container {
    padding: 0.5rem;
  }
}
</style>

<div class="container">
  <div class="flexible-box">
    <h2>Rugalmas elrendezés</h2>
    <p>Ez a tartalom alkalmazkodik a szöveg nagyításához.</p>
  </div>
</div>

Magyarázat: A rugalmas konténerek megakadályozzák a tartalom levágását vagy túlcsordulását szöveg átméretezéskor.

3. Szöveg természetes tördelésének engedélyezése

<style>
p {
  white-space: normal; /* tördelés engedélyezése */
  word-wrap: break-word; /* hosszú szavak törése */
  overflow-wrap: break-word;
}

.content-area {
  max-width: 100%;
  overflow: visible; /* ne rejts el tartalmat */
}

.long-text {
  hyphens: auto; /* automatikus elválasztás */
  text-align: justify;
}
</style>

<div class="content-area">
  <p>Ez egy hosszabb bekezdés, amely természetesen törik és alkalmazkodik a szöveg nagyításához. A tartalom mindig látható marad.</p>
  
  <p class="long-text">
    Ez egy nagyon hosszú szöveg, amely tartalmaz néhány hosszabb szót, mint például "akadálymentesítés" és "megfelelőség", amelyek automatikusan törhetők szükség esetén.
  </p>
</div>

Magyarázat: Megakadályozza a vízszintes görgetést és olvashatóan tartja a tartalmat.

4. Interaktív elemek tesztelése

<style>
button {
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  min-height: 44px; /* minimum érintési terület */
  border: none;
  background-color: #007cba;
  color: white;
  cursor: pointer;
  border-radius: 4px;
}

input[type="text"], 
input[type="email"], 
textarea {
  font-size: 1rem;
  padding: 0.5rem;
  border: 1px solid #ccc;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
}

label {
  font-size: 1rem;
  font-weight: bold;
  display: block;
  margin-bottom: 0.5rem;
}

.form-group {
  margin-bottom: 1rem;
}
</style>

<form>
  <div class="form-group">
    <label for="name">Név:</label>
    <input type="text" id="name" name="name">
  </div>
  
  <div class="form-group">
    <label for="email">E-mail:</label>
    <input type="email" id="email" name="email">
  </div>
  
  <button type="submit">Küldés</button>
</form>

Magyarázat: Biztosítja, hogy a gombok és űrlap vezérlők átméretezik a szöveget anélkül, hogy megtörnék a kattintható területüket vagy elrendezésüket.

5. Rugalmas navigáció

<style>
nav {
  width: 100%;
  background-color: #333;
}

.nav-list {
  display: flex;
  flex-wrap: wrap; /* tördelés engedélyezése */
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-item {
  flex: 0 0 auto; /* rugalmas méretezés */
}

.nav-link {
  display: block;
  padding: 1rem;
  color: white;
  text-decoration: none;
  font-size: 1rem;
  white-space: nowrap;
}

.nav-link:hover {
  background-color: #555;
}

/* Kis képernyőkön függőleges elrendezés */
@media (max-width: 768px) {
  .nav-list {
    flex-direction: column;
  }
}
</style>

<nav>
  <ul class="nav-list">
    <li class="nav-item"><a href="/" class="nav-link">Főoldal</a></li>
    <li class="nav-item"><a href="/termekek" class="nav-link">Termékek</a></li>
    <li class="nav-item"><a href="/szolgaltatasok" class="nav-link">Szolgáltatások</a></li>
    <li class="nav-item"><a href="/kapcsolat" class="nav-link">Kapcsolat</a></li>
  </ul>
</nav>

Rossz gyakorlatok

Rögzített pixel méretek használata szöveghez

<style>
p {
  font-size: 14px; /* rögzített méret megakadályozza a skálázást */
}
</style>

Probléma: Ez miatt a szöveg kicsi és olvashatatlan maradhat nagyításkor.

Overflow:hidden beállítása konténereken

<style>
.box {
  overflow: hidden; /* levágja a nagyított szöveget */
  height: 100px;
}
</style>

Probléma: Ez elrejti a tartalmat, amely túlnő a konténer határain.

Szöveg tördelésének megakadályozása

<style>
p {
  white-space: nowrap; /* kényszeríti a vízszintes görgetést */
}
</style>

Probléma: A nagyított szöveg levágódik vagy vízszintes görgetést igényel.

Szövegképek használata valódi szöveg helyett

<img src="cim-szoveg.png" alt="Főcím szöveg" />

Probléma: A képekben lévő szöveg nem méretezhető át a felhasználó által, akadályozva az akadálymentességet.

Rögzített magasságú konténerek

<style>
.content-box {
  height: 200px; /* rögzített magasság */
  overflow: hidden;
}
</style>

Probléma: A nagyított szöveg nem fér el a rögzített magasságú konténerben.

Források

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