JavaScript

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

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:

Untuk CSS, alihkan class CSS, bukan menambahkan gaya inline, karena hal ini memungkinkan penggunaan kembali dan kesederhanaan. 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. Pengelolaan fokus adalah mengetahui kapan dan di mana harus menjebak fokus dan kapan fokus tidak boleh terjebak.

Pengelolaan fokus sangat penting bagi pengguna yang hanya menggunakan keyboard.

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 dalam 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 dari satu halaman ke halaman lainnya. Hal ini terutama berlaku di SPA, tempat 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 tetap berada di tempat yang sama atau berpotensi ditempatkan di tempat lain sepenuhnya.

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.
• Letakkan fokus kembali ke link untuk melewati 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 bagi pengguna dengan gangguan penglihatan, tunanetra, 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 area aktif ARIA untuk mengumumkan perubahan di layar dan pesan pemberitahuan kepada pengguna teknologi dukungan (AT). Area ini dapat disambungkan dengan JavaScript untuk memberi tahu pengguna tentang perubahan dinamis pada halaman tanpa mengharuskan seluruh halaman dimuat ulang.

Secara historis, JavaScript kesulitan untuk 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, area live atau pemberitahuan harus berada di DOM saat dimuat, lalu teks dapat diganti 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 over-engineering dan, sebagai akibatnya, pola yang tidak dapat diakses. Dengan mengikuti pola dan tips JavaScript dalam modul ini, Anda dapat membuat aplikasi lebih mudah diakses oleh semua pengguna.

Memeriksa pemahaman Anda

Uji pengetahuan Anda tentang JavaScript