Advanced · Level 15: AccessibilityAdvanced50 menitBahasa Indonesia

ARIA When Needed

Menentukan kapan HTML native sudah cukup dan kapan ARIA memberi informasi state atau relationship yang benar-benar diperlukan.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Memilih HTML native sebelum menambah role ARIA
Menggunakan aria-expanded dan aria-controls untuk state disclosure yang nyata
Menghubungkan dialog atau tab dengan label serta controlled content
Mengenali ARIA sebagai kontrak behavior, bukan atribut dekoratif

ARIASemantic HTMLReactAccessibility Review

Isi lesson

7 blok

1.
ARIA menambah informasi, bukan menggantikan behavior yang hilangBelum selesaiWajib
2.
Native first, ARIA untuk state dan relationshipBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Writing practiceBelum selesaiWajib
5.
Cek pemahamanBelum selesaiWajib
6.
Tidak ada ARIA lebih baik daripada ARIA yang salahBelum selesaiWajib
7.
RingkasanBelum selesaiWajib

ARIA menambah informasi, bukan menggantikan behavior yang hilang

Wajib

HTML native sudah membawa banyak semantics dan keyboard behavior: button dapat menerima focus serta diaktifkan, anchor dengan href membawa user ke destination, input memiliki peran form, dan heading memberi structure. Ketika kita mengganti elemen tersebut dengan div lalu menambah role, kita juga mengambil tanggung jawab untuk membangun keyboard, focus, state, dan testing-nya. ARIA paling berguna ketika UI benar-benar memiliki state atau relationship yang tidak terlihat dari HTML saja, misalnya button disclosure yang mengontrol panel, dialog yang perlu diberi nama, atau tabs yang menghubungkan control dan panel. Tambahkan hanya attribute yang dapat kamu jaga tetap benar saat state berubah.

Bagian ini memengaruhi progres lesson.

Native first, ARIA untuk state dan relationship

Wajib

tsx

// Tidak perlu role tambahan: button sudah native dan interaktif.
<button type="button" onClick={saveCourse}>Simpan course</button>

// Tidak perlu role link: href sudah memberi destination.
<a href="/lesson/semantic-html-review">Buka lesson</a>

// ARIA membantu karena button mengontrol panel yang berubah state.
<button
  type="button"
  aria-expanded={isOpen}
  aria-controls="course-notes"
  onClick={toggleNotes}
>
  Catatan course
</button>
{isOpen ? <section id="course-notes">...</section> : null}

Contoh pertama dan kedua sengaja tidak memakai role tambahan. Pada disclosure, aria-expanded memberi state terbuka atau tertutup yang perlu diketahui user, sedangkan aria-controls menjelaskan relationship dengan panel. Attribute itu harus selalu mengikuti state React; memberi aria-expanded=true pada panel yang sebenarnya tertutup justru menciptakan informasi yang salah.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Choose native HTML and ARIA support

Refactor action course agar memakai link dan button native, lalu gunakan ARIA hanya untuk disclosure state yang nyata.

Tujuan awal: Fokus di tab TSX.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

8 cek otomatis5 checklist

Belum selesaiBuka practice

Writing practice

Wajib

Latihan menulis

Tulis review note untuk pull request yang mengganti semua button dengan div role=button demi styling. Jelaskan risiko yang perlu ditangani ulang, kapan button native sudah cukup, dan satu contoh state atau relationship yang memang layak memakai ARIA. Gunakan bahasa yang membantu rekan tim memperbaiki code tanpa menyalahkan mereka.

Tulis draft dulu sebelum menandai writing practice selesai.

Draft kosong

0/350 karakter

Checklist panduan

Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.

Menyebut behavior native yang hilang ketika mengganti button.
Menjelaskan kapan button native sudah cukup.
Memberi contoh ARIA untuk state atau relationship nyata.
Menjaga tone review tetap spesifik dan kolaboratif.

Blok ini wajib untuk menyelesaikan lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Kapan aria-expanded paling tepat digunakan?

Progres lesson naik setelah jawaban benar.

Kesalahan umum

Wajib

Tidak ada ARIA lebih baik daripada ARIA yang salah

Jangan menambah role, aria-label, atau aria-expanded hanya agar component terlihat lebih accessible saat dibaca. Attribute yang salah dapat memberi informasi keliru atau menciptakan expectation keyboard yang tidak pernah dipenuhi. Mulai dari HTML native, lalu tambahkan ARIA yang memiliki tujuan, state source, dan test plan yang jelas.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

Native HTML memberi semantics serta keyboard behavior sebelum kita menulis ARIA apa pun.
ARIA cocok untuk state dan relationship yang tidak dapat terlihat dari HTML saja.
aria-expanded dan aria-controls harus selalu sinkron dengan state component.
Role tambahan menambah tanggung jawab behavior serta testing, bukan hanya label.
Uji Kompetensi berikutnya menggabungkan audit modal, disclosure, tabs, focus movement, dan keputusan ARIA pada satu component case.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: ARIA menambah informasi, bukan menggantikan behavior yang hilang.

Memuat progres Review module