logo logo

Portal media terdepan yang menyajikan informasi terkini seputar dunia teknologi, gadget, dan inovasi digital di Indonesia.

Sentral Media

Langganan Update Teknologi

Dapatkan rangkuman berita mingguan langsung ke email Anda.

Daftar Newsletter

Surabaya, Indonesia

Kota Surabaya, Jawa Timur

Email: redaksi@sentralmediateknologi.id

Frontend & Ui/Ux

Mengenal ARIA: Suara untuk Elemen yang "Bisu"

Pelajari dasar-dasar Web Accessibility (A11y) dan cara menggunakan ARIA Attributes untuk meningkatkan aksesibilitas website bagi penyandang disabilitas.

avatar
Super Administrator

SentralMediaTeknologi.id


  • 21 Apr 2026
  • 13:52 WIB

Mengenal ARIA: Suara untuk Elemen yang "Bisu"

ARIA (Accessible Rich Internet Applications) adalah sekumpulan atribut khusus yang ditambahkan ke tag HTML untuk membantu teknologi asisten (seperti screen reader) memahami struktur dan perilaku elemen web, terutama yang dibuat menggunakan JavaScript atau CSS kustom.

Penting untuk diingat aturan utama ARIA: "Jika Anda bisa menggunakan elemen HTML asli (seperti

<button class="btn-search"> <i class="fa fa-search">i>
button> <button class="btn-search" aria-label="Cari Artikel"> <i class="fa fa-search">i>
button> <nav> <button aria-expanded="false" aria-controls="menu-list" id="menu-btn"> Menu Utama button> <ul id="menu-list" hidden> <li><a href="/">Berandaa>li> <li><a href="/about">Tentang Kamia>li> ul>
nav>

Checklist Aksesibilitas Dasar

Atribut ARIA Kapan Digunakan? Fungsi
aria-label Tombol ikon atau link tanpa teks. Memberikan nama visual pada elemen.
aria-hidden Ikon dekoratif atau elemen visual saja. Menyembunyikan elemen dari pembaca layar.
aria-required Form input yang wajib diisi. Memberitahu bahwa input ini tidak boleh kosong.
role="alert" Pesan error atau notifikasi muncul. Memaksa pembaca layar membacakan pesan saat itu juga.

Tips Profesional untuk Developer

  1. Gunakan Kontras Warna: Aksesibilitas bukan hanya soal ARIA. Pastikan teks Anda mudah dibaca oleh pengguna dengan gangguan penglihatan (low vision) dengan rasio kontras minimal 4.5:1.

  2. Navigasi Keyboard: Cobalah menavigasi website Anda hanya menggunakan tombol Tab dan Enter. Jika Anda tidak bisa mengakses semua fitur, berarti website Anda belum aksesibel.

  3. Gunakan Atribut alt pada Gambar: Ini adalah dasar A11y paling sederhana namun paling sering dilupakan. Gambar tanpa alt akan membuat pembaca layar membacakan nama file yang tidak jelas (misal: "IMG_001.jpg").


Kesimpulan

Web Accessibility bukan sekadar fitur tambahan, melainkan tanggung jawab etis seorang pengembang. Dengan menambahkan atribut ARIA yang tepat, Anda memastikan bahwa informasi dan layanan di website Anda dapat dinikmati oleh semua orang, termasuk mereka yang memiliki keterbatasan fisik.

 

Stories

avatar

Jurnalis dan analis internasional, mengurai dinamika geopolitik, ekonomi global, dan konflik dunia dengan ketajaman dan kedalaman.


Bagikan artikel ini

Stay Connected