5 menit baca
Menu Restoran yang Mudah Diakses: Teks, Kontras, dan Navigasi
Checklist menu digital restoran agar informasi dapat dibaca, diperbesar, dan dinavigasi lewat keyboard, tanpa hanya mengandalkan gambar atau PDF.
Oleh Stanley AI Services · Terbit
Menu harus bisa dipakai, bukan hanya terlihat menarik
Tamu dapat membuka menu dari HP di luar ruangan, memperbesar tulisan, memakai keyboard, atau mengandalkan pembaca layar. Foto menu yang tampak jelas di komputer belum tentu nyaman digunakan dalam keadaan tersebut. Mulailah dari tugas sederhana: menemukan nama hidangan, memahami keterangannya, lalu memilih jalur bertanya yang benar.
Panduan ini adalah daftar pemeriksaan awal, bukan sertifikasi aksesibilitas atau jaminan peringkat Google. Pilih satu halaman menu dan uji dengan informasi yang sudah disetujui restoran. Catat hambatan yang benar-benar ditemukan sebelum memutuskan perubahan desain atau sistem.
1. Sediakan isi menu sebagai teks
Tuliskan kategori, nama hidangan, deskripsi, harga yang berlaku, serta catatan yang diperlukan sebagai teks halaman. Poster dan PDF dapat menjadi lampiran, tetapi jangan menjadikannya satu-satunya jalan membaca menu. Teks halaman memungkinkan pengunjung mencari nama hidangan tanpa harus menebak letaknya dalam gambar panjang.
W3C menyarankan memakai teks alih-alih gambar teks bila tampilan yang sama dapat dibuat dengan teknologi web, dengan pengecualian tertentu. Untuk restoran, langkah praktisnya adalah menaruh informasi inti di halaman, lalu memakai foto untuk melengkapi konteks. Jangan sekadar menyalin seluruh poster ke satu deskripsi gambar yang sangat panjang.
2. Periksa kontras tulisan dan latarnya
Nama hidangan dan harga sering menjadi sulit dibaca ketika diletakkan di atas foto ramai atau memakai warna abu-abu yang terlalu tipis. Periksa pasangan warna yang benar-benar digunakan, bukan hanya menilai tampilan dari satu layar. Pastikan informasi tetap jelas ketika kartu menu dipilih, diarahkan pointer, atau menerima fokus keyboard.
WCAG 2.2 kriteria 1.4.3 menetapkan kontras minimum 4,5:1 untuk teks biasa dan 3:1 untuk teks besar sebagaimana didefinisikan dalam kriteria, dengan pengecualian tertentu. Angka itu bukan ukuran besar huruf. Gunakan pemeriksa kontras dan tinjau konteksnya; satu pasangan warna yang lulus belum membuktikan seluruh halaman memenuhi WCAG.
3. Beri nama kategori dan tombol yang jelas
Gunakan judul kategori yang menjelaskan isi, misalnya makanan utama, minuman, atau paket acara. Susun urutan judul secara masuk akal. Tombol Lihat menu outlet Bekasi lebih mudah dipahami daripada beberapa tombol identik bertuliskan Klik di sini. Pengunjung perlu mengetahui tujuan sebelum berpindah halaman atau aplikasi.
Coba membaca nama tautan tanpa paragraf di sekitarnya. Apakah outlet, tindakan, dan format dokumennya masih jelas? Bila sebuah tautan membuka PDF, beri keterangan formatnya. Pisahkan tombol membaca menu dari tombol reservasi agar pengunjung tidak harus memulai percakapan hanya untuk memperoleh informasi dasar.
4. Uji seluruh alur dengan keyboard
Coba berpindah melalui pilihan outlet, kategori, panel menu, tombol tutup, dan tautan kontak tanpa mouse. Perhatikan apakah fokus terlihat dan apakah pengguna bisa keluar dari panel yang dibuka. Jangan menandai halaman selesai diuji hanya karena tombol pertama dapat dipilih.
Kriteria WCAG 2.1.1 membahas pengoperasian fungsi melalui antarmuka keyboard, dengan pengecualian untuk fungsi tertentu yang bergantung pada lintasan gerakan. Pada menu restoran, pengujian praktis perlu mencakup kontrol nyata yang dipakai tamu, bukan sekadar tulisan yang dapat disorot. Catat hasil untuk setiap kontrol dan minta pengembang meninjau hambatan yang ditemukan.
5. Gunakan foto dan teks alternatif sesuai fungsi
Foto yang membawa informasi membutuhkan alternatif teks yang menyampaikan maknanya. Gambar dekoratif dapat memakai alternatif kosong. W3C membedakan kebutuhan tersebut berdasarkan fungsi gambar dalam halaman, sehingga tidak semua foto perlu diberi uraian yang sama. Hindari mengisi teks alternatif dengan deretan kata kunci promosi.
Jangan menyimpulkan bahan, status bebas alergen, atau kecocokan diet hanya dari foto. Gunakan informasi yang dikonfirmasi tim restoran dan sediakan jalur pertanyaan kepada staf. Bila stok, harga, atau menu berbeda per outlet, tampilkan batas berlakunya informasi dan siapa yang bertanggung jawab memperbaruinya.
Mulai dengan pemeriksaan satu outlet
Uji halaman di HP, perbesar teks, gunakan keyboard, dan periksa beberapa nama hidangan dengan pembaca layar. Mintalah orang yang tidak menyusun halaman untuk menemukan menu dan kontak outlet. Gunakan data uji; jangan mengirim reservasi nyata hanya untuk mencoba tombol. Simpan tanggal, perangkat, hambatan, dan hasil pengujian ulang.
Stanley AI Services dapat membantu meninjau struktur menu dan jalur inquiry sesuai lingkup yang disepakati. Mulai dari masalah yang teramati, lalu verifikasi perbaikannya. Tidak ada janji kenaikan penjualan, posisi pencarian, atau kepatuhan menyeluruh hanya berdasarkan checklist singkat ini.
Langkah berikutnya