WCAG 1.2.5: Audiodeskrypcja (nagranie)

Co Oznacza Ta Zasada

\n

WCAG 1.2.5 — Opis audio (nagrania) to kryterium sukcesu na poziomie AA w ramach Zasady 1: Postrzegalność. Wymaga ono, aby dla wszystkich nagranych wcześniej zsynchronizowanych mediów zawierających wideo był zapewniony opis audio. Opis audio to ścieżka narracji dodana do głównej ścieżki dźwiękowej wideo, która opisuje istotne informacje wizualne — takie jak działania, zmiany scen, tekst na ekranie, wyraz twarzy i inne elementy wizualne — które nie są przekazywane przez istniejący dialog lub dźwięk.

\n

Kryterium dotyczy mediów zsynchronizowanych, zdefiniowanych przez WCAG jako treści łączące ścieżki audio i wideo zsynchronizowane ze sobą lub z interaktywnymi komponentami zależnymi od czasu. Obejmuje to samouczki wideo, filmy instruktażowe, nagrane webinary, filmy promocyjne, demonstracje produktów i serwisy informacyjne. Nie dotyczy treści wyłącznie dźwiękowych, treści wyłącznie wideo (które są osobno ujęte w 1.2.1) ani transmisji wideo na żywo (które, jeśli w ogóle, są objęte 1.2.6 na poziomie AAA).

\n

Spełnienie kryterium wymaga, aby dla każdego nagranego wcześniej wideo z dźwiękiem istniała albo dodatkowa ścieżka opisu audio, którą użytkownik może włączyć, albo rozszerzona wersja wideo z opisem audio, w której wstawiono pauzy, aby narrator miał wystarczająco dużo czasu na opisanie złożonych treści wizualnych. Alternatywnie, jeśli istniejąca ścieżka dźwiękowa już w pełni przekazuje wszystkie informacje wizualne obecne w wideo — to znaczy nic istotnego nie dzieje się wizualnie, co nie byłoby opisane w istniejącej narracji lub dialogu — wówczas dodatkowy opis audio nie jest wymagany.

\n

Niespełnienie kryterium ma miejsce, gdy informacje wizualne kluczowe dla zrozumienia treści wideo są przedstawione wyłącznie w ścieżce obrazu, bez odpowiadającego im opisu słownego. Na przykład film szkoleniowy, który pokazuje prezentera klikającego kolejne kroki w oprogramowaniu na ekranie, a jednocześnie mówiącego jedynie „kliknij tutaj, a następnie wybierz tę opcję”, nie spełnia tego kryterium, ponieważ niewidomy użytkownik słuchający ścieżki dźwiękowej nie ma możliwości zrozumienia, który element interfejsu jest klikany ani co jest wybierane.

\n

Istnieje jeden ważny oficjalny wyjątek: jeśli dane medium samo w sobie jest multimedialną alternatywą dla tekstu — to znaczy wideo zostało przygotowane specjalnie jako dostępny odpowiednik dokumentu tekstowego — i jest to wyraźnie oznaczone, wówczas opis audio nie jest wymagany dla tej treści.

\n\n

Dlaczego To Jest Ważne

\n

Opis audio jest przede wszystkim wymagany ze względu na użytkowników, którzy są niewidomi lub mają znaczne zaburzenia widzenia. Według Światowej Organizacji Zdrowia około 2,2 miliarda osób na świecie ma jakąś formę upośledzenia wzroku. Dla tych użytkowników domyślne doświadczenie wideo bez opisu audio może być dezorientujące lub całkowicie nieinformacyjne, gdy narracja zależy od kontekstu wizualnego. Niewidomy użytkownik polegający na czytniku ekranu może wykryć, że na stronie znajduje się wideo, ale bez opisu audio usłyszy jedynie dialog lub dźwięki otoczenia, które zostały nagrane — pozostawiając luki, które mogą sprawić, że treść będzie bez znaczenia lub wprowadzi w błąd.

\n

