Urutan DOM itu penting

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 dimasukkan ke dalam urutan tab berdasarkan posisinya di DOM.

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

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

Saya Harus Difokuskan Terakhir!

Namun, perlu diperhatikan bahwa, dengan menggunakan CSS, elemen dapat ada 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 di DOM tetap sama, urutan tabnya juga tetap sama. Saat pengguna menekan tombol tab di seluruh 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 melompat-lompat, tampaknya secara acak, sehingga membingungkan pengguna yang mengandalkan keyboard. Oleh karena itu, checklist Web AIM menyatakan di bagian 1.3.2 bahwa urutan pembacaan dan navigasi, seperti yang ditentukan oleh urutan kode, harus logis dan intuitif.

Sebagai aturan, cobalah menekan tab di seluruh halaman Anda sesering mungkin hanya untuk memastikan Anda tidak secara tidak sengaja mengacaukan urutan tab. Ini adalah kebiasaan baik yang perlu diterapkan, dan tidak memerlukan banyak usaha.

Konten di luar layar

Bagaimana jika Anda memiliki konten yang saat ini tidak ditampilkan, tetapi masih harus ada di DOM, seperti navigasi samping yang responsif? Jika Anda memiliki elemen seperti ini yang menerima fokus saat berada di luar layar, fokusnya dapat terlihat seolah-olah menghilang dan muncul kembali saat pengguna berpindah-pindah halaman — jelas merupakan efek yang tidak diinginkan. Idealnya, kita harus mencegah panel mendapatkan fokus saat berada di luar layar, dan hanya mengizinkannya untuk difokuskan saat pengguna dapat berinteraksi dengannya.

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

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

Secara umum, sebaiknya developer menekan tombol tab di seluruh situs mereka sebelum setiap publikasi untuk memastikan urutan tab tidak hilang atau keluar dari urutan logis. Jika ya, Anda harus memastikan bahwa Anda menyembunyikan konten di luar layar dengan tepat menggunakan display: none atau visibility: hidden, atau Anda mengatur ulang posisi fisik elemen di DOM agar berada dalam urutan yang logis.