WCAG 1.2.2 · A Seviyesi · EN 301 549 9.1.2.2

Altyazılar (Önceden Kaydedilmiş)

Önceden kaydedilmiş sesli videoların sesi için altyazı sunulmasını ister. Böylece sağır ve işitme güçlüğü olan kullanıcılar konuşmaları ve anlam taşıyan sesleri senkronize bir metin olarak alır.

Kısaca

Bir videoyu duyamayan kişi, ses kanalı metin olarak da sunulmadıkça ondan hiçbir şey alamaz. Altyazı, sesi görüntüyle birlikte senkronize bir metne çevirir: kim konuşuyor, ne söyleniyor ve hangi sesler önemli.

Bu kriter, senkronize medyadaki, yani ses kanalı olan videolardaki önceden kaydedilmiş tüm sesler için altyazı ister. Altyazı, sözlerin dökümünden fazlasıdır. Konuşmacının kim olduğunu ve müzik, kahkaha, kapının kapanması ya da alarm gibi konuşma dışı anlamlı sesleri de içerir.

Neleri kapsar?

  • Önceden kaydedilmiş sesli videolar: Ürün videoları, eğitim anlatımları, web semineri kayıtları, eğitim kursları, röportajlar ve tanıtım klipleri; nereye gömülü olurlarsa olsunlar.
  • Konuşma: Tüm diyalog ve anlatım. Konuşmacı görüntüden anlaşılmıyorsa kim olduğu belirtilir.
  • Anlam taşıyan sesler: Bilgi ya da duygu taşıyan müzik veya ses efektleri; örneğin "[telefon çalıyor]", "[gergin müzik]" veya "[alkış]".
  • Altyazı ve çeviri altyazısı farkı: Çeviri altyazıları genellikle duyabilen izleyiciler için diyalogu çevirir ya da yazıya döker. Altyazı ise konuşma dışı sesleri de anlatır. Yalnızca sözleri tekrarlayan bir altyazı kanalı kriteri karşılamayabilir.
  • Açık ve kapalı altyazı: Görüntüye gömülü (açık) altyazı da, açılıp kapatılabilen (kapalı) altyazı da kriteri karşılar. Kapalı altyazı genellikle daha iyidir, çünkü kullanıcı biçimini değiştirebilir ve dil seçebilir.
  • İstisna: Medya, aynı sayfadaki bir metnin alternatifiyse ve bu açıkça belirtilmişse altyazı gerekmez.
  • Kapsam dışı notlar: Sadece ses ve sadece video içerikleri 1.2.1, canlı altyazı 1.2.4, video görüntüsü için sesli betimleme ise 1.2.3 ve 1.2.5 kriterlerinin konusudur.

Kimleri etkiler?

Sağır ve işitme güçlüğü olan kullanıcılar, söyleneni ve duyulanı takip etmek için altyazıya güvenir. Altyazı ayrıca sessiz izleyenlere (kalabalık bir yerde, işte, gürültülü bir trende), dili ana dili olmayanlara, işitsel işlemleme ya da dikkat farklılıkları olanlara, ses kalitesi kötü ya da aksanı güçlü videoları izleyenlere de yardımcı olur. Altyazı, video içeriğini aranabilir ve alıntılanabilir de kılar.

EAA ve EN 301 549'da

Avrupa Erişilebilirlik Yasası (Direktif (AB) 2019/882) 28 Haziran 2025'ten sonra piyasaya sunulan kapsamdaki ürün ve hizmetler için geçerlidir. Yasanın 47. gerekçesi web siteleri ve mobil uygulamalar için dört ilkeyi sayar: algılanabilirlik, işletilebilirlik, anlaşılabilirlik ve sağlamlık. Altyazı, algılanabilirliğin temel gereğidir.

Teknik karşılığı EN 301 549 standardında bulunur. Standart, WCAG 1.2.2'yi atıfla alır ve ortama göre ayrı maddelere dönüştürür. Ayrıca standardın 7. maddesi, video oynatıcıların ve teknolojilerin kendisi için gereksinimler koyar.

