Kepatuhan Audio WCAG 2.2 untuk WordPress: Panduan 2026

Audio WordPress harus memenuhi setidaknya empat kriteria sukses WCAG 2.2, yaitu 1.4.2 Kontrol Audio, 2.1.1 Keyboard, 2.5.8 Ukuran Target (baru di 2.2), dan 4.1.2 Nama, Peran, Nilai. European Accessibility Act, yang mulai diberlakukan sejak 28 Juni 2025, menjadikan ini kewajiban hukum bagi situs mana pun yang melayani pelanggan Uni Eropa. Pemutar audio bawaan WordPress dan sebagian besar plugin audio pihak ketiga tidak memenuhi beberapa persyaratan ini tanpa modifikasi.

Panduan ini adalah daftar periksa praktis yang kami gunakan di Mementor saat mengaudit situs WordPress untuk kesesuaian WCAG 2.2. Kami membahas dua sisi pertanyaan audio: audio sebagai konten dengan aturan aksesibilitas tersendiri, dan audio sebagai fitur aksesibilitas untuk konten teks.

Mengapa kepatuhan audio penting di 2026

Tiga faktor bertemu di tahun 2025 dan menjadikan ini topik yang mendesak. EAA mulai diberlakukan pada 28 Juni 2025. Laporan WebAIM Million 2025 menemukan 96,3% halaman utama memiliki kegagalan WCAG yang terdeteksi. Gugatan ADA di Amerika Serikat terus meningkat, dengan situs WordPress tampil menonjol dalam lebih dari 4.000 kasus aksesibilitas web yang diajukan sepanjang tahun.

Pola yang kami temukan dalam audit kami konsisten. Pemilik situs berasumsi tema mereka sudah menangani aksesibilitas. Tema mewarisi apa pun yang dikirimkan oleh plugin audio. Plugin audio mengirimkan tombol yang terlalu kecil, slider yang menjebak pengguna keyboard, dan rasio kontras yang gagal saat pertama kali diperiksa secara manual.

Daftar periksa audio WCAG 2.2 lengkap

Delapan kriteria sukses menyentuh audio di situs WordPress secara langsung. Tabel di bawah ini memetakan masing-masing ke apa artinya dalam praktik, apa yang benar atau salah dari audio WordPress bawaan, dan bagaimana pemutar TTSWP menanganinya. Kriteria yang ditandai BARU hadir dengan WCAG 2.2 pada Oktober 2023.

Halaman Media Accessibility User Requirements dari W3C adalah sumber resmi untuk kriteria-kriteria ini. Kami berfokus pada delapan di atas karena semuanya berlaku untuk pemutar audio itu sendiri. Teks (1.2.2) dan deskripsi audio (1.2.3) juga relevan tetapi berlaku untuk video, bukan narasi audio murni.

Pengecualian alternatif media untuk teks

Inilah aturan yang dilewatkan oleh 95 persen artikel kepatuhan. WCAG mendefinisikan alternatif media untuk teks sebagai media yang tidak menyajikan informasi lebih dari yang sudah ada dalam teks. Ketika narasi Teks ke Ucapan membacakan artikel yang sudah ada, audio tersebut adalah alternatif media untuk teks halaman itu. Teks halaman itu sendiri adalah transkripnya.

Artinya, versi audio TTS dari sebuah artikel tidak memerlukan file transkip terpisah. WebAIM menjelaskan ini dengan jelas. Syaratnya adalah audio harus diberi label yang jelas sebagai alternatif media agar pengguna memahami bahwa mereka tidak melewatkan informasi apapun jika memilih untuk melewatinya. Judul seperti "Dengarkan artikel ini" atau pemutar berlabel "Versi audio dari artikel ini" sudah memenuhi syarat.

Pengecualian ini tidak berlaku jika audio menambahkan komentar, musik dengan makna, atau bagian yang tidak ada dalam teks. Narasi murni dari konten halaman memenuhi syarat. Kami mengandalkan ini secara rutin saat menasihati klien penerbit yang khawatir bahwa menambahkan audio menciptakan kewajiban transkip baru.

Yang baru untuk audio di WCAG 2.2

Tiga kriteria Level AA baru berdampak langsung pada pemutar audio.

2.5.8 Ukuran Target (Minimum)

