Formulir kontak aksesibel dan European Accessibility Act

Formulir kontak sering satu-satunya pintu antara pengunjung dan usaha Anda. Jika pintu hanya dapat dibuka dengan mouse, penglihatan baik, dan kesabaran memecahkan teka-teki gambar buram, sebagian orang tetap di luar. Sejak pertengahan 2025, ini bukan lagi sekadar persoalan kegunaan: bagi banyak usaha yang menjual kepada konsumen di UE, hal ini menjadi persoalan hukum.

Cakupan European Accessibility Act

European Accessibility Act (Direktif (UE) 2019/882) berlaku sejak 28 Juni 2025. Aturan menetapkan persyaratan aksesibilitas produk dan layanan tertentu bagi konsumen – di antaranya perdagangan elektronik, layanan perbankan konsumen, buku elektronik, komunikasi elektronik, dan sebagian transportasi penumpang. Untuk situs web, artinya toko daring atau layanan perbankan secara keseluruhan, termasuk formulir pelanggan untuk menghubungi, bertanya, atau mengajukan keluhan. Usaha mikro penyedia layanan dikecualikan: usaha dengan kurang dari sepuluh karyawan dan omzet tahunan atau total neraca tidak lebih dari EUR 2 juta. Penawaran khusus antarpelaku usaha umumnya di luar cakupannya.

Setiap negara anggota telah memasukkan arahan tersebut ke dalam hukum nasional. Di Jerman, undang-undang itu adalah Barrierefreiheitsstärkungsgesetz (BFSG), sedangkan di Polandia merupakan undang-undang tahun 2024 tentang jaminan pemenuhan persyaratan aksesibilitas oleh produk dan layanan tertentu. Otoritas pengawas dan sanksinya berbeda di setiap negara, tetapi tolok ukur teknisnya secara umum sama: dalam praktiknya, standar Eropa EN 301 549, yang pada gilirannya didasarkan pada Web Content Accessibility Guidelines (WCAG).

Mengapa hal ini bermanfaat meskipun tidak diwajibkan oleh hukum

Mungkin usaha Anda mendapat pengecualian, atau Anda hanya melayani perusahaan lain. Formulir yang dapat diakses tetap bermanfaat karena alasan sederhana: setiap orang yang menyerah di tengah jalan adalah pertanyaan yang tidak pernah Anda terima. Perbaikan yang membantu pengguna pembaca layar juga membantu orang yang mengisi formulir melalui ponsel di kereta, di bawah sinar matahari yang terang, dengan pergelangan tangan patah, atau dalam bahasa kedua. Label yang jelas dan pesan kesalahan yang membantu mengurangi formulir yang ditinggalkan oleh semua orang – dan tidak satu pun melemahkan perlindungan spam Anda.

Daftar periksa praktis dengan referensi WCAG 2.2

• Label terlihat yang terhubung dengan kolomnya (1.3.1, 3.3.2): setiap kolom memiliki label terlihat yang dihubungkan melalui for/id. Placeholder saja bukanlah label – teks tersebut hilang begitu seseorang mulai mengetik.
• Pesan kesalahan yang menjelaskan perbaikannya (3.3.1, 3.3.3): sebutkan kolomnya, jelaskan apa yang salah dan cara memperbaikinya – melalui teks, bukan hanya bingkai merah. “Masukkan alamat email seperti name@example.com” lebih membantu daripada “Input tidak valid”.
• Pengoperasian penuh dengan keyboard (2.1.1, 2.1.2): setiap kolom, kotak centang, CAPTCHA, dan tombol kirim dapat dijangkau dan digunakan dengan Tab, Space, dan Enter, tanpa jebakan keyboard.
• Fokus yang terlihat (2.4.7): Anda selalu dapat melihat kolom mana yang aktif. Menghilangkan garis penanda fokus browser tanpa pengganti tidak memenuhi kriteria ini.
• Kontras yang memadai (1.4.3): teks, label, dan pesan kesalahan memiliki rasio kontras terhadap latar belakang setidaknya 4,5:1 (3:1 untuk teks berukuran besar).
• Ukuran target (2.5.8): tombol, kotak centang, dan tautan berukuran setidaknya 24 × 24 piksel CSS, atau memiliki jarak yang cukup di sekelilingnya.
• Alternatif CAPTCHA (1.1.1) dan autentikasi yang dapat diakses (3.3.8): 1.1.1 mensyaratkan alternatif teks dan CAPTCHA dalam lebih dari satu bentuk sensoris; 3.3.8 secara khusus mencakup langkah login, tetapi gagasannya juga berlaku di sini – teka-teki seperti mengetik ulang huruf terdistorsi atau menyelesaikan penjumlahan tidak boleh menjadi satu-satunya jalan untuk melanjutkan. Sediakan alternatif atau gunakan metode yang sama sekali tidak memerlukan teka-teki.
• Honeypot yang disembunyikan dari teknologi bantu: elemen pembungkus kolom jebakan diberi aria-hidden="true" dan kolomnya diberi tabindex="-1", sehingga pengguna pembaca layar dan keyboard tidak pernah masuk ke dalamnya.

