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: Aksesibilitas untuk e-commerce

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Web Accessibility With ARIA.
Hands-on With ARIA: Homepage Elements and Standard Navigation
Hands-on With ARIA: Accessibility Recipes for Web Apps

Indonesian (Bahasa Indonesia) translation by Febri Ardian Sanjoyo (you can also view the original English article)

Ingin membuat situs Anda lebih mudah diakses? Atau mungkin Anda ingin membuatnya lebih mudah untuk melintasi situs Anda secara keseluruhan menggunakan browser dan antarmuka lainnya? Dengan menggunakan ARIA, Anda dapat melakukan keduanya. Mari kita lihat apa itu ARIA dan bagaimana itu dapat bermanfaat bagi situs eCommerce. Kita juga akan membahas beberapa contoh langkah demi langkah.

Apa itu ARIA?

WAI-ARIA adalah singkatan dari Inisiatif Web Accessibility Initiative–Accessible Rich Internet Applications. Inisiatif ini mengambil bentuk seperangkat pedoman dan atribut yang dikelola oleh W3C. Dengan menggunakan atribut ini, kita dapat membuat hubungan antara elemen situs kita yang tidak dapat diekspresikan melalui HTML saja. Yang paling penting untuk kita gunakan di sini adalah bahwa kita dapat menentukan hubungan elemen di luar hubungan parent-child, dan lebih jelas menghubungkan elemen UI untuk pengguna kita.

Pada titik ini, mungkin ide yang baik untuk memeriksa original primer on ARIA kita untuk memoles beberapa fondasinya.

Menambahkan ARIA ke e-commerce

Sebelumnya, kita berbicara tentang cara menerapkan ARIA ke situs web umum yang menyerupai beranda bisnis kecil umum. Kali ini, kita akan melihat lebih dekat bagaimana ARIA dapat meningkatkan pengalaman pengguna untuk situs eCommerce besar.

Kita akan fokus pada empat bidang utama eCommerce yang menghadirkan situasi unik: halaman produk, halaman kategori (atau halaman agregat produk), navigasi multi-level, dan navigasi beraneka ragam. Kita akan menggunakan dua wireframes ini untuk memandu kita melalui proses:

Product Page Wireframe
Sebuah mockup produk yang sangat mendasar
Category Page Wireframe
Contoh mockup Halaman Daftar Produk

Mempersiapkan ARIA

Dalam kasus sebagian besar situs web, menambahkan ARIA adalah proses yang cukup mudah. Anda menentukan bagian situs Anda, memecahnya menjadi landmark dan element, dan menambahkan kode yang diperlukan.

Kita akan mengikuti proses serupa dengan situs eCommerce kita, tetapi kini kita memiliki lapisan kerumitan baru. Dengan kompleksitas yang datang dengan situs eCommerce, ARIA dapat menjadi lubang kelinci dalam banyak kasus. Meskipun penting untuk meningkatkan aksesibilitas situs Anda sebanyak mungkin, sayangnya kita akan sering mengalami kendala bisnis. Oleh karena itu, kita ingin melakukan sedikit lebih banyak perencanaan di awal, memprioritaskan setiap penambahan ARIA kita.

Dengan melakukan prioritisasi ini, kita dapat memastikan bahwa aspek terpenting dari situs kita ditingkatkan terlebih dahulu, membuat pengalaman pengguna sebaik yang kita bisa dalam waktu yang tersedia.

Mari kick of dengan melihat beberapa halaman produk.

ARIA untuk halaman produk

Halaman staples untuk situs eCommerce apa pun, halaman ini biasanya menampilkan produk, variasi yang tersedia, dan cara untuk menambahkan item ke keranjang. Setiap elemen interaktif ini harus dipertimbangkan secara terpisah.

Untuk halaman produk kita, mari kita membaginya menjadi potongan-potongan seperti ini: informasi produk inti kita, elemen interaktif yang memengaruhi produk, tombol tambahkan ke keranjang, dan bagian konten yang diperluas.

