JavaScript

JavaScript memainkan peran utama dalam hampir semua hal yang kita buat, mulai dari komponen dinamis yang lebih kecil hingga produk lengkap yang berjalan pada framework JavaScript, seperti React atau Angular.

Penggunaan (atau penggunaan yang berlebihan) JavaScript ini telah membawa banyak tren yang mengkhawatirkan, seperti waktu muat yang lama karena sejumlah besar kode, penggunaan elemen HTML non-semantik, dan injeksi HTML dan CSS melalui JavaScript. Dan Anda mungkin tidak yakin bagaimana peran aksesibilitas dalam setiap bagian ini.

JavaScript dapat berdampak besar pada aksesibilitas situs Anda. Dalam modul ini, kami akan membagikan beberapa pola umum untuk aksesibilitas yang ditingkatkan oleh JavaScript, serta solusi untuk masalah aksesibilitas yang muncul karena penggunaan framework JavaScript.

Peristiwa pemicu

Peristiwa JavaScript memungkinkan pengguna berinteraksi dengan konten web dan melakukan tindakan tertentu. Banyak orang, seperti pengguna pembaca layar, orang dengan disabilitas keterampilan motorik halus, orang tanpa mouse atau trackpad, dan lainnya, mengandalkan dukungan keyboard untuk berinteraksi dengan web. Anda harus menambahkan dukungan keyboard ke tindakan JavaScript, karena dukungan ini akan memengaruhi semua pengguna ini.

Mari kita lihat peristiwa klik. Jika peristiwa onClick() digunakan pada elemen HTML semantik seperti <button> atau <a>, peristiwa tersebut secara alami akan menyertakan fungsi mouse dan keyboard. Namun, fungsi keyboard tidak otomatis diterapkan saat peristiwa onClick() ditambahkan ke elemen non-semantik, seperti <div> generik.

<div role="button" tabindex="0" onclick="doAction()">Click me!</div>

<button onclick="doAction()">Click me!</button>

Lihat pratinjau perbandingan ini di CodePen.

Jika elemen non-semantik digunakan untuk peristiwa pemicu, peristiwa keydown/keyup harus ditambahkan untuk mendeteksi penekanan tombol enter atau spasi. Menambahkan peristiwa pemicu ke elemen non-semantik sering kali dilupakan. Sayangnya, jika dilupakan, hasilnya adalah komponen yang hanya dapat diakses melalui mouse. Pengguna keyboard saja tidak memiliki akses ke tindakan terkait.

Judul halaman

Seperti yang telah kita pelajari dalam modul Dokumen, judul halaman sangat penting bagi pengguna pembaca layar. Ini memberitahu pengguna halaman apa yang sedang mereka buka dan apakah mereka telah menavigasi ke halaman baru.

Jika menggunakan framework JavaScript, Anda harus mempertimbangkan cara menangani judul halaman. Hal ini sangat penting untuk aplikasi web satu halaman (SPA) yang dimuat dari satu file index.html karena transisi atau rute (perubahan halaman) tidak akan memerlukan pemuatan ulang halaman. Setiap kali pengguna memuat halaman baru di SPA, judul tidak akan berubah secara default.

Untuk SPA, nilai document.title dapat ditambahkan secara manual atau dengan paket bantuan (bergantung pada framework JavaScript). Mengumumkan judul halaman yang diperbarui kepada pengguna pembaca layar mungkin memerlukan beberapa pekerjaan tambahan, tetapi kabar baiknya adalah Anda memiliki opsi, seperti konten dinamis.

Konten dinamis

Salah satu fungsi JavaScript yang paling canggih adalah kemampuan untuk menambahkan HTML dan CSS ke elemen mana pun di halaman. Developer dapat membuat aplikasi dinamis berdasarkan tindakan atau perilaku pengguna.

Katakanlah Anda perlu mengirim pesan kepada pengguna saat mereka login ke situs atau aplikasi Anda. Anda ingin pesan tampil beda dari latar belakang putih dan menyampaikan pesan: "Anda sekarang sudah login".

Anda dapat menggunakan elemen innerHTML untuk menetapkan konten:

document.querySelector("#banner").innerHTML = '<p>You are now logged in</p>';

Anda dapat menerapkan CSS dengan cara yang sama, dengan setAttribute:

document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");

Kekuatan besar datang dengan tanggung jawab yang besar. Sayangnya, injeksi JavaScript pada HTML dan CSS secara historis telah disalahgunakan untuk membuat konten yang tidak dapat diakses. Beberapa penyalahgunaan umum tercantum di sini:

Untuk CSS, alihkan class CSS, bukan menambahkan gaya inline, karena hal ini memungkinkan penggunaan kembali dan kemudahan. Menggunakan konten tersembunyi di halaman dan mengalihkan class guna menyembunyikan dan menampilkan konten untuk HTML dinamis. Jika Anda perlu menggunakan JavaScript untuk menambahkan konten secara dinamis ke halaman, pastikan konten tersebut sederhana dan ringkas, dan tentu saja, mudah diakses.

Pengelolaan fokus