WCAG 1.2.2'nin EN 301 549'daki karşılıkları
MaddeOrtamNe ister?
9.1.2.2Web sayfalarıWeb içeriğinin WCAG 1.2.2 kriterini karşılamasını ister.
10.1.2.2Web dışı dokümanlar (PDF, Office dosyaları)Aynı kriterin dokümanlara gömülü videoya uygulanmasını ister.
11.1.2.2Web dışı yazılım (yerel mobil uygulamalar)Ekran okuyucuyu destekleyen yazılımda kriterin karşılanmasını ister.
7.1Video teknolojileri (sesli video gösteren oynatıcılar ve yazılımlar)Oynatıcının altyazıyı gösterebilmesini, senkronize tutabilmesini, video aktarılırken koruyabilmesini ve kullanıcının görünümünü ayarlayabilmesini ister.

Madde numaraları EN 301 549'un "9. + WCAG numarası" düzenine göredir. V3.2.1'de yazılım maddesi, açık ve kapalı işlevsellik için ayrı alt maddelere bölünmüştür; 7.1 maddesi de altyazının oynatılması, senkronizasyonu, korunması ve özellikleri için alt gereksinimlere ayrılır. Kaynak gösterirken tam numaraları standarttan kontrol edin.

Standart sürümü: EN 301 549 V4.1.1 (Eylül 2026), WCAG 2.2'yi esas alan ve EAA için hazırlanan ilk sürümdür. Henüz AB Resmî Gazetesi'nde atıf almamıştır; bu nedenle EAA gereksinimlerini karşılamanın gönüllü teknik yolu olarak görülmelidir. Atıf yapıldığında EAA ile ilgili uygunluk karinesi sağlayacaktır. 1.2.2 kriterinin metni WCAG 2.1 ve 2.2'de aynıdır.

EAA bağlamında dikkat: Madde 2/4, 28 Haziran 2025'ten önce yayımlanmış önceden kaydedilmiş zamana dayalı medyayı ve şirketin kontrolü ya da finansmanı dışındaki üçüncü taraf içeriği kapsam dışında bırakır. Bu tarihten sonra yayımladığınız videolar ile yeniden yayımladığınız ya da önemli ölçüde değiştirdiğiniz eski videolar bu istisnanın dışındadır. İstisna uygulanabilecek durumlarda bile altyazı iyi bir uygulamadır ve yaygın olarak kullanılır.

Directive (EU) 2019/882, EUR-Lex, İngilizce, yeni sekmede açılır

Web için kod örnekleri

1. HTML5 videoda altyazı

WebVTT biçiminde bir altyazı dosyasıyla birlikte bir track öğesi ekleyin.

Hatalı
<video controls src="tanitim.mp4"></video>
Doğru
<video controls src="tanitim.mp4">
  <track kind="captions" src="tanitim.tr.vtt"
         srclang="tr" label="Türkçe" default>
</video>

2. Altyazı dosyasının içeriği

Altyazı, kimin konuştuğunu belirtir ve önemli sesleri anlatır. Sesin zamanlamasına uyan, kısa ve okunabilir satırlara bölünür.

Hatalı
WEBVTT

00:00:01.000 --> 00:00:09.000
tanıtıma hoş geldiniz önce ayarlar menüsünü açın
sonra güvenlik'i seçin
Doğru
WEBVTT

00:00:01.000 --> 00:00:04.000
<v Ayşe>Tanıtıma hoş geldiniz.

00:00:04.500 --> 00:00:06.000
[Kapı kapanır]

00:00:06.500 --> 00:00:09.000
<v Ayşe>Önce ayarlar menüsünü açın,
sonra Güvenlik'i seçin.

3. Üçüncü taraf platformdaki video

Gömülü video da sizin içeriğinizdir. Platforma gözden geçirilmiş bir altyazı dosyası yükleyin ve platform izin veriyorsa altyazıyı varsayılan olarak açık yapın.

Hatalı
<!-- Gözden geçirilmiş altyazı yüklenmemiş, kontrol
     edilmemiş otomatik altyazıya güveniliyor -->
