accessibility

Revert font heading cuma satu baris karena semua heading membaca satu token. Eksperimen selera jadi murah.

TL;DR: Coba ganti font heading pakai Source Serif 4, kok 22 menit udah di-revert karena kelebayan bookish. Untung semua heading baca dari satu CSS variable, jadi undo-nya cuma satu baris, nggak perlu edit belasan file. Yang gagal dibuang, yang menang kayak nav Inter tetep kepake, eksperimen murah emang enak.

Border kartu lenyap di atas latar muted karena dua warna abu-abu kembar. Pelajaran soal token, kontras, dan asumsi latar.

TL;DR: Border kartunya nggak hilang, cuma warnanya kembaran sama latar muted jadi kayak ngumpet. Perbaikannya satu baris doang: ganti ke border-primary/15 plus bg-card/40, sekalian benerin kontras biar lolos WCAG. Pelajarannya, token warna itu asumsi, komponen multi-surface mending dites di semua surface dulu.

Copy class dari kartu jaringan perusahaan ternyata nggak cukup: identitas elemen li dan handler keyboard-nya harus ikut pindah.

TL;DR: Gara-gara niru kartu pakai copy-paste class Tailwind doang, garis pembatasnya nggak muncul karena struktur DOM-nya beda. Solusinya, kartu kantor diekstrak jadi komponen OfficeCard dengan role button dan handler keyboard, terus tinggal dipakai di dua ul berbeda. Ada juga bug daftar nampil dobel gara-gara ul lama kelupaan dihapus.

Peta kantor glowing plus garis ngalir tanpa Mapbox: satu SVG overlay viewBox 0-100, preserveAspectRatio none, animasi CSS yang aman buat reduced-motion.

TL;DR: Daripada pasang Mapbox buat peta dekoratif, cukup tumpukin SVG overlay di atas next/image pakai viewBox "0 0 100 100" dan preserveAspectRatio="none", jadi koordinat titiknya persen dan ikut meregang pas resize. Garis alir sama denyut titik murni CSS, nol JavaScript. Kalau nanti butuh akurasi beneran, baru ganti ke library peta.

Metadata tak terverifikasi dibuang; yang tersisa nama, sektor, deskripsi, plus tiga detail teknis yang menjaga kartu tetap aksesibel.

TL;DR: 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.

Foto latar hero plus overlay saya ganti satu div CSS: gradient diagonal dari token warna, drift 28 detik, dan tetap statis untuk pengguna reduced-motion.

TL;DR: Dia hapus foto hero di situs Next.js dan ganti pola garis diagonal murni CSS pakai linear-gradient plus color-mix, tanpa gambar atau library animasi. Animasinya cuma transform translate3d di compositor, jadi tetap mulus di HP biasa. Ada prefers-reduced-motion juga biar yang sensitif gerakan tetap lihat versi statisnya.

Grid 113 logo klien bikin homepage panjang tiada ujung. Saya rombak jadi marquee CSS murni dua baris: loop -50 persen, gerbang reduced-motion.

TL;DR: Homepage penuh 113 logo klien bikin konten penting kebawa jauh ke bawah. Daripada pasang library JS yang overkill, ganti pake marquee CSS murni: dua track diduplikasi, dianimasikan pake translate3d, dan jebakan margin di tile terakhir diganti padding biar loop mulus. Bonusnya performa ngebut plus aksesibilitas aman lewat aria-hidden dan prefers-reduced-motion.

Root layout yang pindah ke segmen [locale] membuat html lang benar dari server, menghapus bootstrap bahasa di klien, dan meloloskan audit struktur 24 halaman.

TL;DR: Gue awalnya kira skrip deteksi bahasa di klien yang salah, ternyata konsepnya emang nggak bener: html lang harus diset dari server. Solusinya simpel, cukup pindah root layout ke folder app/[lang] terus hapus skripnya. Hasilnya? 24 halaman lolos audit dan screen reader baca konten dengan pelafalan yang bener sejak awal.

Bikin locale switcher Next.js App Router yang preserve current path pakai usePathname dan regex swap, plus active state accessible dengan aria-current.

TL;DR: Locale switcher yang cuma link ke homepage bikin visitor kehilangan konten pas ganti bahasa. Solusinya pakai usePathname plus regex buat swap prefix locale, jadi /en/about tetep nyampe ke /id/about. Jangan lupa aria-current buat active state, dan kalo project makin ribet, pindah aja ke next-intl.