Pentingnya urutan DOM default
Menggunakan elemen native adalah cara yang bagus untuk mempelajari perilaku fokus karena mereka secara otomatis dimasukkan ke dalam urutan tab berdasarkan di DOM.
Misalnya, Anda mungkin memiliki tiga elemen tombol, satu per satu dalam
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-tombol.
<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>
Namun, penting untuk dicatat bahwa, menggunakan CSS, ada kemungkinan beberapa
ada dalam satu urutan di DOM tetapi muncul dengan urutan yang berbeda di layar. Sebagai
misalnya, jika Anda menggunakan properti CSS seperti float
untuk memindahkan satu tombol ke kanan,
tombol-tombol itu muncul dalam
urutan yang berbeda di layar. Tapi, karena urutan
mereka dalam
DOM tetap sama, begitu pula urutan tabnya. Saat pengguna menekan tab
halaman, tombol 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>
Hati-hati saat mengubah posisi visual elemen di layar menggunakan CSS. Hal ini dapat menyebabkan urutan tab berpindah-pindah, tampak acak, membingungkan pengguna yang mengandalkan {i>keyboard<i}. Karena alasan ini, daftar periksa Web AIM menyatakan dalam bagian 1.3.2 bahwa urutan pembacaan dan navigasi, seperti yang ditentukan oleh urutan kode, harus logis dan intuitif.
Prinsipnya, cobalah menelusuri halaman-halaman Anda dengan menekan tab, hanya untuk memastikan Anda tidak secara tidak sengaja mengacaukan urutan tab. Ini adalah kebiasaan yang baik untuk diadopsi, dan proses yang tidak membutuhkan banyak usaha.
Konten di luar layar
Bagaimana jika Anda memiliki konten yang saat ini tidak ditampilkan, tetapi masih perlu ditampilkan di DOM, seperti navigasi samping yang responsif? Ketika Anda memiliki elemen seperti ini menerima fokus saat mereka berada di luar layar, seolah-olah fokusnya menghilang dan muncul kembali saat pengguna menekan tab di laman — dengan jelas efek yang tidak diinginkan. Idealnya, kita harus mencegah panel mendapatkan fokus ketika berada di luar layar, dan hanya memfokuskan ketika pengguna dapat berinteraksi dengannya.
Terkadang Anda perlu melakukan sedikit pekerjaan
detektif untuk mengetahui di mana fokus
hilang. Anda dapat menggunakan document.activeElement
dari konsol untuk mencari tahu mana
elemen saat ini difokuskan.
Setelah mengetahui elemen luar layar mana yang sedang difokuskan, Anda dapat menyetelnya ke
display: none
atau visibility: hidden
, lalu setel kembali ke display:
block
atau visibility: visible
sebelum menampilkannya kepada pengguna.
Secara umum, kami mendorong developer untuk melakukan tab melalui situs mereka sebelum setiap
publikasikan untuk melihat bahwa urutan tab tidak menghilang atau melompat dari urutan yang logis
. Jika ya, Anda harus memastikan bahwa Anda menyembunyikannya dengan benar
konten di luar layar dengan display: none
atau visibility: hidden
, atau yang Anda
atur ulang elemen posisi fisik di DOM secara logis
pesanan.