Intinya...

Konten harus mengikuti urutan yang logis dan bermakna dalam kode sehingga dapat dimengerti secara benar oleh teknologi bantu.

Apa itu WCAG 1.3.2?

Konten web bisa ditata ulang, diberi gaya, dan dipindah-pindahkan agar terlihat rapi secara visual. Tapi saat konten tersebut dibaca oleh teknologi bantu, urutannya juga harus tetap masuk akal.

Sering kali, elemen pada halaman diatur ulang menggunakan CSS. Ini terlihat masuk akal bagi pengguna visual, tapi CSS tidak mengubah urutan di HTML. Jadi teknologi bantu tetap membaca konten sesuai urutan HTML aslinya.

Kadang urutan elemen tidak penting. Kalau memang tidak berpengaruh, tidak masalah dibiarkan seperti itu (tapi jangan lupa soal urutan fokus yang harus sesuai agar memenuhi WCAG 2.4.3). Tapi jika kontennya perlu urutan tertentu untuk bisa dimengerti, maka urutan tersebut harus tetap jelas agar tidak membingungkan pengguna.

Bayangkan seperti membaca buku tapi babnya diacak. Atau mengikuti resep masakan tapi langkah-langkahnya tersebar di seluruh halaman. Ada informasi yang memang harus teratur agar bisa dipahami.

Sebuah daftar isi yang urutannya berubah karena CSS

Contoh: Daftar isi buku “Alice in Wonderland” diacak dan tidak mengikuti nomor urutan yang benar.

Mengapa ini penting?

Kalau konten yang butuh urutan tidak disusun secara berurutan atau tidak bermakna, maka pengguna yang tidak melihat secara visual jadi kesulitan. Teknologi bantu akan membaca konten dengan urutan yang salah dan bisa membingungkan pengguna.

Contoh resep yang petunjuknya tersebar di halaman dan sidebar

Langkah-langkah resep cupcake tersebar di halaman dan sidebar. Pengguna harus mencari satu per satu, dan teknologi bantu harus membaca semua konten untuk mendapatkan resep lengkap.

Siapa yang terpengaruh?

Pengguna low vision dan penglihatan terbatas, dan pengguna dengan disabilitas belajar dan membaca.

Mereka biasanya memakai screen reader atau teknologi bantu lain untuk mengakses konten. Kalau konten tidak berurutan secara logis, mereka kesulitan memahami arti dari informasi tersebut.

Bagi pengguna yang tidak bisa melihat konten visual, mereka bisa melewatkan informasi penting jika urutannya tidak jelas. Dengan memastikan semua elemen tersusun secara berurutan dan masuk akal, screen reader dan perangkat braille bisa membaca konten dengan baik.

Cara menerapkan WCAG 1.3.2

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

Tinjau konten berdasarkan urutan linearnya

Untuk menerapkan WCAG 1.3.2, tinjau halaman web kamu dan pastikan elemen atau konten yang butuh urutan linear tetap utuh meskipun tampilan visual atau styling-nya dihilangkan.

Cara terbaik untuk mengeceknya adalah dengan menggunakan alat yang bisa menghapus semua CSS dan menampilkan halaman seperti yang akan dibaca oleh teknologi bantu.

Menyediakan urutan linear hanya diwajibkan jika urutannya memengaruhi makna konten. Bisa saja ada lebih dari satu urutan yang “benar”, selama maknanya tetap sama.

Contoh konten yang maknanya bergantung pada urutan:

  • Daftar bernomor
  • Daftar isi halaman
  • Video tutorial yang harus ditonton berurutan
  • Huruf dalam kata & kata dalam kalimat
  • Tabel
  • Formulir
  • Header dan paragraf yang saling berkaitan

Contoh konten yang tidak bergantung pada urutan:

  • Daftar tak bernomor
  • Urutan bagian halaman (misalnya sidebar di awal atau akhir)
  • Daftar produk di halaman toko

Halaman bergambar anjing dan kucing beserta tulisan yang dijelaskan di caption

Halaman tentang Anjing dan Kucing, tapi header, gambar, dan paragrafnya tidak dikelompokkan. Screen reader akan membaca header dulu, lalu semua alt teks gambar, lalu semua paragraf, sehingga maknanya jadi tidak jelas.

Spasi kosong (white space)

Spasi sering digunakan untuk estetika atau menekankan kata/kalimat. Tapi jika menggunakan tab, spasi, atau karakter pemisah lain, maknanya bisa hilang.

Ambil heading ini sebagai contoh:

<h1>W e l c o m e</h1>

Secara visual terbaca “Welcome”, tapi teknologi bantu akan membaca satu per satu hurufnya: “W”, “e”, “l”, “c”, “o”, “m”, “e”.

Hal yang sama bisa terjadi pada kalimat yang dipisah agar terlihat menarik, tapi kehilangan makna saat dibaca secara linear.

Konten yang tulisannya tidak terstruktur

Heading dibagi-bagi hingga terbaca seperti 'C' 'A' 'T' 'S' 'Cool' 'Are', bukan 'Cats are cool'

Tabel

Elemen <table> HTML perlu ditinjau secara hati-hati. Konten tabel sering kali rusak urutannya karena saat membuat tabel, kita jarang mempertimbangkan bagaimana dua dimensi dibaca secara linear.

Teknologi bantu membaca tabel per baris. Dimulai dari sel pertama di baris pertama sampai sel terakhir di baris terakhir.

Kalau tabel punya urutan yang bermakna, pastikan isi tiap sel masuk akal saat dibaca baris demi baris oleh screen reader atau keyboard braille.

Urutan pembacaan tabel yang salah

Tabel 2*4 dengan panah menunjukkan urutan pembacaan dari kiri ke kanan, lalu ke baris berikutnya.

Kesimpulan

WCAG 1.3.2 adalah kriteria keberhasilan yang membantu pengguna teknologi bantu untuk membaca konten dalam urutan yang benar. Dengan mengatur konten yang butuh urutan khusus, kita bisa membantu mereka memahami informasi tanpa kebingungan.