1.4.10 Penyusunan Ulang

Apa itu WCAG 1.4.10?

Konten web harus menyesuaikan secara dinamis di berbagai ukuran layar atau tingkat zoom. Artinya, pengguna tidak boleh dipaksa untuk scrolling ke dua arah untuk membaca atau berinteraksi dengan konten. Sebaliknya, tata letaknya harus mengalir ulang (reflow), yaitu menyusun ulang dirinya sehingga semuanya muat dalam tampilan yang tersedia.

WCAG 1.4.10 secara khusus mengharuskan konten dapat digunakan tanpa scrolling horizontal pada lebar viewport 320 piksel CSS (biasanya layar ponsel dalam mode potret). Salah satu cara umum untuk menguji ini adalah dengan memperbesar browser desktop hingga 400%, tetapi memperbesar tidak wajib, yang penting adalah apakah tata letaknya berfungsi pada lebar yang kecil.

Beberapa pengecualian berlaku, seperti untuk konten yang memang memerlukan tata letak dua dimensi, seperti peta atau tabel data.

Mengapa ini penting?

Ketika konten tidak dapat reflow, pengguna low vision mungkin perlu scrolling horizontal untuk setiap baris teks, yang bisa sangat melelahkan dan membingungkan. Reflow memungkinkan pengguna untuk memperbesar konten atau menggunakan layar kecil sambil tetap menjaga semua yang terlihat, terbaca, dan dapat digunakan.

Ini bermanfaat bagi pengguna dengan:

• Low vision yang memperbesar teks
• Gangguan motorik yang membuat gulir horizontal menjadi sulit
• Gangguan kognitif yang membuat scrolling bolak-balik menjadi membebani mental
• Perangkat layar kecil, seperti ponsel atau tablet

Siapa yang terpengaruh?

Pengguna dengan penglihatan terbatas atau low vision, pengguna dengan gangguan motorik, dan pengguna yang menggunakan perangkat mobile.

Pengguna low vision sering kali perlu memperbesar teks untuk melihatnya dengan jelas, dan tanpa reflow, konten yang diperbesar mungkin keluar dari viewport, memaksa pengguna untuk scrolling secara horizontal untuk membaca setiap baris.

Pengguna dengan gangguan motorik atau keterbatasan keterampilan motorik mungkin kesulitan scrolling horizontal untuk melihat konten yang tersembunyi karena itu membutuhkan gerakan yang presisi.

Pengguna di perangkat mobile atau layar kecil mendapatkan manfaat dari reflow karena memastikan konten menyesuaikan dengan tampilan yang lebih kecil, memudahkan navigasi tanpa scrolling atau zoom berlebihan.

Cara menerapkan WCAG 1.4.10

Untuk memenuhi kriteria ini:

• Konten harus dapat digunakan pada lebar viewport 320 piksel CSS.
• Scrolling horizontal tidak boleh diperlukan untuk teks atau kontrol.
• Konten harus reflow agar sesuai dengan layar, biasanya dalam satu kolom untuk sebagian besar bahasa.

Catatan: Menguji pada zoom 400% adalah metode umum, namun tidak menjadi kewajiban. WCAG berfokus pada kemampuan beradaptasi layout, bukan pada tingkat zoom tertentu.

Teknik desain web responsif

Gunakan teknik layout fleksibel untuk memastikan konten dapat mengalir ulang dengan benar:

• Gunakan CSS @media queries
• Gunakan unit relatif seperti em, rem, %, vw, vh
• Gunakan properti CSS overflow dan wrap
• Gunakan CSS max-width dan height untuk gambar
• Hindari layout fixed-width atau posisi absolute

CSS Media Queries

Media query memungkinkan kamu membuat desain responsif dan layout yang menyesuaikan dengan berbagai ukuran layar yang ditentukan. Dengan menggunakan breakpoint, kamu dapat menawarkan gaya dan layout alternatif pada berbagai ukuran layar. Ini sangat berguna ketika:

• Beralih antara konten kolom ganda dan kolom tunggal
• Menyesuaikan ukuran font untuk teks dan judul
• Menyembunyikan elemen yang tidak penting pada layar yang lebih kecil
• Menerapkan teknik lain yang tercantum di bawah ini

