Pentingnya urutan DOM default
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, 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, perlu diingat bahwa, dengan menggunakan CSS, Anda dapat membuat elemen
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 urutan di DOM tetap sama, begitu juga urutan tabnya. Saat pengguna menekan 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>
Berhati-hatilah saat mengubah posisi visual elemen di layar menggunakan CSS. Hal ini dapat menyebabkan urutan tab berpindah-pindah, yang tampaknya 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, coba gunakan tombol tab untuk beralih antarhalaman secara berkala hanya untuk memastikan Anda tidak sengaja mengacaukan urutan tab. Ini adalah kebiasaan yang baik untuk diterapkan, dan tidak memerlukan banyak upaya.
Konten offscreen
Bagaimana jika Anda memiliki konten yang saat ini tidak ditampilkan, tetapi masih perlu berada di DOM, seperti menu samping responsif? Jika Anda memiliki elemen seperti ini yang menerima fokus saat berada di luar layar, sepertinya fokus hilang dan muncul kembali saat pengguna menggunakan tab di halaman — jelas merupakan efek yang tidak diinginkan. Idealnya, kita harus mencegah panel mendapatkan fokus saat berada di luar layar, dan hanya mengizinkannya difokuskan saat pengguna dapat berinteraksi dengannya.
Terkadang Anda perlu melakukan sedikit pekerjaan detektif untuk mengetahui ke mana fokus
telah hilang. Anda dapat menggunakan document.activeElement dari konsol untuk mengetahui elemen mana yang saat ini difokuskan.
Setelah mengetahui elemen di luar layar yang 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 menggunakan tombol tab di situs mereka sebelum setiap
publikasi untuk memastikan urutan tab tidak hilang atau melompat keluar dari urutan
logis. Jika demikian, Anda harus memastikan bahwa Anda menyembunyikan konten di luar layar dengan display: none atau visibility: hidden dengan benar, atau bahwa Anda menyusun ulang posisi fisik elemen di DOM sehingga berada dalam urutan yang logis.