Kartu Minimal: Ikon aria-hidden dan Divider Tanpa DOM
Metadata tak terverifikasi dibuang; yang tersisa nama, sektor, deskripsi, plus tiga detail teknis yang menjaga kartu tetap aksesibel.
Ringkasan
Artikel ini cerita soal memangkas kartu perusahaan di halaman about: metadata yang nggak bisa diverifikasi dihapus biar nggak jadi utang editorial. Pembagi antar-kartu dibuat pakai pseudo-element CSS, jadi DOM tetap bersih. Ikon Lucide disembunyikan dari screen reader lewat aria-hidden, dan efek hover dinolkan buat pengguna yang aktifkan prefers-reduced-motion.
1. Judul (H1)
Kartu Minimal, Ikon Dekoratif, dan Seni Menghapus Metadata
Meta (untuk sistem):
Refleksi teknis tentang penyederhanaan kartu perusahaan di website, fokus pada aksesibilitas ikon, pseudo-element CSS, dan penghapusan metadata yang tidak terverifikasi.
Slug (untuk sistem):
kartu-minimal-ikon-aria-hidden
Saya sedang menatap grid kartu perusahaan di halaman about sebuah project. Setiap baris metadata tambahan di layar sebenarnya adalah klaim yang harus seseorang pertahankan kebenarannya. Dulu, saya sempat berpikir untuk mengisi tahun berdiri dan lokasi perkiraan supaya tampilannya terlihat lengkap dan profesional di mata pengguna. Tapi itu cuma menumpuk utang editorial. Kalau datanya nggak bisa diverifikasi, lebih baik nggak ada sama sekali. Menggunakan data palsu atau perkiraan cuma akan merusak kepercayaan saat ada yang ngecek lebih detail, dan pada akhirnya kita yang harus memperbaiki laporan "data tidak akurat" tersebut.
Akhirnya saya putuskan untuk memangkasnya habis-habisan. Kartu sekarang cuma menampilkan tiga hal yang bisa saya bela: nama, sektor, dan deskripsi. Keputusan pengurangan ini bukan kehilangan fitur. Ini penjagaan integritas konten. Di balik tampilan yang lebih bersih ini, ada beberapa detail teknis kecil yang bekerja diam-diam agar komponen tetap aksesibel, ringan, dan mudah dirawat.
Pembagi Visual Tanpa Beban DOM
Untuk memisahkan antar-kartu, saya nggak menambah elemen <div> kosong atau tag <hr> baru di markup HTML. Sebagai gantinya, saya pakai pseudo-element CSS. Properti ::before membuat elemen semu sebagai anak pertama dari elemen yang dipilih, yang sangat cocok untuk menambahkan konten kosmetis lewat properti content tanpa mengubah struktur semantik [9].
Di file globals.css, kelas .reference-divider::before menangani tugas ini dengan elegan. Saya mengatur media query @media (min-width: 640px) agar pembagi muncul sebagai garis vertikal setipis 1px di antara kartu, memanfaatkan ruang horizontal yang tersedia. Sebaliknya, pada @media (max-width: 639px), pembagi berubah menjadi garis horizontal yang memisahkan kartu secara vertikal. Hasilnya, tata letak tetap rapi di layar kecil maupun besar tanpa mengotori struktur DOM dengan tag pembagi yang sebenarnya nggak punya makna bagi mesin pencari atau screen reader. Ini adalah penghematan node yang kecil, tapi sangat berarti saat halaman dirender dalam jumlah banyak.
Ikon Dekoratif dan Gerakan yang Sopan
Di setiap kartu, ada ikon Building2 yang diimpor langsung dari lucide-react. Karena ikon ini cuma berfungsi sebagai hiasan visual yang mengulang makna dari teks sektor di sebelahnya, ikon ini wajib disembunyikan dari teknologi bantu. Paket Lucide secara default sudah menyertakan atribut aria-hidden="true", dan ini persis yang kita butuhkan untuk ikon dekoratif agar screen reader tetap fokus pada teks yang punya makna nyata [7].
Detail kecil ini memastikan bahwa pengguna yang mengandalkan pembaca layar nggak akan mendengar deskripsi ganda yang membingungkan. Mereka nggak akan mendengar "Ikon gedung, sektor teknologi", melainkan cuma "Sektor teknologi", yang jauh lebih efisien dan tidak melelahkan.
Selain itu, ada detail interaksi yang sering diabaikan developer. Saya menambahkan efek hover:-translate-y-1 supaya kartu terasa sedikit hidup dan responsif saat kursor diarahkan. Tapi animasi seperti penskalaan atau penggeseran posisi bisa memicu ketidaknyamanan fisik bagi pengguna dengan gangguan vestibular. Oleh karena itu, efek ini saya batasi ketat. Pengamatannya lewat utilitas motion-reduce:transform-none: bagi pengguna yang mengaktifkan reduce motion, transformnya dinolkan. Fitur media query prefers-reduced-motion memang dirancang untuk mendeteksi preferensi tersebut, dan animasi skala atau geser besar diketahui bisa memicu ketidaknyamanan bagi pengguna dengan gangguan vestibular [6]. Animasi angkat jadi fitur opsional yang menghormati setelan sistem operasi pengguna.
Grid yang Terukur dan Prediktif
Di sisi implementasi frontend/src/app/[locale]/about/page.tsx, penyusunan kartu juga dibuat sangat eksplisit. Saya menggunakan metode array slice(0,3) untuk merender baris pertama, dan slice(3) untuk baris kedua. Grid-nya pun beda: lg:grid-cols-3 di atas, lg:grid-cols-4 di bawah. Bagi saya, dua baris dengan dua densitas itu memberi ritme visual, sekaligus membuat layout nggak berubah bentuk saat jumlah kartu bertambah nanti.
Transisi antar-keadaan juga diatur lewat utilitas theme-transition bawaan, memastikan perubahan tampilan terjadi dengan mulus tanpa hentakan mendadak yang bisa mengganggu fokus pembaca.
Menghapus kode itu kadang terasa aneh bagi kita yang terbiasa dihargai karena menambah fitur, bukan karena menghilangkannya. Tapi dalam kasus ini, membuang metadata yang tidak terverifikasi dan mengandalkan detail aksesibilitas bawaan adalah bentuk perawatan perangkat lunak yang paling nyata. Kode yang baik bukan cuma tentang apa yang bisa dia lakukan, tapi juga tentang apa yang dengan sengaja dia pilih untuk tidak lakukan.