Pada contoh media query untuk perangkat dengan ukuran layar lebih kecil dari 768px, font-size body disesuaikan, widget sidebar disembunyikan, dan elemen kontainer disesuaikan agar hanya menampilkan satu kolom.

@media (max-width: 768px) {
    body {font-size: 1.2rem; line-height: 1.6;}
    .sidebar-widget {display: none;}
    .container {grid-template-columns: 1fr;}
}

Ukuran relatif

Untuk desain yang dapat diskalakan, ganti satuan tetap seperti px dengan satuan relatif seperti em, rem, %, vw, dan vh. Satuan-satuan ini menyesuaikan secara proporsional berdasarkan pengaturan pengguna atau ukuran viewport.

Properti CSS overflow dan wrap

Gunakan properti overflow, overflow-wrap, white-space, dan text-overflow secara strategis untuk mengelola konten yang mungkin meluber keluar dari viewport. Ini membantu menghindari scroll horizontal dengan memastikan konten terbungkus dalam kontainernya, terutama saat berhadapan dengan string teks panjang atau banyak teks.

• overflow: Mengontrol apa yang terjadi ketika konten melebihi batas kontainernya.
• overflow-x/overflow-y: Mengontrol perilaku overflow secara terpisah untuk sumbu horizontal dan vertikal.
• overflow-wrap: Memastikan teks terputus ke baris baru alih-alih meluber keluar dari kontainernya.
• text-overflow: Untuk menangani teks yang meluber keluar dari kontainer dengan menambahkan indikator visual seperti elipsis (…).
• white-space: Mengontrol bagaimana ruang putih di dalam elemen ditangani.

Pada contoh berikut, teks diatur dengan lebar tetap 200px, dan beberapa properti terkait overflow digunakan untuk menangani teks ekstra dengan rapi. Properti white-space menjaga teks tetap dalam satu baris, overflow menyembunyikan teks yang tidak muat, dan text-overflow menambahkan elipsis untuk menunjukkan bahwa teks telah terpotong.

.truncated-text {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
<div class="truncated-text">
    This is an example of a very long sentence that will be truncated with an ellipsis when it overflows.
</div>
}

Output visual dari kode tersebut menjadi:

This is an example of a very lo...

Hindari penggunaan lebar tetap atau penataan absolut

Hindari penetapan lebar secara kaku, penataan elemen, atau layout secara absolut, karena hal ini dapat menghambat proses reflow. Sebagai gantinya, gunakan layout yang fleksibel dengan flexbox atau grid dan dimensi relatif.

.container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

CSS max-width dan height untuk <img>

Dengan menggunakan max-width dan height di CSS, gambar dapat menyesuaikan ukuran agar sesuai dengan ruang yang tersedia tanpa kehilangan proporsinya. Layout yang responsif dan ukuran cerdas memastikan gambar tetap pada tempatnya, bahkan dalam layout satu kolom atau saat melakukan zoom.

Pengecualian untuk scroll horizontal jika layout two-dimensional diperlukan

Beberapa layout memang membutuhkan tampilan two-dimensional yang memerlukan scrolling empat arah, yaitu atas-bawah dan kanan-kiri, seperti:

• Peta
• Tabel data
• Spreadsheet
• Notasi musik
• Toolbar

Dalam kasus seperti ini, scroll horizontal di dalam komponen tersebut diperbolehkan. Namun, bagian lain dari halaman tetap harus bisa reflow dengan normal.

Melinierkan konten two-dimensional

Jika memungkinkan, ubah data tabel menjadi format bertumpuk satu kolom menggunakan daftar atau heading. Ini membuat informasi lebih mudah dibaca di layar kecil tanpa harus scroll ke samping.

Kesimpulan

Reflow sangat penting untuk desain responsif dan aksesibilitas. Ini membantu pengguna memperbesar konten atau menggunakan layar kecil tanpa usaha ekstra atau rasa frustrasi.

Desainlah dengan fleksibilitas, hindari layout tetap, dan pastikan konten dapat muat dalam viewport selebar 320 piksel CSS. Ini akan menciptakan pengalaman yang lebih baik untuk semua orang.