Praktik Terbaik Aksesibilitas untuk Aplikasi Satu Halaman (SPA) — beragampengetahuan – Beragampengetahuan

Pengguna web saat ini mengharapkan pengalaman online mereka cepat, lancar, dan menarik. Aplikasi Halaman Tunggal (SPA) memenuhi harapan ini dengan menyediakan fungsionalitas halus seperti aplikasi yang meningkatkan keterlibatan pengguna tanpa perlu memuat ulang halaman.

Namun, sifat dinamis SPA menciptakan tantangan aksesibilitas yang mungkin mengecualikan pengguna penyandang disabilitas, terutama mereka yang mengandalkan teknologi pendukung. Dalam artikel ini, Anda akan mempelajari beberapa praktik terbaik untuk mengatasi tantangan ini guna memastikan kegunaan yang lebih baik bagi semua pengguna, apa pun kemampuan mereka.

Apa itu SPA?

Bayangkan Anda sedang membaca buku dan alih-alih membalik halaman, teks dan gambar malah berubah pada halaman yang sudah Anda baca. SPA bekerja serupa di web, dengan memperbarui konten secara real time tanpa memuat ulang seluruh halaman. Ini seperti menggunakan aplikasi seperti Google Maps di ponsel cerdas Anda, di mana Anda dapat memperbesar, mencari lokasi, atau berpindah tampilan tanpa memulai ulang.

Untuk memahami hal ini dengan lebih baik, bayangkan situs web tradisional sebagai sistem perpustakaan. Setiap kali Anda membutuhkan buku baru (halaman web), Anda harus kembali ke meja layanan (server), memintanya, dan menunggu pustakawan (proses server) menemukannya dan membawanya kepada Anda. Proses ini terjadi setiap kali Anda meminta buku baru dan dapat memakan waktu serta sumber daya.

Sebaliknya, SPA berfungsi seperti membawa keranjang buku yang secara ajaib menerima buku apa pun yang ingin Anda baca langsung dari meja Anda, tanpa Anda harus bergerak maju mundur. Setelah Anda pertama kali “check in” di meja Anda (saat SPA pertama kali dimuat), segala sesuatu terjadi secara instan dan tanpa terlihat, memungkinkan Anda menikmati pengalaman membaca (penjelajahan) tanpa gangguan dan terus menerus.

Tantangan aksesibilitas di spa

Saat Anda membangun SPA, Anda dapat menciptakan pengalaman dinamis dan interaktif yang meniru kelancaran dan daya tanggap aplikasi desktop. Namun, arsitektur Web modern ini menghadirkan tantangan aksesibilitas unik yang mungkin memengaruhi cara beberapa pengguna berinteraksi dengan aplikasi. Mari kita lihat beberapa di antaranya dan memahaminya dari sudut pandang pengguna.

1. Pembaruan konten dinamis

Di situs web tradisional, pemuatan ulang halaman memicu teknologi bantu untuk memindai ulang halaman dan membuat pengguna mengetahui konten baru. SPA menggunakan kerangka JavaScript untuk mengambil dan memperbarui berbagai bagian halaman secara real time. Mekanisme ini menjaga antarmuka pengguna tetap responsif tetapi tidak secara otomatis memberi sinyal perubahan pada pembaca layar atau alat aksesibilitas lainnya.

Misalnya pengguna tunanetra yang mengandalkan pembaca layar untuk menavigasi situs belanja. Mereka mengklik “Tambahkan ke Keranjang” pada suatu produk, yang secara dinamis memperbarui ikon keranjang pada halaman untuk menampilkan item. Namun, jika properti real-time ARIA yang sesuai tidak diterapkan di SPA, pembaca layar mungkin tidak mengumumkan pembaruan ini. Hal ini membuat pengguna tidak yakin akan keberhasilan tindakan mereka dan dapat menyebabkan “klik marah” dan pengalaman berbelanja yang membuat frustrasi.