Setiap kontrol interaktif memerlukan target setidaknya 24 x 24 piksel CSS. Inilah kriteria yang paling banyak menggagalkan plugin audio WordPress. Dalam audit kami terhadap situs WordPress yang menggunakan plugin audio pihak ketiga, tombol lewati-mundur dan lewati-maju secara konsisten tidak memenuhi ambang batas ini. Para desainer visual mengoptimalkan untuk keringkasan sebelum WCAG 2.2 memperkenalkan aturan 24 piksel, dan sedikit pemelihara plugin yang sudah memperbaruinya. Gaya tema bawaan kadang memperkecil target lebih jauh.

Solusinya biasanya padding, bukan ukuran ikon. Ikon SVG 16 piksel di dalam tombol dengan padding 4 piksel di setiap sisi sudah mencapai ambang 24 piksel tanpa mengubah tampilan visual.

2.4.11 Fokus Tidak Tertutup

Bar audio sticky di bagian bawah halaman menutupi apa pun yang sedang difokus oleh pengguna keyboard. Jika tautan yang sedang difokus tersembunyi di balik bar, kriteria ini gagal. Solusinya adalah membuat bar bisa ditutup, menyisakan ruang di atas target fokus, atau menggunakan scroll-padding-bottom pada dokumen agar elemen yang difokus tetap terlihat.

2.5.7 Gerakan Seret

Bar scrub dan slider volume yang hanya berfungsi dengan seret gagal memenuhi kriteria ini. Setiap interaksi seret membutuhkan alternatif satu pointer. Klik-ke-posisi pada progress bar sudah memenuhinya. Kontrol tombol panah keyboard pada role="slider" yang dibangun dengan benar juga memenuhi syarat.

Kegagalan audio WordPress yang umum ditemukan dalam audit

Polanya berulang di berbagai situs klien. Kami paling sering menemukan empat kegagalan ini.

Blok <audio> inti WordPress bawaan merender pemutar bawaan browser. Kontrol audio browser-native memiliki sejarah panjang perilaku yang tidak konsisten dengan pembaca layar, dan kontrol tombol panah untuk posisi playhead berbeda antara Chrome, Firefox, dan Safari. Pengguna NVDA atau JAWS sering dapat mendengar stempel waktu tetapi tidak dapat memindahkan posisi secara andal dengan keyboard. Solusinya adalah membungkus audio dalam pemutar kustom yang mengekspos role="slider" dengan atribut nilai ARIA yang tepat.

Pemutar plugin mengirimkan tombol di bawah ambang 24 piksel. Desainer visual mengoptimalkan untuk keringkasan sebelum WCAG 2.2 memperkenalkan aturan ini. Tema kemudian menimpa gaya plugin, yang kadang memperburuk dan kadang memperbaiki keadaan.

Bar audio sticky menyembunyikan konten yang sedang difokus. Kami menemukan kegagalan ini di setiap situs yang menggunakan pemutar footer sticky tanpa menguji navigasi keyboard.

Kontras pada waveform secara konsisten di bawah 4,5:1. Para desainer menyukai gelombang abu-abu lembut di atas putih. Pembaca layar tidak peduli, tetapi pengguna dengan penglihatan rendah peduli, dan 1.4.3 pun gagal.

Membangun pemutar audio yang patuh: daftar periksa teknis

1. Bungkus pemutar dalam role="region" dengan aria-label yang mendeskripsikannya.
2. Gunakan <button> asli untuk play, pause, skip, dan mute. Jangan pernah gunakan <div> dengan click handler.
3. Tetapkan aria-pressed pada tombol play untuk mengekspos status toggle.
4. Berikan setiap kontrol target minimum 24 x 24 piksel CSS menggunakan padding.
5. Buat scrubber dan volume sebagai role="slider" dengan aria-valuemin, aria-valuemax, dan aria-valuenow, serta respons terhadap tombol panah.
6. Sediakan klik-ke-posisi pada scrubber sebagai alternatif non-seret.
7. Uji kontras pada setiap elemen teks dan ikon bermakna dengan minimum 4,5:1.
8. Pastikan ring fokus terlihat dan tidak pernah terpotong oleh aturan overflow.
9. Jika pemutar sticky, sisakan ruang fokus di atasnya atau buat bisa ditutup.
10. Beri label pemutar narasi TTS sebagai "Versi audio dari artikel ini" agar pengecualian alternatif media berlaku dengan bersih.

Tombol play aksesibel minimal terlihat seperti ini.