Jika kita perlu memprioritaskan penerapan di halaman ini, kita ingin mengelompokkannya seperti ini:

  1. Info produk inti, elemen interaktif, tambahkan ke tombol keranjang
  2. Konten produk yang diperluas

Faktor utama yang berperan di sini adalah sesuatu yang kita bicarakan dalam artikel sebelumnya: ARIA membantu mendefinisikan elemen intent. Dalam kasus konten yang diperluas, sebagian besar elemen HTML yang digunakan memiliki elemen dengan makna semantik dan intent yang match. Ini berarti bahwa meskipun berguna untuk memasukkan informasi ARIA tambahan jika kita bisa, itu mungkin kurang penting daripada menyelesaikan tiga bidang lainnya.

Informasi produk inti

Mari mulai dengan menambahkan ARIA ke informasi produk inti kita. Ini cukup mudah karena kesederhanaan elemen yang digunakan di sini. Kode terlihat seperti ini:

Sebagai permulaan, kita akan menambahkan peran ke div utama, dan hubungan antara gambar dan judul judul produk.

Elemen Produk Interaktif

Di sinilah halaman produk bisa menjadi sedikit rumit. Produk di situs eCommerce dapat memiliki beberapa variasi variasi yang berbeda. Di luar hanya jenis yang tersedia, jumlah mereka yang dapat digunakan secara simultan menambahkan lapisan kompleksitas lain. Dalam contoh kita, kita memiliki tiga elemen yang berperan: ukuran, warna, dan kuantitas.

Mari kita lihat bagaimana Anda bisa menandai itu. Berikut kode untuk elemen selection dan checkbox yang ditingkatkan ARIA:

Tambahkan ke Tombol Keranjang

Tombol keranjang mirip dengan tombol standar, tetapi kita akan keluar dari jalur kita untuk memberi label lebih jelas daripada tombol lainnya:

Konten Produk yang Diperluas

Akhirnya, area konten yang diperluas diperlakukan seperti area konten yang khas. Bergantung pada halaman produk Anda, bagaimanapun, mungkin ide yang baik untuk memisahkan landmark konten utama Anda dari landmark konten tambahan Anda. Tab menambahkan lapisan tambahan ke kode di sini juga. Inilah cara kita melakukannya dalam contoh kita:

Menambahkan ARIA ke Halaman Kategori

Meskipun halaman produk dapat dianggap sebagai bentuk alternatif dari halaman konten dalam banyak hal, halaman kategori situs, juga disebut Product Listing Pages (PLPs), adalah spesies yang berbeda. Mereka beroperasi sebagai struktur navigasi besar, memungkinkan pengguna untuk menyortir ratusan atau bahkan ribuan produk.

Hal ini menjadikannya semakin rumit, sehingga semakin banyak lapisan tambahan konten dan filter ditambahkan (kita akan membahas tentang navigasi dan filter ragam di bagian berikutnya). Mari kita lihat dua area utama PLP kita di luar filter: blok produk dan pagination.

Inilah frame kode awal kita:

Penanganan Pagination

Paginasi adalah nama yang diberikan pada tautan kecil di bagian bawah daftar produk kita di sini. Biasanya, mereka diwakili oleh angka atau panah, tetapi mereka bisa datang dalam berbagai bentuk lainnya. Di sisi HTML, tautan halaman terlihat seperti tautan biasa. Kita akan mengatakan bahwa kita mengontrol daftar produk tanpa mengalihkan ke halaman lain.

Untuk membuatnya tahu bahwa itu mengendalikan area konten dengan cara ini, kita harus menyatakannya sebagai pengontrol, menentukan apa yang dikontrolnya, dan kemudian menandai area konten itu sebagai live. Inilah yang terlihat seperti dalam kasus kita:

Ketika kita membuat live area kita di sini, kita menggunakan pengaturan "polite" yang disediakan oleh ARIA. Jika perubahan Anda relevan dan perlu ditangani oleh pengguna dengan cepat, atau Anda perlu memprioritaskan di antara beberapa area aktif, Anda dapat menggunakan nilai "assertive" juga.