Dalam modul fokus keyboard, kita membahas gaya indikator dan urutan fokus. Manajemen fokus adalah mengetahui kapan dan di mana fokus harus diperhatikan dan kapan seharusnya fokus tidak terjebak.

Pengelolaan fokus sangat penting bagi pengguna keyboard saja.

Level komponen

Anda dapat membuat perangkap keyboard saat fokus komponen tidak dikelola dengan benar. Perangkap keyboard terjadi saat pengguna khusus keyboard terjebak dalam komponen, atau fokus tidak dipertahankan padahal seharusnya.

Salah satu pola paling umum saat pengguna mengalami masalah pengelolaan fokus adalah pada komponen modal. Saat pengguna khusus keyboard menemukan modal, pengguna seharusnya dapat berpindah tab di antara elemen modal yang dapat ditindaklanjuti, tetapi tidak boleh diizinkan di luar modal tanpa menutupnya secara eksplisit. JavaScript sangat penting untuk menangkap fokus ini dengan benar.

Tingkat halaman

Fokus juga harus dipertahankan saat pengguna beralih dari halaman ke halaman. Hal ini terutama terjadi di SPA, saat tidak ada pemuatan ulang browser, dan semua konten berubah secara dinamis. Setiap kali pengguna mengklik link untuk membuka halaman lain dalam aplikasi Anda, fokus akan disimpan di tempat yang sama atau berpotensi ditempatkan di tempat lain yang sama sekali.

Saat melakukan transisi antarhalaman (atau pemilihan rute), tim pengembangan harus menentukan tujuan pemuatan halaman saat halaman dimuat.

Ada beberapa teknik untuk melakukannya:

• Menempatkan fokus pada penampung utama dengan pengumuman aria-live.
• Pindahkan fokus kembali ke link untuk melewati ke konten utama.
• Pindahkan fokus ke judul tingkat atas halaman baru.

Tempat Anda memutuskan untuk memberikan fokus akan bergantung pada framework yang digunakan dan konten yang ingin ditayangkan kepada pengguna. Ini mungkin tergantung konteks atau tindakan.

Pengelolaan status

Area lain tempat JavaScript sangat penting untuk aksesibilitas adalah pengelolaan status, atau saat status visual halaman atau komponen saat ini disampaikan kepada pengguna teknologi pendukung yang memiliki gangguan penglihatan, tunanetra, atau tunanetra.

Sering kali, status komponen atau halaman dikelola melalui atribut ARIA, seperti yang diperkenalkan dalam modul ARIA dan HTML. Mari kita tinjau beberapa jenis atribut ARIA yang paling umum digunakan untuk membantu mengelola status suatu elemen.

Level komponen

Bergantung pada konten halaman dan informasi yang dibutuhkan pengguna, ada banyak status ARIA yang perlu dipertimbangkan saat menyampaikan informasi tentang komponen kepada pengguna.

Misalnya, Anda dapat menggunakan atribut aria-expanded untuk memberi tahu pengguna apakah menu drop-down atau daftar diluaskan atau diciutkan.

Atau, Anda dapat menggunakan aria-pressed untuk menunjukkan bahwa tombol telah ditekan.

Anda harus selektif saat menerapkan atribut ARIA. Pikirkan melalui alur pengguna untuk memahami informasi penting apa yang harus disampaikan kepada pengguna.

Tingkat halaman

Developer sering menggunakan area yang disembunyikan secara visual yang disebut area live AAR untuk mengumumkan perubahan di layar dan memberi tahu pesan kepada pengguna teknologi pendukung (AT). Area ini dapat dipasangkan dengan JavaScript untuk memberi tahu pengguna tentang perubahan dinamis pada halaman, tanpa harus memuat ulang seluruh halaman.

Secara historis, JavaScript mengalami kesulitan untuk mengumumkan konten di aria-live dan region pemberitahuan karena sifatnya yang dinamis. Menambahkan konten secara asinkron ke DOM akan menyulitkan AT untuk mengambil wilayah dan mengumumkannya. Agar konten dapat dibaca dengan benar, region aktif atau notifikasi harus berada di DOM saat dimuat, sehingga teks dapat diganti secara dinamis.

Jika Anda menggunakan framework JavaScript, kabar baiknya hampir semuanya memiliki paket "penyiar langsung" yang melakukan semua pekerjaan untuk Anda dan dapat diakses sepenuhnya. Tidak perlu khawatir tentang membuat live region dan menangani masalah yang dijelaskan di bagian sebelumnya.

Berikut adalah beberapa paket langsung untuk framework JavaScript umum:

• React: react-aria-live dan react-a11y-announcer
• Angular: LiveAnnouncer
• Vue: vue-a11y-utils

JavaScript modern adalah bahasa canggih yang memungkinkan developer web membuat aplikasi web yang andal. Hal ini terkadang menyebabkan over engineering dan, secara ekstensif, pola yang tidak dapat diakses. Dengan mengikuti tips dan pola JavaScript dalam modul ini, Anda dapat membuat aplikasi lebih mudah diakses oleh semua pengguna.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang JavaScript