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 elemen tersebut secara otomatis disisipkan ke dalam urutan tab berdasarkan posisinya di DOM.

Misalnya, Anda mungkin memiliki tiga elemen tombol yang berurutan 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.

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

Saya Harus Fokus Terakhir!

Namun, penting untuk diingat bahwa, dengan menggunakan CSS, dimungkinkan menempatkan sesuatu dalam satu urutan di DOM, tetapi muncul dalam urutan 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 dalam DOM tetap sama, begitu pula urutan tabnya. Saat pengguna berpindah tab di halaman, tombol akan mendapat 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, seolah acak, sehingga 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, cobalah berpindah-pindah tab melewati berbagai laman sesering mungkin sekadar untuk memastikan Anda tidak secara tidak sengaja mengacaukan urutan tab. Ini adalah kebiasaan yang baik untuk diterapkan, dan hal ini tidak memerlukan banyak usaha.

Konten offscreen

Bagaimana jika Anda memiliki konten yang saat ini tidak ditampilkan, tetapi tetap perlu ada di DOM, seperti menu samping yang responsif? Jika Anda memiliki elemen seperti ini yang menerima fokus saat tidak ada di layar, elemen ini bisa terlihat seakan fokusnya menghilang dan muncul kembali saat pengguna berpindah tab di halaman — jelas merupakan efek yang tidak diinginkan. Idealnya, kita harus mencegah agar panel tidak mendapat fokus saat berada di luar layar, dan hanya mengizinkan panel difokuskan saat pengguna dapat berinteraksi dengannya.

Terkadang Anda perlu melakukan semacam 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 mana yang sedang difokus, Anda dapat menyetelnya ke display: none atau visibility: hidden, lalu menyetelnya kembali ke display: block atau visibility: visible sebelum menampilkannya kepada pengguna.

Secara umum, kami mendorong developer untuk berpindah-pindah tab dalam situs mereka sebelum setiap publikasi untuk mengetahui apakah urutan tab tidak menghilang atau melompat dari urutan logis. Jika ternyata menghilang atau melompat, pastikan Anda telah menyembunyikan konten di luar layar dengan benar melalui display: none atau visibility: hidden, atau apakah Anda telah menyusun ulang posisi fisik elemen dalam DOM sehingga berada dalam urutan logis.