WCAG 1.2.5: Sesli Betimleme (Önceden Kaydedilmiş)

Bu Kuralın Anlamı

\n

WCAG 1.2.5 — Sesli Betimleme (Önceden Kaydedilmiş), İlke 1: Algılanabilir başlığı altında Seviye AA başarı ölçütüdür. Bu ölçüt, video içeren tüm önceden kaydedilmiş eşzamanlı ortamlar için sesli betimleme sağlanmasını gerektirir. Sesli betimleme, bir videonun birincil sesine eklenen ve mevcut diyalog veya seste aktarılmayan önemli görsel bilgileri — eylemler, sahne değişiklikleri, ekrandaki metinler, yüz ifadeleri ve diğer görsel öğeler gibi — anlatan bir anlatım parçasıdır.

\n

Ölçüt, WCAG tarafından ses ve video parçalarının birbirleriyle veya zamana bağlı etkileşimli bileşenlerle eşzamanlı olarak birleştirildiği içerik olarak tanımlanan eşzamanlı ortama uygulanır. Buna video eğitimleri, öğretici filmler, kaydedilmiş web seminerleri, tanıtım videoları, ürün demoları ve haber bültenleri dahildir. Yalnızca ses içeren içeriğe, yalnızca video içeren içeriğe (1.2.1 tarafından ayrı ele alınır) veya canlı video akışlarına (varsa, Seviye AAA’daki 1.2.6 tarafından kapsanır) uygulanmaz.

\n

Başarılı sayılmak için, ses içeren her önceden kaydedilmiş video için, kullanıcının etkinleştirebileceği ek bir sesli betimleme parçası bulunmalı veya anlatıcının karmaşık görsel içeriği betimlemesi için yeterli zaman tanımak amacıyla duraklamalar eklenmiş genişletilmiş sesli betimleme sürümü sağlanmalıdır. Alternatif olarak, mevcut ses parçası videoda yer alan tüm görsel bilgileri zaten tam olarak aktarıyorsa — yani mevcut anlatım veya diyalogda betimlenmeyen anlamlı hiçbir görsel olay gerçekleşmiyorsa — ek bir sesli betimleme gerekmez.

\n

Başarısızlık, videonun anlaşılması için kritik olan görsel bilgilerin yalnızca görüntü parçası üzerinden sunulup buna karşılık gelen hiçbir sözlü betimleme bulunmadığında ortaya çıkar. Örneğin, ekranda bir sunucunun yazılım adımlarını tıklayarak ilerlettiği, ancak yalnızca “buraya tıklayın, sonra bu seçeneği seçin” dediği bir eğitim videosu bu ölçütte başarısız olur; çünkü sesi dinleyen kör bir kullanıcı, hangi arayüz öğesinin tıklandığını veya neyin seçildiğini anlayamaz.

\n

Resmî olarak önemli bir istisna vardır: Eğer ortamın kendisi metin için bir ortam alternatifi ise — yani bir video, bir metin belgesine erişilebilir eşdeğer olarak özel olarak üretilmişse — ve bu durum açıkça etiketlenmişse, o içerik için sesli betimleme gerekli değildir.

\n\n

Neden Önemlidir

\n

Sesli betimleme öncelikle kör veya ciddi görme bozukluğu olan kullanıcılar için bir gerekliliktir. Dünya Sağlık Örgütü’ne göre dünya genelinde yaklaşık 2,2 milyar kişinin bir tür görme bozukluğu vardır. Bu kullanıcılar için, sesli betimleme olmayan bir videonun varsayılan deneyimi, anlatı görsel bağlama dayandığında kafa karıştırıcı veya tamamen bilgi vermez olabilir. Ekran okuyucuya güvenen kör bir kullanıcı, sayfada bir video olduğunu algılayabilir, ancak sesli betimleme olmadan yalnızca kaydedilmiş diyalog veya ortam seslerini duyar — bu da içeriği anlamsız veya yanıltıcı hâle getirebilecek boşluklar bırakır.

