JavaScript

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:

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