Pentingnya Urutan DOM

Pentingnya urutan DOM default

Dave Gash

Meggin Kearney

Rob Dodson

Menggunakan elemen native adalah cara yang bagus untuk mempelajari perilaku fokus karena elemen tersebut otomatis disisipkan ke dalam urutan tab berdasarkan posisinya di DOM.

Misalnya, Anda mungkin memiliki tiga elemen tombol yang berurutan dalam DOM. Menekan Tab akan memfokuskan setiap tombol secara berurutan. Coba klik blok kode di bawah ini untuk memindahkan titik awal navigasi fokus, lalu tekan Tab untuk memindahkan fokus melalui tombol-tombol.

<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>

Saya Harus Fokus Terakhir!

Namun, penting untuk diperhatikan bahwa, dengan menggunakan CSS, dimungkinkan untuk menempatkan sesuatu dalam satu urutan di DOM, tetapi muncul dalam urutan yang berbeda di layar. Misalnya, jika Anda menggunakan properti CSS seperti float untuk memindahkan satu tombol ke kanan, tombol akan muncul dalam urutan yang berbeda di layar. Namun, karena urutannya dalam DOM tetap sama, begitu pula urutan tabnya. Ketika pengguna berpindah-pindah tab di halaman, tombol akan mendapatkan fokus dalam urutan yang tidak intuitif. Coba klik blok kode di bawah untuk memindahkan titik awal navigasi fokus, lalu tekan Tab untuk memindahkan fokus melalui tombol.

<button style="float: right">I Should</button>
<button>Be Focused</button>
<button>Last!</button>

Saya Harus Fokus Terakhir!

Berhati-hatilah saat mengubah posisi visual elemen di layar menggunakan CSS. Hal ini dapat menyebabkan urutan tab berpindah-pindah, yang tampak acak dan membingungkan pengguna yang mengandalkan keyboard. Karena alasan ini, checklist Web IAM menyatakan di bagian 1.3.2 bahwa urutan pembacaan dan navigasi, seperti yang ditentukan oleh urutan kode, harus logis dan intuitif.

Biasanya, coba berpindah-pindah tab setiap kali halaman hanya untuk memastikan Anda tidak mengacaukan urutan tab secara tidak sengaja. Ini adalah kebiasaan yang baik untuk diadopsi, dan yang tidak memerlukan banyak usaha.

Konten di luar layar

Bagaimana jika Anda memiliki konten yang saat ini tidak ditampilkan, tetapi masih harus berada di DOM, seperti panel samping responsif? Saat Anda memiliki elemen seperti ini yang menerima fokus saat berada di luar layar, elemen tersebut dapat terlihat seolah-olah fokus menghilang dan muncul kembali saat pengguna berpindah-pindah tab di halaman — jelas sebagai efek yang tidak diinginkan. Idealnya, kita harus mencegah agar panel tidak mendapatkan fokus saat sedang berada di luar layar, dan hanya membiarkannya difokuskan saat pengguna dapat berinteraksi dengannya.

Terkadang Anda perlu melakukan sedikit pekerjaan detektif untuk mencari tahu sampai ke mana fokusnya berpindah. Anda dapat menggunakan document.activeElement dari konsol untuk mengetahui elemen mana yang saat ini difokuskan.

Setelah mengetahui elemen di luar layar mana yang sedang difokuskan, Anda dapat menetapkannya ke display: none atau visibility: hidden, lalu menyetelnya kembali ke display: block atau visibility: visible sebelum menampilkannya kepada pengguna.

Secara umum, kami mendorong developer untuk menelusuri situs mereka sebelum memublikasikan setiap konten, untuk melihat bahwa urutan tab tidak hilang atau melompat dari urutan yang logis. Jika ya, pastikan Anda menyembunyikan konten di luar layar dengan tepat dengan display: none atau visibility: hidden, atau mengatur ulang posisi fisik elemen dalam DOM agar berada dalam urutan yang logis.