\n

Somut bir gerçek dünya senaryosunu düşünün: Bir Türk bankası, mobil uygulamasında iki faktörlü kimlik doğrulamayı nasıl kuracağını anlatan bir video eğitim yayınlıyor. Video, uygulamanın her ekranını sırayla gösteriyor ve anlatıcı “şimdi ayarlar simgesine dokunun” veya “bir onay mesajı göreceksiniz” gibi şeyler söylüyor. Sesli betimleme olmadan, ekran okuyucu kullanan kör bir müşteri ayarlar simgesinin ekranda nerede bulunduğunu, onay mesajında ne yazdığını veya ekranların nasıl göründüğünü belirleyemez. Bu kullanıcı, self-servis eğitimden fiilen dışlanmış olur ve müşteri hizmetlerini aramak zorunda kalabilir — bu da sürtünme, maliyet ve zayıf bir kullanıcı deneyimi anlamına gelir.

\n

Tamamen kör olmayan kullanıcıların ötesinde, sesli betimleme, bilgiyi görsel olarak gösterilmesine ek olarak sözlü olarak betimlendiğinde işlemeyi daha kolay bulan bilişsel engelli kişiler için de faydalıdır. Ayrıca, sürüş sırasında olduğu gibi ekranı göremedikleri yalnızca sesli ortamlarda bulunan kullanıcılar veya videoda beliren ekrandaki metni yeterince hızlı okuyamayan kullanıcılar için de yararlı olabilir.

\n

SEO ve bulunabilirlik açısından bakıldığında, transkriptler veya betimleme senaryoları içeren video içeriği, arama motorlarının dizine ekleyebileceği ek metin sağlar ve bu da ilgili sorgular için sıralamayı potansiyel olarak iyileştirebilir. Daha da önemlisi, sesli betimleme sunmak, platformunuzun kapsayıcılığı ciddiye aldığını hem kullanıcılara hem de düzenleyicilere gösterir — ki bu, birçok pazarda giderek artan bir iş ve yasal beklentidir.

\n\n

İlgili Axe-core Kuralları

\n

WCAG 1.2.5, manuel test gerektirir. axe-core gibi otomatik araçlar, bir videoda bulunan sesli betimlemenin doğru, yeterli veya anlamlı olup olmadığını programatik olarak belirleyemez — bu değerlendirme, videoyu izleyebilen ve tüm görsel bilgilerin ses yoluyla aktarılıp aktarılmadığını değerlendirebilen insan incelemesi gerektirir. Eksik veya yetersiz bir sesli betimleme parçasını otomatik olarak işaretleyebilecek bir axe-core kuralı yoktur.

\n

\n
• Manuel inceleme gerekli — görsel içerik denetimi: Bir insan testçi, ekran sessize alınmış şekilde (veya yalnızca sesli betimleme parçası etkinleştirilmişken) videonun tamamını izlemeli ve ekrandaki metin, konuşmacı hareketleri, sahne değişiklikleri, grafikler, diyagramlar ve sözsüz ipuçları dahil olmak üzere yalnızca görsel olan tüm bilgilerin yeterince aktarılıp aktarılmadığını değerlendirmelidir. Otomatik araçlar, bir video karesinin anlamsal içeriğini çözemediği gibi, anlatımın görsel olarak gösterilenle örtüşüp örtüşmediğini de değerlendiremez.
\n
• Manuel inceleme gerekli — parça tespiti: axe-core, bir <video> öğesi üzerinde kind='descriptions' özelliğine sahip bir <track> öğesinin varlığını kontrol edebilse de, betimleme parçası dosyasının gerçekten anlamlı ve doğru betimlemeler içerip içermediğini doğrulayamaz. Bir videoda boş, makine tarafından üretilmiş anlamsız veya senkronize olmayan bir betimleme parçası bulunabilir — bunların tümü otomatik tespitten geçer, ancak pratikte ölçütte başarısız olur.
\n
• Manuel inceleme gerekli — alternatif sürüm kontrolü: Bazı uygulamalarda sesli betimleme, betimlemenin ana ses parçasına gömülü olduğu ayrı bir URL veya video sürümü sunularak sağlanır. Otomatik araçların, sayfanın başka bir yerinde bağlantısı verilen bir video varlığının alternatif sürümünün varlığını tespit etme veya ona gitme imkânı yoktur.
\n