<div role="region" aria-label="Article audio player">
  <button type="button"
          aria-pressed="false"
          aria-label="Play article narration"
          style="min-width:24px;min-height:24px;padding:8px">
    <svg aria-hidden="true" width="16" height="16">...</svg>
  </button>
  <input type="range"
         aria-label="Playback position"
         min="0" max="100" value="0">
</div>

Itulah kerangka dasarnya. Beri gaya pada tombol, sembunyikan tampilan range bawaan jika Anda menginginkan trek kustom, tetapi pertahankan semantik yang mendasarinya.

Bagaimana narasi TTS meningkatkan kesesuaian WCAG secara keseluruhan

Audio bukan sekadar konten yang perlu dibuat aksesibel. Audio adalah fitur aksesibilitas itu sendiri. WHO memperkirakan 1,3 miliar orang, sekitar 16% populasi global, hidup dengan disabilitas signifikan. Banyak dari mereka mendapat manfaat dari akses multimodal ke konten teks: penderita disleksia, ADHD, penglihatan rendah, dan berbagai disabilitas kognitif lebih nyaman membaca dengan audio yang mendampingi teks.

Menambahkan narasi Teks ke Ucapan adalah salah satu investasi aksesibilitas yang membantu pengguna sebelum memenuhi persyaratan audit. Menambahkan TTS ke WordPress membutuhkan kurang dari 15 menit dengan plugin Teks ke Ucapan - TTSWP. Pemutar ini hadir dengan default yang sesuai WCAG 2.1 AA, target 24 piksel ke atas, dukungan keyboard, dan peran ARIA yang tepat.

Muatan runtime minimal sekitar 35 hingga 40 KB terkompresi gzip (151 KB tanpa minifikasi), mencakup logika pemutar JavaScript dan CSS bersama. Kami menjalankan GTmetrix pada artikel yang diterbitkan dengan pemutar aktif dan mendapat nilai A dengan 93% Performa, 99% Struktur, Largest Contentful Paint 1,3 detik, Total Blocking Time 46 milidetik, dan Cumulative Layout Shift nol. Bundle hanya dimuat secara lazy pada halaman yang berisi pemutar, sehingga halaman statis tanpa audio tidak menanggung beban apapun.

Dokumentasi aksesibilitas tersedia di halaman kepercayaan aksesibilitas kami. Narasi menggunakan mesin generatif ElevenLabs, yang menghasilkan prosodi cukup baik sehingga pendengar benar-benar menyelesaikan artikel alih-alih meninggalkan bacaan yang terdengar robotis.

European Accessibility Act dalam praktik

EAA mulai dapat diberlakukan pada 28 Juni 2025. Layanan digital baru yang dipasarkan di EU setelah tanggal tersebut harus segera mematuhinya. Layanan yang sudah ada memiliki waktu hingga 28 Juni 2030 untuk menyesuaikan semuanya. Direktif ini berlaku untuk bisnis mana pun yang melayani pelanggan EU, terlepas dari lokasi bisnis tersebut.

Standar teknis yang dirujuk EAA adalah EN 301 549. Versi harmonisasi saat ini (V3.2.1, Agustus 2021) dibangun di atas WCAG 2.1 Level AA. Draf V4.1.0 yang diterbitkan November 2025 memperbarui klausul 9, 10, dan 11 agar selaras dengan WCAG 2.2, dengan harmonisasi final yang diperkirakan selama 2026. Sampai pembaruan itu dirujuk dalam Official Journal of the EU, WCAG 2.1 AA tetap menjadi minimum yang mengikat secara hukum, tetapi kami merekomendasikan menargetkan 2.2 sekarang karena transisi tinggal hitungan bulan, bukan tahun.

Sanksi bervariasi menurut negara anggota. Jerman dan Prancis memiliki infrastruktur penegakan yang paling aktif, dengan otoritas aksesibilitas nasional yang berwenang menyelidiki keluhan dan menerbitkan denda. Kami melihat klien dari Jerman menerima keluhan resmi dari pengguna akhir dalam beberapa bulan setelah tanggal penegakan, biasanya tentang komponen audio dan formulir. Keluhan datang sebelum denda, sehingga jendela perbaikan tiga puluh hari biasanya dapat dicapai jika tim sudah siap.

Cara menguji kepatuhan

Alat otomatis menangkap sekitar 30 hingga 40 persen masalah. Pengujian manual diperlukan untuk sisanya, terutama interaksi keyboard dan kontras bermakna pada status dinamis.

