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

Best Practice untuk Implementasi ARIA

by
Length:MediumLanguages:
This post is part of a series called Web Accessibility With ARIA.
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)

Hari ini, untuk menandai Hari Penyandang Disabilitas Internasional, kita menyoroti aksesibilitas di sini di Envato Tuts+.

ARIA adalah fitur penting yang dapat digunakan pengembang web untuk membantu membuat situs mereka lebih mudah diakses. Pada bagian sebelumnya, kita berbicara tentang bagaimana Anda dapat menerapkan ARIA, apakah Anda melakukannya di situs eCommerce atau di lebih banyak tempat niche.

Sejauh ini, fokus seri ini adalah bagaimana menerapkan ARIA — misalnya, bagaimana menambahkan role ke element atau cara membuat kode form yang lebih mudah diakses. Dengan tulisan ini, fokusnya akan sedikit bergeser ke aspek online accessibility lainnya, seperti mengapa dan kapan kita harus menggunakan ARIA. Kita juga akan membahas beberapa pertanyaan umum yang diajukan pada posting sebelumnya di seluruh seri.

Baiklah, mari kita mulai!

Apa itu ARIA?

Pada dasarnya, ARIA adalah ekstensi untuk bahasa pengembangan web saat ini (terutama HTML) yang memungkinkan aksesibilitas yang ditingkatkan kepada end user.

Apa sebenarnya artinya itu?

Memperluas HTML Dengan ARIA

HTML memiliki beberapa kekurangan dalam hal bagaimana element didefinisikan dan bagaimana elemen dapat berhubungan satu sama lain.

Dalam banyak kasus, element HTML (seperti tag <div>) terlalu luas didefinisikan untuk berguna bagi seseorang yang menavigasi situs dengan screen reader, atau element mungkin memiliki terlalu banyak makna yang mungkin untuk ditafsirkan (mis. Gambar juga bisa digunakan sebagai tombol). ARIA menambahkan atribut tambahan ke element HTML untuk memungkinkan definisi yang dapat berlayer di atas bahasa markup yang sudah ada, menambahkan kejelasan yang diperlukan.

Manfaat utama kedua adalah hubungan element. Dengan HTML, setiap element exist sebagai child dan/atau parent dari element lain. Tetapi struktur ini tidak menangkap semua hubungan semantik. Ini dapat menyebabkan skenario seperti controller dan element yang dikontrolnya tidak dikaitkan secara jelas jika ditempatkan dalam container div terpisah. Ini menjadi semakin penting dalam struktur situs yang kompleks atau ketika mengubah DOM menggunakan JavaScript.

Di luar kedua manfaat itu, ada host yang lain yang cenderung kurang diperhatikan, tetapi tetap memberikan fungsionalitas yang sangat baik.

ARIA untuk Aksesibilitas Tingkat Lanjut

Meskipun banyak web mendorong UX yang lebih mudah digunakan, ARIA mengisi peran penting bagi orang lain yang mungkin tidak dapat menyederhanakan struktur mereka. Ada beberapa kasus di mana situs web mungkin memerlukan tree controls, seperti yang biasa digunakan oleh sistem file. Dengan menyediakan struktur tambahan, ARIA membuat control yang lebih canggih ini tersedia bagi orang-orang yang mungkin tidak dapat mengaksesnya sebaliknya — terutama bagi pengguna yang ingin membuat situs dengan kemampuan drag-and-drop.

Kemampuan utama lainnya adalah bahwa ARIA tidak hanya memperluas HTML — tetapi juga dapat digunakan untuk membuat teknologi lain yang lebih ramah terhadap aksesibilitas tersedia bagi lebih banyak pengguna. Ini sering terjadi pada orang yang menggunakan AJAX atau DHTML untuk aplikasi web mereka.

Dan sungguh, itu hanya scratching surface. Jika Anda tertarik untuk mencari tahu lebih lanjut tentang capability, attribute, dan parameter berguna lainnya, lihat WAI-ARIA overview.

Mengapa Kita Harus Menggunakan ARIA?

Sejauh menyangkut aksesibilitas, ARIA telah menjadi salah satu standar yang paling banyak diadopsi, dengan lebih dari 25% dari juta situs web teratas menggunakannya hingga batas tertentu.

Keuntungan terbesar menggunakan WAI-ARIA adalah meningkatkan aksesibilitas di situs Anda. Pengguna yang mengandalkan screen reader, memiliki low vision, atau menggunakaninterface alternatif untuk manfaat web sangat besar dari penerapannya — dan dalam beberapa kasus, mereka mungkin tidak dapat menggunakan situs web sepenuhnya tanpanya. Bagi banyak orang, aksesibilitas dipandang sebagai nilai inti dari web, dan sebagai pengembang, kita harus berusaha menyediakannya sedapat mungkin.

Di luar aspek best practice, ada juga insentif bisnis untuk menerapkan ARIA. Dengan 2-3% orang Amerika memiliki semacam low vision, ada sebagian besar pasar yang akan mendapat manfaat dari penggunaan standar ini. Selain itu, memiliki implementasi di tempat sekarang akan bermanfaat karena adopsi ARIA semakin tumbuh di antara interface web non-standar dan merayap ke dalam perangkat seperti smart speaker.

Best Practice untuk Implementasi ARIA

Sampai sekarang, kita telah fokus pada metode implementasi aktual dalam seri ini. Dengan dasar-dasar cara menambahkan ARIA ke situs Anda sekarang, mari kita lihat beberapa pedoman utama untuk menyusun implementasi Anda sendiri.

Menggunakan Light Touch Approach

Implementasi ARIA yang baik tidak memerlukan atribut dan peran tambahan di setiap kesempatan.

