1.2.1 - Hang és videó alternatívák

Kategória: 1. Érzékelhető (Perceivable) Irányelv: 1.2. Időalapú média Szint: A

Röviden a szabványpontról

A WCAG 1.2.1 (Audio-only and Video-only – Prerecorded) előírja, hogy minden előre felvett, csak hangot vagy csak videót tartalmazó médiához egyenértékű szöveges alternatívát kell biztosítani. 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 vagy egyszerűbb nyelv.

A szabvány az alábbi tartalmakra vonatkozik:

Csak hang tartalom (podcastok, hangfelvételek) – szöveges átirat szükséges
Csak videó tartalom (hang nélküli videók, animációk) – leíró szöveg vagy hang leírás szükséges
Előre felvett média (élő közvetítésekre nem vonatkozik)

A cél az, hogy azok a felhasználók is hozzáférjenek a média által közvetített információhoz, akik nem képesek hallani a hangot vagy látni a videót.

Kiket érint

Elsődleges célcsoport:

Siket és nagyothalló felhasználók, akik nem érzékelik a hangtartalmat
Vak és gyengénlátó felhasználók, akik nem látják a csak videó tartalmat
Siketvak felhasználók, akiknek Braille kijelzőn kell elérniük az információt

Másodlagos előnyök:

Keresőmotorok könnyebben indexelik a szöveges tartalmat
Zajos környezetben vagy ahol nem lehet hangot lejátszani
Nyelvtanulók számára hasznos a szöveges verzió
Gyorsabb információszerzés (olvasás gyorsabb lehet, mint a lejátszás)

Tesztelés

Ellenőrizd, hogy minden csak hang fájlhoz tartozik pontos, teljes szöveges átirat
Győződj meg róla, hogy minden csak videó fájlhoz tartozik részletes szöveges leírás
Használj képernyőolvasót, hogy ellenőrizd a szöveges alternatíva elérhetőségét
Manuálisan ellenőrizd, hogy az átirat vagy leírás ugyanazt az információt közvetíti, mint a média
Használj automatizált akadálymentességi eszközöket (pl. axe DevTools) a hiányzó alternatívák feltérképezésére

Jó megoldások

Podcast szöveges átirattal

A hanganyag mellé teljes átiratot biztosítunk, amely tartalmazza a beszélő nevét, a pontos szöveget és a fontos hangeffekteket is.

<audio controls>
  <source src="podcast-epizod.mp3" type="audio/mpeg">
  A böngésző nem támogatja az audio elemet.
</audio>

<section aria-labelledby="transcript-heading">
  <h2 id="transcript-heading">Podcast átirat</h2>
  <p><strong>Kovács János:</strong> Üdvözlöm hallgatóinkat...</p>
  <p><em>[háttérzene halkulása]</em></p>
  <p><strong>Nagy Anna:</strong> Köszönöm a meghívást...</p>
</section>

Hang nélküli videó leírással

A vizuális információt szöveges leírással tesszük hozzáférhetővé. A leírás tartalmazza a fontos vizuális elemeket, műveleteket és szöveges információkat.

<video controls>
  <source src="animacio.mp4" type="video/mp4">
  A böngésző nem támogatja a video elemet.
</video>

<section aria-labelledby="video-description">
  <h2 id="video-description">Videó leírás</h2>
  <p>Az animáció egy forgó földgömböt mutat, amelyen kiemelt 
  kereskedelmi útvonalak láthatók a kontinensek között. 
  A kamera lassan körbejár a földgömb körül, miközben különböző 
  színű vonalak jelzik a tengeri és légi útvonalakat.</p>
</section>

Külön oldalra linkelt átirat

Ha az átirat túl hosszú, külön oldalra helyezhetjük, de a link egyértelműen jelzett és könnyen megtalálható legyen.

<audio controls>
  <source src="hosszu-eloadas.mp3" type="audio/mpeg">
</audio>

<p>
  <a href="eloadas-atirat.html" aria-describedby="transcript-desc">
    Teljes szöveges átirat
  </a>
  <span id="transcript-desc"> - Az előadás teljes szövege külön oldalon</span>
</p>

Interaktív videó elemekkel

Ha a videó interaktív elemeket tartalmaz, azokat is le kell írni a szöveges alternatívában.

<video controls>
  <source src="interaktiv-demo.mp4" type="video/mp4">
</video>

<details>
  <summary>Videó interakciók leírása</summary>
  <p>A videó egy weboldalon való navigációt mutat:</p>
  <ol>
    <li>Kattintás a főmenü "Termékek" gombján</li>
    <li>Megjelenik egy legördülő menü 5 opcióval</li>
    <li>Az egér a "Laptopok" opcióra mutat</li>
    <li>Kattintás után megnyílik a laptopok kategória oldala</li>
  </ol>
</details>

Rossz megoldások

<!-- Hiányzó átirat csak hang tartalomnál -->
<audio controls>
  <source src="fontos-kozlemeny.mp3" type="audio/mpeg">
</audio>
<!-- Nincs szöveges átirat! -->

<!-- Hiányos átirat -->
<audio controls>
  <source src="riport.mp3" type="audio/mpeg">
</audio>
<p>Átirat: Beszélgetés a klímaváltozásról.</p>
<!-- Túl általános, nem tartalmazza a tényleges tartalmat! -->

<!-- Rejtett vagy nehezen megtalálható átirat -->
<audio controls>
  <source src="podcast.mp3" type="audio/mpeg">
</audio>
<details style="font-size: 0.8em; color: #999;">
  <summary>Egyéb</summary>
  <p>Itt van az átirat...</p>
</details>
<!-- Nem egyértelmű, hogy átirat van! -->

<!-- Csak videó tartalom leírás nélkül -->
<video controls>
  <source src="bemutato-animacio.mp4" type="video/mp4">
</video>
<!-- Nincs leírás a vizuális tartalomról! -->

Források

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