Membangun aplikasi web yang dapat diakses bukanlah hal yang bagus untuk dimiliki, tetapi merupakan suatu keharusan dalam lanskap digital saat ini. Aksesibilitas berarti memastikan bahwa semua orang terlepas dari kemampuan fisik atau kognitif mereka dapat berinteraksi dengan web. JavaScript harus dimiliki untuk membangun pengalaman web yang dinamis dan interaktif bagi para pengembang. Namun, hal ini juga menimbulkan beberapa tantangan baru dalam hal aksesibilitas. Pada artikel ini, saya akan membahas tentang membuat aplikasi web yang dapat diakses dan digunakan oleh semua orang dengan menggunakan JavaScript.
Mengapa Aksesibilitas Penting
Aksesibilitas lebih dari sekedar persyaratan hukum. Aksesibilitas berarti memberikan kesempatan yang sama bagi penyandang disabilitas untuk berkomunikasi dan berinteraksi melalui konten digital. Organisasi Kesehatan Dunia (WHO) melaporkan bahwa lebih dari 1 miliar orang memiliki beberapa bentuk disabilitas. Membuat desain dengan pola pikir yang dapat diakses tidak hanya memperluas audiens Anda, tetapi juga meningkatkan pengalaman pengguna untuk semua. Misalnya, teks yang memungkinkan Anda untuk melihat video yang berisik dengan suara halus dan navigasi keyboard yang memungkinkan Anda untuk mengetahui perangkat pencahayaan yang buruk yang dapat mengganggu persepsi visual manusia.
Sumber: kapalomen.com
Menggunakan JavaScript dengan Cara yang Mudah Diakses
JavaScript memungkinkan kita untuk membuat web menjadi interaktif dan mengimplementasikan fitur-fitur seperti dialog modal, formulir dinamis, pengguliran tanpa batas, dll. Di sisi lain, JS yang ditulis dengan buruk dapat melumpuhkan aksesibilitas. Salah satu contohnya adalah tanpa pembaruan dinamis bersama dengan peran atau label ARIA (Accessible Rich Internet Applications), bagi pembaca layar jenis ini, hal ini akan membingungkan. Sebagai contoh, elemen yang dibuat dengan JavaScript yang tidak menyediakan dukungan keyboard dapat menghalangi pengguna jika mereka menggunakan teknologi bantu.
Jika mengikuti standar pengkodean aksesibilitas oleh pengembang, JavaScript dapat menjadi penguat untuk kegunaan, bukan penghalang...
JavaScript yang dapat diakses: Menulis Majalah Smashing Code yang Hebat
1. Gunakan Peran ARIA dengan Bijak
Peran, status, dan properti ARIA memberikan nilai semantik pada elemen yang secara inheren tidak dapat diakses. Sebagai contoh, kita menambahkan role=“dialog” pada sebuah modal agar pembaca layar tahu bahwa dialog ditampilkan. Namun, terlalu banyak ARIA atau peran yang salah dapat membingungkan pengguna. Aturan yang baik untuk diikuti: gunakan elemen HTML asli terlebih dahulu, lalu tingkatkan dengan ARIA hanya jika diperlukan.
Contoh:
<div role="button" tabindex="0" onclick="toggleMenu()">Menu</div>
2. Mendukung Navigasi Keyboard
Keyboard atau perangkat bantu lainnya digunakan oleh banyak pengguna untuk bernavigasi. Buatlah semua elemen interaktif (tombol, tautan, widget khusus) dapat difokuskan dan dapat dioperasikan dengan keyboard.
Daftar periksa:
- Urutan fokus kustom melalui atribut tabindex
- Anda harus mengikat tombol seperti peristiwa agar dapat berfungsi.
- Tunjukkan status komponen yang dapat diciutkan menggunakan atribut aria-expanded atau yang serupa.
Contoh:
document.getElementById('menuButton').addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
toggleMenu();
}
});
3. Mengumumkan Konten Dinamis
Pembaca layar mungkin tidak dapat menangkap pembaruan dinamis, seperti pemberitahuan dari obrolan langsung atau pesan yang memvalidasi kolom formulir Anda. Perubahan ini perlu diumumkan melalui wilayah langsung ARIA.
Contoh:
<div id="liveRegion" aria-live="polite"></div>
<script>
document.getElementById('liveRegion').textContent = 'New message received!';
</script>
4. Manajemen Fokus
Jika pengguna mengaktifkan komponen dinamis seperti modal, fokus harus berpindah ke komponen tersebut dan tidak membiarkannya sampai tertutup. Jadi, hal ini tidak akan memungkinkan item latar belakang untuk ditab oleh pembaca layar atau pengguna keyboard.
Contoh:
function openModal() {
const modal = document.getElementById('modal');
modal.style.display = 'block';
modal.setAttribute('aria-hidden', 'false');
modal.focus();
}
5. Menguji dengan Pemblokir
Menilai aplikasi Anda untuk kegunaan menggunakan alat bantu seperti pembaca layar (misalnya, NVDA, VoiceOver), pengujian keyboard, dan pemeriksa aksesibilitas otomatis (misalnya, Axe, Lighthouse).
6. Jangan Berinteraksi dengan Argumen Individu yang Peka Terhadap Waktu
Fitur seperti pengatur waktu atau konten yang bergulir otomatis dapat mengganggu pengguna yang membutuhkan lebih banyak waktu untuk berinteraksi. Miliki opsi untuk menjeda atau memperpanjang pengatur waktu.
7. Tawarkan Metode Input Alternatif
Untuk Pengguna yang Tidak Bisa Menggunakan Mouse: Semua fungsionalitas harus tersedia dari keyboard atau sentuhan. Jangan bergantung pada efek hover atau gerakan.
Keuntungan Membuat Aplikasi Web Dapat Diakses
Ada banyak keuntungan dari berinvestasi dalam hal aksesibilitas:
- Menjangkau Pengguna Seluler: Aplikasi yang dapat diakses menargetkan para penyandang disabilitas, komunitas lansia yang terus bertambah, dan disabilitas sementara.
- Peningkatan SEO: Situs web yang mudah diakses lebih disukai oleh mesin pencari yang memahami semantik html dan memiliki struktur yang jelas.
- Kepatuhan Hukum: Dalam bidang ekonomi, agar bisnis memiliki akses pasar yang luas;2 ada juga eksposur untuk memberikan pengalaman pengguna yang buruk dan menyalahgunakan hak-hak warga negara3.
- Pengalaman Penggunaan yang Lebih Baik: Peningkatan aksesibilitas menguntungkan semua orang yang menggunakan produk.
Kesimpulan
Membangun aplikasi web yang dapat diakses dengan JavaScript membutuhkan pendekatan yang cermat. Dengan mengintegrasikan peran ARIA, mendukung navigasi keyboard, mengelola fokus, dan menguji dengan teknologi bantu, pengembang dapat menciptakan pengalaman inklusif yang bermanfaat bagi semua pengguna. Aksesibilitas bukanlah tambahan, namun merupakan bagian integral dari pengembangan web sebagai langkah menuju dunia digital yang lebih inklusif.
Kembali ke>>> Pengembangan JavaScript & Front-End