Jika memungkinkan, menggunakan jumlah kode tambahan paling sedikit untuk menyampaikan informasi yang diperlukan adalah ideal. Sebagai contoh, terlalu sering menggunakan ARIA mirip dengan membuat beranda situs Anda sebagai sitemap penuh untuk pengguna visual. Orang-orang yang menggunakan screen reader akan kewalahan oleh jumlah pemberitahuan dan markup tambahan pada halaman yang menggunakan ARIA secara berlebihan, mencapai kebalikan dari apa yang kita cari.

Memberikan markup tambahan yang cukup untuk membuat konteks elemen penting Anda jelas adalah tujuannya, dan apa pun di luar itu mungkin tidak perlu.

Menghindari Redundansi (Terutama Saat Menggunakan HTML5)

Sepanjang posting sebelumnya dalam seri ini, kita berbicara tentang role atribut sedikit. Kita menempatkannya di setiap tempat yang kita perlukan agar diperhatikan oleh pengguna. Namun, ada pengecualian penting untuk ini, bahwa kita tidak pernah membicarakannya sebelumnya, dan itu adalah kebutuhan untuk menghindari redundansi.

Kapan pun elemen yang ingin Anda tambahkan ARIA sudah dengan jelas mendefinisikan apa itu, maka Anda dapat melewatkan menambahkan ARIA ke dalamnya. Kenapa ini? Karena ARIA dimaksudkan untuk memperluas kode yang ada agar lebih mudah dibaca, tetapi dalam beberapa kasus, kode sudah jelas, terstruktur, dan mudah dimengerti.

Ini sering terjadi untuk orang yang menggunakan elemen yang diperkenalkan dalam HTML5. Misalnya, saat menggunakan elemen <button>, and tidak perlu lagi menambahkana atribut role="button", karena perannya sudah ditentukan secara eksplisit oleh kode HTML.

Menguji Dengan Screen Reader

Kunci lain untuk membuat implementasi ARIA yang baik adalah memastikan bahwa Anda menguji situs Anda dengan satu atau dua screen reader. Anda mungkin akan terkejut dengan perincian tentang bagaimana mereka berfungsi dan betapa mudahnya membuat situs web Anda mengganggu untuk digunakan secara tidak sengaja.

Banyak atribut ARIA dapat membuat pemberitahuan atau peringatan untuk pengguna akhir, dan jika Anda menggunakan area konten aria-live yang berubah setiap 10 detik, mungkin saja implementasinya membuat lebih sulit untuk menggunakan situs web Anda.

Aksesibilitas Berulang untuk Web

Saat menambahkan langkah aksesibilitas tambahan ke situs Anda, penting untuk diingat bahwa ini bukan tugas semua atau tidak sama sekali. Anda tidak perlu sepenuhnya menuntaskan seluruh situs web Anda dalam satu upaya, dan penambahan berulang mungkin merupakan cara terbaik untuk melakukannya.

Dimulai dengan area konten utama dan navigasi dan kemudian menyebar ke seluruh situs secara perlahan adalah strategi yang solid, menyelesaikan lebih banyak seiring berjalannya waktu. Meskipun Anda menjadwalkan 15 atau 30 menit setiap bulan untuk menambahkan sedikit aksesibilitas ke situs Anda, ini adalah langkah ke arah yang benar.

UX Yang Baik Adalah Aksesibilitas yang Baik (Dan Begitu pula sebaliknya)

ARIA tidak obat-semua untuk isu-isu aksesibilitas. Hal ini penting untuk menempatkan fokus berat pada desain UX yang baik, terutama ketika datang ke teks mudah dibaca, seperti alat lain dalam Anda aksesibilitas toolkit.

Jika Anda ingin mempelajari lebih dalam tentang bagaimana UX dan development (di luar ARIA) dapat digunakan untuk meningkatkan aksesibilitas, lihat Panduan Aksesibilitas Konten Web.

Anda juga dapat melihat Panduan Belajar Lengkap untuk Aksesibilitas Web kami.

Pertanyaan yang Sering Diajukan Tentang ARIA

Seri ARIA ini bergaung dengan banyak pembaca dan memicu diskusi di komunitas. Mari kita pertahankan! Meningkatkan kesadaran dan meningkatkan tutorial ini adalah cara terbaik untuk membawa aksesibilitas ke garis depan.

Berikut adalah beberapa pertanyaan dan komentar paling umum yang muncul di web:

Browser Apa Yang Mendukung WAI-ARIA?

Banyak! Sebagian besar browser modern mendukung fitur ARIA sampai batas tertentu, meskipun ini sedikit berubah dari browser ke browser. Jika Anda ingin melihat secara spesifik untuk setiap browser, Anda dapat menggunakan tool seperti Bisakah Saya Gunakan?

Can I Use ARIA results

Bisakah ARIA Digunakan Dengan WordPress?

Ya! Beberapa tema WordPress sudah memiliki ARIA terintegrasi, tetapi Anda dapat menambahkannya ke tema apa pun untuk mengedit kode sumbernya. Selain itu, Anda juga dapat menggunakan ARIA dengan hampir semua Content Management System!

Apa Yang Terjadi Jika ARIA Tidak Support?

Karena ARIA tidak memengaruhi rendering, tidak ada apa pun! Dalam kebanyakan kasus, jika suatu perangkat tidak mendukung ARIA, itu akan diabaikan sepenuhnya.

Membuat Web menjadi tempat yang lebih baik!

Menyatukan semua artikel dari seri ini, saya harap Anda sekarang memiliki semua alat yang diperlukan untuk meningkatkan aksesibilitas situs Anda!

Jika Anda memiliki pertanyaan, umpan balik, atau koreksi untuk sesuatu yang saya katakan, beri tahu saya di komentar!

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.