Kita tahu bahwa adalah ide yang baik untuk mendesain secara responsif untuk memberikan pengalaman multi-perangkat terbaik, tetapi desain responsif juga lebih unggul dalam hal aksesibilitas.
Pertimbangkan situs seperti Udacity:
Pengguna dengan gangguan penglihatan yang kesulitan membaca cetak kecil mungkin memperbesar halaman, mungkin hingga 400%. Karena situs ini dirancang secara responsif, UI akan mengatur ulang dirinya sendiri untuk "area pandang yang lebih kecil" (sebenarnya untuk laman yang lebih besar), yang bagus untuk pengguna desktop yang membutuhkan pembesaran layar dan juga untuk pengguna pembaca layar seluler. Sama-sama menguntungkan Berikut halaman yang sama yang diperbesar hingga 400%:
Faktanya, hanya dengan mendesain secara responsif, kita memenuhi aturan 1.4.4 dari daftar periksa WebAIM, yang menyatakan bahwa laman "... harus dapat dibaca dan berfungsi ketika ukuran teks dua kali lipat."
Pembahasan semua desain responsif berada di luar cakupan panduan ini, tetapi berikut adalah beberapa hal penting yang akan bermanfaat bagi pengalaman responsif Anda dan memberi pengguna akses yang lebih baik ke konten Anda.
Menggunakan tag meta area pandang
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Menyetel width=device-width akan mencocokkan lebar layar dalam piksel yang tidak bergantung pada perangkat,
dan menyetel initial-scale=1 akan membentuk hubungan 1:1 antara piksel CSS dan piksel yang tidak bergantung perangkat.
Melakukan hal ini menginstruksikan browser untuk
menyesuaikan konten Anda dengan ukuran layar,
jadi pengguna tidak hanya melihat
banyak teks yang mengerut.
Lihat Menyesuaikan ukuran konten dengan area tampilan untuk mempelajari lebih lanjut.
Izinkan pengguna untuk memperbesar/memperkecil
Dimungkinkan untuk menggunakan tag meta area pandang untuk mencegah zoom,
dengan menetapkan maximum-scale=1 atau user-scaleable=no.
Jangan melakukannya, dan biarkan pengguna memperbesar jika perlu.
Mendesain dengan fleksibilitas
Hindari menargetkan ukuran layar tertentu dan sebagai gantinya, gunakan {i>grid<i} yang fleksibel, membuat perubahan pada tata letak saat kontennya didikte. Seperti yang kita lihat pada contoh Kaggle di atas, pendekatan ini memastikan bahwa desain merespons apakah ruang yang dikurangi disebabkan oleh layar yang lebih kecil atau tingkat zoom yang lebih tinggi.
Anda dapat membaca teknik ini selengkapnya dalam artikel Dasar-dasar desain web responsif.
Menggunakan unit relatif untuk teks
Untuk mendapatkan hasil maksimal dari petak fleksibel Anda menggunakan unit relatif seperti em atau rem untuk hal-hal seperti ukuran teks, sebagai ganti nilai {i>pixel<i}. Beberapa {i>browser<i} mendukung pengubahan ukuran teks hanya dalam preferensi pengguna, dan apabila Anda menggunakan nilai piksel untuk teks, setelan ini tidak akan memengaruhi salinan. Namun, jika Anda telah menggunakan unit relatif secara keseluruhan, maka salinan situs akan diperbarui untuk mencerminkan preferensi pengguna.
Cara ini akan memungkinkan seluruh situs untuk mengubah posisi/geometri saat pengguna memperbesarnya, menciptakan pengalaman membaca yang mereka butuhkan untuk menggunakan situs Anda.
Hindari memutuskan sambungan tampilan visual dari urutan sumber
Pengunjung yang menekan 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 pada setiap titik titik henti sementara dengan menekan tombol {i>tab<i} melalui konten, apakah alur yang melalui halaman itu masih masuk akal?
Baca selengkapnya tentang penonaktifan tampilan sumber dan tampilan visual.
Berhati-hatilah dengan petunjuk spasial
Saat menulis mikrokopi, hindari penggunaan bahasa yang menunjukkan lokasi elemen pada laman. Misalnya, merujuk ke navigasi "di sebelah kiri" nggak masuk akal buat versi selulernya saat navigasi berada di bagian atas layar.
Pastikan target ketuk cukup besar pada perangkat layar sentuh
Pada perangkat layar sentuh, pastikan target ketuk cukup besar untuk membuatnya mudah diaktifkan tanpa menekan tautan lain. Ukuran yang baik untuk setiap elemen yang dapat diketuk adalah 48 px, baca panduan selengkapnya tentang target ketuk.