Masukan Anda diharapkan pada solusi yang diusulkan untuk masalah metode tata letak yang mengatur item dalam urutan yang terputus dari sumber dokumen.
Kelompok Kerja CSS sedang mengerjakan solusi untuk situasi saat metode tata letak dapat mengatur item dalam urutan yang terputus dari sumber, sehingga dari urutan pembacaan dan fokus dokumen. Artikel ini menjelaskan masalah dan solusi yang diusulkan, dan kami mengharapkan masukan Anda.
Permasalahan
Urutan pembacaan dokumen HTML mengikuti urutan sumber. Ini berarti bahwa {i>screen reader<i} akan membaca dokumen sebagaimana diletakkan di dalam sumber, dan orang yang menggunakan {i>keyboard<i} untuk menekan tombol di sekitar dokumen juga akan mengikuti urutan sumber tersebut. Biasanya ini masuk akal, dan urutan sumber yang masuk akal untuk dokumen sangat penting untuk mode membaca presentasi konten, pembaca layar, dan perangkat apa pun dengan CSS terbatas. Namun, CSS, khususnya flexbox dan grid, dapat membuat tata letak tempat tata letak 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 dalam 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 pemutusan 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 akan menerima 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 pengepakan padat dalam tata letak petak, Anda mungkin ingin browser mengikuti tata letak, bukan urutan sumber. Agar 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 telah 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 mengurutkan ulang item, terdapat 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 kemungkinan pilihan. Oleh karena itu, saat mengikuti tata letak yang tidak acak, Anda harus menambahkan properti grid-order-items ke penampung, dengan nilai kata kunci yang menjelaskan niat Anda untuk urutan tata letak.
Contoh berikut menunjukkan tata letak yang 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 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, 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, menjelajahi 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 saat urutan pembacaan mungkin berbeda dari sumbernya. Misalnya, saat menggunakan metode tata letak yang dapat menyebabkan pemutusan ini seperti pengepakan petak yang rapat, atau saat urutan tata letak yang berbeda masuk akal pada titik henti sementara 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.
Apakah alat penulisan harus menerapkan properti ini?
Alat penulisan yang memungkinkan pengguna membuat tata letak petak dengan menarik lalu melepas elemen, harus tetap mendorong pengguna 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 lambat untuk menangani pemutusan koneksi.
Harap sampaikan masukan Anda tentang proposal ini
Kami sangat ingin mengumpulkan masukan tentang hal ini. Secara khusus, jika Anda memiliki kasus penggunaan yang menurut Anda tidak akan terpecahkan, atau memiliki masalah aksesibilitas dengan pendekatan ini, harap beri tahu Grup Kerja CSS.
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 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 mungkin menikmati semua percakapan yang mengarah ke tempat kita berada saat ini, karena ini adalah contoh yang baik tentang cara proposal dibahas di CSS Working Group agar 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 peninjauannya.