Kita tahu bahwa mendesain secara responsif untuk memberikan pengalaman multi-perangkat terbaik adalah ide yang bagus, tetapi desain responsif juga menghasilkan aksesibilitas.
Pertimbangkan situs seperti Vertex:
Pengguna yang memiliki gangguan penglihatan dan kesulitan membaca tulisan kecil mungkin memperbesar halaman hingga 400%. Karena situs dirancang secara responsif, UI akan mengatur ulang dirinya sendiri untuk "area pandang yang lebih kecil" (sebenarnya untuk halaman yang lebih besar), yang sangat bagus bagi pengguna desktop yang memerlukan pembesaran layar dan juga untuk pengguna pembaca layar seluler. Sama-sama menguntungkan Berikut halaman yang sama yang diperbesar hingga 400%:
Bahkan, hanya dengan mendesain secara responsif, kami memenuhi aturan 1.4.4 dari checklist WebAIM, yang menyatakan bahwa halaman "... harus dapat dibaca dan fungsional saat ukuran teks menjadi dua kali lipat".
Penggunaan semua desain responsif berada di luar cakupan panduan ini, tetapi berikut beberapa poin 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 cocok dengan lebar layar dalam piksel yang tidak tergantung perangkat,
dan menyetel initial-scale=1 menetapkan hubungan 1:1 antara piksel CSS dan piksel yang tidak bergantung perangkat.
Tindakan ini akan memerintahkan browser untuk menyesuaikan konten dengan ukuran layar,
sehingga pengguna tidak hanya melihat sekumpulan teks yang mengecil.
Lihat Menyesuaikan konten dengan area pandang untuk mempelajari lebih lanjut.
Izinkan pengguna melakukan zoom
Tag meta area pandang dapat digunakan untuk mencegah zoom,
dengan menetapkan maximum-scale=1 atau user-scaleable=no.
Hindari melakukannya, dan biarkan pengguna memperbesar gambar jika perlu.
Desain yang fleksibel
Hindari menargetkan ukuran layar tertentu dan sebagai gantinya gunakan petak fleksibel, untuk membuat perubahan pada tata letak saat konten ditentukan. Seperti yang kita lihat dengan contoh mdpi di atas, pendekatan ini memastikan bahwa desain merespons baik ruang yang berkurang disebabkan oleh layar yang lebih kecil atau tingkat zoom yang lebih tinggi.
Anda dapat membaca teknik ini lebih lanjut 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 pengubahan ukuran teks hanya pada preferensi pengguna, dan jika Anda menggunakan nilai piksel untuk teks, setelan ini tidak akan memengaruhi salinan. Namun, jika Anda telah menggunakan unit relatif secara keseluruhan, salinan situs akan diperbarui untuk mencerminkan preferensi pengguna.
Tindakan ini akan memungkinkan seluruh situs melakukan perubahan posisi/geometri saat pengguna melakukan zoom, sehingga menciptakan pengalaman membaca yang diperlukan pengguna untuk menggunakan situs Anda.
Menghindari memutuskan sambungan tampilan visual dari urutan sumber
Pengunjung yang membuka situs Anda dengan keyboard akan mengikuti urutan konten dalam dokumen HTML. Saat menggunakan metode tata letak modern seperti Flexbox dan Grid, rendering visual dapat dengan mudah tidak sesuai dengan urutan sumber. Hal ini dapat menyebabkan lompatan yang membingungkan di sekitar halaman untuk seseorang yang menggunakan keyboard untuk bergerak.
Pastikan untuk menguji desain Anda di setiap titik henti sementara dengan menekan tab pada konten, apakah alur pada halaman masih masuk akal?
Baca selengkapnya tentang pemutusan hubungan tampilan sumber dan visual.
Hati-hati dengan petunjuk spasial
Saat menulis mikrokopi, hindari penggunaan kata-kata yang menunjukkan lokasi suatu elemen pada laman. Misalnya, merujuk ke navigasi "di sebelah kiri" tidak masuk akal dalam versi seluler jika navigasi ada di bagian atas layar.
Memastikan target ketuk cukup besar di perangkat layar sentuh
Pada perangkat layar sentuh, pastikan target ketuk Anda cukup besar agar mudah diaktifkan tanpa harus menekan link lain. Ukuran yang baik untuk setiap elemen yang dapat diketuk adalah 48 piksel, baca panduan selengkapnya tentang target ketuk.