Kita tahu bahwa mendesain secara responsif adalah ide yang baik untuk memberikan pengalaman multiperangkat terbaik, tetapi desain responsif juga lebih unggul untuk aksesibilitas.
Pertimbangkan situs seperti Udacity:
Pengguna dengan kemampuan penglihatan rendah yang memiliki kesulitan membaca tulisan kecil mungkin memperbesar laman, mungkin sebesar 400%. Karena situs didesain secara responsif, UI akan mengatur ulang sendiri untuk "tampilan yang terlihat yang lebih kecil" (sebenarnya untuk halaman yang lebih besar), yang sangat bagus untuk pengguna desktop yang memerlukan perbesaran layar dan untuk pengguna pembaca layar seluler juga. Sama-sama menguntungkan Berikut halaman yang sama yang diperbesar hingga 400%:
Faktanya, hanya dengan mendesain secara responsif, kita memenuhi aturan 1.4.4 dari checklist WebAIM, yang menyatakan bahwa halaman "… harus dapat dibaca dan berfungsi saat ukuran teksnya digandakan".
Memeriksa semua desain responsif adalah di luar cakupan panduan ini, tetapi berikut adalah beberapa hal penting yang akan bermanfaat bagi pengalaman responsif Anda dan memberi pengguna Anda akses yang lebih baik ke konten Anda.
Menggunakan tag meta viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Setelan width=device-width akan cocok dengan lebar layar dalam piksel yang tidak bergantung perangkat,
dan setelan initial-scale=1 menetapkan hubungan 1:1 antara piksel CSS dan piksel yang tidak bergantung perangkat.
Melakukan hal ini akan memerintahkan browser untuk menyesuaikan konten Anda dengan ukuran layar,
sehingga pengguna tidak hanya melihat sekumpulan teks yang tersusun rapat.
Lihat Menyesuaikan ukuran konten dengan area pandang untuk mempelajari lebih lanjut.
Mengizinkan pengguna melakukan zoom
Anda dapat menggunakan tag meta area pandang untuk mencegah zoom, dengan menyetel maximum-scale=1 atau user-scaleable=no.
Hindari hal ini, dan izinkan pengguna memperbesar jika perlu.
Mendesain dengan fleksibilitas
Hindari menargetkan ukuran layar tertentu dan gunakan petak yang fleksibel, yang membuat perubahan pada tata letak saat konten menentukannya. Seperti yang kita lihat pada contoh Udacity di atas, pendekatan ini memastikan bahwa desain merespons baik ruang yang berkurang karena layar yang lebih kecil maupun tingkat zoom yang lebih tinggi.
Anda dapat membaca lebih lanjut teknik ini di artikel Dasar-dasar desain web responsif.
Menggunakan unit relatif untuk teks
Untuk mendapatkan hasil terbaik dari petak fleksibel, gunakan unit relatif seperti em atau rem untuk hal-hal seperti ukuran teks, bukan nilai piksel. Beberapa browser mendukung perubahan ukuran teks hanya di preferensi pengguna, dan jika Anda menggunakan nilai piksel untuk teks, setelan ini tidak akan memengaruhi salinan Anda. Namun, jika Anda telah menggunakan unit relatif di seluruh situs, salinan situs akan diperbarui untuk mencerminkan preferensi pengguna.
Dengan demikian, seluruh situs dapat menyesuaikan posisi/geometri saat pengguna melakukan zoom, sehingga menciptakan pengalaman membaca yang diperlukan untuk menggunakan situs Anda.
Hindari memutuskan koneksi tampilan visual dari urutan sumber
Pengunjung yang menggunakan tombol tab di situs Anda dengan keyboard akan mengikuti urutan konten dalam dokumen HTML. Saat menggunakan metode tata letak modern seperti Flexbox dan Grid, mudah untuk membuat rendering visual tidak sesuai dengan urutan sumber. Hal ini dapat menyebabkan lompatan yang mengganggu di sekitar halaman bagi seseorang yang menggunakan keyboard untuk berpindah-pindah.
Pastikan untuk menguji desain Anda di setiap titik henti sementara dengan menekan tombol tab dalam konten, apakah alur pada halaman masih masuk akal?
Baca selengkapnya tentang sumber dan tampilan visual terputus.
Berhati-hatilah dengan petunjuk spasial
Saat menulis mikrokopi, hindari penggunaan bahasa yang menunjukkan lokasi elemen pada laman. Misalnya, merujuk ke navigasi "di sebelah kiri" tidak masuk akal dalam versi seluler saat navigasi berada di bagian atas layar.
Pastikan target ketuk cukup besar di perangkat layar sentuh
Pada perangkat layar sentuh, pastikan target ketuk Anda cukup besar agar mudah diaktifkan tanpa menekan link lain. Ukuran yang baik untuk elemen yang dapat diketuk adalah 48 piksel. Baca panduan selengkapnya tentang target ketuk.