Kami ingin mendapatkan masukan Anda tentang solusi yang diusulkan untuk masalah metode tata letak yang mengatur item dalam urutan yang terputus dari sumber dokumen.
Grup Kerja CSS sedang mengerjakan solusi untuk situasi di mana metode tata letak dapat mengatur item dalam urutan yang terputus dari sumber, dan oleh karena itu dari urutan fokus dan pembacaan dokumen. Artikel ini menjelaskan masalah dan solusi yang diusulkan, dan kami sangat mengharapkan masukan Anda.
Permasalahan
Urutan pembacaan dokumen HTML mengikuti urutan sumber. Artinya, pembaca layar akan membaca dokumen sebagaimana tata letaknya dalam sumber, dan orang yang menggunakan keyboard untuk berpindah-pindah dalam dokumen juga akan mengikuti urutan sumber tersebut. Biasanya hal ini masuk akal, dan urutan sumber yang masuk akal untuk dokumen sangat penting untuk presentasi konten mode baca, pembaca layar, dan perangkat apa pun dengan CSS terbatas. Namun, CSS, dan khususnya flexbox dan petak, dapat membuat tata letak yang menentukan urutan baca visual yang berbeda dengan sumber dasarnya.
Misalnya, menggunakan properti order pada item fleksibel mengubah urutan tata letak, tetapi bukan urutan di sumber.
Dengan menggunakan tata letak petak, metode tata letak yang dipilih dapat mengacaukan urutan tab, misalnya saat menggunakan grid-auto-flow: dense, yang membuat urutan tata letak item secara acak.
Developer juga dapat menyebabkan terputusnya koneksi ini dengan menempatkan item pada petak dalam urutan yang berbeda dengan yang ditentukan dalam sumber.
Solusi yang diusulkan
CSS Working Group mengusulkan solusi untuk masalah ini, dan ingin mendapatkan masukan dari developer dan komunitas aksesibilitas tentang pendekatan ini.
Mengikuti tata letak acak dengan reading-order: auto
Dalam situasi yang membuat urutan tata letak acak, seperti saat menggunakan pengemasan padat dalam tata letak petak, Anda mungkin ingin browser mengikuti tata letak, bukan urutan sumber. Agar hal ini terjadi, item flex atau petak harus memiliki properti reading-order, dengan nilai auto.
CSS berikut akan menyebabkan urutan baca mengikuti penempatan item yang telah dikemas secara padat karena grid-auto-flow: dense.
.cards {
display: grid;
grid-auto-flow: dense;
}
.cards li {
grid-column: auto / span 2;
reading-order: auto;
}
Mengikuti tata letak non-acak dengan reading-order-items
Dalam beberapa tata letak petak dan fleksibel, urutan tata letak mudah dipahami. Misalnya, dalam tata letak fleksibel yang menggunakan properti order untuk menyusun ulang item, ada urutan tata letak yang jelas yang ditentukan oleh properti order. Dalam tata letak lain, urutan tata letak yang ideal kurang jelas, mungkin ada lebih dari satu pilihan yang memungkinkan. Oleh karena itu, saat mengikuti tata letak non-acak, Anda harus menambahkan properti grid-order-items ke penampung, dengan nilai kata kunci yang menjelaskan maksud Anda untuk urutan tata letak.
Contoh berikut menunjukkan tata letak fleksibel menggunakan row-reverse. Item fleksibel memiliki reading-order: auto, dan penampung fleksibel reading-order-items: flex flow untuk menunjukkan bahwa kita juga ingin urutan baca mengikuti arah flex-flow, bukan mengikuti urutan visual (yang dapat kita tunjukkan dengan flex visual).
.cards {
display: flex;
flex-flow: row-reverse;
reading-order-items: flex flow;
}
.cards li {
reading-order: auto;
}
Dalam contoh berikutnya ini, tata letak petak dibuat menggunakan grid-template-areas dan item ditempatkan dalam urutan tata letak yang berbeda dengan urutan sumber. Properti reading-order-items digunakan untuk menunjukkan bahwa kita harus mengikuti urutan tata letak, melintasi setiap baris sebelum melanjutkan ke baris berikutnya. (grid column akan menunjukkan arah yang berlawanan).
.wrapper {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-template-areas:
"a a b b b b"
"c c d d e e"
"f f g g h h";
reading-order-items: grid rows;
}
.a {
grid-area: a;
reading-order: auto;
}
Apakah ini berarti urutan sumber tidak penting?
Tidak, urutan sumber masih penting. Fungsi ini hanya boleh digunakan dalam situasi tertentu ketika urutan baca mungkin berbeda dari sumber. Misalnya, saat menggunakan metode tata letak yang dapat menyebabkan perbedaan ini seperti pengemasan petak padat, atau saat urutan tata letak yang berbeda lebih masuk akal pada titik henti tertentu.
Saat menggunakan properti ini, buat dokumen sumber menggunakan urutan yang akan masuk akal jika halaman dirender tanpa CSS. Tambahkan properti ini hanya di tempat dan pada titik henti sementara yang memerlukannya.
Haruskah alat penulisan menerapkan properti ini?
Alat penulisan yang memungkinkan orang membuat tata letak petak dengan menarik lalu melepas elemen, tetap harus mendorong orang untuk membuat dokumen sumber yang masuk akal. Oleh karena itu, dalam sebagian besar kasus, akan lebih tepat untuk mengurutkan ulang sumber berdasarkan urutan tata letak, daripada menggunakan properti ini sebagai cara mudah untuk mengatasi ketidakcocokan.
Sampaikan masukan Anda terkait proposal ini
Kami sangat ingin mengumpulkan masukan tentang hal ini. Secara khusus, jika Anda memiliki kasus penggunaan yang menurut Anda tidak akan diselesaikan oleh fitur ini, atau memiliki masalah aksesibilitas dengan pendekatan ini, harap beri tahu CSS Working Group.
Ada rangkaian pesan yang sedang berlangsung, yang berisi banyak kasus penggunaan dan pemikiran tentang pendekatan ini. Rangkaian pesan tersebut adalah tempat yang tepat untuk menambahkan komentar dan menandai potensi masalah terkait proposal ini. Perhatikan bahwa proposal saat ini sangat berbeda dari proposal awal saya yang memulai rangkaian pesan ini. Orang-orang yang tertarik mungkin menikmati semua percakapan yang mengarah pada kondisi kita saat ini, karena ini adalah contoh yang baik tentang cara kerja proposal di CSS Working Group hingga menjadi sesuatu yang dapat diterapkan di browser.
Gambar thumbnail oleh Patrick Tomasso. Terima kasih kepada Chris Harrelson, Tab Atkins, dan Ian Kilpatrick atas masukan dan ulasannya.