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 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>

Seharusnya saya Fokus Terakhir!

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>

Seharusnya saya Berfokuslah Terakhir!

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.