2. Manajemen fokus

Mempertahankan aliran fokus logis memastikan bahwa pengguna keyboard dan pembaca layar dapat menavigasi konten Web secara efisien. Navigasi web tradisional pada dasarnya mengalihkan fokus dengan setiap pemuatan halaman baru, memberikan jalur navigasi yang jelas. SPA dapat mengganggu aliran ini dengan memperbarui konten tanpa transisi fokus yang alami, sehingga mengakibatkan pengalaman pengguna yang membingungkan dan tidak dapat diakses.

Cuplikan kode JavaScript berikut menunjukkan pembukaan dan penutupan jendela modal:

function openModal() {
  document.getElementById('myModal').style.display = 'block';
  document.getElementById('closeModalButton').focus();
}

function closeModal() {  document.getElementById('myModal').style.display = 'none';
}

Meskipun fokus berpindah dengan benar ke tombol tutup modal saat dibuka, fokus gagal kembali ke elemen terkait setelah modal ditutup, sehingga pengguna keyboard tidak yakin dengan lokasi mereka saat ini di halaman.

Dari sudut pandang pengguna, modal ditutup, namun fokus tampak “hilang”, mungkin karena masih berada pada tombol tutup yang sekarang tersembunyi. Akibatnya, mereka mungkin mengalami kesulitan untuk kembali ke konten utama, sehingga menyebabkan frustrasi dan menurunnya pengalaman interaktif.

3. Manajemen riwayat browser

Mekanisme riwayat browser secara otomatis melacak setiap pemuatan halaman dalam aplikasi multi-halaman tradisional. SPA, di sisi lain, biasanya dimuat satu kali, dan semua perubahan konten berikutnya ditangani oleh kerangka JavaScript. Hal ini mengakibatkan pengalaman pengguna di mana tombol kembali tidak selalu berfungsi seperti yang diharapkan, baik tidak kembali sama sekali atau melewatkan beberapa langkah dari semua status pemuatan dinamis.

Contoh praktisnya adalah pengguna membaca artikel di platform berita berbasis SPA dan mengklik beberapa berita terkait melalui tautan internal. Pengguna, yang berharap untuk kembali ke artikel asli, mengklik tombol kembali di browser, namun tiba-tiba mendapati dirinya kembali ke beranda, bukan artikel asli.

Mari kita lihat cuplikan kode untuk mengilustrasikannya:

function changeView(itemId) {
  const contentView = document.getElementById('contentView');
  fetch(`/api/content/${itemId}`)
    .then(response => response.json())
    .then(content => {
      contentView.innerHTML = content.html;
    });
}

Di sini, tampilan konten diperbarui berdasarkan pilihan pengguna, namun riwayat browser tidak diperbarui. Pengawasan ini berarti bahwa menekan tombol kembali setelah beberapa pilihan akan melewati semua status konten perantara dan berpotensi menyebabkan pengguna keluar dari SPA sepenuhnya.

Pengalaman navigasi yang tidak konsisten ini dapat membingungkan dan membuat frustrasi pengguna, terutama mereka yang mengandalkan navigasi keyboard dan perintah browser standar untuk mengetahui lokasi mereka dalam aplikasi. Bagi pengguna dengan disabilitas kognitif, perilaku tak terduga ini mungkin membuat situs web sulit atau tidak mungkin digunakan secara efektif.

4. Kinerja beban awal

Arsitektur SPA berpusat pada konsep memuat semua atau sebagian besar aset aplikasi (skrip, stylesheet, dan file khusus kerangka kerja) ke dalam satu paket besar. Pendekatan ini memastikan bahwa setelah pemuatan awal, semua interaksi lebih lanjut memerlukan pengambilan data tambahan yang minimal, sehingga meningkatkan pengalaman pengguna. Namun, pemuatan awal bisa jadi besar, sehingga memerlukan pengenalan file JavaScript berukuran besar dan sumber daya lainnya sebelum aplikasi tersedia.

