Membuat carousel yang dapat diakses

Robert Flack

Penny McLachlan

Lucas Radaelli

Dipublikasikan: 29 September 2025

Suka atau tidak suka, carousel adalah pola yang banyak digunakan dan diminta. Jadi, saat carousel diterapkan, carousel harus kuat dan dapat diakses. Harus interaktif pada render pertama, deklaratif agar pemeliharaan lebih mudah, dan dibangun dengan struktur semantik yang diuji dengan teknologi pendukung.

Namun, membuat carousel dapat diakses sering kali sulit. Mengelola fokus, mendapatkan pengumuman pembaca layar yang tepat, dan menangani elemen interaktif di luar layar itu rumit, sehingga carousel di banyak situs tidak dapat diakses. Tantangan ini mendorong tim Chrome untuk mengerjakan carousel CSS interaktif sebagai bagian dari CSS Overflow Module Level 5, yang diluncurkan di Chrome 135.

Setelah peluncuran awal fitur ini di Chrome, kami menerima banyak masukan dari komunitas, yang telah kami upayakan untuk ditangani. Hal ini mencakup fungsi baru seperti dukungan untuk mode penanda scroll diskrit dan navigasi, serta beberapa perbaikan bug. Contoh:

• Dukungan untuk penghitung dalam teks alternatif, yang tersedia di Chrome 140.
• Memperbaiki masalah saat ::scroll-button state yang dinonaktifkan tidak dibaca dengan benar oleh pembaca layar.
• Memastikan bahwa ::scroll-marker mendapatkan nama label ARIA dari nilai konten.
• Memperbaiki bug saat semua elemen semu ::scroll-marker dibaca sebagai "dipilih".

Kami yakin fitur di CSS Overflow 5 dapat membuat carousel yang kuat dan mudah diakses yang interaktif pada paint pertama. Postingan ini memandu Anda melakukannya dengan berfokus pada cara menggunakan fitur ini untuk menyelesaikan masalah aksesibilitas yang sudah lama ada.

Untuk pengantar carousel yang lebih umum, lihat artikel Carousel dengan CSS. Ingat: tidak ada UI yang dapat dijamin dapat diakses secara langsung, Anda harus selalu menguji aksesibilitas halaman Anda.

Jenis carousel apa yang Anda butuhkan?

Sebelum mulai menulis kode, penting untuk mengetahui jenis carousel yang Anda buat. Strategi aksesibilitas yang tepat bergantung pada cara pengguna diharapkan berinteraksi dengan konten. Postingan ini membahas tiga jenis umum:

Carousel satu item

Dengan carousel item tunggal, hanya satu slide yang sepenuhnya terlihat dan interaktif dalam satu waktu (misalnya, banner utama atau slide).

Carousel yang dipaginasi secara otomatis

Carousel yang dipaginasi secara otomatis menampilkan "halaman" konten, seperti daftar produk atau acara TV.

Carousel multi-item

Di carousel multi-item, beberapa item dalam carousel terlihat sekaligus, tetapi Anda tetap dapat men-scrollnya satu per satu tanpa penomoran halaman.

Setiap jenis carousel memiliki pertimbangan aksesibilitas dan praktik terbaik yang berbeda.

Carousel satu item

Ini adalah slide klasik. Hanya satu elemen turunan yang dimaksudkan untuk dibaca dalam satu waktu, meskipun dalam banyak kasus pengguna akan melihat "intip" item berikutnya atau sebelumnya untuk memberikan petunjuk kontekstual tentang konten tambahan. Tujuannya adalah untuk memastikan bahwa hanya slide yang berada di tengah dan terlihat sepenuhnya yang interaktif.

Berikut cara membuatnya dapat diakses, langkah demi langkah.

Langkah 1: Terapkan satu fokus dengan penyelarasan scroll

Untuk menjamin bahwa penampung scroll selalu "menempel" ke slide, tanpa ada item yang terjebak di antaranya, gunakan penempelan scroll CSS. Hal ini memastikan bahwa setelah men-scroll, item "dijepret" dengan sempurna ke posisi yang benar, sehingga menciptakan pengalaman pengguna yang lancar.

.carousel {
  scroll-snap-type: inline mandatory;
}
.item {
  scroll-snap-align: center;
}

Langkah 2: Umumkan Perubahan carousel dan slide

Pengguna dengan pembaca layar perlu mengetahui bahwa mereka telah memasuki carousel dan kapan slide berubah. Hal ini memerlukan beberapa atribut ARIA pada penampung carousel:

Berikut struktur HTML-nya:

<div class="carousel" role="region" aria-label="Slideshow" aria-live="polite"> ... </div>

Langkah 3: Membuat hanya slide yang terlihat menjadi interaktif

Hal ini sangat penting untuk aksesibilitas karena mencegah pengguna secara tidak sengaja menekan tombol atau link pada slide di luar layar. Untuk melakukannya, gunakan kueri penampung scroll-state dan properti interactivity baru.

Pertama, buat setiap item slide menjadi tidak aktif secara default menggunakan interactivity: inert. Kemudian, gunakan kueri penampung scroll-state untuk menargetkan slide yang saat ini "terpaskan" di area tampilan dan tetapkan kontennya ke interactivity: auto.

