JavaScript memainkan peran utama dalam hampir semua hal yang kita buat—mulai dari yang kecil komponen dinamis ke produk lengkap yang berjalan di kerangka kerja JavaScript, seperti React atau Angular.
Penggunaan (atau berlebihan) JavaScript ini telah memunculkan banyak tren yang mengkhawatirkan, seperti waktu muat yang lama karena jumlah kode yang besar, penggunaan HTML non-semantik elemen, dan injeksi HTML serta CSS melalui JavaScript. Dan Anda mungkin tidak yakin tentang bagaimana aksesibilitas dalam setiap bagian.
JavaScript dapat berdampak besar pada aksesibilitas situs Anda. Di sini kami akan membagikan beberapa pola umum untuk aksesibilitas yang ditingkatkan oleh JavaScript, serta solusi untuk masalah aksesibilitas yang muncul dari menggunakan framework JavaScript.
Memicu peristiwa
Peristiwa JavaScript memungkinkan pengguna berinteraksi dengan konten web dan melakukan tindakan tertentu. Banyak orang, seperti pengguna {i>screen reader<i}, orang dengan disabilitas motorik halus, orang tanpa {i>mouse<i} atau {i>trackpad<i}, dan lainnya, mengandalkan dukungan {i>keyboard<i} untuk berinteraksi dengan web. Anda perlu menambahkan dukungan {i>keyboard<i} ke tindakan JavaScript Anda, karena hal itu mempengaruhi semua pengguna ini.
Mari kita lihat peristiwa klik.
Jika peristiwa onClick()
digunakan pada elemen HTML semantik seperti <button>
atau <a>
, fitur ini secara alami 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 {i>enter<i} atau spasi. Menambahkan peristiwa pemicu ke elemen non-semantik sering dilupakan. Sayangnya, ketika dilupakan, hasilnya adalah komponen yang hanya dapat diakses melalui {i>mouse<i}. Khusus keyboard pengguna tidak dapat mengakses tindakan terkait.
Judul halaman
Seperti yang telah kita pelajari di Modul Dokumen, judul halaman adalah hal penting bagi pengguna pembaca layar. Ini memberi tahu pengguna halaman mana tempat mereka aktif dan apakah mereka telah membuka laman baru.
Jika menggunakan kerangka kerja JavaScript, Anda perlu mempertimbangkan cara menangani halaman
judul. Hal ini sangat penting bagi
aplikasi web satu halaman (SPA)
yang dimuat dari satu file index.html
, sebagai transisi atau rute (halaman
perubahan) tidak akan memerlukan pemuatan ulang halaman. Setiap kali pengguna memuat
laman baru di
SPA, judulnya tidak akan berubah secara {i>default<i}.
Untuk SPA, document.title dapat ditambahkan secara manual atau dengan paket bantuan (tergantung pada framework JavaScript). Mengumumkan judul halaman yang diperbarui ke 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 pada laman. Developer dapat membuat aplikasi dinamis berdasarkan tindakan atau perilaku pengguna.
Katakanlah Anda perlu mengirim pesan kepada pengguna saat mereka masuk ke situs web Anda atau aplikasi Anda. Anda ingin pesan yang menonjol dibandingkan latar belakang putih dan layaknya menyampaikan pesan: "Anda sekarang sudah masuk."
Anda dapat menggunakan elemen innerHTML
untuk mengatur konten:
document.querySelector("#banner").innerHTML = '<p>You are now logged in</p>';
Anda dapat menerapkan CSS
dengan cara yang sama, yaitu
setAttribute
:
document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");
Bersama dengan kekuatan besar datanglah tanggung jawab yang besar. Sayangnya, JavaScript injeksi HTML dan CSS secara historis telah disalahgunakan untuk membuat file yang tidak dapat diakses saat ini. Beberapa penyalahgunaan umum tercantum di sini:
Kemungkinan penyalahgunaan | Penggunaan yang benar |
---|---|
Render sebagian besar HTML non-semantik | Render bagian HTML semantik yang lebih kecil |
Tidak memberikan waktu bagi konten dinamis untuk 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 di stylesheet CSS |
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 mungkin dapat melakukan fungsi serupa dalam CSS (seperti animasi atau navigasi melekat), yang diurai lebih cepat dan lebih berperforma tinggi |
Untuk CSS, alihkan class CSS sebagai ganti menambahkan gaya inline, seperti ini memungkinkan penggunaan kembali dan kesederhanaan. Gunakan konten tersembunyi pada laman dan beralih kelas untuk menyembunyikan dan menampilkan konten untuk HTML dinamis. Jika Anda perlu menggunakan JavaScript untuk menambahkan konten ke halaman Anda secara dinamis, memastikannya sederhana dan ringkas, dan tentu saja, mudah diakses.
Pengelolaan fokus
Dalam modul fokus Keyboard, kita telah membahas fokus gaya urutan dan indikator. Manajemen fokus adalah mengetahui kapan dan di mana harus terjebak fokus dan kapan seharusnya tidak terjebak.
Pengelolaan fokus sangat penting untuk pengguna keyboard saja.
Tingkat komponen
Anda dapat membuat perangkap keyboard jika fokus komponen tidak dikelola dengan benar. Jebakan {i>keyboard<i} terjadi ketika pengguna {i>keyboard<i} tertahan di sebuah komponen, atau fokus tidak dipelihara pada waktu yang semestinya.
Salah satu pola paling umum di mana pengguna mengalami masalah pengelolaan fokus ada dalam komponen modal. Ketika pengguna yang hanya menggunakan {i>keyboard<i} menemukan modal, pengguna harus bisa menempatkan tab di antara elemen modal yang bisa ditindaklanjuti, tetapi mereka seharusnya tidak 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 menavigasi dari halaman ke halaman. Ini adalah terutama berlaku di SPA, di mana ada tidak ada refresh browser, dan semua konten berubah secara dinamis. Kapan pun pengguna mengklik link untuk membuka ke halaman lain dalam aplikasi Anda, fokus disimpan di tempat yang sama atau berpotensi ditempatkan di tempat yang sama sekali berbeda.
Saat beralih antarhalaman (atau perutean), tim pengembangan harus memutuskan tempat fokus bergerak 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 atas di halaman baru.
Di mana Anda memutuskan untuk menempatkan fokus akan bergantung pada kerangka kerja yang Anda gunakan dan konten yang ingin Anda tampilkan kepada pengguna Anda. Ini bisa berupa konteks- atau bergantung pada tindakan.
Pengelolaan status
Area lain di mana JavaScript sangat penting untuk aksesibilitas adalah manajemen status, atau saat status visual komponen atau halaman saat ini disampaikan kepada pengguna teknologi pendukung dengan 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 elemen.
Tingkat komponen
Tergantung pada konten halaman dan informasi yang dibutuhkan pengguna, ada banyak negara bagian ARIA yang perlu dipertimbangkan saat menyampaikan informasi tentang suatu komponen kepada pengguna.
Misalnya, Anda dapat menggunakan
aria-expanded
untuk memberi tahu pengguna apakah menu atau daftar {i>drop-down<i} diluaskan atau
diciutkan.
Atau Anda dapat menggunakan aria-pressed
untuk menunjukkan bahwa
sebuah tombol telah ditekan.
Penting untuk bersikap selektif saat menerapkan atribut ARIA. Pikirkan alur pengguna untuk memahami informasi penting apa yang harus disampaikan kepada pengguna.
Tingkat halaman
Pengembang sering menggunakan area yang tersembunyi secara visual yang disebut ARIA live region untuk mengumumkan perubahan di layar dan memberi tahu tentang teknologi pendukung (AT). Area ini dapat dipasangkan dengan JavaScript untuk memberi tahu pengguna tentang perubahan pada laman tanpa harus memuat ulang seluruh laman.
Secara historis, JavaScript kesulitan
untuk mengumumkan konten di
aria-live
dan kawasan peringatan karena sifatnya yang dinamis. Menambahkan konten secara asinkron ke
DOM akan menyulitkan AT untuk
mengambil region dan mengumumkannya.
Agar konten dapat dibaca dengan benar, wilayah aktif atau peringatan harus berada di
DOM saat dimuat, maka teks dapat ditukar secara dinamis.
Jika Anda menggunakan kerangka kerja JavaScript, kabar baiknya hampir semuanya memiliki "penyiar live" yang melakukan semua pekerjaan untuk Anda dan sepenuhnya dapat diakses. Tidak perlu khawatir untuk membuat live region dan menangani dengan masalah yang dijelaskan di bagian sebelumnya.
Berikut adalah beberapa paket langsung untuk framework JavaScript umum:
- Tanggapi: react-aria-live dan pengantar-react-a11y
- Angular:
LiveAnnouncer
- Vue: vue-a11y-utils
JavaScript Modern adalah bahasa canggih yang memungkinkan pengembang web untuk membuat aplikasi web yang tangguh. Hal ini kadang-kadang menyebabkan rekayasa yang berlebihan dan, dengan pola yang tidak dapat diakses. Dengan mengikuti pola dan tips JavaScript dalam modul ini, Anda bisa membuat aplikasi lebih mudah diakses oleh semua pengguna.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang JavaScript
Cara mana yang terbaik untuk mengubah gaya elemen dengan JavaScript?
Bisakah semua tindakan JavaScript mendukung pengguna keyboard?