Tujuan Pembelajaran

Memahami WCAG guidelines dan level A/AA/AAA
Mengerti 4 prinsip POUR
Bisa menilai aksesibilitas halaman

Analogi

Diagram


      POUR Principles:
├── Perceivable -> Konten bisa dipersepsikan
├── Operable -> Interface bisa dioperasikan
├── Understandable -> Informasi bisa dipahami
└── Robust -> Kompatibel dengan assistive tech

Aksesibilitas bukan optional — 15% populasi dunia memiliki disability, dan a11y meningkatkan UX untuk semua

Penjelasan Konsep

Bayangkan kamu tidak bisa melihat layar. Atau tidak bisa menggunakan mouse. Atau tidak bisa mendengar video. Bagaimana kamu menggunakan website?

Aksesibilitas web (a11y) adalah praktik membuat website usable oleh semua orang — termasuk yang memiliki disabilities.

Kenapa Aksesibilitas Penting?

Inklusi: 15% populasi dunia (~1 miliar orang) memiliki disability
Legal: WCAG compliance adalah requirement legal di banyak negara
SEO: Semantic HTML yang baik untuk a11y juga bagus untuk SEO
UX: Aksesibilitas meningkatkan pengalaman untuk SEMUA user

4 Prinsip POUR (WCAG)

Perceivable

Konten harus bisa dipersepsikan. Operable: Interface harus bisa dioperasikan. Understandable: Konten dan operasi harus bisa dipahami. Robust: Konten harus kompatibel dengan teknologi assistif.

WCAG Levels

A (Minimum), AA (Recommended — target untuk kebanyakan website), AAA (Enhanced).

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami WCAG guidelines dan level A/AA/AAA., mengerti 4 prinsip POUR., dan bisa menilai aksesibilitas halaman. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

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

Cara Membayangkannya

Aksesibilitas bukan optional — 15% populasi dunia memiliki disability, dan a11y meningkatkan UX untuk semua. 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 html. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. Semantic HTML membantu screen reader. aria-label dan aria-labelledby memberikan konteks. Alt text yang deskriptif.

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

html

<!-- Semantic HTML yang accessible -->
<header>
  <nav aria-label="Main navigation">
    <ul>
      <li><a href="/" aria-current="page">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

<main>
  <h1>Page Title</h1>
  <section aria-labelledby="features-heading">
    <h2 id="features-heading">Features</h2>
  </section>
</main>

<!-- Image dengan alt text deskriptif -->
<img src="chart.png" alt="Bar chart showing 50% increase in sales Q1 to Q2 2024" />

<!-- Form dengan proper labels -->
<form>
  <label for="email">Email Address</label>
  <input type="email" id="email" required aria-required="true" />
  <span role="alert" id="email-error"></span>
</form>

Penjelasan Kode

Semantic HTML membantu screen reader. aria-label dan aria-labelledby memberikan konteks. Alt text yang deskriptif.

Prompt AI

Audit website-mu dengan axe DevTools. Perbaiki semua violations yang ditemukan.

Pertanyaan Reflektif

Aksesibilitas bukan checkbox — itu adalah mindset. Setiap keputusan UI design harus mempertimbangkan user dengan berbagai kemampuan.