Pentingnya urutan DOM default
Menggunakan elemen native adalah cara yang bagus untuk mempelajari perilaku fokus karena elemen native secara otomatis disisipkan ke dalam urutan tab berdasarkan posisinya di DOM.
Misalnya, Anda mungkin memiliki tiga elemen tombol, satu per 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>
Namun, penting untuk diperhatikan bahwa dengan menggunakan CSS, item 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-tombol tersebut akan muncul dalam urutan yang berbeda di layar. Namun, karena urutannya dalam
DOM tetap sama, maka begitu pula urutan tabnya. Saat pengguna berpindah tab di halaman itu, 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 dari tombol-tombol.
<button style="float: right">I Should</button>
<button>Be Focused</button>
<button>Last!</button>
Hati-hati saat mengubah posisi visual elemen di layar menggunakan CSS. Hal ini dapat menyebabkan urutan tab berpindah-pindah, yang tampaknya acak, membingungkan pengguna yang mengandalkan keyboard. Oleh karena itu, checklist Web AIM menyatakan di bagian 1.3.2 bahwa urutan navigasi dan pembacaan, seperti yang ditentukan oleh urutan kode, harus logis dan intuitif.
Sebagai aturan, coba gunakan tab untuk berpindah-pindah halaman sesering mungkin hanya untuk memastikan Anda tidak mengacaukan urutan tab secara tidak sengaja. Ini adalah kebiasaan yang baik untuk diterapkan, dan 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 navigasi samping yang responsif? Jika Anda memiliki elemen seperti ini yang menerima fokus saat berada di luar layar, hal ini dapat tampak seolah-olah fokus menghilang dan muncul kembali saat pengguna melakukan tab melalui halaman — jelas efek yang tidak diinginkan. Idealnya, kita harus mencegah panel mendapatkan fokus saat berada di luar layar, dan hanya membiarkannya difokus saat pengguna dapat berinteraksi dengannya.
![Panel slide-in di luar layar dapat mencuri fokus.](https://web.dev/static/articles/dom-order-matters/image/an-offscreen-slide-panel-418516732500b.png?authuser=6&hl=id)
Terkadang Anda perlu melakukan sedikit pekerjaan detektif untuk mencari tahu sejauh mana fokus
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 menyetelnya ke
display: none
atau visibility: hidden
, lalu menyetelnya kembali ke display:
block
atau visibility: visible
sebelum menampilkannya kepada pengguna.
![Panel slide-in disetel untuk tidak menampilkan apa pun.](https://web.dev/static/articles/dom-order-matters/image/a-slide-panel-set-displ-4e959c65a9e47.png?authuser=6&hl=id)
![Panel slide-in yang disetel ke blok layar.](https://web.dev/static/articles/dom-order-matters/image/a-slide-panel-set-displ-ccba12904336f.png?authuser=6&hl=id)
Secara umum, sebaiknya developer menelusuri situs mereka sebelum melakukan
publikasi untuk melihat bahwa urutan tab tidak menghilang atau keluar dari urutan
logis. Jika demikian, pastikan Anda menyembunyikan konten di luar layar dengan tepat menggunakan display: none
atau visibility: hidden
, atau mengatur ulang posisi fisik elemen di DOM agar dalam urutan yang logis.