\n\n

Nasıl Test Edilir

\n

\n
1. Sayfadaki tüm önceden kaydedilmiş eşzamanlı ortamları belirleyin. Sayfayı <video> öğeleri, gömülü iframe’ler (YouTube, Vimeo, üçüncü taraf oynatıcılar) ve özel video oynatıcı uygulamaları için tarayın. Hem ses hem video parçası içeren ve canlı değil, önceden kaydedilmiş olan her videoyu not edin.
\n
2. axe DevTools veya Lighthouse ile otomatik bir tarama çalıştırın. Tarayıcının geliştirici araçlarını açın, sayfada axe DevTools’u çalıştırın ve sonuçları video veya ortam öğeleriyle ilgili kurallara göre filtreleyin. Otomatik taramalar, eksik <track> öğelerini veya özel video oynatıcılardaki ARIA rollerini ortaya çıkarabilir, ancak sesli betimlemenin yeterliliğini doğrulamaz. Otomatik sonuçları yalnızca bir başlangıç noktası olarak değerlendirin.
\n
3. Her videoyu ekranı kapatarak veya gözleriniz kapalı izleyin. Sağlanan herhangi bir sesli betimleme parçası dahil yalnızca sesi dinleyin. Kendinize şunu sorun: Anlamlı görsel bilgilerin her bir parçası ses yoluyla aktarılıyor mu? Yalnızca sesten, anlatının tamamını takip edebiliyor, ekrandaki tüm eylemleri anlayabiliyor ve gösterilen tüm metin ve grafikleri tanımlayabiliyor musunuz?
\n
4. Sesli betimleme parçasını kontrol edin. Video oynatıcı kontrollerinde sesli betimlemeyi etkinleştiren bir düğme veya menü arayın. HTML5 video için, DOM’u <track kind='descriptions'> öğesi açısından inceleyin. Betimleme parçasını etkinleştirin ve görsel içeriğin senkronize, doğru bir anlatımını sunduğunu doğrulayın.
\n
5. Betimlemeli alternatif bir sürüm olup olmadığını kontrol edin. Videonun yanında “Sesli Betimlemeli Sürümü İzleyin” veya “Sesli Betimlemeli Versiyon” gibi ifadeler içeren açıkça etiketlenmiş bir bağlantı veya düğme arayın. Bu bağlantıyı takip edin ve alternatif sürümün, ses parçasına gömülü doğru ve eksiksiz sesli betimleme içerdiğini doğrulayın.
\n
6. Bir ekran okuyucu ile test edin. Firefox ile NVDA, Safari ile VoiceOver veya Chrome ile JAWS kullanarak video öğesine gidin. Ekran okuyucunun video kontrolünü ve varsa ilgili betimleme parçası seçeneğini duyurduğunu doğrulayın. Videoyu oynatın ve betimleme parçasının duyulabilir ve senkronize olduğunu doğrulayın. Ekran okuyucunun betimleme sesini bastırmadığını veya onunla çakışmadığını kontrol edin.
\n
7. İstisna durumunu değerlendirin. Video bir metin belgesine ortam alternatifi olarak sunuluyorsa, bu durumun videonun hemen yanında etiketlenmiş olduğunu doğrulayın. Doğru şekilde etiketlenmişse ve metinle aynı içeriği tam olarak temsil ediyorsa, sesli betimleme gerekli değildir — ancak bu etiketlemenin mevcut ve açık olduğundan emin olun.
\n

