0Pricing
HTML Academy · Pelajaran

aria-expanded aria-controls untuk Sakelar

Buat widget pengungkapan dan akordeon yang mudah diakses dengan ARIA.

aria-expanded aria-controls untuk Sakelar adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Ikhtisar Pola Pengalih

Kontrol pengalih (akordeon, menu tarik-turun, menu) memerlukan ARIA untuk menyampaikan status terbuka atau tertutupnya:

  • aria-expanded — menunjukkan status terbuka atau tertutup suatu kontrol
  • aria-controls — menghubungkan kontrol dengan elemen yang dikendalikannya

aria-expanded

aria-expanded menyampaikan apakah elemen yang dikendalikan sedang diperluas atau diciutkan:

<button aria-expanded="false" aria-controls="menu">
  Menu
</button>
<ul id="menu" hidden>
  <li><a href="/">Home</a></li>
</ul>
<script>
btn.addEventListener('click', () => {
  const expanded = btn.getAttribute('aria-expanded') === 'true';
  btn.setAttribute('aria-expanded', !expanded);
  menu.hidden = expanded;
});
</script>

aria-controls

aria-controls merujuk pada id elemen yang dikendalikan:

<button
  id="details-btn"
  aria-expanded="false"
  aria-controls="details-panel"
>
  Show Details
</button>
<div id="details-panel" hidden>
  <p>Additional details go here...</p>
</div>
<!-- Screen reader: 'Show Details, button, collapsed'
     After click: 'Show Details, button, expanded' -->

Pola Akordeon

Akordeon yang aksesibel dengan aria-expanded:

<div class="accordion">
  <h3>
    <button
      aria-expanded="false"
      aria-controls="panel-1"
    >Section 1</button>
  </h3>
  <div id="panel-1" hidden>
    <p>Panel 1 content...</p>
  </div>

  <h3>
    <button
      aria-expanded="false"
      aria-controls="panel-2"
    >Section 2</button>
  </h3>
  <div id="panel-2" hidden>
    <p>Panel 2 content...</p>
  </div>
</div>

Pola Menu Tarik-Turun

Navigasi menu tarik-turun yang aksesibel:

<nav>
  <button
    aria-expanded="false"
    aria-haspopup="true"
    aria-controls="products-menu"
  >Products</button>

  <ul id="products-menu" role="menu" hidden>
    <li role="menuitem"><a href="/widget">Widget</a></li>
    <li role="menuitem"><a href="/gadget">Gadget</a></li>
  </ul>
</nav>

aria-haspopup

aria-haspopup memberi petunjuk bahwa mengaktifkan kontrol akan membuka jendela sembulan:

<button aria-haspopup="menu">File</button>
<!-- Values: true (menu), menu, listbox, tree, grid, dialog -->
<!-- Screen reader: 'File, button, has popup' -->

<!-- Note: aria-haspopup="true" is equivalent to "menu" -->
<!-- Use specific values when the popup type matters -->

Pelengkap ARIA untuk details/summary

Elemen bawaan details/summary sudah menyampaikan status perluasan — tidak diperlukan ARIA:

<details>
  <summary>FAQ Question</summary>
  <p>Answer goes here.</p>
</details>
<!-- Browser automatically provides aria-expanded
     and the disclosure widget semantics -->
<!-- No need to add aria-expanded manually to summary -->

CSS untuk Status aria-expanded

Gunakan aria-expanded sebagai kait CSS:

/* Panel hidden by default: */
[aria-controls] + [hidden] {
  display: none;
}

/* Or using aria-expanded on the button: */
[aria-expanded="false"] + .panel {
  display: none;
}

[aria-expanded="true"] + .panel {
  display: block;
}

/* Rotate arrow icon: */
[aria-expanded="true"] .arrow {
  transform: rotate(180deg);
}

Persyaratan Keyboard untuk Pengalih

Komponen pengalih harus mendukung interaksi dengan keyboard:

  • Enter atau Spasi — mengaktifkan tombol pengalih
  • Escape — menutup menu tarik-turun atau menu
  • Tombol panah — menavigasi di dalam menu yang terbuka

Mengelola Focus Setelah Pengalihan

Setelah mengalihkan konten, kelola focus dengan tepat:

// Accordion: focus stays on the button (usually OK)
// Dropdown menu: move focus to first menu item on open

button.addEventListener('click', () => {
  const expanded = button.getAttribute('aria-expanded') === 'true';
  button.setAttribute('aria-expanded', !expanded);
  panel.hidden = expanded;

  if (!expanded) {
    // Opening a dropdown: focus first item
    panel.querySelector('a, button, [tabindex]')?.focus();
  }
});

Pertimbangan untuk Perangkat Seluler

Komponen pengalih pada perangkat seluler:

  • Target sentuh harus berukuran setidaknya 44×44px (WCAG 2.5.5)
  • aria-expanded didukung oleh pembaca layar seluler (iOS VoiceOver, Android TalkBack)
  • Gestur usap tidak menggantikan aktivasi dengan keyboard atau tombol

Pemeriksaan Singkat

Nilai apa yang harus dimiliki aria-expanded ketika bagian yang dikendalikan tersembunyi?

Ringkasan: aria-expanded dan aria-controls

Hal-hal penting ARIA untuk pengalih:

  • aria-expanded="true/false" — status terbuka atau tertutup kontrol
  • aria-controls="id" — menghubungkan kontrol dengan panelnya
  • aria-haspopup — memberi petunjuk bahwa jendela sembulan tersedia
  • Perbarui aria-expanded setiap kali pengalihan dilakukan
  • Pindahkan focus ke dalam menu yang dibuka; kembalikan ke pemicu saat ditutup

Pertanyaan yang Sering Diajukan

Apakah pelajaran “aria-expanded aria-controls untuk Sakelar” gratis?

Ya — teks lengkap “aria-expanded aria-controls untuk Sakelar” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “aria-expanded aria-controls untuk Sakelar”?

Buat widget pengungkapan dan akordeon yang mudah diakses dengan ARIA. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “aria-expanded aria-controls untuk Sakelar” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. aria-expanded aria-controls untuk Sakelar
  2. aria-selected dan Pola Tab
  3. Region Langsung aria-live aria-atomic aria-relevant
  4. Pengujian dengan Pembaca Layar
← Kembali ke HTML Academy