1.1.1 - Nem szöveges tartalom

Kategória: 1. Érzékelhető (Perceivable) Irányelv: 1.1. Szöveges alternatívák Szint: A

Röviden a szabványpontról

A WCAG 1.1.1 (Non-text Content) előírja, hogy minden nem szöveges tartalomhoz olyan szöveges alternatívát kell biztosítani, amely ugyanazt a célt szolgálja. Ez lehetővé teszi, hogy a tartalom más formákba is átalakulhasson, mint például nagy betűs szöveg, Braille-írás, beszéd, szimbólumok vagy egyszerűbb nyelv.

A szabvány minden nem szöveges tartalomra vonatkozik, többek között:

Képek (fotók, illusztrációk, diagramok)
Ikonok, gombok és vezérlőelemek
Grafikonok és diagramok
Videók és hangfájlok
Animációk és egyéb érzékszervi tartalmak

A cél az, hogy a nem szöveges tartalom által közvetített információ vagy funkció szöveges formában is elérhető legyen, így azok a felhasználók is hozzáférhetnek ugyanahhoz az információhoz vagy elvégezhetik ugyanazt a funkciót, akik nem képesek érzékelni az eredeti tartalmat.

Kiket érint

Ez a szabványpont elsősorban a vak és gyengénlátó felhasználóknak segít, akik képernyőolvasót használnak. De hasznos lehet akkor is, ha:

Lassú internetkapcsolat miatt a képek nem töltődnek be
A felhasználó letiltotta a képek megjelenítését
Keresőmotorok indexelik az oldalt
Kognitív nehézségekkel élők számára a szöveges leírás segít megérteni a tartalmat

Tesztelés

Kapcsold ki a képek megjelenítését a böngészőben
Használj képernyőolvasót (NVDA, JAWS)
Vizsgáld meg a HTML kódot, hogy minden képnek van-e alt attribútuma
Böngésző fejlesztői eszközökkel ellenőrizd az akadálymentességi fát

Jó megoldások

Informatív képek

<!-- Leíró alt szöveg, ami közli a kép információtartalmát -->
<img src="kutya.jpg" alt="Barna labrador ül a parkban">

<!-- Kontextusba helyezett leírás -->
<img src="diagram.png" alt="Forgalom növekedés: 2022-ben 40%, 2023-ban 65%">

Dekoratív képek

A dekoratív képek csak vizuális díszítést szolgálnak, információt nem hordoznak. Ezekhez mindig üres alt attribútumot használj:

<!-- Üres alt attribútum dekoratív képeknél -->
<img src="diszito-vonal.png" alt="">
<img src="hatter-minta.jpg" alt="">

<!-- CSS háttérként még jobb megoldás -->
<div class="decorative-border"></div>

Az üres alt=”” jelzi a képernyőolvasónak, hogy a képet figyelmen kívül hagyhatja. Használd ezt, ha a kép:

Csak díszítés (vonalak, keretek, minták)
Már leírt információt ismétel meg vizuálisan
Nem ad hozzá értéket a tartalomhoz
Csak az oldal vizuális megjelenését szolgálja

Komplex képek

<!-- Rövid alt + hosszú leírás -->
<figure>
  <img src="statisztika.png" alt="2023-as értékesítési adatok" 
       aria-describedby="stats-desc">
  <figcaption id="stats-desc">
    A grafikon negyedéves bontásban mutatja az értékesítést:
    Q1: 100 ezer Ft, Q2: 150 ezer Ft, Q3: 130 ezer Ft, Q4: 200 ezer Ft
  </figcaption>
</figure>

Funkcionális képek

<!-- A funkciót írja le, nem a képet -->
<button type="button">
  <img src="print-icon.svg" alt="Oldal nyomtatása">
</button>

<!-- Link esetén -->
<a href="home.html">
  <img src="logo.png" alt="Kezdőlap">
</a>

Rossz megoldások

<!-- Hiányzó alt attribútum -->
<img src="fontos-info.jpg">

<!-- Értelmetlen alt szöveg -->
<img src="ceo.jpg" alt="kép">
<img src="grafikon.png" alt="grafikon.png">

<!-- Túl hosszú alt szöveg -->
<img src="team.jpg" alt="A képen látható a teljes csapatunk a 2023-as 
karácsonyi partin, ahol mindenki piros pulóvert visel és mosolyog, 
a háttérben karácsonyfa látható díszekkel és ajándékokkal...">

<!-- Dekoratív képnél felesleges leírás -->
<img src="diszites.gif" alt="csillogó animált díszítő elem">

Források

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