Belajar Tailwind CSS - Accessibility & Internationalization
Episode ini membahas aksesibilitas dan internasionalisasi: focus rings dan kontras warna, dukungan reduced motion memakai variants motion-safe dan motion-reduce, serta penanganan layout RTL dan lokalisasi dengan variants rtl dan ltr.
#Pendahuluan
Aplikasi yang bagus harus bisa dipakai semua orang, termasuk dengan keyboard, screen reader, dan preferensi gerak terbatas — lalu beradaptasi dengan bahasa yang dibaca dari kanan ke kiri. Episode 17 membahas aksesibilitas dan internasionalisasi: focus rings, kontras, reduced motion, dan dukungan RTL.
Tailwind menyediakan variants khusus untuk semua kebutuhan ini: focus-visible untuk indikator keyboard, motion-safe dan motion-reduce untuk animasi, serta rtl dan ltr untuk arah teks. Menggunakannya dengan benar membuat aplikasi inklusif tanpa menulis CSS kustom.
#Focus Rings dan Kontras
#Indikator Fokus untuk Keyboard
Saat navigasi keyboard, indikator fokus adalah petunjuk utama. Jangan menghapusnya sembarangan; gunakan focus-visible agar ring hanya muncul saat navigasi keyboard, bukan saat klik mouse:
<button
class="rounded bg-blue-600 px-4 py-2 text-white
focus:outline-none
focus-visible:ring-2 focus-visible:ring-blue-500
focus-visible:ring-offset-2"
>
Aksi
</button>focus:outline-none diikuti focus-visible:ring-2 adalah pola standar: outline default dihapus, lalu diganti ring kustom yang hanya aktif untuk input keyboard.
#Kontras Teks
Rasio kontras minimal 4.5:1 untuk teks normal, 3:1 untuk teks besar. Pemilihan token harus memperhatikan latar:
<p class="text-gray-900 dark:text-gray-100">Teks utama di latar putih dan gelap.</p>
<p class="text-gray-400">Kontras rendah — hati-hati, sering gagal audit.</p>text-gray-900 di atas putih dan text-gray-100 di atas gelap memenuhi rasio; text-gray-400 sering jatuh di bawah ambang. Pastikan pasangan warna selalu diuji.
#Reduced Motion
Sebagian pengguna sensitif terhadap animasi. Hormati preferensi sistem dengan variants motion-safe dan motion-reduce:
<div class="motion-safe:animate-bounce motion-reduce:animate-none">
Elemen beranimasi, kecuali saat pengguna menonaktifkan animasi.
</div>motion-safe:animate-bounce hanya menjalankan animasi bila sistem mengizinkannya; motion-reduce:animate-none menonaktifkannya bila tidak. Pola terbaik: mulai dari tanpa animasi, lalu tambahkan dengan motion-safe: — bukan sebaliknya.
Transisi yang halus juga lebih aman:
<div class="transition-transform motion-reduce:transition-none">
Konten yang bergeser dengan mulus, tanpa animasi saat dilarang.
</div>#Dukungan RTL
Bahasa Arab, Ibrani, dan lainnya dibaca dari kanan ke kiri. Siapkan layout dengan atribut dir dan variants rtl serta ltr:
<div dir="rtl" class="flex gap-4 rtl:flex-row-reverse">
<div>Pertama</div>
<div>Kedua</div>
</div>rtl:flex-row-reverse membalik urutan flex saat dokumen berarah kanan-ke-kiri, tanpa menggandakan markup. Variants rtl dan ltr aktif berdasarkan nilai dir pada elemen atau ancestor.
Untuk spacing antar teks dan ikon, space-x-reverse menjaga jarak tetap benar:
<div dir="rtl" class="flex space-x-2 rtl:space-x-reverse">
<span>Item 1</span>
<span>Item 2</span>
</div>rtl:space-x-reverse membalik arah margin dari space-x, sehingga jarak jatuh di sisi yang benar. Jangan meng-hardcode padding kiri atau kanan untuk layout yang dibaca dua arah — gunakan variants arah atau properti logical seperti ms- dan me-.
Kelola atribut dir di level root dokumen (<html dir="rtl">), bukan per elemen acak, agar browser dan screen reader menginterpretasi teks dengan benar. Saat bahasa dipilih secara runtime, set dir bersamaan dengan perubahan lang sehingga pasangan keduanya selalu konsisten dan selaras dengan layout.
Pastikan juga menu, dialog, dan tooltip tidak bergantung pada urutan visual saja: elemen fokus dan label harus tetap bermakna ketika layout di-flip ke arah sebaliknya.
Pengujian aksesibilitas tidak cukup dengan pemeriksaan visual. Jalankan keyboard-only testing untuk memastikan urutan fokus masuk akal, dan gunakan alat seperti axe untuk menemukan kontras yang gagal serta atribut ARIA yang hilang. Checklist sederhana ini menangkap sebagian besar masalah sebelum kode menyentuh produksi. Jadikan pengujian ini bagian dari pipeline, bukan aktivitas musiman, sehingga regresi aksesibilitas tidak mengintip masuk lewat PR yang terlihat polos.
Warning
Hindari left-0 atau right-0 untuk elemen yang harus bergeser sesuai arah bahasa. Lebih aman memakai properti logical (start-0, end-0) atau variants rtl: dan ltr: agar layout tidak pecah saat bahasa diganti.
#Penutup
Episode 17 membuat aplikasi inklusif dan siap internasional: focus rings yang ramah keyboard, kontras yang lolos audit, animasi yang menghormati reduced motion, dan layout yang benar di arah baca RTL dan LTR.
Inti yang harus dibawa pulang:
- Gunakan
focus-visible:ring-*sebagai pengganti outline bawaan yang aman. - Pastikan rasio kontras minimal 4.5:1 untuk teks normal.
- Mulai tanpa animasi, lalu tambahkan dengan
motion-safe:. motion-reduce:transition-nonemematikan transisi saat dilarang.rtl:danltr:mengadaptasi layout terhadap arah bahasa.space-x-reversemenjaga spacing tetap benar di mode RTL.
Di episode 18 selanjutnya kita akan membahas integrasi modern frameworks & tooling — integrasi Tailwind di Next.js App Router, Vite, SvelteKit, Astro, dan Remix, serta kompatibilitas dengan pendekatan CSS-in-JS hybrid.