Sepanjang section ini kita menata form agar tampak bagus; chapter ini memastikan form yang bagus itu juga bisa dipakai semua orang — pengguna keyboard, pembaca layar, pengguna di bawah sinar matahari, dan pengguna dengan jari yang tidak kecil. Yang penting dipahami: keputusan CSS ikut menentukan aksesibilitas, karena CSS-lah yang mengatur apakah label tampak, apakah fokus terlihat, dan apakah pesan galat hanya bertumpu pada warna. Kita bahas lima keputusan tersebut satu per satu, lalu menutup section ini dengan form yang membandingkan versi aksesibel dan versi yang gagal kontras.

Label yang Terlihat, Bukan yang Dibuang #

Cara termudah membuat form tampak “bersih” adalah menghapus label dan menggantinya dengan placeholder. Jangan: placeholder menghilang begitu kolom terisi, umumnya gagal kontras, dan tidak semua pembaca layar menyatakannya sebagai nama field. Label yang terhubung lewat for/id tetap menjadi standar. Bila desain memang tidak menyediakan ruang untuk label yang tampak, jangan buang elemennya — sembunyikan secara visual saja memakai class utilitas yang biasa disebut sr-only:

css 
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

Berbeda dengan display: none yang menghapus elemen dari pembaca layar sekaligus, elemen sr-only tetap ada di markup, tetap dibacakan, dan tetap bisa menerima fokus. Pola 1px plus clip-path ini adalah bentuk paling stabil dari tekniknya.

Kontras yang Cukup untuk Teks Form #

Angka rujukan dari WCAG yang sudah kita pakai pada chapter Kontras Warna: teks normal butuh rasio kontras minimal 4.5:1, teks besar minimal 3:1. Pada form, aturan ini berlaku untuk label, teks di dalam kolom, dan — sering terlupakan — placeholder. Karena browser merender placeholder dengan opacity yang direndahkan, warna kelabu muda yang dipilih asal-asalan cepat jatuh di bawah ambang. Aturan praktisnya: placeholder boleh lebih pucat dari teks isi, tetapi masih harus lolos 4.5:1.

Fokus yang Tetap Terlihat #

Sudah dibahas pada chapter Focus States, tetapi cukup penting untuk diulang sebagai aturan aksesibilitas: jangan pernah outline: none tanpa pengganti. Setiap kontrol yang ditata sendiri — input, select, toggle kustom — harus tetap memperlihatkan posisi fokus lewat :focus-visible, entah lewat outline maupun ring box-shadow. Form yang indah namun tidak bisa dinavigasi dengan Tab adalah form yang gagal untuk satu kelompok pengguna penuh. Demo berikut membandingkan form yang memenuhi keputusan-keputusan di atas dengan form yang melanggarnya — navigasikan keduanya dengan Tab:

Perbedaan antara kedua panel itu murni keputusan CSS.

Kesalahan Bukan Hanya Warna #

Warna merah pada border menandai kolom tidak valid, tetapi pengguna dengan gangguan penglihatan warna bisa saja tidak melihat perbedaan antara merah dan hijau. Karena itu indikator kesalahan perlu membawa lebih dari warna — ikon, teks, atau keduanya sekaligus:

css 
.pesan-galat {
  display: none;
  margin: 6px 0 0;
  font-size: 0.875rem;
  color: #b3362b;
}

.pesan-galat::before {
  content: "! ";
  font-weight: 700;
}

.kolom-email:user-invalid ~ .pesan-galat {
  display: block;
}

.kolom-email:user-invalid {
  border-style: dashed;
}

Perbedaan bentuk border (dashed) menambah saluran umpan balik di samping warna, dan teks pesan sungguhan-lah yang paling berguna karena menjelaskan apa yang harus diperbaiki.

Target Sentuh yang Memadai #

Panduan yang umum dipakai untuk target sentuh adalah sekitar 44x44 piksel. Checkbox dan radio bawaan kecil, dan di layar sentuh mereka cepat terasa sempit. CSS membantu tanpa mengubah markup: perbesar area klik dengan padding pada label yang membungkus kontrol, tambahkan gap, atau perbesar kontrol kustomnya sendiri — pendekatan appearance: none pada chapter Checkbox dan Radio memberi kita ukuran penuh di tangan. Tambahan padding: 10px 0 pada label baris sudah mengubah kolom sentuh 20 piksel menjadi nyaris dua kali lipatnya.

Ringkasan #

CSS berperan nyata dalam aksesibilitas form: label tetap tampak atau disembunyikan secara aksesibel dengan class sr-only, placeholder dan label dijaga tetap lolos kontras 4.5:1, indikator fokus tidak pernah dibuang tanpa pengganti, kesalahan ditandai dengan ikon dan teks di samping warna, dan area sentuh diperbesar lewat padding label. Dengan kebiasaan-kebiasaan ini, form yang kita bangun di section ini siap dipakai semua pengguna. Section berikutnya membawa kita ke dua elemen konten yang paling padat data: tabel dan daftar, dengan tantangan styling yang berbeda dari form.