Media yang hanya bisa dinikmati lewat satu indera memangkas jangkauannya sendiri. Pengunjung yang tidak dapat mendengar membutuhkan teks untuk episode podcast dan video; pengunjung yang tidak dapat melihat membutuhkan transkrip dan deskripsi untuk menangkap isi video. Kabar baiknya: sebagian besar alatnya sudah disediakan HTML — tinggal kita susun dengan benar.

Chapter penutup section ini merangkai semuanya: kontrol bawaan yang sudah ramah keyboard, transkrip untuk audio, deskripsi untuk video, dan satu contoh menyeluruh yang bisa kita jadikan pola.

Kontrol Bawaan Sudah Aksesibel #

Antarmuka controls bawaan browser sudah mendukung keyboard sepenuhnya: tombol Tab memindahkan fokus ke pemutar, Enter atau Spasi menjalankan putar dan jeda, panah kiri-kanan memundurkan atau memajukan posisi. Dukungan pembaca layar pun sudah ditangani browser di tiap tombolnya.

Konsekuensinya jelas: membangun kontrol sendiri berarti menulis ulang seluruh lapisan itu — fokus, label, dan perilaku keyboard. Jangan melakukannya tanpa alasan kuat. Bila desain memang menuntut kontrol kustom, gunakan elemen button asli sebagai fondasi dan lengkapi dengan ARIA; polanya dibahas di Section Accessibility.

Transkrip untuk Audio #

Audio murni tidak bisa dibaca mesin ataupun manusia yang tidak dapat mendengar. Karena itu podcast wajib menyediakan transkrip — teks utuh episode, tersimpan sebagai halaman biasa yang bisa ditautkan, dicari, dan diindeks. Tempatkan tautan transkrip di dekat pemutar, bukan terkubur di kaki halaman, agar pengunjung menemukannya tanpa perlu mencari.

Transkrip episode Kopi Pagi berisi ucapan pembawa acara lengkap dengan penanda segmen — bentuknya paragraf teks biasa, kadang dengan penanda waktu per segmen. Bonusnya nyata: mesin pencari mengindeks seluruh isi episode, dan pengunjung bisa melompat ke menit yang menarik lewat penanda waktu tersebut.

Susunan lengkapnya bisa langsung dicoba pada demo berikut — pemutar audio di atas, transkrip yang bisa dibuka di bawahnya:

Putar audionya, lalu buka transkripnya — pengunjung yang tidak dapat mendengar tetap menerima isi rekaman lewat teks, lengkap dengan penanda efek suara kurung siku. Coba juga mengoperasikan pemutarnya tanpa mouse: klik sekali di area demo, tekan Tab hingga fokus tiba di pemutar, lalu Space untuk memutar dan menjeda — kontrol bawaan yang sudah ramah keyboard.

Rekaman efek suara (CC0, dari MDN) dimuat daring — demo ini membutuhkan koneksi internet.

Deskripsi Audio dan Praktik Lain #

Video yang menyimpan informasi penting secara visual — grafik, demonstrasi tanpa ucapan, teks di layar — membutuhkan deskripsi audio. Dua jalurnya: track kind="descriptions" yang dibacakan pembaca layar, atau narasi tambahan yang direkam langsung di video. Empat praktik pendampingnya:

  • Jangan memakai autoplay — suara yang menyala sendiri mengganggu, dan bertabrakan dengan pembaca layar.
  • Biarkan controls tampil supaya pengunjung memegang kendali tempo dan volume.
  • Jaga kontras teks takarir bila menatanya lewat CSS; ukuran dan warna teks harus terbaca di atas gambar bergerak.
  • Sediakan teks fallback di dalam elemen media untuk browser yang tidak mendukungnya.

Contoh Video yang Menyeluruh #

Semua lapisan dirangkai dalam satu pola: pemutar, kandidat format, takarir bawaan, fallback, dan tautan transkrip:

html 
<video controls width="640" height="360" poster="video/sampul-rendang.jpg">
  <source src="video/tutorial-rendang.mp4" type="video/mp4">
  <track src="video/takarir-rendang-id.vtt" kind="subtitles" srclang="id" label="Bahasa Indonesia" default>
  <p>
    Browser ini tidak mendukung pemutar video HTML.
    Baca <a href="transkrip-rendang.html">transkrip tutorial rendang</a>,
    atau unduh <a href="video/tutorial-rendang.mp4">berkas videonya</a>.
  </p>
</video>
<p>
  Video di atas memperagakan tiga langkah memasak rendang buatan Siti.
  Teks lengkapnya tersedia di
  <a href="transkrip-rendang.html">transkrip tutorial rendang</a>.
</p>

Mari kita telaah kode di atas:

  1. controls tanpa autoplay: antarmuka bawaan yang ramah keyboard; pengunjung memegang kendali penuh.
  2. <track ... default>: takarir bahasa Indonesia aktif sejak awal — isi video tetap terbaca tanpa suara.
  3. Paragraf fallback di dalam video: pengunjung browser lama menerima tautan transkrip dan unduhan, bukan kotak kosong.
  4. Paragraf setelah video: tautan transkrip berada tepat di samping pemutar — pengunjung pembaca layar menemukannya tanpa perlu memutar video.

Ringkasan #

  • Kontrol bawaan browser sudah ramah keyboard dan pembaca layar; kontrol kustom menuntut usaha besar.
  • Podcast wajib menyediakan transkrip yang tertaut di dekat pemutar.
  • Video visual penting membutuhkan deskripsi audio lewat track descriptions atau narasi tambahan.
  • Hindari autoplay, jaga kontras takarir, dan sediakan fallback teks.

Media menuntut perhatian ekstra, tetapi imbalannya halaman yang hidup sekaligus terbuka bagi semua pengunjung. Section berikutnya berpindah ke struktur: Semantic HTML, cara menyusun halaman yang maknanya terbaca mesin dan manusia.