CAPTCHA dan honeypot: titik temu perlindungan spam dan aksesibilitas

Secara khusus, kriteria 3.3.8 membahas langkah login dan autentikasi, bukan formulir kontak. Namun, gagasan di baliknya dapat diterapkan dengan baik: mengetik huruf terdistorsi, menyelesaikan penjumlahan, atau memilih lampu lalu lintas dari kisi gambar sepenuhnya menghalangi sebagian orang. Pilihan yang biasanya berfungsi tanpa teka-teki – seperti Cloudflare Turnstile, Friendly Captcha, honeypot yang dipadukan dengan pemeriksaan waktu, atau penyaringan di sisi server seperti Akismet – menghalau spam tanpa meminta pengunjung membuktikan apa pun. Honeypot hanya ramah jika benar-benar tidak terlihat, termasuk oleh pengguna pembaca layar dan keyboard:

<div class="hp" aria-hidden="true">
  <label for="hp-website">Biarkan kolom ini kosong</label>
  <input type="text" id="hp-website" name="website"
         tabindex="-1" autocomplete="off">
</div>
<!-- CSS: .hp { position: absolute; left: -10000px; } -->

Uji formulir Anda sendiri dalam lima belas menit

1. 1Sisihkan mouse dan isi seluruh formulir hanya dengan keyboard. Dapatkah Anda menjangkau setiap kolom dan tombol kirim, serta selalu melihat posisi Anda?
2. 2Kirim formulir dalam keadaan kosong, lalu dengan alamat email yang salah. Apakah kesalahan muncul sebagai teks di sebelah kolom yang tepat, dan apakah tindakan yang perlu dilakukan jelas?
3. 3Buka halaman melalui ponsel atau perbesar tampilan browser menjadi 200%. Apakah semuanya dapat dibaca, apakah tombol mudah diketuk, dan apakah banner cookie atau widget chat menutupi tombol kirim?
4. 4Aktifkan pembaca layar (VoiceOver, NVDA, atau TalkBack) dan dengarkan: apakah setiap kolom dibacakan beserta labelnya, dan apakah honeypot tetap tidak dibacakan?
5. 5Jalankan pemeriksaan otomatis seperti axe-core. Pemeriksaan ini menemukan label yang hilang dan masalah kontras dengan cepat, tetapi tidak menemukan semuanya – langkah manual di atas tetap diperlukan.

Jika Anda lebih suka memulai dengan gambaran umum, formexposed mengamati formulir publik Anda dari luar, tanpa mengirimkan apa pun. Pemeriksaan aksesibilitasnya menjalankan axe-core pada setiap formulir, menandai CAPTCHA tanpa alternatif yang dapat diakses dan honeypot yang dibacakan oleh pembaca layar, serta memeriksa formulir melalui ponsel – target ketuk, lapisan yang menutupi tombol kirim, dan pengguliran horizontal. Pemeriksaan gratis menunjukkan tingkat keseluruhan; perincian tersebut tersedia dalam laporan lengkap. Ini merupakan titik awal yang baik untuk daftar di atas, bukan pengganti pengujian bersama orang sungguhan.