Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Accessibility
Code

Hands-on dengan ARIA: Resep Aksesibilitas untuk Aplikasi Web

by
Length:MediumLanguages:
This post is part of a series called Web Accessibility With ARIA.
Hands-on With ARIA: Accessibility for eCommerce
Best Practices for ARIA Implementation

Indonesian (Bahasa Indonesia) translation by Imam Firmansyah (you can also view the original English article)

Dalam dunia aplikasi web yang membingungkan, ARIA dapat membantu meningkatkan aksesibilitas dan kemudahan penggunaan untuk kreasi Anda. HTML tidak dapat menangani banyak jenis hubungan antar elemen di halaman, tetapi ARIA sangat ideal untuk hampir semua jenis pengaturan yang dapat Anda buat. Mari kita lihat apa itu ARIA, bagaimana itu bisa diterapkan ke aplikasi web Anda, dan beberapa resep cepat yang dapat Anda gunakan untuk situs Anda sendiri.

Dasar-dasar ARIA

ARIA, juga disebut WAI-ARIA, adalah singkatan dari Web Accessibility Initiative – Accessible Rich Internet Applications. Inisiatif ini, diperbarui oleh W3C, bertujuan untuk memberikan pengembang skema dan atribut baru untuk membuat kreasi mereka lebih mudah diakses. Ini secara khusus bertujuan untuk menutupi kesenjangan yang melekat yang ditinggalkan oleh HTML. Jika Anda tidak terbiasa dengan apa yang sudah dilakukan, Anda harus melihat pada primer kami di ARIA. Anda mungkin juga tertarik dengan artikel kami tentang ARIA untuk Homepage dan ARIA untuk eCommerce.

Secara singkat, pada dasarnya ARIA memiliki tiga fitur utama yang akan kita fokuskan:

  1. Menciptakan hubungan di luar asosiasi parent-child: HTML hanya memungkinkan hubungan antara elemen induk dan anak, tetapi asosiasi yang ingin kita tetapkan tidak selalu bersarang satu sama lain. ARIA memungkinkan kita menentukan hubungan elemen di luar batasan ini.
  2. Menentukan kontrol dan interaktivitas lanjutan: HTML mencakup banyak elemen UI dasar, tetapi ada banyak kontrol lanjutan yang digunakan di sekitar web yang sulit ditentukan di luar komponen visualnya. ARIA membantu dengan itu.
  3. Menyediakan akses ke atribut area update "live": atribut aria-live memberi screen reader dan perangkat lain listener ketika konten di halaman berubah. Ini memungkinkan komunikasi lebih mudah ketika konten di layar berubah.

ARIA dan Aplikasi Web

Sebelumnya, kita melihat pada cara menambahkan ARIA ke elemen umum dari halaman eCommerce dan homepage situs. Namun, dengan aplikasi web, masing-masing berbeda secara drastis dari yang terakhir. Form dan function bergeser di antara masing-masing aplikasi, dan seringkali bahkan di antara versi aplikasi yang sama. Karena itu, kita akan melakukan implementasi di sini seperti resep di buku masak daripada konversi halaman secara besar-besaran.

Ketika itu datang ke aplikasi web, maksud pengguna lebih sulit untuk dilihat dalam arti umum. Dengan eCommerce, di mana pun situs Anda, kemungkinan pengunjung mencari untuk membeli produk atau layanan. Aplikasi web melayani berbagai tujuan, jadi sebagai gantinya, kita akan fokus pada pembuatan kontrol bernuansa yang dapat diakses dan user friendly.

Mari masuk ke beberapa tipe kontrol ini.

Mengontrol Live Update Dengan Button

Kontrol pertama kita akan melihat adalah nilai ditampilkan diperbarui dengan menekan tombol. Jenis kontrol sering terlihat mana elemen menampilkan kuantitas yang dapat disesuaikan dengan tombol-tombol yang berlabel '+' dan '-', tetapi dapat mengambil berbagai bentuk, seperti tombol panah yang memungkinkan Anda siklus melalui standar status.

Implementasi standar dapat meninggalkan beberapa kesenjangan dalam pemahaman untuk pengguna. Tidak jelas elemen apa yang dipengaruhi tombol, bagaimana pengaruhnya terhadap mereka, dan kapan nilai elemen berubah.

Di bawah ini, kita akan menggunakan ARIA untuk membuat koneksi antara tombol dan elemen tampilan nilai menggunakan atribut aria-controls. Kemudian, kita akan menggunakan tombol-tombol yang jelas dengan menggunakan aria-label dan HTML <label>. Terakhir, kita akan menggunakan peran aria alert dan atribut aria-live untuk memberi tahu pengguna ketika nilai sedang diperbarui.

Mari kita lihat seperti apa kode tersebut:

Popup ARIA dan Hover Tooltips

