Back to blog
Best Practice

Web Accessibility (a11y): Membuat Website yang Ramah Disabilitas

Apakah website-mu masih bisa digunakan jika layarnya dimatikan dan kamu hanya mengandalkan keyboard? Itulah inti dari Web Accessibility.

super admin·16 Juni 2026·2 min read
Web Accessibility (a11y): Membuat Website yang Ramah Disabilitas
Article Content

Desain Visual Bukan Segalanya

Banyak developer yang fokus membuat website estetik dengan animasi *slider* dan *pop-up* yang memenuhi layar, tanpa memikirkan satu audiens penting: Penyandang Disabilitas. Internet diciptakan untuk semua orang, termasuk mereka yang memiliki keterbatasan penglihatan, pendengaran, atau motorik.

Di dunia IT, praktik membuat website yang inklusif (bisa dipakai semua orang) disebut Web Accessibility atau sering disingkat a11y (angka 11 merujuk pada jumlah huruf antara a dan y pada kata *accessibility*).

Bagaimana Tunanetra Menggunakan Internet?

Tunanetra berselancar di internet menggunakan *software* khusus bernama Screen Reader (Pembaca Layar), yang akan "membacakan" isi teks HTML di layar dengan suara robot.

Oleh karena itu, kamu wajib mematuhi aturan ini:

  • Selalu gunakan Alt-Text pada Gambar: Jika tidak ada teks alt, mesin hanya akan membacakan nama file yang berantakan (seperti "IMG-8493-2024.jpg") yang membingungkan pengunjung.
  • Gunakan Semantic HTML: Jika kamu menggunakan tag
    untuk membungkus sebuah Tombol, *Screen Reader* tidak tahu bahwa itu bisa diklik. Selalu gunakan tag

Navigasi Keyboard (Bagi Keterbatasan Motorik)

Banyak pengguna yang tangannya gemetar atau memiliki gangguan saraf sehingga mereka tidak bisa menggunakan Mouse atau Trackpad. Mereka menavigasi seluruh website murni menggunakan tombol Tab (untuk maju) dan Shift+Tab (untuk mundur).

Coba tantangan ini: Buka website buatanmu sendiri, simpan *mouse*-mu, lalu coba isi formulir dan tekan tombol *Submit* hanya dengan tombol Tab dan Enter. Apakah kotak birunya (Focus Outline) terlihat jelas? Jika tidak, kamu harus memperbaiki CSS :focus pada elemenmu!

Pentingnya Kontras Warna (Bagi Buta Warna)

Hindari desain abu-abu tipis di atas latar belakang putih bersih, atau hijau terang di atas merah. Ini adalah mimpi buruk bagi penderita Buta Warna Parsial dan orang tua yang penglihatannya mulai kabur.

Gunakan *tools* seperti WebAIM Contrast Checker. Aturan globalnya: Teks normal harus memiliki rasio kontras warna minimal 4.5 : 1 terhadap latar belakangnya. Merancang web yang *Accessible* bukan sekadar masalah moral, tapi saat ini sudah diwajibkan oleh hukum internasional di banyak negara (seperti standar WCAG 2.1).

Mau langsung pakai template?

Jelajahi template gratis dan premium di TampilKit untuk mempercepat proses development project kamu.

Browse Templates