Rozważmy konkretny scenariusz z życia: turecki bank publikuje samouczek wideo pokazujący, jak skonfigurować uwierzytelnianie dwuskładnikowe w aplikacji mobilnej. Wideo pokazuje po kolei każdy ekran aplikacji, a narrator mówi rzeczy w rodzaju „teraz stuknij ikonę ustawień” lub „zobaczysz komunikat potwierdzający”. Bez opisu audio niewidomy klient korzystający z czytnika ekranu nie może ustalić, gdzie wizualnie znajduje się ikona ustawień, co zawiera komunikat potwierdzający ani jak wyglądają ekrany. W praktyce jest wykluczony z samodzielnego korzystania z samouczka i może być zmuszony zadzwonić do działu obsługi klienta — co wiąże się z tarciami, kosztami i gorszym doświadczeniem użytkownika.

\n

Poza użytkownikami całkowicie niewidomymi, opis audio przynosi korzyści także osobom z niepełnosprawnościami poznawczymi, które mogą łatwiej przetwarzać informacje, gdy są one opisywane słownie oprócz prezentacji wizualnej. Może on również pomagać użytkownikom w środowiskach wyłącznie dźwiękowych, którzy nie mogą patrzeć na ekran, na przykład podczas prowadzenia samochodu, lub użytkownikom, którzy mają trudności z wystarczająco szybkim czytaniem tekstu na ekranie pojawiającego się w wideo.

\n

Z punktu widzenia SEO i możliwości odnalezienia treści, materiały wideo zawierające transkrypcje lub skrypty opisów dostarczają dodatkowego tekstu, który wyszukiwarki mogą indeksować, co potencjalnie poprawia pozycję dla odpowiednich zapytań. Co ważniejsze, zapewnienie opisu audio sygnalizuje zarówno użytkownikom, jak i regulatorom, że Twoja platforma poważnie traktuje inkluzywność — co w wielu krajach staje się coraz częściej oczekiwaniem biznesowym i prawnym.

\n\n

Powiązane Zasady Axe-core

\n

WCAG 1.2.5 wymaga ręcznego testowania. Narzędzia automatyczne, takie jak axe-core, nie są w stanie programowo określić, czy opis audio obecny w wideo jest poprawny, wystarczający lub sensowny — taka ocena wymaga recenzenta, który może zarówno obejrzeć wideo, jak i ocenić, czy wszystkie informacje wizualne są przekazane w dźwięku. Nie istnieje zasada axe-core, która mogłaby automatycznie oznaczyć brakującą lub niewystarczającą ścieżkę opisu audio.

\n

\n
• Wymagana ręczna weryfikacja — audyt treści wizualnych: Tester musi obejrzeć całe wideo z wyłączonym ekranem (lub z włączoną wyłącznie ścieżką opisu audio, jeśli jest dostępna) i ocenić, czy wszystkie informacje dostępne tylko wizualnie — w tym tekst na ekranie, działania mówcy, zmiany scen, wykresy, diagramy i sygnały niewerbalne — są odpowiednio przekazane. Narzędzia automatyczne nie potrafią przeanalizować semantycznego znaczenia klatki wideo ani ocenić, czy narracja odpowiada temu, co jest pokazane wizualnie.
\n
• Wymagana ręczna weryfikacja — wykrywanie ścieżek: Choć axe-core może sprawdzić obecność elementu <track> z kind='descriptions' w elemencie <video>, nie może zweryfikować, czy plik ścieżki opisów faktycznie zawiera sensowne i dokładne opisy. Wideo może mieć ścieżkę opisów, która jest pusta, zawiera bezsensowny tekst wygenerowany maszynowo lub po prostu nie jest zsynchronizowana — wszystkie te przypadki przeszłyby automatyczne wykrywanie, ale w praktyce nie spełniałyby kryterium.
\n
• Wymagana ręczna weryfikacja — sprawdzenie alternatywnej wersji: Niektóre implementacje zapewniają opis audio, oferując osobny adres URL lub wersję wideo z opisem wbudowanym w główną ścieżkę dźwiękową. Narzędzia automatyczne nie mają możliwości wykrycia istnienia ani przejścia do alternatywnej wersji zasobu wideo podlinkowanej w innym miejscu na stronie.
\n

