JavaScript memainkan peran penting dalam hampir semua hal yang kami buat—mulai dari komponen dinamis yang lebih kecil hingga produk lengkap yang berjalan di framework JavaScript, seperti React atau Angular.
Penggunaan (atau penggunaan berlebihan) JavaScript ini telah memunculkan banyak tren yang mengkhawatirkan, seperti waktu pemuatan yang lama karena banyaknya kode, penggunaan elemen HTML non-semantik, dan penyisipan HTML dan CSS melalui JavaScript. Anda mungkin tidak yakin bagaimana peran aksesibilitas dalam setiap bagian ini.
JavaScript dapat berdampak besar pada aksesibilitas situs Anda. Dalam modul ini, kita akan membahas beberapa pola umum untuk aksesibilitas yang ditingkatkan oleh JavaScript, serta solusi untuk masalah aksesibilitas yang muncul dari 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 hal ini memengaruhi semua pengguna tersebut.
Mari kita lihat peristiwa klik.
Jika peristiwa onClick() digunakan pada elemen HTML semantik seperti <button>
atau <a>, peristiwa tersebut secara alami mencakup fungsi mouse dan keyboard. Namun,
fungsi keyboard tidak diterapkan secara otomatis saat peristiwa onClick()
ditambahkan ke elemen non-semantik, seperti <div> umum.
<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 terlupakan. Sayangnya, jika dilupakan, hasilnya adalah komponen yang hanya dapat diakses dengan mouse. Pengguna yang hanya menggunakan keyboard tidak dapat mengakses tindakan terkait.
Judul halaman
Seperti yang kita pelajari di modul Dokumen, judul halaman sangat penting bagi pengguna pembaca layar. Memberi tahu pengguna halaman mana yang sedang mereka buka dan apakah mereka telah membuka halaman baru.
Jika Anda menggunakan framework JavaScript, Anda perlu mempertimbangkan cara menangani judul halaman. Hal ini sangat penting untuk
aplikasi satu halaman (SPA)
yang dimuat dari satu file index.html, karena transisi atau rute (perubahan halaman) tidak melibatkan 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 helper (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 apa pun di halaman. Developer dapat membuat aplikasi dinamis berdasarkan tindakan atau perilaku pengguna.
Misalkan Anda perlu mengirim pesan kepada pengguna saat mereka login ke situs atau aplikasi Anda. Anda ingin pesan tersebut terlihat jelas dari latar belakang putih dan menyampaikan pesan: "Anda sekarang login."
Anda dapat menggunakan elemen
innerHTML
untuk menyetel konten:
document.querySelector("#banner").innerHTML = '<p>You are now signed in</p>';
Anda dapat menerapkan CSS dengan cara yang serupa, dengan
setAttribute:
document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");
Kekuatan yang besar memerlukan tanggung jawab yang besar pula. Sayangnya, penyisipan HTML dan CSS dengan JavaScript sering disalahgunakan untuk membuat konten yang tidak dapat diakses. Beberapa penyalahgunaan umum tercantum di sini:
| Kemungkinan penyalahgunaan | Penggunaan yang benar |
|---|---|
| Merender potongan besar HTML non-semantik | Merender bagian HTML semantik yang lebih kecil |
| Tidak memberikan waktu agar konten dinamis dikenali oleh teknologi pendukung | Menggunakan penundaan waktu setTimeout() agar pengguna dapat mendengar pesan lengkap |
Menerapkan atribut gaya untuk onFocus() secara dinamis |
Gunakan :focus untuk elemen terkait dalam stylesheet CSS Anda |
| Menerapkan gaya inline dapat menyebabkan stylesheet pengguna tidak dibaca dengan benar | Simpan gaya Anda dalam file CSS untuk menjaga konsistensi tema |
| Membuat file JavaScript yang sangat besar yang memperlambat performa situs secara keseluruhan | Gunakan lebih sedikit JavaScript. Anda dapat melakukan fungsi serupa di CSS (seperti animasi atau navigasi tetap), yang diuraikan lebih cepat dan memiliki performa lebih baik |
Untuk CSS, alihkan class CSS, bukan menambahkan gaya inline, karena hal ini memungkinkan penggunaan kembali dan kesederhanaan. Gunakan konten tersembunyi di halaman dan alih kelas untuk menyembunyikan dan menampilkan konten untuk HTML dinamis. Jika Anda perlu menggunakan JavaScript untuk menambahkan konten secara dinamis ke halaman, pastikan kontennya sederhana dan ringkas, serta tentu saja dapat diakses.
Pengelolaan fokus
Dalam modul Fokus keyboard, kita membahas urutan fokus dan gaya indikator. Pengelolaan fokus adalah mengetahui kapan dan di mana fokus harus dikunci dan kapan tidak boleh dikunci.
Pengelolaan fokus sangat penting bagi pengguna yang hanya menggunakan keyboard.
Tingkat komponen
Anda dapat membuat perangkap keyboard saat fokus komponen tidak dikelola dengan benar. Perangkap keyboard terjadi saat pengguna yang hanya menggunakan keyboard terjebak dalam komponen, atau fokus tidak dipertahankan saat seharusnya.
Salah satu pola paling umum saat pengguna mengalami masalah pengelolaan fokus adalah pada komponen modal. Saat pengguna yang hanya menggunakan keyboard menemukan modal, pengguna harus dapat berpindah antar-elemen modal yang dapat ditindaklanjuti, tetapi mereka tidak boleh keluar dari modal tanpa menutupnya secara eksplisit. JavaScript sangat penting untuk menjebak fokus ini dengan benar.
Tingkat halaman
Fokus juga harus dipertahankan saat pengguna berpindah dari halaman ke halaman. Hal ini terutama berlaku di SPA, yang tidak memuat ulang browser, dan semua konten berubah secara dinamis. Setiap kali pengguna mengklik link untuk membuka halaman lain dalam aplikasi Anda, fokus akan tetap berada di tempat yang sama atau mungkin ditempatkan di tempat lain.
Saat melakukan transisi antarhalaman (atau perutean), tim pengembangan harus memutuskan ke mana fokus akan diarahkan saat halaman dimuat.
Ada beberapa teknik untuk melakukannya:
- Fokuskan pada penampung utama dengan pengumuman
aria-live. - Kembalikan fokus ke link untuk melewati konten utama.
- Pindahkan fokus ke judul tingkat teratas halaman baru.
Keputusan Anda dalam menentukan fokus akan bergantung pada framework yang Anda gunakan dan konten yang ingin Anda sajikan kepada pengguna. Hal ini mungkin bergantung pada konteks atau tindakan.
Pengelolaan status
Area lain yang memerlukan JavaScript untuk aksesibilitas adalah pengelolaan status, atau saat status visual komponen atau halaman saat ini diteruskan ke pengguna teknologi pendukung yang memiliki gangguan penglihatan, tunanetra, atau tunarungu-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 elemen.
Tingkat 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 atau daftar drop-down diperluas atau
diciutkan.
Atau, Anda dapat menggunakan aria-pressed
untuk menunjukkan bahwa tombol telah ditekan.
Penting untuk selektif saat menerapkan atribut ARIA. Pikirkan alur pengguna untuk memahami informasi penting apa yang harus disampaikan kepada pengguna.
Tingkat halaman
Developer sering menggunakan area yang tersembunyi secara visual yang disebut area aktif ARIA untuk mengumumkan perubahan di layar dan pesan pemberitahuan kepada pengguna teknologi pendukung (AT). Area ini dapat dipasangkan dengan JavaScript untuk memberi tahu pengguna tentang perubahan dinamis pada halaman tanpa mengharuskan seluruh halaman dimuat ulang.
Secara historis, JavaScript kesulitan mengumumkan konten di
aria-live
dan area peringatan karena sifatnya yang dinamis. Menambahkan konten ke DOM secara asinkron membuat AT sulit mengambil dan mengumumkan region tersebut.
Agar konten dapat dibaca dengan benar, wilayah live atau pemberitahuan harus berada di
DOM saat dimuat, lalu teks dapat diganti secara dinamis.
Jika Anda menggunakan framework JavaScript, kabar baiknya adalah hampir semua framework memiliki paket "live announcer" yang melakukan semua pekerjaan untuk Anda dan sepenuhnya dapat diakses. Anda tidak perlu khawatir tentang pembuatan region aktif dan penanganan masalah yang dijelaskan di bagian sebelumnya.
Berikut beberapa paket live untuk framework JavaScript umum:
- React: react-aria-live dan react-a11y-announcer
- Angular:
LiveAnnouncer - Vue: vue-a11y-utils
JavaScript modern adalah bahasa yang canggih yang memungkinkan developer web membuat aplikasi web yang andal. Hal ini terkadang menyebabkan over-engineering dan, dengan demikian, pola yang tidak dapat diakses. Dengan mengikuti pola dan tips JavaScript dalam modul ini, Anda dapat membuat aplikasi Anda lebih mudah diakses oleh semua pengguna.