Medya erişilebilirliği

Derek Herman
Derek Herman
Joe Medley
Joe Medley

Yayınlanma tarihi: 20 Ağustos 2020

Altyazılar ve ekran okuyucu açıklamaları, birçok kullanıcının videolarınızı deneyimleyebilmesinin tek yoludur. Bazı yargı alanlarında bunlar yasa veya yönetmelik gereği zorunludur. WebVTT (Web Video Metin Parçaları) biçimi, videolarınızı daha erişilebilir hale getirmek amacıyla altyazılar gibi zamanlanmış metin verilerini tanımlamak için kullanılır.

Bir web videosuna altyazı veya ekran okuyucu açıklaması eklemek için <video> etiketine <track> etiketi ekleyin. Altyazılar ve ekran okuyucu açıklamalarının yanı sıra <track> etiketleri altyazılar ve bölüm başlıkları için de kullanılabilir.

Android'de Chrome'da parça öğesi kullanılarak görüntülenen altyazıların gösterildiği ekran görüntüsü.

<track> etiketi, her ikisinin de başvurulan içeriğe işaret eden bir src özelliğine sahip olması açısından <source> öğesine benzer. Bir <track> etiketi için bir WebVTT dosyasına işaret eder. label özelliği, belirli bir kanalın arayüzde nasıl tanımlanabileceğini belirtir.

Birden fazla dil için parça sağlamak istiyorsanız sağladığınız her WebVTT dosyası için ayrı bir <track> etiketi ekleyin ve srclang özelliğini kullanarak dili belirtin.

İki <track> etiketi içeren bu örnek <video> etiketine bakın. <video> öğesinin alt öğesi olarak bir <track> öğesi ekleyin.

<video controls>
 
<source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm" />
 
<source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4" />
 
<track src="chrome-subtitles-en.vtt" label="English captions" kind="captions" srclang="en" default>
 
<track src="chrome-subtitles-zh.vtt" label="中文字幕" kind="captions" srclang="zh">
 
<p>This browser does not support the video element.</p>
</video>

Ayrıca Glitch'te görüntüleyebileceğiniz bir örnek de vardır.

WebVTT dosya yapısı

Demo için varsayımsal bir WebVTT dosyasını burada bulabilirsiniz. Bu, bir dizi işaret içeren bir metin dosyasıdır. Her işaret, ekranda görüntülenecek bir metin bloku ve gösterileceği zaman aralığıdır.

WEBVTT

00:00.000 --> 00:04.999
Man sitting on a tree branch, using a laptop.

00:05.000 --> 00:08.000
The branch breaks, and he starts to fall.

...

Parça dosyasındaki her öğe bir cue sahiptir. Her işaretin bir başlangıç ve bitiş zamanı vardır. Bunlar bir okla ayrılır ve ardından işaret metni gelir. İşaretçilerde railroad ve manuscript gibi kimlikler de olabilir. İşaretler boş bir satırla ayrılır.

WEBVTT

railroad
00:00:10.000 --> 00:00:12.500
Left uninspired by the crust of railroad earth

manuscript
00:00:13.200 --> 00:00:16.900
that touched the lead to the pages of your manuscript
.

İşaretçi süreleri hours:minutes:seconds.milliseconds biçimindedir. Ayrıştırma katı. Yani, gerekirse sayılar sıfırla doldurulmalıdır: saat, dakika ve saniye değerleri iki basamaklı (sıfır değer için 00), milisaniye değerleri ise üç basamaklı (sıfır değer için 000) olmalıdır. Live WebVTT Validator'da, zaman biçimlendirmesindeki hataları ve sıralı olmayan saatler gibi sorunları kontrol eden mükemmel bir WebVTT doğrulayıcısı vardır.

VTT dosyasını manuel olarak oluşturabilirsiniz. Bununla birlikte, sizin için bu dosyaları oluşturan birçok hizmet vardır.

Önceki örneklerimizde görebileceğiniz gibi WebVTT biçimi oldukça basittir. Zamanlamayla birlikte metin verilerinizi eklemeniz yeterlidir.

Ancak, altyazılarınızın farklı bir konumda sola veya sağa hizalanarak oluşturulmasını isterseniz ne olur? Altyazıları mevcut konuşmacının konumuyla hizalamak veya kameradaki metnin önüne geçmemek için bu işlemi yapabilirsiniz. WebVTT, bu ve daha fazlasını yapmak için ayarları doğrudan .vtt dosyasında tanımlar. Zaman aralığı tanımlarından sonra ayarlar ekleyerek altyazı yerleşiminin nasıl tanımlandığına dikkat edin.

WEBVTT

00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
The first line of the subtitles.

Kullanışlı bir diğer özellik de CSS kullanarak işaretlerin stilini belirleme imkanıdır. Arka plan olarak gri doğrusal degrade, tüm altyazılar için papayawhip ön plan rengi ve tüm kalın metinler için peachpuff rengi kullanmak isteyebilirsiniz.

video::cue {
 
background-image: linear-gradient(to bottom, dimgray, lightgray);
 
color: papayawhip;
}

video::cue(b) {
 
color: peachpuff;
}

Tek tek işaretlerin stili ve etiketlenmesi hakkında daha fazla bilgi edinmek istiyorsanız WebVTT spesifikasyonu, gelişmiş örnekler için iyi bir kaynaktır.

Metin parçası türleri

<track> öğesinin kind özelliğini fark ettiniz mi? Belirli bir altyazı parçasının videoyla olan ilişkisini belirtmek için kullanılır. kind özelliğinin olası değerleri şunlardır:

  • captions: Transkriptlerden ve seslerin çevirilerinden alınan altyazılar için kullanılır. İşitme engelliler ve videonun sessiz oynatıldığı durumlar için uygundur.
  • subtitles: Altyazılar için, yani konuşma ve metnin videonun ana dilinden farklı bir dilde çevirisi için.
  • descriptions: Video içeriğinin görsel bölümlerinin açıklamaları için kullanılır. Görme engelli kişiler için uygundur.
  • chapters: Kullanıcı videoda gezinirken gösterilmesi amaçlanmıştır.
  • metadata: Görünmez ve komut dosyaları tarafından kullanılabilir.

Bir videoyu web sayfanızda kullanıma sunma ve erişilebilir hale getirmeyle ilgili temel bilgileri anladığınıza göre daha karmaşık kullanım alanlarını merak ediyor olabilirsiniz. Medya çerçeveleri ve bu çerçevelerin, gelişmiş özellikler sunarken web sayfanıza video eklemenize nasıl yardımcı olabileceği hakkında bilgi edinin.