Halaman yang tampak normal belum tentu mudah dinavigasi. Pembaca mungkin harus melewati menu berulang sebelum menemukan artikel, daftar judul tidak menjelaskan isi, atau tombol hanya bekerja saat diklik. Gejala tersebut sering dianggap masalah desain, padahal sumbernya bisa berada pada struktur HTML dan perilaku kontrol. Diagnosis yang baik memisahkan tampilan, makna elemen, dan interaksi.
Jangan langsung mengganti seluruh komponen. Pilih satu gejala yang dapat diulang, catat halaman serta perangkat yang digunakan, kemudian periksa bukti. Jika laporan hanya mengatakan halaman membingungkan, tanyakan tindakan apa yang gagal: menemukan subbagian, melewati navigasi, membuka menu, atau kembali ke konten. Setiap tindakan membutuhkan jalur pemeriksaan yang berbeda dan hasil yang bisa dijelaskan.
Judul terlihat besar tetapi tidak terdaftar
Buka developer tools dan pilih teks yang terlihat sebagai subjudul. Periksa apakah elemennya heading atau sekadar paragraf dengan kelas ukuran huruf. CSS dapat membuat keduanya tampak sama, tetapi tidak memberikan makna yang sama. Jika elemen ternyata generik, ubah menjadi heading sesuai hubungan pembahasan, kemudian pertahankan tampilan melalui aturan gaya yang terpisah.
Selanjutnya baca urutan tingkat judul. Lompatan dari h2 langsung ke h4 dapat membingungkan ketika bagian perantara sebenarnya tidak ada. Namun, kembali dari h4 ke h2 dapat masuk akal karena pembahasan berpindah ke bagian utama berikutnya. Jangan memakai pemeriksaan angka secara buta; cocokkan urutan dengan hubungan topik yang dimaksud penulis dalam artikel.
Judul ganda dari komponen berbeda
Periksa apakah template dan isi Markdown sama-sama menghasilkan judul utama. Masalah ini sering muncul ketika penulis menyalin judul ke badan artikel sementara aplikasi sudah menampilkannya. Perbaikannya berada pada sumber yang tepat, bukan menyembunyikan salah satu judul memakai CSS. Teks tersembunyi secara visual masih dapat menimbulkan pengulangan bagi pengguna teknologi bantu tertentu.
Navigasi tidak dapat dibedakan
Jika halaman mempunyai menu utama, breadcrumb, dan daftar legal, lihat bagaimana kelompok tersebut diberi nama. Beberapa landmark navigasi tanpa pembeda membuat pengguna harus masuk satu per satu untuk memahami isinya. Nama aksesibel yang spesifik membantu orientasi. Jika nama berasal dari heading, pastikan ID yang dirujuk benar-benar tersedia dan tidak dipakai ulang.
Periksa pula isi main. Kadang rekomendasi, menu situs, dan footer ikut dimasukkan ke dalamnya karena pembungkus dibuat terlalu luas. Ini menyulitkan pemisahan konten utama dari bagian pendukung. Tinjau dokumen hasil render, bukan hanya kode komponen, karena penggabungan layout dapat menghasilkan struktur yang berbeda dari dugaan ketika komponen dibaca secara terpisah.
Tombol bekerja dengan mouse saja
Cobalah mengakses kontrol melalui Tab. Jika tidak dapat difokuskan, periksa apakah pembuatnya memakai div dengan penangan klik. Menambahkan role button hanya menjelaskan peran; atribut itu tidak otomatis menyediakan seluruh perilaku tombol. Elemen button native biasanya menjadi pilihan lebih sederhana. Tetap pastikan nama, tipe, status, dan tindakan yang dijalankan sesuai kebutuhan pengguna.
Untuk kontrol khusus yang memang tidak dapat diganti, periksa dukungan Enter dan Space sesuai pola interaksinya. Hindari memicu tindakan dua kali akibat penangan keyboard dan klik yang tumpang tindih. Setelah aktivasi, tinjau posisi fokus. Membuka dialog, menutup panel, dan menyimpan formulir mempunyai kebutuhan fokus berbeda; jangan menerapkan satu perpindahan yang sama untuk semuanya.
Fokus ada tetapi tidak terlihat
Cari aturan yang menghapus outline tanpa pengganti. Kontrol dapat menerima fokus secara teknis tetapi tetap sulit digunakan karena pengguna tidak tahu posisinya. Uji pada latar terang dan gelap, bukan hanya pada satu warna. Jika indikator tertutup elemen lain atau terpotong overflow, perbaiki konteks layout sebelum menyimpulkan ketebalan garisnya kurang besar.
Urutan visual berbeda dari urutan dokumen
CSS dapat mengatur ulang elemen dengan properti layout tanpa mengubah susunan sumber. Akibatnya, perpindahan fokus dapat terlihat melompat antarkolom. Untuk memeriksanya, ikuti urutan Tab sambil mencatat posisi setiap kontrol. Kemudian bandingkan dengan urutan node. Jangan mengatasinya dengan banyak nilai tabindex positif karena pemeliharaannya mudah menjadi rumit saat konten bertambah.
Perbaiki urutan dokumen bila memang tidak sesuai alur kerja. Setelah itu, sesuaikan layout untuk beberapa ukuran layar. Pengujian desktop saja tidak cukup karena komponen yang bersebelahan dapat berpindah menjadi urutan vertikal pada ponsel. Pastikan tujuan navigasi, judul, dan isi tetap mempunyai hubungan yang dapat dipahami ketika kolom tidak lagi terlihat berdampingan.
Tutup diagnosis dengan bukti perbaikan
Ulangi tindakan yang semula gagal menggunakan kondisi yang sama. Catat perubahan markup, hasil keyboard, dan batas pengujian. Pemeriksa otomatis berguna untuk sebagian pelanggaran, tetapi tidak menentukan apakah judulnya informatif atau urutan kontennya masuk akal. Jangan menulis bahwa semua masalah aksesibilitas selesai hanya karena satu alat tidak lagi menampilkan peringatan pada halaman tersebut.
Jika masalah belum terpecahkan, simpan contoh minimal yang masih menunjukkan gejala. Hilangkan bagian yang tidak berpengaruh secara bertahap, bukan menghapus seluruh fitur sekaligus. Contoh kecil memudahkan diskusi dengan pengembang lain dan membantu memastikan perbaikan menyasar penyebab, bukan sekadar menutupi efeknya. Struktur yang jelas juga membuat regresi lebih mudah dikenali pada perubahan berikutnya.
Catatan laporan yang ditindaklanjuti
Tuliskan nama kontrol, langkah, hasil aktual, dan hasil yang diharapkan. Sertakan browser serta ukuran layar bila relevan. Hindari laporan seperti semantik rusak tanpa contoh. Laporan yang rinci memungkinkan orang lain mengulang masalah dan menguji solusi yang sama. Jangan menyertakan data pribadi pengunjung pada tangkapan layar atau rekaman pengujian. Gunakan konten uji tidak sensitif selama reproduksi.
