Interactive Text — UI/UX

Teks Interaktif — Link, Button Text, dan Truncation Dalam UI, teks bukan hanya untuk dibaca — sebagian teks bisa diklik, diketik, atau dipotong. Masing-masing…

Teks interaktif adalah teks yang bisa ditekan: link dan tulisan di tombol. Bayangin rumah. Pintu membawamu ke ruangan lain, saklar lampu menyalakan sesuatu di ruangan tempat kamu berdiri. Link itu pintu, button itu saklar. Dua-duanya harus kelihatan bisa dipakai, dan harus memberi tanda waktu tangan (mouse) atau perhatianmu (fokus keyboard) sudah ada di atasnya.

🧪 Tebakan cepat: Di kartu pesan Homestay Kabut, kamu menekan Tab sampai fokus ada di link "Lihat aturan batal lengkap", lalu menekan Spasi. Apa yang terjadi? Jawabannya ada di bagian "Keyboard: Tab, Enter, Spasi".

Link atau button: lihat apa yang terjadi saat ditekan

Pilih elemennya dari apa yang dilakukannya, bukan dari tampilannya:

<a href="..."> link <button>
Yang terjadi Pindah ke halaman atau tempat lain, alamat (URL) berubah Menjalankan aksi di halaman ini
Di halaman Bu Sri "Lihat aturan batal lengkap" membuka /aturan-batal "2 malam" memilih jumlah malam, "Pesan kamar, bayar di tempat" mengirim pesanan
Tombol keyboard Enter Enter dan Spasi

<div onclick="..."> bukan keduanya: gak bisa dicapai dengan Tab dan gak bereaksi pada Enter. Pengguna keyboard gak akan pernah sampai ke sana.

Tulisannya juga mengikuti tugasnya. Tulisan button bilang aksinya ("Pesan kamar, bayar di tempat", bukan "Submit"), tebal 500 sampai 700, dan singkat. Tulisan link bilang tujuannya ("Lihat aturan batal lengkap", bukan "klik di sini"), karena pembaca layar bisa membacakan daftar semua link di halaman, dan sepuluh "klik di sini" gak menjelaskan apa-apa.

Empat keadaan: default, hover, focus-visible, visited

Teks interaktif berubah sesuai keadaannya. Ini CSS link aturan batal dan tombol pesan di kartu Bu Sri:

.policy { color: #15803d; text-decoration: none; }  /* default */
.policy:hover,
.policy:focus-visible { color: #166534; text-decoration: underline; }  /* mouse di atasnya, atau fokus keyboard */
.policy:visited { color: #15803d; }  /* sudah pernah dibuka */
.book:focus-visible { outline: 3px solid #15803d; outline-offset: 2px; }  /* cincin fokus */

Keyboard: Tab, Enter, Spasi

Pengguna keyboard berjalan dari elemen ke elemen dengan Tab. Di kartu Bu Sri urutannya: 1 malam → 2 malam → 3 malam → Pesan kamar, bayar di tempat → Lihat aturan batal lengkap. Lima kali Tab, dan di tiap langkah cincin :focus-visible menunjukkan posisinya. Menulis outline: none tanpa pengganti menghapus penunjuk itu, dan WCAG mewajibkan fokus keyboard selalu kelihatan (kriteria 2.4.7, level AA).

Lalu tombolnya: Enter mengaktifkan link dan button. Spasi cuma mengaktifkan button. Jadi jawaban tebakannya: gak terjadi apa-apa pada link-nya. Spasi di link gak memicu klik, browser malah menggulir halaman ke bawah. Ini alasan lain memakai elemen yang tepat: tamu yang menekan Spasi di "Pesan kamar" berharap pesanannya terkirim, dan dengan <button> itu memang terjadi.

Underline: kapan boleh dihapus

Underline adalah tanda link yang paling dikenal. Menghapusnya boleh, dengan syarat:

Teks terlalu panjang: elipsis

Di HP, bar ringkasan di bawah kartu sempit. Ringkasannya boleh dipotong, totalnya gak boleh:

.bar { display: flex; gap: 8px; max-width: 260px; }
.summary {
  white-space: nowrap;      /* jangan turun baris */
  overflow: hidden;         /* sembunyikan yang lewat batas */
  text-overflow: ellipsis;  /* gambar "..." di ujungnya */
  min-width: 0;             /* item flex boleh lebih sempit dari isinya */
}
.total { white-space: nowrap; }  /* Rp 700.000 selalu utuh */

text-overflow: ellipsis yang menambahkan "...", tapi dia cuma bekerja bersama white-space: nowrap dan overflow: hidden. Hasilnya: "Kamar Teras · 12 sampai 14 De..." lalu "Rp 700.000" utuh. Untuk memotong di baris kedua, pakai display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;. Potong yang bisa ditebak, jangan potong angka atau tanggal yang dipakai untuk memutuskan.

Kolom input: minimal 16px

Teks di kolom input, misalnya "Nomor WhatsApp", juga teks interaktif. Kalau font-size-nya di bawah 16px, Safari di iPhone otomatis zoom ke kolom itu waktu disentuh, dan tamu harus mencubit layar untuk kembali. Pakai input { font-size: 1rem; }. Jangan mematikan zoom halaman lewat meta viewport: orang yang butuh memperbesar teks jadi gak bisa.

⚠️ Jebakan yang sering ketemu

TL;DR: Link (<a href>) memindahkan ke tempat lain, button (<button>) menjalankan aksi di halaman ini; Enter mengaktifkan keduanya, Spasi cuma button. Teks interaktif punya keadaan: :hover untuk mouse, :focus-visible untuk fokus keyboard (jangan dihapus dengan outline: none), dan :visited yang cuma boleh mengubah warna. Link yang berdiri sendiri boleh text-decoration: none asal underline kembali saat hover dan fokus; link di dalam kalimat tetap diberi underline kalau warnanya kurang dari 3:1 dari teks sekitar. Teks kepanjangan dipotong dengan text-overflow: ellipsis bersama white-space: nowrap dan overflow: hidden, tapi angka penting jangan dipotong. Input minimal 16px supaya iPhone gak auto-zoom.

Yang akan kamu pelajari