Aksesibilitas (a11y)

Ekstensi memungkinkan pengguna membuat pengalaman penjelajahan ideal mereka, yang disesuaikan dengan kemampuan dan preferensi masing-masing. Ekstensi harus menyertakan komponen aksesibilitas yang mendorong basis pengguna inklusif dengan memungkinkan orang yang mengalami gangguan penglihatan, gangguan pendengaran, keterbatasan ketangkasan, dan disabilitas lainnya untuk mengakses ekstensi.

Semua orang, bukan hanya pengguna dengan kebutuhan khusus, dapat memanfaatkan fitur aksesibilitas. Pengguna yang mengalami gangguan penglihatan, keterbatasan ketangkasan, dan pengguna tingkat lanjut semuanya dapat memanfaatkan pintasan keyboard. Subtitel dan transkrip penting bagi pengguna tunarungu, tetapi juga membantu pelajar bahasa.

Pengguna dapat berinteraksi dengan ekstensi melalui berbagai cara. Beberapa pengguna memiliki monitor standar, keyboard, dan mouse. Namun, mereka mungkin bergantung pada kaca pembesar layar dan mungkin pembaca layar. Meskipun tidak mungkin memprediksi alat yang akan digunakan pengguna untuk mengakses ekstensi, ada langkah-langkah yang dapat dilakukan developer untuk membuat ekstensi dapat diakses semudah mungkin.

Mengintegrasikan kontrol UI yang dapat diakses

Jika pengguna tidak dapat mengakses kontrol antarmuka pengguna, mereka tidak dapat menggunakan ekstensi. Cara termudah untuk membuat UI yang dapat diakses adalah menggunakan kontrol HTML standar.

Kontrol standar

Jika memungkinkan, gunakan kontrol UI HTML standar. Kontrol HTML standar dapat diakses melalui keyboard, mudah diskalakan, dan umumnya dipahami oleh pembaca layar.

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

WAI-ARIA dalam kontrol kustom

The Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) adalah spesifikasi untuk membuat kontrol UI dapat diakses oleh pembaca layar melalui kumpulan atribut DOM standar. Atribut ini memberikan informasi kepada pembaca layar tentang fungsi dan status kontrol saat ini di halaman web.

Untuk menambahkan dukungan WAI-ARIA ke kontrol kustom, elemen DOM ekstensi harus diubah untuk menyertakan atribut yang digunakan Chrome untuk memunculkan peristiwa selama interaksi pengguna. Pembaca layar merespons peristiwa ini dan menjelaskan fungsi kontrol. Atribut DOM yang ditentukan oleh WAI-ARIA diklasifikasikan ke dalam peran, status, dan properti.

<div role="toolbar">

Properti aria-activedescendant menentukan turunan toolbar mana yang menerima fokus saat toolbar menerima fokus. Kode tabindex="0" menentukan bahwa toolbar menerima fokus dalam urutan dokumen.

Pertimbangkan spesifikasi lengkap untuk contoh toolbar di bawah:

<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>

Setelah peran, status, dan properti WAI-ARIA ditambahkan ke DOM kontrol, Google Chrome akan memunculkan peristiwa yang sesuai ke pembaca layar. Karena dukungan WAI-ARIA masih dalam proses pengembangan, Google Chrome mungkin tidak memunculkan peristiwa untuk setiap properti WAI-ARIA, dan pembaca layar mungkin tidak mengenali semua peristiwa yang dimunculkan.

Untuk tutorial singkat tentang cara menambahkan kontrol WAI-ARIA ke kontrol kustom, lihat presentasi Dave Raggett's dari WWW2010.

Fokus dalam kontrol kustom

Fokus keyboard sangat penting bagi pengguna yang menjelajahi web tanpa mouse. Pastikan kontrol operasi dan navigasi, seperti tombol, kotak daftar, dan menu bar dapat menerima fokus keyboard.

Secara default, satu-satunya elemen dalam DOM HTML yang dapat menerima fokus keyboard adalah link, tombol, dan kontrol formulir. Namun, menetapkan atribut HTML tabIndex ke 0 akan menempatkan elemen DOM dalam urutan tab default, sehingga memungkinkan elemen tersebut menerima fokus keyboard.

element.tabIndex = 0

element.focus();

Menetapkan tabIndex = -1 akan menghapus elemen dari urutan tab, tetapi tetap memungkinkan elemen menerima fokus keyboard secara terprogram.

Mendukung akses keyboard

Ekstensi harus dapat digunakan hanya dengan keyboard, sehingga pengguna yang tidak dapat menggunakan mouse, dan pengguna tingkat lanjut yang tidak menggunakannya, dapat mengaksesnya.

Pastikan pengguna dapat menavigasi antara berbagai bagian ekstensi tanpa menggunakan mouse. Pastikan penggunaan pop-up dapat dinavigasi melalui keyboard. Gunakan pintasan keyboard Chrome untuk menentukan apakah ekstensi dapat dinavigasi.

Pastikan bagian antarmuka yang memiliki fokus keyboard mudah dilihat. Biasanya, garis luar fokus bergerak di sekitar antarmuka. Namun, jika CSS digunakan terlalu banyak, garis luar mungkin akan disembunyikan atau kontrasnya dikurangi.

Garis fokus pada tombol Penelusuran

Garis fokus pada salah satu dari serangkaian link

Pintasan

