JavaScript memainkan peran utama dalam hampir semua hal yang kita 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 menimbulkan banyak tren yang mengkhawatirkan, seperti waktu pemuatan yang lama karena banyaknya kode, penggunaan elemen HTML non-semantik, dan injeksi HTML dan CSS melalui JavaScript. Selain itu, Anda mungkin tidak yakin bagaimana aksesibilitas sesuai dengan setiap bagian ini.
JavaScript dapat berdampak besar pada aksesibilitas situs Anda. Dalam modul ini, kita akan membagikan 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 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 menyertakan fungsi mouse dan keyboard. Namun,
fungsi keyboard tidak diterapkan secara otomatis 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 terlupakan. Sayangnya, jika dilupakan, hasilnya adalah komponen yang hanya dapat diakses dengan mouse. Pengguna khusus keyboard tidak memiliki akses ke tindakan terkait.
Judul halaman
Seperti yang telah kita pelajari di Modul dokumen, judul halaman sangat penting bagi pengguna pembaca layar. Ini memberi tahu pengguna halaman yang sedang dibuka dan apakah mereka telah membuka halaman baru.
Jika menggunakan framework JavaScript, Anda perlu 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 menyebabkan 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.
Misalnya, Anda perlu mengirim pesan kepada pengguna saat mereka login ke situs atau aplikasi Anda. Anda ingin pesan tersebut terlihat berbeda dari latar belakang putih dan menyampaikan pesan: "Anda sekarang login".
Anda dapat menggunakan elemen
innerHTML
untuk menetapkan 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 besar memiliki tanggung jawab besar. Sayangnya, injeksi JavaScript HTML dan CSS secara historis telah disalahgunakan untuk membuat konten yang tidak dapat diakses. Beberapa penyalahgunaan umum tercantum di sini:
| Kemungkinan penyalahgunaan | Penggunaan yang benar |
|---|---|
| Merender sebagian besar HTML non-semantik | Merender bagian HTML semantik yang lebih kecil |
| Tidak memberikan waktu bagi konten dinamis untuk dikenali oleh teknologi pendukung | Menggunakan penundaan waktu setTimeout() untuk memungkinkan pengguna mendengar pesan lengkap |
Menerapkan atribut gaya untuk onFocus() secara dinamis |
Gunakan :focus untuk elemen terkait di stylesheet CSS |
| Menerapkan gaya inline dapat menyebabkan stylesheet pengguna tidak dibaca dengan benar | Simpan gaya Anda dalam file CSS untuk mempertahankan konsistensi tema |
| Membuat file JavaScript yang sangat besar yang memperlambat performa situs secara keseluruhan | Gunakan lebih sedikit JavaScript. Anda mungkin dapat menjalankan fungsi serupa di CSS (seperti animasi atau navigasi melekat), yang mengurai lebih cepat dan memiliki performa lebih baik |
Untuk CSS, alihkan class CSS, bukan menambahkan gaya inline, karena hal ini memungkinkan penggunaan kembali dan kemudahan. Gunakan konten tersembunyi di halaman dan ganti class untuk menyembunyikan dan menampilkan konten untuk HTML dinamis. Jika Anda perlu menggunakan JavaScript untuk menambahkan konten secara dinamis ke halaman, pastikan JavaScript tersebut sederhana dan ringkas, serta tentu saja dapat diakses.
Pengelolaan fokus
Dalam Modul fokus keyboard, kita telah membahas urutan fokus dan gaya indikator. Manajemen fokus adalah mengetahui kapan dan di mana menjebak fokus dan kapan seharusnya tidak terjebak.
Pengelolaan fokus sangat penting untuk pengguna keyboard saja.
Tingkat komponen
Anda dapat membuat perangkap keyboard saat fokus komponen tidak dikelola dengan benar. Jebakan keyboard terjadi saat pengguna khusus keyboard terjebak dalam komponen, atau fokus tidak dipertahankan saat seharusnya.
Salah satu pola paling umum yang menyebabkan pengguna mengalami masalah pengelolaan fokus adalah pada komponen modal. Saat pengguna khusus keyboard menemukan modal, pengguna harus dapat menggunakan tombol tab di antara elemen modal yang dapat ditindaklanjuti, tetapi mereka tidak boleh diizinkan berada di luar modal tanpa menutupnya secara eksplisit. JavaScript sangat penting untuk menangkap fokus ini dengan benar.
Tingkat halaman
Fokus juga harus dipertahankan saat pengguna membuka halaman demi halaman. Hal ini terutama berlaku di SPA, yang tidak memiliki refresh browser, dan semua konten berubah secara dinamis. Kapan pun pengguna mengklik link untuk membuka halaman lain dalam aplikasi Anda, fokus akan disimpan di tempat yang sama atau mungkin ditempatkan di tempat lain.
Saat melakukan transisi antar-halaman (atau pemilihan rute), tim pengembangan harus memutuskan tujuan fokus saat halaman dimuat.
Ada beberapa teknik untuk melakukannya:
- Tempatkan fokus pada penampung utama dengan pengumuman
aria-live. - Memindahkan fokus kembali ke link untuk melewati ke konten utama.
- Pindahkan fokus ke judul tingkat teratas halaman baru.
Tempat Anda memutuskan untuk menempatkan fokus akan bergantung pada framework yang Anda gunakan dan konten yang ingin Anda tayangkan 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, buta, atau tunarungu.
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 diperlukan 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
ditutup.
Atau, Anda dapat menggunakan aria-pressed
untuk menunjukkan bahwa tombol telah ditekan.
Anda harus selektif saat menerapkan atribut ARIA. Pikirkan alur penggunaan untuk memahami informasi penting yang harus disampaikan kepada pengguna.
Tingkat halaman
Developer sering menggunakan area yang tersembunyi secara visual yang disebut ARIA live region untuk mengumumkan perubahan di layar dan pesan peringatan 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 kesulitan mengumumkan konten di
aria-live
dan region pemberitahuan karena sifatnya yang dinamis. Menambahkan konten secara asinkron ke DOM akan mempersulit AT mengambil region dan mengumumkannya.
Agar konten dapat dibaca dengan benar, region aktif atau pemberitahuan harus berada dalam DOM saat dimuat, lalu teks dapat ditukar secara dinamis.
Jika Anda menggunakan framework JavaScript, kabar baiknya adalah hampir semuanya memiliki paket "live announcer" yang melakukan semua pekerjaan untuk Anda dan dapat sepenuhnya diakses. Anda tidak perlu khawatir tentang membuat region aktif dan menangani masalah yang dijelaskan di bagian sebelumnya.
Berikut adalah 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 rekayasa yang berlebihan dan, secara lebih luas, pola yang tidak dapat diakses. Dengan mengikuti tips dan pola JavaScript dalam modul ini, Anda dapat membuat aplikasi lebih mudah diakses oleh semua pengguna.
Memeriksa pemahaman Anda
Uji pengetahuan Anda tentang JavaScript
Manakah cara terbaik untuk mengubah gaya elemen dengan JavaScript?
Bisakah semua tindakan JavaScript mendukung pengguna keyboard?