Menandai elemen berulang

Tantangan unik yang muncul dengan halaman landing produk adalah kompleksitas navigasi intensif dalam daftar produk itu sendiri. Dari perspektif visual, itu bisa cukup mudah untuk mengelompokkan informasi, menggunakan isyarat visual untuk menentukan informasi apa yang berlaku untuk produk yang mana.

Melakukannya dengan ARIA memiliki beberapa layer lebih banyak daripada aplikasi sebelumnya yang telah kita bahas. Menandai tombol "buy now" tombol standar dapat menimbulkan kebingungan ketika ada 20 tombol di halaman ini. Untuk mengatasi ini, kita harus membuat koneksi yang jelas antara setiap produk dan elemen terkaitnya.

Berikut adalah bagaimana kita akan melakukannya:

Meskipun hal ini sedikit membantu dengan memperjelas hubungan untuk pengguna, itu masih bukan implementasi terbaik. Cara yang lebih baik adalah secara dinamis menghasilkan label aria dengan menggabungkan elemen produk-judul dengan frasa tambahan seperti "add to cart".

Menggunakan ARIA Dengan Navigasi Faceted

Navigasi rangkap mengacu pada filter dan opsi yang biasanya ditampilkan di situs eCommerce, memungkinkan Anda mempersempit hasil pencarian Anda. Ini datang dalam banyak rasa — dari ukuran hingga warna dan seterusnya. Untuk contoh, kita akan membuat dua asumsi:

  1. Navigasi ragam kita memperbarui produk langsung di halaman. Ini tidak selalu terjadi, karena terkadang situs eCommerce mungkin menghasilkan halaman baru ketika filter diterapkan, tetapi kita akan bekerja seolah-olah situs memperbarui konten secara langsung.

  2. Navigasi ragam kita memungkinkan pemilihan beberapa filter. Tidak semua situs eCommerce melakukan hal ini, dan pasti ada kasus di mana seharusnya tidak diizinkan. Namun, ini menciptakan layer tambahan kompleksitas di luar ruang lingkup artikel ini.

Menyiapkan Kontrol Anda

HTML di belakang filter kita mirip dengan penyebutan halaman, yang muncul di kode sebagai tautan dasar. Untuk penggunaan kita, maksud filter adalah untuk mengubah informasi yang saat ini ada di halaman. Karenanya, kita ingin menandai seluruh container di sekitar filter, membuatnya jelas bahwa ini adalah pengontrol untuk area lain di halaman:

Menentukan Area Langsung

Seperti pagination, pembaruan ini terjadi langsung di halaman. Karenanya, kita ingin menandai konten utama di laman kita sebagai "live". Perhatikan bahwa kita melakukan ini sebelumnya di bagian paginasi, tetapi kita akan mengulangi langkah di sini untuk konsistensi.

Kode akan terlihat seperti ini:

Pengujian implementasi Anda

Penerapan kita sekarang sudah siap, jadi mari kita lalui beberapa tes. Alat favorit saya untuk melakukannya termasuk Google’s Accessibility Developer Tools atau IBM’s Dynamic Assistant Plugin, tetapi tergantung pada skala proyek Anda, Anda mungkin perlu membuat skrip pengujian Anda sendiri.

Jika Anda memerlukan alat yang beroperasi di luar Chrome, atau hanya tidak suka dua yang disebutkan di atas, W3C memiliki daftar tool aksesibilitas lain yang tersedia.

Membuat eCommerce Lebih Mudah Diakses

Dengan tambahan baru untuk toolset ARIA Anda, Anda sekarang harus dapat menandai hampir semua situs eCommerce. Untuk memastikan pengalaman pengguna terbaik dengan situs eCommerce, ingatlah untuk menjaga navigasi Anda sesederhana mungkin, dan ekspresikan intent dengan jelas.

Ada pertanyaan lebih lanjut tentang topik ini? Apakah saya melewatkan sesuatu yang penting? Beritahu saya di komentar di bawah ini!

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.