Meskipun strategi navigasi keyboard yang paling umum melibatkan penggunaan tombol Tab untuk memutar fokus melalui antarmuka ekstensi, strategi ini tidak selalu merupakan opsi yang paling mudah atau paling efisien.

Penangan keyboard JavaScript sederhana dapat terlihat seperti berikut. Perhatikan bagaimana properti WAI-ARIA aria-activedescendant diperbarui sebagai respons terhadap input pengguna untuk mencerminkan tombol toolbar aktif saat ini.

 function optionKeyEvent(event) {
  var tb = event.target;
  var buttonid;

  ENTER_KEYCODE = 13;
  RIGHT_KEYCODE = 39;
  LEFT_KEYCODE = 37;
  // Partial sample code for processing arrow keys.
  if (event.type == "keydown") {
    // Implement circular keyboard navigation within the toolbar buttons
    if (event.keyCode == ENTER_KEYCODE) {
      ExecuteButtonAction(getCurrentButtonID());
      // getCurrentButtonID defined elsewhere
    } else if (event.keyCode == event.RIGHT_KEYCODE) {
      // Change the active toolbar button to the one to the right (circular).
      var buttonid = getNextButtonID();
      // getNextButtonID defined elsewhere
      tb.setAttribute("aria-activedescendant", buttonid);
    } else if (event.keyCode == event.LEFT_KEYCODE) {
      // Change the active toolbar button to the one to the left (circular).
      var buttonid = getPrevButtonID();
      // getPrevButtonID defined elsewhere
      tb.setAttribute("aria-activedescendant", buttonid);
    } else {
      return true;
    }
    return false;
  }
}

<div role="toolbar" tabindex="0" aria-activedescendant="button1" id="tb1"
     onkeydown="return optionKeyEvent(event);"
     onkeypress="return optionKeyEvent(event);">
  <img src="buttoncut" role="button" alt="cut" id="button1">
  <img src="buttoncopy" role="button" alt="copy" id="button2">
  <img src="buttonpaste" role="button" alt="paste" id="button3">
</div>

Ekstensi dapat membuat pintasan keyboard eksplisit ke elemen UI ekstensi yang penting. Untuk menerapkan pintasan ini, hubungkan pemroses peristiwa keyboard ke kontrol. Beritahukan pengguna tentang pintasan yang tersedia dengan menyediakannya di halaman opsi.

Menyediakan konten yang dapat diakses

Menyediakan konten yang dapat diakses penting bagi semua pengguna. Banyak panduan berikut mungkin terdengar familiar, karena panduan ini mencerminkan praktik yang baik untuk semua konten web.

Teks

Pilihan font dan ukuran teks memengaruhi keterbacaan konten ekstensi. Pengguna yang mengalami masalah penglihatan mungkin perlu memperbesar ukuran teks ekstensi. Jika menggunakan pintasan keyboard, pastikan pintasan tersebut tidak mengganggu pintasan zoom yang ada di Chrome.

Sebagai indikator fleksibilitas UI ekstensi, terapkan pengujian 200%; jika ukuran teks atau zoom halaman ditingkatkan 200%, apakah masih dapat digunakan?

Hindari menyisipkan teks ke dalam gambar. Pengguna tidak dapat mengubah ukuran dan pembaca layar tidak dapat menafsirkan gambar. Sebagai gantinya, pilih font web bergaya, seperti salah satu font yang ditemukan di Google Font API. Font web dapat diskalakan ke berbagai ukuran dan dapat diakses oleh orang yang menggunakan pembaca layar.

Warna

Harus ada kontras yang cukup antara warna latar belakang dan warna teks dalam ekstensi. Gunakan alat pemeriksaan kontras untuk menguji apakah warna latar belakang dan latar depan memberikan kontras yang sesuai.

Saat mengevaluasi kontras, pastikan setiap bagian ekstensi yang mengandalkan grafis untuk menyampaikan informasi terlihat jelas. Untuk gambar tertentu, alat seperti Coblis—Color Blindness Simulator dapat digunakan untuk melihat tampilan gambar dalam berbagai bentuk defisiensi warna.

Pertimbangkan untuk menawarkan tema warna yang berbeda, atau memberikan kemampuan kepada pengguna untuk menyesuaikan skema warna, guna membuat kontras yang lebih baik.

Suara

Jika ekstensi mengandalkan suara atau video untuk menyampaikan informasi, pastikan subtitel atau transkrip tersedia. Lihat panduan Program Media yang Dijelaskan dan Diberi Subtitel untuk mengetahui informasi selengkapnya tentang subtitel.

Gambar

Berikan teks alternatif yang informatif untuk gambar.

<img src="img.jpg" alt="The logo for the extension">

Gunakan teks alternatif untuk menyatakan tujuan gambar, bukan deskripsi literal konten gambar. Gambar spasi atau gambar yang murni dekoratif harus memiliki teks alternatif "" kosong atau dihapus sepenuhnya dari HTML dan ditempatkan di CSS.

Jika ekstensi harus menggunakan teks dalam gambar, sertakan teks gambar dalam teks alternatif. Referensi yang baik untuk dirujuk adalah artikel WebAIM tentang teks alternatif yang sesuai.

Pelajari lebih lanjut

Pelajari lebih lanjut aksesibilitas di Chrome dengan melihat saluran A11ycasts dan membaca melalui Dokumentasi Teknis Aksesibilitas Chromium.