Bayangkan seorang pengguna mengakses SPA untuk pertama kalinya menggunakan perangkat seluler dengan koneksi data terbatas. SPA akan mencoba memuat 100 MB JavaScript, CSS, dan file media sebelum dapat mulai berjalan. Jika file-file ini tidak dioptimalkan atau dipecah menjadi beberapa bagian yang dapat dikelola, pengguna mungkin menghadapi waktu tunggu yang lama atau bahkan kesalahan batas waktu, sehingga mencegah interaksi lebih lanjut.

Penundaan awal ini dapat menghasilkan rasio pentalan yang lebih tinggi karena pengunjung pertama kali mungkin tidak menunggu hingga pemuatan selesai. Hal ini dapat menjadi tantangan tersendiri bagi pengguna di wilayah dengan kecepatan internet lambat atau menggunakan jaringan seluler, yang mungkin merasa SPA hampir tidak dapat diakses.

Praktik terbaik aksesibilitas dalam aplikasi satu halaman

Untuk memastikan SPA Anda dapat diakses dan memberikan pengalaman pengguna yang positif bagi semua orang, penting untuk menerapkan praktik terbaik tertentu. Strategi-strategi ini tidak hanya meningkatkan kegunaan bagi penyandang disabilitas namun juga meningkatkan kualitas aplikasi secara keseluruhan.

1. Menerapkan peran dan properti ARIA yang sesuai

Peran dan atribut ARIA menjembatani kesenjangan antara elemen HTML tradisional dan konten dinamis kompleks yang khas dari SPA. Mereka mengomunikasikan peran, status, dan properti elemen UI kepada pengguna teknologi pendukung sehingga mereka memahami fungsi setiap elemen dan cara berinteraksi dengannya.

apa yang harus dilakukan:

• menggunakan aria-live="polite" Ideal untuk memperbarui konten secara otomatis, seperti pesan obrolan atau harga saham, untuk memastikan pembaruan diumumkan tanpa mengganggu pengguna.
• Menerapkan aria-expanded untuk dropdown untuk mengomunikasikan apakah aktif atau tidak, dan aria-pilih pada tab untuk menunjukkan elemen aktif.
• menggunakan aria-label Dan aria-labelledby Berikan nama yang mudah diakses pada elemen, terutama bila label visualnya tidak standar atau elemen memerlukan konteks tambahan.

2. Pastikan navigasi keyboard yang kuat

Aksesibilitas keyboard sangat penting bagi pengguna dengan disabilitas mobilitas yang mengandalkan keyboard atau perangkat input lainnya. Situs web yang dapat dinavigasi sepenuhnya dengan keyboard merupakan persyaratan dasar untuk aksesibilitas.

apa yang harus dilakukan:

• Pastikan kontrol khusus dan jendela modal menangkap dan melepaskan fokus dalam urutan yang logis. Terapkan pengambilan fokus dalam kotak dialog modal untuk menjaga fokus pengguna keyboard di dalam kotak dialog saat kotak dialog terbuka.
• Sediakan tautan “lewati ke konten” di awal laman untuk memungkinkan pengguna melewati tautan navigasi duplikat.
• Menyediakan pintasan keyboard untuk pengoperasian umum dapat meningkatkan efisiensi navigasi keyboard secara signifikan.

3. Kelola status dan riwayat aplikasi dengan hati-hati

Manajemen status dan riwayat yang tepat dapat membantu pengguna memahami lokasi mereka dalam aplikasi dan melakukan navigasi dengan sukses. Hal ini sangat penting bagi pengguna dengan disabilitas kognitif dan mereka yang mengandalkan pola navigasi web yang sudah dikenal.

apa yang harus dilakukan:

• menggunakan history.pushState Dan history.popState Kelola riwayat peramban. Pendekatan ini memungkinkan pengguna untuk bernavigasi dalam SPA melalui tombol maju dan mundur browser dengan cara yang meniru situs multi-halaman.
• Pastikan tampilan atau status halaman dipulihkan secara akurat saat pengguna bernavigasi mundur atau maju, termasuk fokus, posisi gulir, dan konten yang dimuat secara dinamis.

4. Optimalkan waktu pemuatan awal

Waktu pemuatan yang lama dapat membuat pengguna enggan, termasuk mereka yang memiliki disabilitas kognitif, yang mungkin menganggap situs web tidak responsif. Untuk menghindari hal ini, sangat penting untuk mengoptimalkan waktu buka halaman Anda guna meningkatkan aksesibilitas dan retensi pengguna.

apa yang harus dilakukan:

• Minimalkan dan kompres file JavaScript dan CSS. Untuk grafik yang perlu dimuat dengan cepat, gunakan format gambar modern yang efisien seperti WebP.
• Muat skrip secara asinkron untuk mencegah pemblokiran rendering konten penting. Prioritaskan aset penting dan tunda sumber daya yang kurang penting hingga setelah pemuatan awal.

5. Gunakan peningkatan progresif

Peningkatan progresif berfokus pada membuat konten dan fungsi inti tersedia bagi semua pengguna terlebih dahulu, terlepas dari kemampuan atau pengaturan browser mereka. Pendekatan ini memastikan aksesibilitas bagi pengguna yang menggunakan teknologi lama atau pengguna yang JavaScript-nya dinonaktifkan.

apa yang harus dilakukan:

• Fungsionalitas inti dibangun menggunakan HTML murni dan ditingkatkan dengan CSS dan JavaScript. Pastikan setiap tindakan pengguna yang menyediakan informasi atau layanan penting berjalan tanpa JavaScript.
• Uji aplikasi Anda dengan JavaScript dimatikan. Pastikan pengguna masih dapat mengakses semua konten penting dan melakukan tugas-tugas dasar.

6. Melakukan pengujian aksesibilitas secara berkala

Pengujian berkelanjutan membantu mengidentifikasi dan mengatasi hambatan aksesibilitas di awal dan selama proses pengembangan produk. Praktik ini memastikan kepatuhan terhadap standar aksesibilitas dan meningkatkan pengalaman pengguna secara keseluruhan.

apa yang harus dilakukan:

• Integrasikan alat seperti WAVE, Google Lighthouse, atau ARIA ke dalam pengembangan dan pipeline CI/CD Anda untuk secara otomatis menangkap masalah aksesibilitas umum.
• Libatkan pengguna sebenarnya, terutama yang menggunakan teknologi bantu, dalam sesi pengujian kegunaan. Masukan mereka sangat berharga dalam mengidentifikasi masalah nyata yang mungkin terlewatkan oleh alat otomatis.
• Uji aplikasi Anda secara rutin menggunakan pembaca layar populer seperti NVDA, JAWS, atau VoiceOver untuk mendapatkan gambaran tentang bagaimana suara aplikasi Anda bagi pengguna tunanetra.

sebagai kesimpulan

Sebagai pengembang atau desainer, Anda harus menemukan cara untuk menggabungkan fungsionalitas mutakhir dengan praktik aksesibilitas dasar dalam proyek web Anda. Meskipun panduan ini memberikan titik awal yang bagus, masih banyak lagi yang perlu dipelajari tentang membuat SPA yang dapat diakses sepenuhnya.

Untuk penelitian yang lebih mendalam, pertimbangkan untuk menjelajahi sumber daya seperti Pedoman Aksesibilitas Konten Web (WCAG) dan Pedoman Praktik Penulisan ARIA. Hal ini dapat memberikan wawasan dan panduan yang luas untuk membantu Anda memastikan bahwa aplikasi Anda mematuhi standar hukum dan benar-benar dapat diakses oleh semua pengguna.