Belajar Svelte - Accessibility & UX

#Pendahuluan

Aplikasi yang baik digunakan oleh semua orang — termasuk mereka yang menavigasi dengan keyboard, pembaca layar, atau perangkat lambat. Aksesibilitas bukan fitur pelengkap, melainkan ukuran kualitas perangkat lunak.

Episode ini membahas peran ARIA dan navigasi keyboard, HTML semantik dan komponen aksesibel, desain responsif dan progressive enhancement, serta dasar internationalization dan localization.

Setelah selesai, kalian bisa membangun antarmuka yang tidak mengucilkan siapa pun. Aksesibilitas yang benar juga membawa efek samping yang menyenangkan: markup yang lebih bersih dan SEO yang lebih baik.

Ukuran keberhasilan episode ini sederhana: aplikasi yang bisa digunakan lengkap hanya dengan keyboard. Latihan cepat untuk mengeceknya — navigasi seluruh halaman dengan tombol Tab, Enter, dan Esc tanpa menyentuh mouse.

#ARIA Roles dan Navigasi Keyboard

#Peran ARIA sebagai Pelengkap

ARIA memberi tahu teknologi bantu peran sebuah elemen yang tidak tersedia di HTML. Aturan pertamanya: gunakan elemen semantik bila ada. Peran ARIA hanya untuk melengkapi, bukan mengganti makna HTML.

Bila sebuah elemen membutuhkan peran yang tidak bisa disampaikan HTML, gunakan ARIA dengan hemat dan tepat. Terlalu banyak peran ARIA yang salah lebih buruk daripada tidak ada sama sekali.

Untuk komponen kustom, pastikan perilaku keyboard lengkap dan perannya jelas:

<script>
  let { label, onklik } = $props()
</script>
 
<button type="button" aria-label={label} onclick={onklik}>
  Kirim
</button>

aria-label={label} memberikan nama yang dibaca teknologi bantu saat teks visualnya tidak deskriptif. Elemen <button> bawaan sudah punya navigasi keyboard dan dukungan pembaca layar secara gratis.

#Fokus yang Terlihat dan Tertata

Navigasi keyboard bergantung pada fokus yang jelas. Jangan menghapus outline bawaan browser tanpa menyediakan penggantinya. Urutan fokus mengikuti urutan DOM — susun DOM agar sesuai urutan visual, bukan membalik urutan dengan CSS.

Gunakan :focus-visible untuk menampilkan outline hanya saat navigasi keyboard, bukan klik mouse. Teknik ini menjaga tampilan tetap bersih sekaligus mempertahankan petunjuk bagi pengguna keyboard.

#Semantic HTML dan Komponen Aksesibel

#Elemen yang Menyampaikan Makna

Pembaca layar menafsirkan halaman lewat struktur HTML. Gunakan <header>, <nav>, <main>, dan <footer> alih-alih <div> bertumpuk. Judul <h1> sampai <h6> harus mengikuti hierarki yang benar tanpa melompat.

Formulir adalah area paling sering diuji. Label yang terhubung membuat pembaca layar mengumumkan nama field dengan benar:

<label for="email">Alamat email</label>
<input
  id="email"
  name="email"
  type="email"
  autocomplete="email"
  required
/>

for="email" dan id="email" menghubungkan label dengan input. autocomplete="email" memungkinkan browser mengisi nilai otomatis — kenyamanan sekaligus pengurangan kesalahan ketik.

Kesalahan label yang umum: menaruh teks di dalam aria-label sementara teks visualnya berbeda. Keduanya harus sejalan, karena pembaca layar mengumumkan label ARIA, bukan teks yang terlihat.

#Elemen Interaktif yang Jujur

Tombol harus <button>, bukan <div> yang diberi handler klik. Tautan harus <a href>, bukan elemen lain yang berpura-pura. Elemen interaktif bawaan browser memberikan navigasi keyboard, fokus, dan dukungan pembaca layar secara gratis.

#Responsive Design dan Progressive Enhancement

#Mobile-first dan Fluid Layout

Mulailah dari ukuran layar terkecil, lalu perbaiki ke layar besar. Gunakan satuan yang responsif seperti clamp() untuk tipografi dan grid untuk layout. Pengujian pada lebar layar nyata lebih berguna daripada sekadar mengubah ukuran window.

Perhatikan juga target sentuh yang cukup besar — setidaknya 44 piksel untuk elemen interaktif — dan jarak antar elemen yang mencegah ketukan tidak disengaja.

#Progressive Enhancement

Bangun inti fungsional yang bekerja tanpa JavaScript, lalu tingkatkan. Formulir HTML murni tetap bisa mengirim data walau skrip gagal dimuat. Hidrasi lalu menambahkan interaktivitas di atas fondasi yang sudah berfungsi — pendekatan ini juga memperbaiki waktu muat di jaringan lambat.

Terapkan prinsip yang sama untuk media: sediakan teks alternatif untuk gambar dan transkrip untuk video, agar konten tetap tersedia saat media gagal dimuat.

#Internationalization dan Localization

#Memisahkan Teks dari Kode

Internationalization (i18n) menyiapkan aplikasi untuk banyak bahasa; localization (l10n) menerjemahkan kontennya. Langkah pertama adalah tidak menulis teks langsung di komponen. Tool seperti Paraglide SvelteKit menyederhanakan prosesnya:

npx sv add paraglide

Setelah ditambahkan, kalian menyimpan pesan dalam format per bahasa dan memanggilnya dengan fungsi yang dibuat otomatis. Sistem juga menangani pemilihan bahasa berdasarkan URL atau preferensi browser.

Terjemahan bukan satu-satunya yang berubah antar bahasa: format tanggal, angka, dan arah teks juga perlu diperhatikan. Library i18n yang baik membantu menangani hal-hal ini.

#Penutup

Inti yang harus dibawa pulang:

• Gunakan HTML semantik sebelum menambahkan peran ARIA.
• Pertahankan fokus yang terlihat dan urutan navigasi yang logis.
• Hubungkan label dengan input untuk formulir yang dapat diakses.
• Jangan menghapus outline fokus tanpa penggantinya.
• Bangun dengan mobile-first dan progressive enhancement.
• Pisahkan teks dari kode agar aplikasi siap menerjemah.

Di episode 18 selanjutnya kalian akan belajar architecture & design patterns — struktur proyek berbasis fitur, librari komponen dan composables yang dapat dipakai ulang, pemisahan logika, UI, dan data, serta arsitektur Svelte yang skalabel. Aksesibilitas yang sudah dibangun akan tetap terjaga dengan pola arsitektur yang rapi.