<iframe src="https://www.youtube.com/embed/VIDEO_ID"
        title="Ürün turu"></iframe>
Doğru
<!-- Platforma gözden geçirilmiş altyazı dosyası yüklenmiş -->
<iframe src="https://www.youtube.com/embed/VIDEO_ID?cc_load_policy=1"
        title="Ürün turu"></iframe>

4. Özel oynatıcıda altyazı düğmesi

Kendi oynatıcınızı yapıyorsanız altyazı denetimi, adı ve durumu olan gerçek bir düğme olmalıdır. Klavyeyle ve ekran okuyucuyla çalışmalıdır.

Hatalı
<div class="cc-icon" onclick="altyaziAcKapat()"></div>
Doğru
<button type="button" id="cc" aria-pressed="false">
  Altyazı
</button>

<script>
const video = document.querySelector("video");
const track = video.textTracks[0];
const btn = document.getElementById("cc");

btn.addEventListener("click", () => {
  const acik = track.mode !== "showing";
  track.mode = acik ? "showing" : "hidden";
  btn.setAttribute("aria-pressed", String(acik));
});
</script>

5. Birden fazla dilde altyazı

Her kanala kendi dilini ve kullanıcının okuyabileceği bir etiket verin; böylece oynatıcı doğru seçeneği sunabilir.

Hatalı
<video controls src="tanitim.mp4">
  <track kind="captions" src="tanitim.tr.vtt">
  <track kind="captions" src="tanitim.en.vtt">
</video>
Doğru
<video controls src="tanitim.mp4">
  <track kind="captions" src="tanitim.tr.vtt"
         srclang="tr" label="Türkçe" default>
  <track kind="captions" src="tanitim.en.vtt"
         srclang="en" label="English">
</video>

Mobil için kod örnekleri

Yerel mobil uygulamalarda aynı kural geçerlidir. Altyazı menüsü sunan ve kullanıcının sistem ayarlarına uyan platformun kendi video oynatıcısını kullanın. Oynattığınız akışın ya da dosyanın gerçekten bir altyazı kanalı içerdiğinden emin olun.

iOS (SwiftUI)

import SwiftUI
import AVKit

struct DersVideosu: View {
    // HLS akışı bir altyazı kanalı (WebVTT veya CEA-608)
    // içermeli ve konuşma ile konuşma dışı sesi belirten
    // özelliklerle işaretlenmelidir.
    @State private var player = AVPlayer(
        url: URL(string: "https://example.com/ders.m3u8")!
    )

    var body: some View {
        // AVKit altyazı menüsünü gösterir ve "Closed Captions
        // + SDH" sistem ayarını izler.
        // appliesMediaSelectionCriteriaAutomatically değerini
        // false yapmayın.
        VideoPlayer(player: player)
            .frame(height: 220)
            .accessibilityLabel("Ders 1: Başlarken")
    }
}

Android (Jetpack Compose, Media3)

import android.net.Uri
import androidx.compose.runtime.Composable
import androidx.compose.ui.viewinterop.AndroidView
import androidx.media3.common.C
import androidx.media3.common.MediaItem
import androidx.media3.common.MimeTypes
import androidx.media3.exoplayer.ExoPlayer
import androidx.media3.ui.PlayerView

fun dersMedyaOgesi(): MediaItem {
    val altyazi = MediaItem.SubtitleConfiguration.Builder(
        Uri.parse("https://example.com/ders.tr.vtt") // Kendi dosyanız
    )
        .setMimeType(MimeTypes.TEXT_VTT)
        .setLanguage("tr")
        .setLabel("Türkçe altyazı")
        .setRoleFlags(C.ROLE_FLAG_CAPTION)
        .build()

    return MediaItem.Builder()
        .setUri("https://example.com/ders.mp4") // Kendi videonuz
        .setSubtitleConfigurations(listOf(altyazi))
        .build()
}

@Composable
fun DersVideosu(player: ExoPlayer) {
    AndroidView(factory = { context ->
        PlayerView(context).apply {
            this.player = player
            // Kontrollerde altyazı düğmesini gösterir
            setShowSubtitleButton(true)
        }
    })
}