\n\n

Jak Testować

\n

\n
1. Zidentyfikuj wszystkie nagrane wcześniej media zsynchronizowane na stronie. Przeskanuj stronę w poszukiwaniu elementów <video>, osadzonych iframe (YouTube, Vimeo, odtwarzacze zewnętrzne) oraz wszelkich niestandardowych implementacji odtwarzaczy wideo. Zanotuj każde wideo, które zawiera zarówno ścieżkę audio, jak i wideo oraz jest nagrane wcześniej, a nie transmitowane na żywo.
\n
2. Uruchom automatyczne skanowanie za pomocą axe DevTools lub Lighthouse. Otwórz narzędzia deweloperskie przeglądarki, uruchom axe DevTools na stronie i przefiltruj wyniki pod kątem zasad związanych z elementami wideo lub multimedialnymi. Automatyczne skany mogą ujawnić brakujące elementy <track> lub role ARIA w niestandardowych odtwarzaczach wideo, ale nie potwierdzą adekwatności opisu audio. Traktuj wyniki automatyczne jedynie jako punkt wyjścia.
\n
3. Obejrzyj każde wideo z zasłoniętym ekranem lub zamkniętymi oczami. Słuchaj wyłącznie dźwięku — w tym ewentualnej ścieżki opisu audio, jeśli jest dostępna. Zadaj sobie pytanie: czy każda istotna informacja wizualna jest przekazana za pomocą dźwięku? Czy możesz śledzić całą narrację, zrozumieć wszystkie działania na ekranie i zidentyfikować cały wyświetlany tekst oraz grafiki wyłącznie na podstawie dźwięku?
\n
4. Sprawdź obecność ścieżki opisu audio. Sprawdź w kontrolkach odtwarzacza wideo, czy istnieje przycisk lub menu umożliwiające włączenie opisu audio. W przypadku wideo HTML5 sprawdź DOM pod kątem elementu <track kind='descriptions'>. Włącz ścieżkę opisów i upewnij się, że odtwarza zsynchronizowaną, dokładną narrację treści wizualnych.
\n
5. Sprawdź alternatywną wersję z opisem. Poszukaj wyraźnie oznaczonego linku lub przycisku obok wideo z napisem w rodzaju „Obejrzyj z opisem audio” lub „Wersja z opisem audio”. Przejdź pod ten link i upewnij się, że alternatywna wersja zawiera dokładny, kompletny opis audio wbudowany w ścieżkę dźwiękową.
\n
6. Przetestuj z czytnikiem ekranu. Korzystając z NVDA z Firefoxem, VoiceOver z Safari lub JAWS z Chrome, przejdź do elementu wideo. Upewnij się, że czytnik ekranu ogłasza kontrolkę wideo i wszelkie powiązane opcje ścieżki opisu. Odtwórz wideo i sprawdź, czy ścieżka opisu jest słyszalna i zsynchronizowana. Upewnij się, że czytnik ekranu nie wycisza ani nie zakłóca dźwięku opisu.
\n
7. Oceń przypadek wyjątku. Jeśli wideo jest przedstawione jako multimedialna alternatywa dla dokumentu tekstowego, upewnij się, że jest to oznaczone jako takie bezpośrednio obok wideo. Jeśli jest poprawnie oznaczone i w pełni reprezentuje tę samą treść co tekst, opis audio nie jest wymagany — ale zweryfikuj, że to oznaczenie jest obecne i jednoznaczne.
\n

\n\n

Jak Naprawić

\n\n

Wideo bez ścieżki opisu audio — Niepoprawne

\n