.item {
  container-type: scroll-state;
}
/* Make all content inside slides inert by default */
.item > * {
  interactivity: inert;
  /* When a slide is snapped inline, make its content interactive */
  @container scroll-state(snapped: inline) {
    > .content {
      interactivity: auto;
    }
  }
}

Dengan CSS ini, browser secara otomatis menangani item mana yang dapat difokuskan. Tidak ada lagi JavaScript yang diperlukan untuk mengelola indeks tab. Kueri scroll-state membuat semua slide selain slide saat ini menjadi tidak aktif.

Carousel bernomor halaman

Pola ini sering digunakan untuk galeri produk atau pilihan tempat konten dikelompokkan ke dalam halaman. Aksesibilitas dapat ditangani dengan dua cara, bergantung pada cara Anda ingin menyajikan konten.

Carousel dengan halaman terpisah

Gunakan penampung dengan role="region" dengan satu elemen yang berisi role="tabpanel" di dalamnya. Tabpanel ini akan memperbarui kontennya untuk mencerminkan tab atau halaman yang aktif.

<div role="region" class="carousel" aria-label="Featured Products Carousel">
    <div role="tabpanel">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        ...
        <div class="item">Item n</div> </div>
    </div>
</div>

Untuk mengelola interaktivitas, gunakan trik animasi cerdas yang terkait dengan linimasa view(). Hal ini memastikan urutan tab hanya mencapai item yang saat ini terlihat di layar.

@keyframes interactive-when-visible {
  0% { interactivity: auto; }
}
.item {
  interactivity: inert;
  animation: interactive-when-visible steps(1);
  animation-timeline: view(inline);
}

Daftar isi

Jika konten pada dasarnya adalah daftar, gunakan elemen <ul> untuk semantik yang benar.

Contoh:

<div class="carousel" role="region" aria-label="Related Posts">
  <ul>
    <li><!-- Post 1 content --></li>
    <li><!-- Post 2 content --></li>
    <li><!-- Post 3 content --></li>
    <!-- ... -->
  </ul>
</div>

Untuk pola ini, jangan gunakan properti interaktivitas untuk membuat konten di luar layar menjadi tidak aktif. Tindakan ini akan memengaruhi jumlah item yang diumumkan oleh pembaca layar, sehingga semua konten harus tetap berada di pohon aksesibilitas.

Carousel multi-item

Pola ini ditujukan untuk carousel yang menampilkan beberapa elemen turunan yang dapat dilihat dan dibaca secara bersamaan. Misalnya, galeri "produk terkait" di situs e-commerce.

Carousel ini berperilaku berbeda, bergantung pada jawaban Anda atas keputusan berikut: apakah Anda memandu fokus pengguna ke satu item dalam satu waktu, atau apakah Anda mengizinkan mereka mengakses semua konten yang terlihat secara bebas?

Pola 1: Satu item interaktif di antara item yang terlihat

Dalam model ini, beberapa item terlihat, tetapi hanya item utama atau "saat ini" yang interaktif. Item lain yang terlihat tidak aktif. Pola ini berguna untuk memandu pengguna melihat sekumpulan item satu per satu.

Untuk membangunnya dengan benar, Anda harus menggunakan pola aksesibilitas yang sama dengan carousel item tunggal yang dibahas sebelumnya. Hal ini meliputi:

• Gunakan kueri penampung status scroll untuk menerapkan interaktivitas: tidak aktif ke item yang tidak aktif.
• Tambahkan padding yang cukup di sekitar item untuk memastikan bahwa setiap item dapat ditempatkan ke posisi utama (misalnya, tengah scrollport). Hal ini membuat model navigasi satu per satu terasa disengaja dan lancar.

Pola 2: Semua item yang terlihat bersifat interaktif

Jika sasaran Anda adalah mengizinkan pengguna berinteraksi secara bebas dengan semua item yang terlihat, praktik terbaiknya adalah memastikan tidak ada konten yang tidak aktif.

Untuk pola ini:

• Gunakan elemen <ul> jika konten secara semantik adalah daftar, karena elemen ini memberikan konteks yang benar bagi pengguna pembaca layar.
• Jangan gunakan pengelolaan interaktivitas (interactivity: inert). Semua konten yang terlihat harus tetap berada di hierarki aksesibilitas dan dapat dijangkau menggunakan penab-an keyboard.

Menyelesaikan

CSS Overflow 5 memungkinkan Anda membuat pola carousel interaktif umum secara deklaratif dengan lebih sedikit masalah aksesibilitas. Dengan menggabungkan HTML semantik, CSS modern seperti status scroll dan interaktivitas, serta peran ARIA yang tepat, Anda dapat membuat pengalaman yang interaktif pada paint pertama, berperforma tinggi, dan mudah diakses.

Coba gunakan API baru ini. Seperti biasa, meskipun pola dan API ini dirancang untuk mempermudah pembuatan komponen interaktif, cepat, dan dapat diakses, tidak ada pengganti pengujian aksesibilitas penuh. Anda harus selalu memverifikasi bahwa kode Anda dapat diakses, dan berfungsi untuk target Dasar Anda.