\n\n

Nasıl Düzeltilir

\n\n

Sesli betimleme parçası olmayan video — Hatalı

\n

<!-- Önemli görsel içeriğe sahip ve sesli betimleme içermeyen bir eğitim videosu -->\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<!-- 1.2.5 başarısız: altyazılar mevcut ancak betimleme parçası yok.\n     Videodaki yalnızca görsel bilgiler kör kullanıcılar için erişilemez. -->

\n\n

Sesli betimleme parçası eklenmiş video — Doğru

\n

<!-- Sesli betimleme parçası sağlanan bir eğitim videosu -->\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  <!-- kind='descriptions' ile eklenmiş sesli betimleme parçası -->\n  <track kind='descriptions' src='audio-description-en.vtt' srclang='en' label='Audio Description (English)'>\n</video>\n<!-- 1.2.5 geçer: ekran okuyucular ve betimleme destekli oynatıcılar,\n     kör kullanıcılar için görsel içeriği anlatmak üzere betimleme parçasını etkinleştirebilir. -->

\n\n

Betimlemeli alternatifi olmayan gömülü üçüncü taraf video — Hatalı

\n

<!-- Erişilebilir betimlemeli alternatifi olmayan bir YouTube gömüsü -->\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<!-- 1.2.5 başarısız: YouTube videosunun kendisine sesli betimleme\n     parçası yüklenmemişse, kör kullanıcıların videodaki yalnızca görsel\n     içeriğe erişmesinin bir yolu yoktur. -->

\n\n

Açıkça etiketlenmiş betimlemeli alternatife sahip gömülü video — Doğru

\n

<!-- Sesli betimlemeli sürüme bağlantı içeren bir YouTube gömüsü -->\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 — onboarding akışının görsel tanıtımı.\n    <!-- Videonun hemen altında bağlantısı verilen betimlemeli alternatif sürüm -->\n    <a href='https://www.youtube.com/watch?v=DESCRIBED_VIDEOID'>\n      Bu videonun sesli betimlemeli sürümünü izleyin\n    </a>\n  </figcaption>\n</figure>\n<!-- 1.2.5 geçer: sesli betimleme içeren, açıkça etiketlenmiş bir alternatif\n     sağlanmıştır ve bu sayede kör kullanıcılar aynı içeriğe erişebilir. -->

\n\n

Betimleme açma/kapatma seçeneği olmayan özel video oynatıcı — Hatalı

\n

<!-- Sesli betimlemeyi etkinleştirmek için mekanizması olmayan özel video oynatıcı -->\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<!-- 1.2.5 başarısız: betimleme parçası yok, AD açma/kapatma yok, alternatif yok. -->

\n\n

Sesli betimleme açma/kapatma seçeneği olan özel video oynatıcı — Doğru

\n

<!-- Erişilebilir sesli betimleme açma/kapatma seçeneğine sahip özel video oynatıcı -->\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    <!-- Betimleme parçası bağlandı; oynatıcı JS bunu açma/kapatma ile etkinleştirir -->\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    <!-- Sesli betimleme için erişilebilir açma/kapatma düğmesi -->\n    <button id='ad-toggle' aria-pressed='false'\n            aria-label='Toggle audio description'>\n      Audio Description\n    </button>\n  </div>\n</div>\n<!-- 1.2.5 geçer: bir betimleme parçası mevcuttur ve özel oynatıcı,\n     kullanıcıların bunu etkinleştirebilmesi için erişilebilir bir açma/kapatma sunar. Oynatıcı JS,\n     etkinleştirildiğinde aria-pressed='true' olarak ayarlamalı ve parçayı etkinleştirmelidir. -->

\n\n

Yaygın Hatalar

\n

\n\n

(İçerik belirteç sınırı nedeniyle kesildi — lütfen bu makaleyi yeniden deneyin.)