Advanced · Level 15: AccessibilityAdvanced65 menitBahasa Indonesia

Tabs Accessibility

Membuat tabs kecil dengan hubungan tablist, tab, tabpanel, selection state, dan keyboard movement yang konsisten.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan hubungan tablist, tab, dan tabpanel
Menyatakan tab yang aktif serta panel yang dikontrolnya
Mendukung Arrow key, Home, dan End pada tab kecil
Membedakan tabs dari link navigation atau disclosure biasa

ReactTabsARIAKeyboard NavigationFocus Management

Isi lesson

6 blok

1.
Tabs adalah satu set panel yang berbagi satu area contentBelum selesaiWajib
2.
Tab button dan panel yang terhubungBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
Jangan memberi role tab tanpa keyboard model tabsBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

Tabs adalah satu set panel yang berbagi satu area content

Wajib

Tabs cocok ketika beberapa panel berada pada konteks yang sama dan user berpindah di dalam satu area content, misalnya Ringkasan, Materi, dan Catatan pada halaman lesson. Pattern ini bukan pengganti navigation antar route dan bukan disclosure berurutan. Karena tabs adalah composite widget, setiap tab perlu menyatakan apakah ia dipilih, panel mana yang ia kontrol, dan keyboard user perlu dapat bergerak antar tab tanpa menekan Tab untuk setiap item. Mulai dari set kecil yang benar-benar membutuhkan tabs. Bila content lebih mudah dibaca sebagai section biasa atau navigation link, gunakan primitive yang lebih sederhana.

Bagian ini memengaruhi progres lesson.

Tab button dan panel yang terhubung

Wajib

tsx

const tabs = ["Ringkasan", "Materi", "Catatan"];

<div role="tablist" aria-label="Detail lesson">
  {tabs.map((tab, index) => (
    <button
      key={tab}
      id={`lesson-tab-${index}`}
      role="tab"
      aria-selected={index === activeIndex}
      aria-controls={`lesson-panel-${index}`}
      tabIndex={index === activeIndex ? 0 : -1}
      onClick={() => selectTab(index)}
      onKeyDown={(event) => handleTabKeyDown(event, index)}
    >
      {tab}
    </button>
  ))}
</div>

<section
  id={`lesson-panel-${activeIndex}`}
  role="tabpanel"
  aria-labelledby={`lesson-tab-${activeIndex}`}
>
  ...
</section>

Setiap tab adalah button dengan role tab di dalam tablist. aria-selected menyatakan pilihan aktif dan aria-controls menghubungkan tab dengan panel. Hanya tab aktif masuk ke tab order reguler lewat tabIndex 0; tab lain -1 agar Arrow key dapat mengatur selection serta focus. Implementasi produksi perlu menguji arah horizontal atau vertikal, content panel, loading, dan apakah activation manual atau otomatis sesuai kebutuhan user.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Build course detail tabs

Lengkapi tabs detail course dengan tablist, selection state, tabpanel, serta Arrow, Home, dan End untuk set kecil ini.

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.

11 cek otomatis5 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Kapan tabs lebih tepat daripada navigation link antar route?

Progres lesson naik setelah jawaban benar.

Kesalahan umum

Wajib

Jangan memberi role tab tanpa keyboard model tabs

role tab, tablist, dan tabpanel bukan dekorasi semantic. Jika kamu memakai role tersebut, implementasikan selection state, hubungan id, focus order, dan Arrow key yang sesuai. Bila feature belum membutuhkan behavior itu, gunakan button biasa atau disclosure yang lebih jujur terhadap interaction yang tersedia.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

Tabs menghubungkan satu tablist dengan panel detail yang saling terkait.
Tab aktif menyatakan aria-selected dan menjadi satu-satunya tab dalam tab order reguler.
Arrow key, Home, dan End mendukung movement di dalam set tabs kecil.
Gunakan tabs hanya bila content benar-benar berbagi satu context, bukan untuk menggantikan route navigation.
Berikutnya, focus management diterapkan setelah perubahan UI agar feedback baru tidak muncul jauh dari posisi kerja user.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Tabs adalah satu set panel yang berbagi satu area content.

Memuat progres Review module