• NVDA di Windows dengan Chrome dan Firefox. Gratis.
• JAWS di Windows untuk ekspektasi klien enterprise.
• VoiceOver di macOS dan iOS. Sudah terpasang.
• TalkBack di Android. Sudah terpasang.
• axe DevTools ekstensi browser untuk pemindaian otomatis.
• Lighthouse di Chrome DevTools untuk pemeriksaan cepat.
• Penelusuran hanya keyboard. Cabut mouse dan operasikan setiap kontrol pemutar.

Penelusuran hanya keyboard adalah pengujian dengan dampak tertinggi. Jika pemutar berfungsi tanpa mouse, sebagian besar persyaratan WCAG 2.2 sudah terpenuhi.

Pertanyaan yang sering diajukan

Apakah WCAG 2.2 mengharuskan teks untuk podcast audio?

Tidak. Teks (1.2.2) berlaku untuk video pra-rekam dengan audio tersinkronisasi. Untuk konten audio saja seperti podcast, kriteria yang relevan adalah 1.2.1, yang mengharuskan alternatif teks seperti transkip atau ringkasan terperinci. Teks dan transkip memiliki tujuan yang berbeda. Podcast membutuhkan transkip. Tutorial video membutuhkan keduanya: teks dan deskripsi audio untuk informasi yang hanya ada secara visual.

Apakah audio otomatis melanggar hukum berdasarkan EAA?

Bukan ilegal, tetapi dibatasi. WCAG 1.4.2 Kontrol Audio, yang dirujuk EAA melalui EN 301 549, mengharuskan audio yang diputar otomatis lebih dari tiga detik untuk menawarkan kontrol jeda, henti, atau volume independen. Putar otomatis tanpa kontrol tersebut gagal Level A dan menciptakan temuan ketidakpatuhan. Sebagian besar badan penegak memperlakukan ini sebagai pelanggaran yang jelas, bukan kasus yang masih diperdebatkan.

Apakah saya perlu transkip jika sudah ada versi audio artikel saya?

Biasanya tidak. Ketika audio adalah narasi langsung dari teks artikel dan tidak menambahkan informasi baru, teks artikel itu sendiri adalah transkip berdasarkan definisi "alternatif media untuk teks" dalam WCAG. Beri label pemutar dengan jelas sebagai versi audio dari artikel dan pengecualian pun berlaku. Jika audio menyertakan komentar, musik bermakna, atau bagian yang tidak ada dalam teks, Anda memerlukan transkip terpisah.

Berapa ukuran tombol minimum untuk pemutar audio di WCAG 2.2?

Target interaktif harus setidaknya 24 x 24 piksel CSS berdasarkan kriteria sukses 2.5.8 Ukuran Target (Minimum) di Level AA. Target mencakup padding, sehingga ikon 16 piksel dengan padding 4 piksel di setiap sisi sudah memenuhi persyaratan. Pengecualian ada untuk tautan inline dalam teks dan kontrol yang ditentukan oleh agen pengguna, tetapi tombol pemutar mandiri tidak mendapat pengecualian dan harus memenuhi ambang batas tersebut.

Apakah WCAG 2.2 berlaku untuk situs yang di-hosting di WordPress.com?

Ya. WCAG berlaku untuk konten web apa pun terlepas dari platform hosting. Situs WordPress.com menanggung paparan hukum yang sama berdasarkan EAA, ADA, dan hukum nasional setara seperti WordPress yang di-host sendiri. Model hosting tidak mengubah kewajiban. Yang berubah adalah seberapa besar kendali yang dimiliki pemilik situs atas markup pemutar. Paket Business dan Commerce WordPress.com mengizinkan plugin kustom, paket yang lebih rendah tidak.

Mulai dari mana

Pilih satu artikel di situs Anda, lakukan penelusuran hanya keyboard pada pemutar audio, dan periksa setiap tombol terhadap aturan 24 piksel. Audit tunggal itu mengungkapkan apakah pengaturan Anda saat ini sudah dekat dengan kesesuaian WCAG 2.2 atau masih jauh. Dari sana, pilihannya adalah memperbaiki pemutar yang ada atau menggantinya dengan yang sudah patuh secara bawaan. Dokumentasi aksesibilitas kami mencakup konfigurasi yang kami rekomendasikan untuk situs yang menghadapi tekanan EAA.