Urutan konten dalam dokumen Anda penting untuk aksesibilitas situs Anda. Pembaca layar akan membacakan konten berdasarkan urutan dokumen, dengan menggunakan elemen HTML yang telah Anda pilih untuk memberikan makna pada konten tersebut. Orang yang menavigasi situs menggunakan keyboard, bukan layar sentuh atau mouse, akan menggunakan {i>tab<i} di sekitar dokumen. Artinya, link akan beralih dari elemen aktif ke elemen aktif, melakukan tab di antara link dan kolom formulir, sekali lagi sesuai urutannya dalam dokumen.
Memulai dengan dokumen yang terstruktur dengan baik dan menggunakan semua elemen HTML yang tepat adalah bagian penting dari membuat situs yang mudah diakses. Namun, Anda dapat mengurungkan sebagian pekerjaan bagus tersebut saat mulai menggunakan CSS. Mari kita lihat alasannya.
Urutan sumber vs. visual
Navigasi situs sering kali ditandai sebagai daftar link. Anda kemudian dapat menggunakan Flexbox untuk mengubahnya menjadi batang horizontal. Pada contoh Glitch di bawah, saya telah membuat pola yang umum digunakan ini. Klik contoh, dan klik tab di antara link. Fokusnya akan bergerak ke arah logis dari kiri ke kanan, sesuai dengan urutan yang kita baca dalam bahasa Inggris.
Jika Anda telah membuat pola semacam ini, lalu diminta untuk memindahkan Hubungi Kami,
yang merupakan urutan kedua di sumber, ke bagian akhir. Anda dapat menggunakan properti order yang berfungsi di Flexbox.
Coba berpindah-pindah pada item pada contoh di bawah ini, yang telah menggunakan properti order untuk mengatur ulang item.
Fokus akan melompat ke item terakhir, lalu kembali lagi. Sejauh urutan tab terkait bahwa item tersebut adalah item kedua. Namun secara visual, ini adalah item terakhir.
Contoh di atas menyoroti masalah yang kita hadapi jika kita menyusun ulang dan menyusun ulang konten menggunakan CSS. Jika Anda menghadapi masalah ini, sebaiknya ubah urutan di sumber, bukan menggunakan CSS.
Properti CSS mana yang dapat menyebabkan pengurutan ulang?
Metode tata letak yang memungkinkan Anda memindahkan elemen dapat menyebabkan masalah ini. Properti CSS berikut sering menyebabkan masalah penataan ulang konten:
- Menggunakan
position: absolutedan mengeluarkan item dari alur secara visual. - Properti
orderdalam tata letak Flexbox dan Grid. - Nilai
row-reversedancolumn-reverseuntukflex-directiondi Flexbox. - Nilai
denseuntukgrid-auto-flowdi Tata Letak Grid. - Setiap pemosisian berdasarkan nama baris atau nomor, atau dengan
grid-template-areasdi Tata Letak Petak.
Dalam contoh berikutnya, saya telah membuat tata letak menggunakan Petak CSS dan memosisikan item menggunakan nomor baris, tanpa mempertimbangkan lokasi item tersebut di sumber.
Coba jelajahi contoh ini dengan menekan tombol tab, dan lihat bagaimana fokus meningkat. Hal ini menyebabkan pengalaman yang sangat membingungkan, terutama jika halamannya panjang.
Menguji masalah
Pengujian yang sangat sederhana adalah dengan keyboard menavigasi halaman Anda. Bisakah kamu melakukan semuanya? Apakah ada lompatan aneh saat Anda melakukannya?
Untuk demonstrasi visual pengurutan konten, coba pemeriksa Tab Stop dalam ekstensi Accessibility Insights untuk Chrome. Gambar di bawah ini menunjukkan contoh Petak CSS di alat tersebut. Anda dapat melihat bagaimana fokus harus berpindah-pindah di sekitar tata letak.
Pengurutan ulang konten dan desain web responsif
Jika Anda hanya memiliki satu presentasi konten, maka menempatkan sumber dalam urutan yang logis, dan mencerminkannya dalam tata letak biasanya tidak sulit. Fungsi ini bisa menjadi lebih sulit jika Anda mempertimbangkan tata letak pada titik henti sementara yang berbeda. Misalnya, masuk akal untuk memindahkan elemen ke bagian bawah tata letak pada layar yang lebih kecil.
Saat ini belum ada solusi yang baik untuk masalah ini. Di kebanyakan situasi, mengembangkan "seluler mengutamakan", akan membantu Anda menjaga sumber dan tata letak tetap teratur. Pilihan yang Anda buat terkait prioritas di seluler sering kali merupakan pilihan yang solid untuk konten secara umum. Kuncinya adalah mengetahui kapan ada kemungkinan pengurutan ulang konten jenis ini, dan untuk menguji apakah pengalaman akhir tidak terlalu mengganggu di setiap titik henti sementara.