Aksesibilitas media

Derek Herman
Derek Herman
Joe Medley
Joe Medley

Dipublikasikan: 20 Agustus 2020

Teks dan deskripsi pembaca layar adalah satu-satunya cara bagi banyak pengguna untuk menikmati video Anda, dan di beberapa wilayah hukum, teks dan deskripsi pembaca layar bahkan diwajibkan oleh hukum atau peraturan. Format WebVTT (Trek Teks Video Web) digunakan untuk mendeskripsikan data teks dengan waktu, seperti teks tertutup atau subtitel, agar video Anda lebih mudah diakses.

Untuk menambahkan teks atau deskripsi pembaca layar ke video web, tambahkan tag <track> dalam tag <video>. Selain teks dan deskripsi pembaca layar, tag <track> juga dapat digunakan untuk subjudul dan judul segmen.

Screenshot yang menampilkan teks yang ditampilkan menggunakan elemen trek di Chrome pada Android.

Tag <track> mirip dengan elemen <source> karena keduanya memiliki atribut src yang mengarah ke konten yang dirujuk. Untuk tag <track>, tag ini mengarah ke file WebVTT. Atribut label menentukan cara jalur tertentu dapat diidentifikasi di antarmuka.

Untuk menyediakan trek untuk beberapa bahasa, tambahkan tag <track> terpisah untuk setiap file WebVTT yang Anda berikan dan tunjukkan bahasa menggunakan atribut srclang.

Lihat contoh tag <video> ini dengan dua tag <track>. Tambahkan elemen <track> sebagai turunan elemen <video>.

<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>

Ada juga contoh yang dapat Anda lihat di Glitch.

Struktur file WebVTT

Berikut adalah hipotesis file WebVTT untuk demo tersebut. Ini adalah file teks yang berisi serangkaian isyarat. Setiap isyarat adalah blok teks yang akan ditampilkan di layar, dan rentang waktu selama teks tersebut ditampilkan.

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.

...

Setiap item dalam file trek adalah cue. Setiap isyarat memiliki waktu mulai dan waktu berakhir, dipisahkan dengan panah, diikuti dengan teks isyarat. Isyarat juga dapat memiliki ID, seperti railroad dan manuscript. Isyarat dipisahkan oleh baris kosong.

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.

Waktu tanda menggunakan format hours:minutes:seconds.milliseconds. Pemrosesan sangat ketat. Artinya, angka harus diisi dengan nol jika diperlukan: jam, menit, dan detik harus memiliki dua digit (00 untuk nilai nol) dan milidetik harus memiliki tiga digit (000 untuk nilai nol). Ada validator WebVTT yang sangat baik di Live WebVTT Validator, yang memeriksa error dalam pemformatan waktu, dan masalah seperti waktu yang tidak berurutan.

Anda dapat membuat file VTT secara manual, karena ada banyak layanan yang membuatnya untuk Anda.

Seperti yang dapat Anda lihat pada contoh sebelumnya, format WebVTT cukup sederhana. Cukup tambahkan data teks Anda beserta pengaturan waktu.

Namun, bagaimana jika Anda ingin teks dirender dalam posisi yang berbeda dengan perataan kiri atau kanan? Mungkin untuk menyelaraskan teks dengan posisi pembicara saat ini, atau agar tidak menghalangi teks dalam kamera. WebVTT menentukan setelan untuk melakukannya, dan lainnya, langsung di dalam file .vtt. Perhatikan cara penempatan teks ditentukan dengan menambahkan setelan setelah definisi interval waktu.

WEBVTT

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

Fitur praktis lainnya adalah kemampuan untuk menata gaya isyarat menggunakan CSS. Mungkin Anda ingin menggunakan gradien linier abu-abu sebagai latar belakang, dengan warna latar depan papayawhip untuk semua teks dan semua teks tebal berwarna peachpuff.

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

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

Jika Anda tertarik untuk mempelajari lebih lanjut gaya visual dan pemberian tag pada setiap isyarat, spesifikasi WebVTT adalah sumber yang bagus untuk contoh lanjutan.

Jenis trek teks

Apakah Anda melihat atribut kind dari elemen <track>? Ini digunakan untuk menunjukkan hubungan trek teks tertentu dengan video. Kemungkinan nilai atribut kind adalah:

  • captions: Untuk teks tertutup dari transkrip dan mungkin terjemahan audio apa pun. Cocok untuk pengguna yang memiliki gangguan pendengaran dan saat video diputar dalam mode bisu.
  • subtitles: Untuk subtitel, yaitu terjemahan ucapan dan teks dalam bahasa yang berbeda dengan bahasa utama video.
  • descriptions: Untuk deskripsi bagian visual konten video. Cocok untuk orang dengan gangguan penglihatan.
  • chapters: Dimaksudkan untuk ditampilkan saat pengguna menavigasi dalam video.
  • metadata: Tidak terlihat, dan dapat digunakan oleh skrip.

Setelah memahami dasar-dasar untuk membuat video tersedia dan dapat diakses di halaman web, Anda mungkin bertanya-tanya tentang kasus penggunaan yang lebih kompleks. Pelajari Framework media dan caranya membantu Anda menambahkan video ke halaman web, sekaligus menyediakan fitur lanjutan.