Ketika melengkapi situs dengan ARIA, adalah umum untuk menggunakan "aksesibilitas progresif". Gagasan di balik istilah ini adalah bahwa mengambil situs atau aplikasi web dari bentuk dasarnya hingga dapat diakses sepenuhnya adalah tugas yang menakutkan. Untuk menghadapi hal ini dengan cara yang masih membuat gerakan maju, Anda dapat menerapkan fitur baru secara progresif dan berulang.

Untuk tooltip dengan popup atau modal terkait, ini berarti kita dapat memecahkan masalah menjadi dua langkah, meluncurkan setiap yang kita bisa. Dalam hal ini, tooltip yang sedang kita bicarakan adalah gambar umum dari tanda tanya kecil yang membuka informasi tambahan ketika berada di atas.

Untuk memberi tahu pengguna bahwa gambar tanda tanya sebenarnya adalah tooltip, kita telah mendefinisikannya dengan menggunakan peran yang sesuai, seperti ini:

Namun ada beberapa masalah dengan penerapan ini. Pengguna mungkin masih tidak sadar bahwa berada di atas toooltip menginisiasi popup dengan informasi lebih lanjut. Inilah cara kita menambahkannya ke kode:

Input Tooltips yang dapat Diakses

Setidaknya tooltip yang berbasis hover, itu juga umum untuk aplikasi web untuk memanfaatkan formu di mana setiap masukan memiliki tooltip terkait sendiri.

Tanpa markup ARIA tambahan, sulit untuk mengetahui tooltip mana yang berlaku untuk input untuk pengguna. Tidak memiliki hubungan ini di tempat dapat membuat teks pembantu Anda tidak berguna dalam beberapa kasus.

Untuk memperbaiki ini, kita akan membungkus tooltips dalam elemen mereka sendiri. Masing-masing dapat bersarang di dekat input terkait mereka, menjalin hubungan dengan ARIA, dan kemudian dapat dipicu dengan JavaScript (atau hanya CSS jika Anda licik).

Beginilah tampilannya:

Status Alert

"Our service is currently down", "Your account is suspended", dan status alert terkait biasanya digunakan di antara aplikasi web, dan menampilkan informasi penting untuk pengguna. Tanpa ARIA, mereka dapat terkubur di dalam informasi pada halaman dan menyebabkan berbagai masalah.

Memanfaatkan peran alert dan atribut aria-live ARIA, kita dapat memastikan bahwa pengguna kita menyadari masalah apa pun itu dengan cepat setelah mereka tiba di halaman.

Kita dapat mengatur jenis status alert seperti ini:

Membuat Toolbar

Terakhir, mari kita lihat elemen kontrol umum lainnya yang digunakan dalam aplikasi web: toolbar. Untuk tujuan kita, kita akan menandai toolbar yang berfungsi seperti ini: aplikasi web kita menunjukkan sejumlah besar data, berorientasi pada tabel. Di atas tabel ini, toolbar kita memiliki beberapa tombol yang memungkinkan pengguna mengurutkan tabel dalam berbagai cara. Tombol-tombol ini termasuk opsi sortir klasik seperti A to Z dan Z to A.

Secara relasional, ini meninggalkan beberapa masalah terkait aksesibilitas. Pertama, tidak jelas bahwa tombol-tombol itu memengaruhi tabel — kita akan menyelesaikan ini menggunakan atribut aria-controls. Juga tidak jelas bahwa tombol-tombol itu saling terkait satu sama lain, yang mungkin merupakan bagian informasi yang berguna bagi para pengguna kita. Untuk menentukan ini, kita akan menggunakan role toolbar. Akhirnya, pengguna tidak perlu tahu tombol mana yang ditekan terakhir. Untuk memperbaikinya, kita akan menggunakan atribut aria-pressed.

Saat menggunakan atribut aria-pressed, penting untuk dicatat bahwa Anda harus memperbarui elemen-elemen ini saat pengguna berinteraksi dengan mereka. Ini kemungkinan akan membutuhkan perubahan atribut melalui JavaScript atau jQuery.

Inilah kode toolbar tampak seperti:

Menambahkan ARIA ke Aplikasi Web Anda Sendiri

Dengan beberapa skema kontrol baru dan hubungan di bawah ikat pinggang Anda, Anda akan berhasil membuat aplikasi web Anda sepenuhnya dapat diakses! Setelah Anda menambahkan markup baru ini, pikirkan tentang bagaimana Anda dapat menerapkan atribut ini ke bagian lain dari antarmuka pengguna Anda untuk memaksimalkan kegunaan penciptaan Anda.

Apakah ada atribut, peran, atau fitur lain dari ARIA yang ingin Anda ketahui? Atau mungkin Anda memiliki beberapa pertanyaan tentang implementasi Anda sendiri, atau koreksi untuk artikel ini? Maka hubungi kami menggunakan bagian komentar di bawah ini, atau dengan menandai kylejspeaker di Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.