Buat ekstensi Anda dapat diakses

Bagi banyak pengguna, aksesibilitas secara harfiah adalah antarmuka pengguna, dan fiturnya sering kali berguna bagi mereka yang tidak memerlukan aksesibilitas sebagai sarana utama untuk berinteraksi dengan ekstensi Anda. Tekniknya bervariasi. Setidaknya, teks harus memiliki kontras tinggi. Video harus disertai teks. Gambar harus menyertakan atribut alt.

Namun, seperti yang dinyatakan, ini hanyalah nilai minimum. Teknik tambahan akan dijelaskan sebagai berikut.

Ada beberapa cara untuk mengimplementasikan aksesibilitas, tetapi cara yang paling mudah adalah menggunakan kontrol HTML standar, terutama elemen input. Gambar berikut menampilkan kontrol ini.

Screenshot dan kode untuk tombol, kotak centang, radio, teks, pilih/opsi, dan link
Screenshot dan kode untuk tombol, kotak centang, radio, teks, pilih/opsi, dan link.

Agar elemen lain dapat diakses, gunakan atribut ARIA. Atribut ini memberikan informasi kepada pembaca layar tentang fungsi dan status kontrol saat ini di halaman web. Berikut adalah contohnya.

<div role="toolbar" tabindex="0" aria-activedescendant="button1">
  <img src="buttoncut.png" role="button" alt="cut" id="button1">
  <img src="buttoncopy.png" role="button" alt="copy" id="button2">
  <img src="buttonpaste.png" role="button" alt="paste" id="button3">
</div>

Secara default, satu-satunya elemen di DOM HTML yang dapat menerima fokus keyboard adalah anchor, tombol, dan kontrol formulir. Untungnya, menetapkan atribut tabIndex pada elemen HTML memungkinkannya menerima fokus keyboard. Contoh:

<div tabindex="0">I can receive focus with the tab key.</div>

Untuk petunjuk tentang penerapan teknik ini dan lainnya, lihat Mendukung aksesibilitas.