Intinya...

Perubahan besar (seperti membuka dialog, navigasi, pengiriman) hanya boleh terjadi saat permintaan dilakukan secara eksplisit oleh pengguna.

Apa itu WCAG 3.2.5?

Setiap perubahan konteks besar—seperti membuka jendela baru, berpindah halaman, atau memperbarui konten—harus terjadi hanya ketika pengguna memintanya atau ketika hal itu diharapkan. Artinya tidak boleh ada pengalihan otomatis, pop-up, atau pengiriman formulir kecuali pengguna melakukan tindakan untuk memicu perubahan tersebut atau itu adalah perilaku yang dapat diprediksi.

Kriteria keberhasilan ini memastikan pengguna tetap mengendalikan pengalaman mereka dan tidak terganggu oleh perubahan yang tidak terduga.

Ilustrasi menunjukkan seorang pengguna yang kebingungan, dikelilingi oleh jendela peramban berupa pop-up otomatis, pengalihan otomatis, dan pengiriman otomatis yang muncul tanpa diduga.

Perbandingan WCAG 3.2.1 dan 3.2.2

WCAG 3.2.1 Saat Fokus (Level A) mencegah perubahan konteks terjadi hanya karena sebuah elemen menerima fokus, seperti saat pengguna menelusuri formulir menggunakan tombol tab. WCAG 3.2.2 Saat Input (Level A) memiliki pendekatan serupa namun sedikit lebih luas dengan memastikan bahwa mengubah nilai elemen formulir tidak memicu perubahan konteks tanpa tindakan tambahan dari pengguna.

WCAG 3.2.5 melangkah lebih jauh dengan mengharuskan bahwa setiap perubahan konteks hanya terjadi ketika pengguna yang memulainya atau dapat menonaktifkannya.

Mengapa ini penting?

Perubahan yang tidak terduga, seperti halaman yang tiba-tiba menyegarkan sendiri, formulir yang terkirim otomatis, atau jendela baru yang terbuka tanpa peringatan, dapat membingungkan — terutama bagi individu yang bergantung pada interaksi yang konsisten dan dapat diprediksi.

Ketika pengguna tidak mengharapkan suatu perubahan dan tidak memiliki cara untuk mengendalikannya, mereka bisa dengan mudah kehilangan arah. Memberikan opsi bagi pengguna untuk memicu perubahan sendiri membantu menciptakan pengalaman yang terasa stabil dan mudah diikuti.

Siapa yang terpengaruh?

Individu dengan hambatan mobilitas, penglihatan rendah, tunanetra, dan individu dengan disabilitas kognitif.

Individu dengan hambatan mobilitas mungkin tidak sengaja memicu perubahan yang tidak diinginkan, terutama jika antarmuka terlalu sensitif atau merespons input tanpa langkah konfirmasi yang jelas.

Individu dengan penglihatan rendah atau tunanetra mungkin tidak menyadari saat halaman menyegarkan sendiri, formulir terkirim, atau jendela baru terbuka. Misalnya, pengguna pembaca layar sering menavigasi berdasarkan heading atau penanda wilayah. Jika konten berubah tanpa peringatan, mereka bisa kehilangan posisi dan tidak tahu apa yang berubah atau bagaimana kembali ke tempat semula.

Individu dengan disabilitas kognitif mungkin kesulitan memahami atau mengikuti perubahan mendadak dalam tata letak, konten, atau konteks. Perubahan yang tidak terduga dapat mengganggu fokus dan menyulitkan mereka menyelesaikan tugas atau mengikuti alur proses.

Cara menerapkan WCAG 3.2.5

Bagian ini menawarkan penjelasan yang disederhanakan dan contoh-contoh untuk membantu kamu memulai. Untuk panduan lengkap, selalu rujuk ke dokumentasi resmi WCAG.

Sebelum membahas cara memenuhi 3.2.5, penting untuk memahami satu pengecualian yang cukup halus: jika perubahan konteks jelas dipicu oleh pengguna dan sudah diharapkan — seperti pengalihan ke halaman terima kasih setelah formulir checkout dikirimkan, hal tersebut tidak dianggap sebagai pelanggaran. Tujuan dari kriteria ini adalah untuk menghindari perubahan yang otomatis atau tidak terduga, bukan untuk mencegah perubahan yang disengaja dan bisa diprediksi.

Biarkan pengguna menentukan kapan perubahan terjadi

Perubahan konteks tidak boleh terjadi secara otomatis tanpa diminta oleh pengguna atau tanpa ekspektasi yang jelas dari mereka, termasuk:

  • Pengalihan ke halaman baru
  • Mengubah bagian dari antarmuka
  • Mengirim formulir setelah pengguna memilih suatu opsi

Sebagai gantinya, sediakan tombol atau tautan yang jelas yang dapat diklik pengguna saat mereka siap melakukan perubahan tersebut.

Contohnya: jika seseorang memilih item dari dropdown, jangan langsung submit formulir secara otomatis; biarkan mereka memilih opsi terlebih dahulu lalu konfirmasi dengan tombol submit.

Ilustrasi halaman Wiki

