Masukan Anda diperlukan pada solusi yang diusulkan untuk masalah metode tata letak yang mengatur item dalam urutan yang terputus dari sumber dokumen.
Kelompok Kerja CSS sedang mengupayakan solusi untuk situasi di mana metode tata letak dapat mengatur item dalam urutan yang terputus dari sumber, dan karenanya dari urutan pembacaan dan fokus dokumen. Artikel ini menjelaskan masalah tersebut dan solusi yang diusulkan, dan kami mengharapkan masukan Anda.
Permasalahan
Urutan pembacaan dokumen HTML mengikuti urutan sumber. Artinya, pembaca layar akan membaca dokumen seperti yang ditampilkan di sumber, dan pengguna yang menggunakan keyboard untuk menekan tombol tab di sekitar dokumen juga akan mengikuti urutan sumber tersebut. Biasanya ini masuk akal, dan urutan sumber yang masuk akal untuk dokumen sangat penting untuk penyajian konten dalam mode baca, pembaca layar, dan perangkat apa pun dengan CSS terbatas. Namun, CSS, khususnya flexbox dan petak, dapat membuat tata letak dengan tata letak yang mendefinisikan urutan pembacaan visual yang berbeda dengan sumber yang mendasarinya.
Misalnya, menggunakan properti order pada item fleksibel akan mengubah urutan tata letak, tetapi tidak mengubah urutan di sumber.
Dengan menggunakan tata letak petak, metode tata letak yang dipilih dapat menggabungkan urutan tab, misalnya saat menggunakan grid-auto-flow: dense, yang membuat urutan tata letak item secara acak.
Developer juga dapat menyebabkan pemutusan hubungan ini dengan menempatkan item pada petak dalam urutan yang berbeda dengan yang ditentukan di sumber.
Solusi yang diusulkan
CSS Working Group mengusulkan solusi untuk masalah ini, dan mengharapkan 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 paket padat dalam tata letak petak, Anda mungkin ingin browser mengikuti tata letak, bukan urutan sumber. Untuk menyebabkan hal ini terjadi, item fleksibel atau petak harus memiliki properti reading-order, dengan nilai auto.
CSS berikut akan menyebabkan urutan pembacaan mengikuti penempatan item yang 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 {i>grid<i} dan fleksibel, urutan tata letak mudah dipahami. Misalnya, dalam tata letak fleksibel yang menggunakan properti order untuk mengurutkan ulang item, ada urutan tata letak jelas yang ditentukan oleh properti order. Di tata letak lain, kurang jelas apa urutan tata letak yang ideal, mungkin ada lebih dari satu pilihan yang memungkinkan. Oleh karena itu, saat mengikuti tata letak non-acak, Anda perlu 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 pembacaan mengikuti arah flex-flow, bukan mengikuti urutan visual (yang dapat ditunjukkan dengan flex visual).
.cards {
display: flex;
flex-flow: row-reverse;
reading-order-items: flex flow;
}
.cards li {
reading-order: auto;
}
Dalam contoh berikutnya, 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, yang 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 bahwa urutan sumber tidak berpengaruh?
Tidak, urutan sumber tetap penting. Fungsi ini hanya boleh digunakan dalam situasi tertentu dengan urutan pembacaan mungkin berbeda dari sumbernya. Misalnya, saat menggunakan metode tata letak yang dapat menyebabkan pemutusan koneksi ini seperti pengemasan petak padat, atau saat urutan tata letak yang berbeda sesuai pada titik henti sementara tertentu.
Ketika menggunakan properti ini, buat dokumen sumber menggunakan urutan yang sesuai jika halaman dirender tanpa CSS. Tambahkan properti ini hanya di tempat, dan di titik henti sementara, yang memerlukannya.
Apakah alat penulisan harus menerapkan properti ini?
{i>Tool<i} penulisan yang memungkinkan orang membuat tata letak {i>grid<i} dengan menyeret dan melepas elemen, masih harus mendorong orang untuk membuat dokumen sumber yang masuk akal. Oleh karena itu, dalam sebagian besar kasus, akan lebih tepat untuk menyusun ulang sumber berdasarkan urutan tata letak, daripada menggunakan properti ini sebagai cara lambat untuk menangani pemutusan koneksi.
Harap berikan masukan Anda terkait proposal ini
Kami sangat ingin mengumpulkan masukan mengenai hal ini. Khususnya, jika Anda memiliki kasus penggunaan yang menurut Anda tidak akan terselesaikan, atau memiliki masalah aksesibilitas terkait pendekatan, harap beri tahu Kelompok Kerja CSS.
Ada rangkaian pesan yang sedang berlangsung, yang berisi banyak kasus penggunaan dan pendapat tentang pendekatannya. Rangkaian pesan tersebut adalah tempat yang tepat untuk menambahkan komentar, dan menyoroti potensi masalah pada proposal ini. Perlu diperhatikan bahwa proposal saat ini sangat berbeda dengan proposal awal saya yang memulai rangkaian pesan. Orang yang tertarik dapat menikmati semua percakapan yang mengarah ke perkembangan kita saat ini, karena ini adalah contoh yang baik tentang cara kerja proposal dalam Kelompok Kerja CSS untuk menjadi sesuatu yang dapat diimplementasikan di browser.
Gambar thumbnail oleh Patrick Tomasso. Terima kasih kepada Chris Harrelson, Tab Atkins, dan Ian Kilpatrick atas masukan dan ulasannya.