Aksesibilitas di Design System dan Komponen

Build accessible components dari awal dan dokumentasikan

Tujuan Pembelajaran

Bisa membuat accessible design system
Mengerti inclusive design principles
Bisa mendokumentasikan a11y komponen

Analogi

Diagram


      Inclusive Design:
├── Color contrast (WCAG AA: 4.5:1 for text)
├── Font size and readability
├── Touch target size (min 44x44px)
├── Animation respect (prefers-reduced-motion)
└── Responsive design for zoom up to 400%

Aksesibilitas harus menjadi bagian dari design system, bukan afterthought

Penjelasan Konsep

Setelah menguasai teknik aksesibilitas individual, saatnya memikirkan aksesibilitas di level sistem — design system yang accessible secara default.

Color Contrast

Rasio kontras antara teks dan background harus memenuhi WCAG: Normal text AA: 4.5:1, Large text AA: 3:1. Gunakan tool seperti WebAIM Contrast Checker.

Touch Target Size

Target touch minimum 44x44px (Apple) atau 48x48px (Material Design).

prefers-reduced-motion

Hormati preferensi user yang tidak ingin animasi dengan media query.

Responsive Zoom

Website harus tetap functional saat di-zoom hingga 400%. Gunakan relative units (rem, em).

Setiap komponen harus dokumentasikan keyboard interaction, ARIA attributes, expected screen reader announcement, dan color contrast ratio.

Inti yang Perlu Dipahami

Bagian ini berfokus pada bisa membuat accessible design system., mengerti inclusive design principles., dan bisa mendokumentasikan a11y komponen. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Aksesibilitas di Design System dan Komponen, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Aksesibilitas harus menjadi bagian dari design system, bukan afterthought. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa css. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. rem untuk font sizes agar scalable dengan browser zoom. prefers-reduced-motion menghormati user preference. :focus-visible hanya menampilkan focus indicator untuk keyboard.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

css

/* Accessible design system tokens */
:root {
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --color-text-primary: #1a1a2e;   /* on white: 15.3:1 */
  --color-text-secondary: #4a5568; /* on white: 7.5:1 */
}

/* Respect motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus visible (only show focus on keyboard) */
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Minimum touch target */
.touch-target { min-width: 48px; min-height: 48px; }

Penjelasan Kode

rem untuk font sizes agar scalable dengan browser zoom. prefers-reduced-motion menghormati user preference. :focus-visible hanya menampilkan focus indicator untuk keyboard.

Prompt AI

Audit design system-mu: cek semua color combinations untuk contrast ratio. Pastikan semua interactive elements memenuhi minimum touch target.

Pertanyaan Reflektif

Inclusive design bukan tentang separate experience — itu adalah design yang works for everyone, dengan atau tanpa assistive technology.