Wiki tentang aardvark yang menampilkan prompt untuk menyegarkan halaman, memberi kendali kepada pengguna kapan ingin memuat ulang.

Bahkan dalam aplikasi satu halaman (single-page application/SPA), di mana konten diperbarui secara dinamis tanpa mengubah URL halaman, tetap penting untuk tidak memicu pembaruan tersebut secara otomati*. Jika antarmuka berpindah atau menggantikan area konten utama tanpa tindakan yang jelas dari pengguna, efeknya bisa sama membingungkannya seperti pemuatan ulang halaman penuh. Pengguna harus selalu mengendalikan kapan dan bagaimana pembaruan terjadi.

Beri peringatan sebelum membuka jendela baru

Jika sebuah tautan membuka tab atau jendela baru, sampaikan hal itu secara jelas dalam teks tautannya. Ini membantu pengguna mengetahui apa yang akan terjadi, terutama bagi pengguna pembaca layar (yang tidak memiliki petunjuk visual) atau pengguna pembesar layar (yang mungkin tidak melihat konten baru di luar area tampilan mereka).
Contoh:

Pelajari Lebih Lanjut tentang Aardvark (membuka di jendela baru)

Namun, secara umum, sebaiknya hindari membuka jendela atau tab baru kecuali benar-benar diperlukan, karena perubahan tak terduga seperti ini bisa membingungkan pengguna atau menyulitkan mereka untuk kembali ke halaman sebelumnya.

Satu versi ditampilkan secara visual, satu lagi hanya untuk pembaca layar.

Dua penyajian untuk menunjukkan tautan membuka jendela baru

Teks khusus untuk pembaca layar

Untuk tampilan yang lebih bersih namun tetap ramah pembaca layar, gunakan kombinasi <span> dan CSS untuk menjelaskan bahwa tautan akan membuka jendela baru:

<a href="https://en.wikipedia.org/wiki/Aardvark" target="_blank" rel="noopener">
    Learn More About Aardvarks <span class="sr-only">(opens in new window)</span>
</a>

Teks dalam <span> berisi informasi tambahan khusus untuk pembaca layar, lalu CSS digunakan untuk menyembunyikan teks "(membuka di jendela baru)" dari tampilan visual.

.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}

Atribut target

Atribut target="_blank" digunakan untuk membuka tautan di jendela atau tab baru. Namun, atribut ini tidak secara otomatis memberi tahu pengguna, terutama pengguna pembaca layar.

Selalu pasangkan dengan teks tambahan yang terlihat atau hanya untuk pembaca layar agar pengguna tahu apa yang akan terjadi saat mereka mengklik tautan tersebut.

<a href="https://en.wikipedia.org/wiki/Aardvark" target="_blank">
    Learn More About Aardvarks (opens in new window)
</a>

Hindari pop-up mendadak

Pop-up dapat dengan mudah mengganggu pengalaman pengguna, terutama jika muncul tanpa peringatan atau interaksi pengguna. Karena itu, pop-up atau modal sebaiknya hanya muncul ketika dipicu oleh pengguna melalui tombol atau tautan, atau setelah tindakan yang memang mengharapkan respons seperti itu.
Contoh: saat pengguna meninggalkan halaman tanpa menyimpan, modal dapat muncul untuk menanyakan apakah mereka ingin menyimpan perubahan.

Jika memungkinkan, pertimbangkan alternatif yang lebih sederhana seperti konten inline atau halaman terpisah, yang umumnya lebih dapat diprediksi.

Hindari redirect berbasis peramban

Jika situs perlu melakukan redirect — misalnya dari domain lama ke yang baru — pastikan itu tidak dilakukan di sesi peramban atau dengan jeda waktu. Redirect berbasis peramban seperti tag <meta refresh> dapat membingungkan pengguna yang sedang membaca atau berinteraksi dengan konten, dan beberapa pembaca layar mungkin tidak mengumumkan perubahan tersebut dengan jelas.

Sebagai gantinya, lakukan redirect di sisi server sehingga terjadi seketika saat pengguna memuat halaman pertama kali. Ini menghindari pergeseran yang tidak terduga dan memastikan tombol "kembali" tetap berfungsi seperti seharusnya.

Pengecualian untuk change on request

Beberapa jenis konten, seperti slideshow atau carousel yang berpindah otomatis, memang perlu mengubah konteks secara otomatis agar berfungsi dengan benar. Kasus seperti ini dianggap sebagai pengecualian, selama mengikuti:


Kesimpulan

Berikan opsi bagi pengguna untuk mengklik, mengonfirmasi, atau menjeda sebelum terjadi perubahan besar. Jika ragu, tanyakan pada diri sendiri:

“Apakah perubahan ini akan membingungkan jika saya tidak mengharapkannya?”

Jika ya, berarti perubahan tersebut sebaiknya menunggu permintaan pengguna atau menyediakan cara untuk menonaktifkannya.

Jika situs web atau aplikasi kamu mengubah halaman, konten, atau cara pengguna berinteraksi, pastikan perubahan itu hanya terjadi saat pengguna memilih untuk melakukannya.