3.2.1 Saat Fokus

Apa itu WCAG 3.2.1?

Saat pengguna menjelajahi konten di halaman web, memfokuskan pada elemen tidak seharusnya menyebabkan perubahan yang tidak terduga pada konteks halaman. Fokus berarti elemen pada halaman dapat menerima input keyboard, namun tindakan yang terkait dengan elemen tersebut seharusnya tidak dipicu hanya karena elemen tersebut mendapat fokus.

Perubahan konteks dapat mencakup perubahan besar seperti:

• Memindahkan pengguna ke tab baru di browser
• Menggulung pengguna ke bagian halaman yang berbeda
• Mengubah fokus ke elemen lain di halaman
• Menukar konten sehingga arti halaman berubah

Contohnya, menekan tab pada tombol kirim tidak seharusnya secara otomatis mengirimkan formulir. Atau, memfokuskan pada kolom teks tidak seharusnya membuka window baru tanpa pemberitahuan.

Tujuan dari pedoman ini adalah untuk membuat navigasi konten menjadi dapat diprediksi dan menghindari membingungkan pengguna atau membuat mereka terkejut tanpa peringatan.

Mengapa ini penting?

Perilaku yang tidak terduga saat berinteraksi dengan halaman web dapat sangat menjengkelkan dan bahkan membuat konten tidak dapat digunakan oleh beberapa orang.

Pengguna dengan gangguan penglihatan mungkin merasa bingung dan kehilangan orientasi ketika konteks berubah secara tak terduga, sementara mereka yang memiliki gangguan kognitif mungkin kesulitan memahami mengapa perubahan tersebut terjadi, yang bisa menyebabkan frustrasi.

Bagi pengguna dengan gangguan motorik, perubahan konteks yang tidak terduga bisa mengganggu tugas mereka dan membuatnya sulit untuk pulih, sering kali membuat mereka menyerah pada situs tersebut. Bahkan orang yang tidak memiliki disabilitas pun bisa merasa terganggu oleh perubahan ini, yang pada akhirnya mengarah pada pengalaman pengguna yang buruk secara keseluruhan.

Pengguna yang bergantung pada teknologi bantu bahkan bisa terjebak dalam sebuah loop di mana mereka tidak bisa melewati elemen tertentu pada halaman, karena fokus pada elemen tersebut akan menyebabkan tindakan lain terjadi yang kemudian mengambil alih fokus setiap kali.

Siapa yang terpengaruh?

Pengguna dengan mobilitas terbatas, pengguna dengan gangguan kognitif, pengguna low vision atau memiliki penglihatan terbatas, dan pengguna netra.

Pengguna dengan mobilitas terbatas mungkin merasa kesulitan untuk kembali ke tempat mereka sebelumnya setelah aksi yang tidak disengaja terjadi, yang akhirnya menciptakan gerakan yang tidak perlu dan bisa menambah stres atau rasa sakit.

Pengguna dengan gangguan kognitif mungkin kesulitan untuk memproses perubahan fokus yang tak terduga, atau bahkan mungkin tidak menyadari bahwa konteks telah berubah sama sekali.

Pengguna dengan penglihatan terbatas atau netra biasanya bergantung pada teknologi bantu untuk menavigasi konten, dan saat mereka menekan tombol tab dan memindahkan fokus mereka, bisa merasa bingung dan frustrasi jika konteks berubah tanpa peringatan.

Cara menerapkan WCAG 3.2.1

Gunakan "activate" sebagai pemicu untuk perubahan konteks

Alih-alih memicu aksi hanya karena elemen difokuskan, kamu sebaiknya menunggu sampai elemen diaktifkan. Ini berarti pengguna secara sengaja melakukan aksi, seperti mengklik tombol atau menekan tombol, untuk membuat sesuatu terjadi. Dengan cara ini, saat pengguna menavigasi konten dengan menekan tombol tab, mereka tidak akan secara tidak sengaja memicu perubahan.

Misalnya, tombol hanya boleh melakukan tugasnya (seperti mengirimkan formulir) ketika pengguna fokus padanya dan kemudian menekan tombol spasi atau tombol Enter.

Untuk memastikan ini bekerja dengan benar, gunakan keyboard untuk menavigasi seluruh konten dan pastikan tidak ada hal yang tak terduga terjadi hanya karena memindahkan fokus ke elemen yang berbeda.

Mengaktifkan akan berbeda tergantung pada elemen, namun yang terpenting adalah bahwa pengguna melakukan aksi yang sengaja untuk memicu sesuatu yang terjadi di halaman.

Rekomendasi lain

Meskipun tidak secara spesifik diperlukan untuk memenuhi pedoman ini, ada beberapa saran lain yang akan membuat pengalaman pengguna yang menavigasi konten menjadi lebih lancar.

Buka tab baru hanya ketika diperlukan

Secara umum, lebih baik mengurangi jumlah tautan atau tombol yang membuka jendela atau tab baru karena ini bisa mengganggu pengguna yang tidak dapat melihat perubahan secara visual. Disarankan agar ketika tautan dibuka di jendela baru, ada peringatan sebelumnya.

Berikan pernyataan sebelumnya saat membuka tab baru

Menyatakan atau menunjukkan dengan jelas saat elemen akan membuka tab atau window baru dapat membantu pengguna memutuskan apakah mereka ingin mengaktifkan elemen tersebut. Ini juga akan membantu mereka memahami bahwa tombol 'kembali' tidak akan berfungsi di tab baru yang telah mereka tuju.

Hal ini dapat dilakukan melalui peringatan teks, seperti “Wikipedia Aardvark (dibuka di jendela baru)”. Atau, dapat dilakukan dengan ikon/simbol, aria-hidden, dan CSS.

<a href="https://en.wikipedia.org/wiki/Aardvark">https://en.wikipedia.org/wiki/Aardvark">
    <i aria-hidden="true"class="fa-solid fa-up-right-from-square"></i>
    <span class="hide-opens-new-tab">Opens in a new tab</span>
</a>

.hide-opens-new-tab {
    position: absolute;
    top: auto;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE 6/7 */
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
    white-space: nowrap;
}

Dalam contoh ini, elemen span ditempatkan tepat setelah ikon jendela baru, tetapi disembunyikan dengan CSS. Ini memungkinkan screen reader untuk membaca teks "Dibuka di tab baru" bersama dengan teks tautan, sementara pengguna visual hanya melihat simbol tersebut.

Kesimpulan

Memastikan bahwa aksi hanya terjadi ketika pengguna dengan sengaja memicunya, bukan hanya ketika mereka memfokuskan sesuatu, adalah kunci untuk menjaga segala sesuatunya tetap dapat diprediksi dan dapat diakses. Dengan mengikuti pedoman ini, kamu membantu menghindari kebingungannya dan frustrasi, terutama untuk pengguna disabilitas.