<!-- A training video with significant visual content and no audio description -->\n<video controls width='800'>\n  <source src='training-video.mp4' type='video/mp4'>\n  <track kind='subtitles' src='subtitles-en.vtt' srclang='en' label='English'>\n</video>\n<!-- Fails 1.2.5: subtitles are present but no descriptions track exists.\n     Visual-only information in the video is inaccessible to blind users. -->

\n\n

Wideo z dodaną ścieżką opisu audio — Poprawne

\n

<!-- A training video with an audio description track provided -->\n<video controls width='800'>\n  <source src='training-video.mp4' type='video/mp4'>\n  <track kind='subtitles' src='subtitles-en.vtt' srclang='en' label='English'>\n  <!-- Audio description track added with kind='descriptions' -->\n  <track kind='descriptions' src='audio-description-en.vtt' srclang='en' label='Audio Description (English)'>\n</video>\n<!-- Passes 1.2.5: screen readers and description-aware players can\n     activate the descriptions track to narrate visual content for blind users. -->

\n\n

Osadzone wideo zewnętrzne bez alternatywy z opisem — Niepoprawne

\n

<!-- A YouTube embed with no accessible described alternative -->\n<iframe\n  width='560'\n  height='315'\n  src='https://www.youtube.com/embed/VIDEOID'\n  title='Product Demo'\n  allowfullscreen>\n</iframe>\n<!-- Fails 1.2.5: if the YouTube video itself does not have an audio\n     description track uploaded, there is no way for blind users to\n     access visual-only content in the video. -->

\n\n

Osadzone wideo z wyraźnie oznaczoną alternatywą z opisem — Poprawne

\n

<!-- A YouTube embed accompanied by a link to an audio described version -->\n<figure>\n  <iframe\n    width='560'\n    height='315'\n    src='https://www.youtube.com/embed/VIDEOID'\n    title='Product Demo'\n    allowfullscreen>\n  </iframe>\n  <figcaption>\n    Product Demo — visual walkthrough of the onboarding flow.\n    <!-- Alternative described version linked directly below the video -->\n    <a href='https://www.youtube.com/watch?v=DESCRIBED_VIDEOID'>\n      Watch the audio described version of this video\n    </a>\n  </figcaption>\n</figure>\n<!-- Passes 1.2.5: a clearly labeled alternative with audio description\n     is provided, allowing blind users to access the same content. -->

\n\n

Niestandardowy odtwarzacz wideo bez przełącznika opisu — Niepoprawne

\n

<!-- Custom video player with no mechanism to enable audio description -->\n<div class='video-player' role='region' aria-label='Product Tutorial'>\n  <video id='tutorial-video'>\n    <source src='tutorial.mp4' type='video/mp4'>\n  </video>\n  <div class='controls'>\n    <button id='play-pause'>Play</button>\n    <button id='mute'>Mute</button>\n  </div>\n</div>\n<!-- Fails 1.2.5: no descriptions track, no AD toggle, no alternative. -->

\n\n

Niestandardowy odtwarzacz wideo z przełącznikiem opisu audio — Poprawne

\n

<!-- Custom video player with accessible audio description toggle -->\n<div class='video-player' role='region' aria-label='Product Tutorial'>\n  <video id='tutorial-video'>\n    <source src='tutorial.mp4' type='video/mp4'>\n    <!-- Descriptions track linked; player JS activates it on toggle -->\n    <track id='desc-track' kind='descriptions' src='tutorial-desc.vtt'\n           srclang='en' label='Audio Description'>\n  </video>\n  <div class='controls'>\n    <button id='play-pause'>Play</button>\n    <button id='mute'>Mute</button>\n    <!-- Accessible toggle button for audio description -->\n    <button id='ad-toggle' aria-pressed='false'\n            aria-label='Toggle audio description'>\n      Audio Description\n    </button>\n  </div>\n</div>\n<!-- Passes 1.2.5: a descriptions track is present and the custom player\n     exposes an accessible toggle so users can enable it. Player JS\n     must set aria-pressed='true' when activated and enable the track. -->

\n\n

Typowe Błędy

\n

\n\n

(Content truncated due to token limit — please retry this article.)