Aksesibilitas di CHI Tickets
CHI Tickets dirancang agar dapat digunakan oleh semua orang, termasuk mereka yang mengandalkan teknologi bantu. Artikel ini menjelaskan fitur aksesibilitas yang dibangun ke dalam platform dan cara memanfaatkannya secara maksimal.
Navigasi Keyboard
Setiap bagian pengalaman CHI Tickets dapat dioperasikan hanya dengan keyboard, tanpa memerlukan mouse atau layar sentuh:
- Tombol Tab — Menggerakkan fokus maju melalui elemen interaktif (tautan, tombol, kolom formulir).
- Shift + Tab — Menggerakkan fokus mundur melalui elemen interaktif.
- Enter atau Spasi — Mengaktifkan tombol atau tautan yang sedang difokuskan.
- Tombol panah — Bernavigasi di dalam dropdown, grup tombol radio, dan kontrol komposit lainnya.
- Escape — Menutup dialog modal dan pop-up.
Seluruh alur checkout, mulai dari memilih tiket hingga menyelesaikan pembayaran, dapat diselesaikan hanya dengan input keyboard. Ini termasuk bernavigasi melalui checkout multi-langkah (Tiket, Add-on, Pertanyaan Kustom, Info Kontak, Pembayaran, dan Konfirmasi).
Indikator Fokus
Saat bernavigasi dengan keyboard, sebuah indikator fokus yang terlihat (biasanya garis tepi atau sorotan) muncul di sekeliling elemen yang sedang aktif. Indikator ini:
- Menunjukkan dengan jelas elemen mana yang terpilih, sehingga Anda selalu tahu posisi Anda di halaman.
- Mengikuti urutan tab yang logis sesuai tata letak visual halaman (kiri ke kanan, atas ke bawah).
- Diberi gaya untuk memenuhi persyaratan kontras WCAG 2.1, memastikannya terlihat pada latar terang maupun gelap.
- Berlaku untuk semua elemen interaktif, termasuk tombol, tautan, input formulir, dropdown, dan kontrol tab.
Dukungan Screen Reader
CHI Tickets dibangun dengan HTML semantik dan atribut ARIA (Accessible Rich Internet Applications) untuk memastikan kompatibilitas dengan screen reader populer, termasuk:
- VoiceOver (macOS dan iOS)
- NVDA (Windows)
- TalkBack (Android)
- JAWS (Windows)
Implementasi aksesibilitas utamanya meliputi:
| Fitur | Implementasi |
|---|
| Struktur halaman | Hierarki heading yang benar (h1, h2, h3) sehingga screen reader dapat bernavigasi berdasarkan heading |
| Label formulir | Semua kolom formulir memiliki label terkait yang dibacakan screen reader saat kolom menerima fokus |
| Label tombol | Tombol mencantumkan teks deskriptif atau label ARIA yang mengomunikasikan fungsinya |
| Alt text gambar | Gambar acara dilengkapi deskripsi teks alternatif |
| Live region | Pembaruan konten dinamis (seperti pesan error dan peringatan stok) diumumkan oleh screen reader menggunakan ARIA live regions |
| Landmark regions | Bagian halaman ditandai dengan landmark ARIA (navigasi, konten utama, footer) untuk navigasi cepat |
Label dan Peran ARIA
CHI Tickets menggunakan atribut ARIA secara luas untuk memberikan konteks yang tidak dapat disampaikan oleh desain visual saja:
- aria-label — Menyediakan nama aksesibel untuk elemen yang tidak memiliki label teks terlihat (misalnya, tombol ikon).
- aria-describedby — Mengaitkan kolom formulir dengan teks bantuan atau pesan errornya sehingga screen reader membaca keduanya bersamaan.
- aria-required — Menunjukkan kolom formulir mana yang wajib diisi selama checkout.
- aria-invalid — Menandai kolom yang mengandung kesalahan validasi sehingga screen reader mengumumkan status errornya.
- Atribut role — Memberikan peran yang sesuai pada komponen UI kustom (misalnya,
role="tablist" untuk tab Upcoming/Ongoing, role="alert" untuk pesan error).
Desain Responsif
CHI Tickets menggunakan tata letak sepenuhnya responsif yang menyesuaikan ukuran layar dan tingkat zoom apa pun:
- Mobile, tablet, dan desktop — Antarmuka menyesuaikan tata letaknya dengan layar, memastikan kegunaan di semua perangkat.
- Penskalaan teks — Konten tetap terbaca dan berfungsi saat zoom browser dinaikkan hingga 200% atau lebih.
- Target sentuh — Tombol dan elemen interaktif berukuran memenuhi panduan minimum target sentuh (setidaknya 44x44 piksel CSS), sehingga mudah diketuk di layar sentuh.
- Reflow — Konten menyesuaikan dirinya dengan viewport tanpa memerlukan gulir horizontal pada tingkat zoom standar.
Warna dan Kontras
- Kontras teks — Teks dan elemen interaktif memenuhi rasio kontras WCAG 2.1 AA (setidaknya 4.5:1 untuk teks normal dan 3:1 untuk teks besar).
- Tidak bergantung pada warna saja — Informasi tidak pernah disampaikan hanya melalui warna. Misalnya, tiket yang habis menampilkan perubahan warna sekaligus lencana teks "Sold Out".
- Peringatan stok menipis mencakup indikator visual sekaligus teks deskriptif.
Gerakan yang Dikurangi
Untuk pengguna yang memilih gerakan yang dikurangi (melalui media query prefers-reduced-motion pada pengaturan sistem operasi mereka), CHI Tickets:
- Meminimalkan atau menonaktifkan animasi dan transisi.
- Memastikan semua fungsi esensial tetap bekerja tanpa bergantung pada interaksi berbasis gerakan.
Tips untuk Pengalaman Aksesibel Terbaik
- Gunakan browser modern — Versi terbaru Chrome, Firefox, Safari, dan Edge memberikan dukungan aksesibilitas terbaik.
- Perbarui screen reader Anda — Versi yang lebih baru menawarkan dukungan lebih baik untuk atribut ARIA dan standar web modern.
- Aktifkan navigasi keyboard — Di macOS, buka System Settings > Keyboard dan aktifkan "Keyboard navigation" untuk menekan Tab melalui semua kontrol di Safari.
- Atur zoom seperlunya — Gunakan zoom bawaan browser Anda (Ctrl/Cmd + Plus) untuk memperbesar teks dan elemen antarmuka.
- Laporkan masalah — Jika Anda menemui hambatan aksesibilitas apa pun di CHI Tickets, silakan hubungi dukungan CHI. Umpan balik membantu meningkatkan platform bagi semua pengguna.
Tips: Jika Anda membutuhkan bantuan membeli tiket atau memiliki kebutuhan aksesibilitas khusus untuk acaranya sendiri (seperti akses kursi roda atau interpretasi bahasa isyarat), hubungi penyelenggara acara langsung melalui halaman acara.