Belajar Vue - Accessibility & UX

#Pendahuluan

Aplikasi yang baik dipakai semua orang: yang memakai mouse, keyboard, atau screen reader; yang layarnya lebar atau sempit; yang berbahasa Indonesia atau bahasa lain. Accessibility dan UX bukan lapisan terpisah, melainkan cara berpikir dalam membangun setiap komponen.

Episode 17 membahas ARIA roles, navigasi keyboard dan manajemen fokus, semantic HTML untuk komponen yang mudah dipahami teknologi bantu, desain responsif mobile-first, serta dasar internationalization dengan vue-i18n.

#ARIA Roles dan Komponen Aksesibel

#Kapan ARIA Dibutuhkan

ARIA memberi tahu teknologi bantu tentang peran elemen yang tidak tersirat oleh HTML. Tambahkan hanya ketika elemen asli tidak cukup, misalnya pada modal, toast, atau tab yang dibangun custom.

Toast dengan aria-live

<script setup>
import { ref } from "vue";
const pesan = ref("");
const tampil = ref(false);
 
function notif(teks) {
  pesan.value = teks;
  tampil.value = true;
}
</script>
 
<template>
  <div v-if="tampil" role="status" aria-live="polite">
    {{ pesan }}
  </div>
</template>

role="status" dan aria-live="polite" membuat screen reader mengumumkan perubahan tanpa mengganggu fokus pengguna. Toast yang dibangun dengan pola ini tidak lagi lolos dari teknologi bantu.

#Keyboard Accessibility dan Focus Management

#Navigasi dengan Tombol

Semua interaksi penting harus bisa dilakukan dengan keyboard:

Navigasi keyboard

<script setup>
const items = ["Beranda", "Profil", "Pengaturan"];
 
function pilih(index) {
  console.log("dipilih:", items[index]);
}
</script>
 
<template>
  <div role="tablist">
    <button
      v-for="(item, index) in items"
      :key="item"
      role="tab"
      tabindex="0"
      @keydown.enter="pilih(index)"
      @keydown.space="pilih(index)"
    >
      {{ item }}
    </button>
  </div>
</template>

@keydown.enter dan @keydown.space menangani aktivasi dengan keyboard, dan tabindex="0" membuat tombol bisa difokus. Fokus yang terkelola membuat aplikasi bisa dinavigasi tanpa mouse.

#Manajemen Fokus pada Modal

Saat modal terbuka, fokus harus masuk ke modal; saat tertutup, fokus kembali ke elemen semula:

Fokus ke modal

import { ref, nextTick } from "vue";
 
const modalEl = ref(null);
 
async function bukaModal() {
  terbuka.value = true;
  await nextTick();
  modalEl.value.querySelector("input").focus();
}

nextTick menunggu DOM diperbarui, lalu querySelector("input").focus() memindahkan fokus ke dalam modal. Teknik ini mencegah pengguna keyboard tersesat di belakang layar.

#Semantic HTML untuk Komponen

Gunakan elemen HTML sesuai maknanya: header, nav, main, aside, dan footer untuk struktur halaman; button untuk aksi; a untuk navigasi. Tombol aksi sebaiknya bukan <div @click>, karena tidak bisa difokus dan tidak diumumkan sebagai tombol oleh screen reader.

Struktur semantik

<template>
  <header>
    <nav>Menu utama</nav>
  </header>
  <main>
    <h1>Beranda</h1>
    <section>Konten utama</section>
  </main>
  <footer>Kredit halaman</footer>
</template>

Struktur semantik memudahkan screen reader membuat ringkasan navigasi, dan tanpa biaya tambahan membantu SEO serta perawatan kode.

#Responsive Design Mobile-first

#Breakpoint Berbasis Konten

Mulai dari ukuran layar kecil, lalu tingkatkan untuk layar besar:

CSS mobile-first

.kartu {
  display: block;
}
 
@media (min-width: 768px) {
  .kartu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) hanya menambah aturan untuk layar yang lebih lebar. Pendekatan mobile-first memaksa kalian memprioritaskan konten yang paling penting.

#Internationalization dengan vue-i18n

#Install dan Setup

vue-i18n adalah solusi i18n resmi untuk Vue:

npm install vue-i18n@9

Setup vue-i18n

import { createI18n } from "vue-i18n";
 
const i18n = createI18n({
  locale: "id",
  fallbackLocale: "en",
  messages: {
    id: { sambutan: "Selamat datang" },
    en: { sambutan: "Welcome" },
  },
});

createI18n menerima locale aktif dan fallback. Terjemahan disimpan sebagai object messages per bahasa.

#Penutup

Episode 17 membuat aplikasi kalian inklusif: ARIA yang tepat untuk komponen custom, navigasi keyboard dan manajemen fokus, semantic HTML yang dipahami teknologi bantu, desain responsif mobile-first, serta internationalization dengan vue-i18n.

Inti yang harus dibawa pulang:

• Tambahkan ARIA hanya ketika elemen asli tidak cukup.
• Semua aksi penting bisa diakses dengan keyboard.
• Kelola fokus pada modal dan konten dinamis.
• Struktur semantik memudahkan screen reader dan SEO.
• Mulai dari layar kecil, lalu naik dengan media query.
• vue-i18n memisahkan teks dari logika aplikasi.

Di episode 18 selanjutnya kita membahas architecture dan design patterns — arsitektur aplikasi skala besar, struktur folder berbasis fitur, reusable component libraries dan design systems, serta pemisahan logika, UI, dan service.