Nasıl test edilir?

  • Altyazıyı açın: Her videoyu oynatın ve altyazıyı açın. Altyazı var mı ve denetimi kolayca bulabiliyor musunuz?
  • Sesi kapatıp izleyin: Yalnızca görüntü ve altyazıyla videonun tamamını takip edebiliyor musunuz? Eksik bir bilgi var mı?
  • Bütünlüğü kontrol edin: Tüm konuşmalar, konuşmacı adları ve anlam taşıyan sesler var mı? Alarm ya da uyarı sesi gibi önemli bir şey eksik mi?
  • Senkronizasyonu kontrol edin: Altyazılar doğru zamanda çıkıyor ve okunabilecek kadar ekranda kalıyor mu? Ekrandaki önemli bir metni örtüyor mu?
  • Doğruluğu kontrol edin: Altyazıyı sesle karşılaştırın. Otomatik altyazılar çoğu zaman isimleri ve teknik terimleri yanlış yazar.
  • Denetimi test edin: Altyazıyı klavyeyle ve ekran okuyucuyla açıp kapatabiliyor musunuz? Denetim adını ve durumunu bildiriyor mu?
  • Her platformu deneyin: Gömülü oynatıcıları, özel oynatıcıları ve yerel mobil oynatıcıyı kontrol edin. Sistemin altyazı ayarı oynatıcıya yansıyor mu?
  • Otomatik araçların sınırı: Otomatik araçlar track öğesi olmayan bir video öğesini saptayabilir, ancak altyazının eksiksiz, doğru ve senkronize olup olmadığına karar veremez. Buna ancak bir kişi karar verebilir.

Sık yapılan hatalar

  • Sesli videoyu altyazısız yayımlamak: Bu kriterin en sık görülen ihlali.
  • Gözden geçirilmemiş otomatik altyazıya güvenmek: Makine altyazıları isimleri ve terimleri yanlış yazar, konuşmacı değişimlerini kaçırır ve sesleri atlar.
  • Yalnızca sözleri altyazılamak: Konuşmacıyı belirtmek ve anlam taşıyan sesleri yazmak altyazının parçasıdır.
  • Senkronize olmayan altyazı: Geç, erken ya da okunamayacak kadar hızlı çıkan altyazı.
  • Altyazının ekrandaki önemli metni örtmesi: Altyazıyı, videoda görünen isimleri, sayıları ve düğmeleri örtmeyecek şekilde konumlandırın.
  • Yalnızca ayrı bir transkript sunmak: Sesli bir videoda transkript, senkronize altyazının yerini tutmaz. Başka kriterleri karşılar.
  • Yalnızca fareyle çalışan altyazı düğmesi: Düğmeye klavyeyle ulaşılıp kullanılabilmeli ve ekran okuyucular için adlandırılmış olmalıdır.
  • Gömülü ve mobil videoları unutmak: Gömdüğünüz platformdaki videolar ve uygulamanızın içindeki videolar da altyazı gerektirir.

Kaynaklar

Standart sürümü: EN 301 549 V4.1.1 (2026-09), WCAG 2.2. Bu sayfa bilgilendirme amaçlıdır ve hukuki tavsiye niteliği taşımaz; bağlayıcı metin için Avrupa Erişilebilirlik Yasası'nın (Direktif (AB) 2019/882) ve EN 301 549 standardının resmî metinlerini esas alın.

Corpowid, Gartner tarafından tanınan bir platformdur.

Corpowid, dijital erişilebilirlik alanındaki yenilikçi yaklaşımı ve performansı nedeniyle dünyanın önde gelen araştırma ve danışmanlık şirketlerinden biri olan Gartner tarafından takdir edilmiştir. Bu rozetler, yapay zeka destekli ve kapsayıcı web deneyimleri oluşturma konusundaki kararlılığımızı yansıtmaktadır.

Corpowid hakkında sorularınız mı var?

Bizimle iletişime geçin.

Size en kısa sürede geri dönüş sağlayacağız.