30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Code
  2. Accessibility
Code

Aksesibilitas Situs: Memulai ARIA

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

Indonesian (Bahasa Indonesia) translation by Hasannudin Amin (you can also view the original English article)

Final product image
What You'll Be Creating

Menggunakan HTML standar saja, aplikasi web modern dapat mengunci pengguna dengan kebutuhan aksesibilitas.

HTML adalah bahasa markup yang dominan secara online, yang digunakan oleh hampir 83% dari situs web yang ada. Meskipun ada beberapa perubahan dalam 25 tahun sejak pembuatannya, bahkan iterasi yang lebih baru, seperti HTML5 dan AMP, meninggalkan banyak hal yang diinginkan — terutama ketika menyangkut aksesibilitas. Di situlah ARIA masuk. Dalam tutorial ini, saya akan berbicara tentang apa itu ARIA, mengapa itu berguna untuk situs Anda, dan beberapa cara itu dapat ditambahkan ke situs Anda.

Apa itu ARIA?

ARIA, juga dikenal sebagai WAI-ARIA, adalah singkatan dari Accessibility Initiative's Accessible Rich Internet Applications. Dokumen spesifikasi lengkap dapat ditemukan di sini. Perhatikan bahwa dokumen spesifikasi lengkap cukup padat, jadi mungkin ide yang baik untuk memulai dengan membaca posting ini dan memeriksa beberapa sumber lain yang saya tautkan di bawah ini.

Tujuan utama dari ARIA adalah untuk memungkinkan struktur semantik lanjutan dalam HTML sebagai lawan dari sifat sintaks-berat HTML. Dengan kata lain, HTML memberitahu browser di mana hal-hal berjalan, dan ARIA menceritakannya bagaimana mereka berinteraksi.

Siapa Pihak Dibalik ARIA?

ARIA adalah proyek yang diselenggarakan oleh W3C (World Wide Web Consortium). Proyek ini mematuhi standar yang sama untuk memperbarui dan mengedit sebagai inisiatif mereka yang lain. Mereka juga menyediakan repositori GitHub dari beberapa tes yang dapat Anda jalankan untuk memastikan halaman Anda berjalan dengan benar.

Apa yang Salah Dengan Marka Situs Saya Saat Ini?

Sebagian besar situs yang memiliki desain terstruktur dan dipikirkan dengan baik sudah cukup baik ketika menyangkut teknologi adaptif (yaitu pembaca layar). Namun, memiliki pengguna yang bisa mengetahui cara menggunakan situs Anda dan membuatnya mudah digunakan adalah hal yang berbeda. Pengguna low-vision membuat hampir 2% populasi, dan bagi mereka, perbedaannya dapat berarti menghemat banyak waktu dan pekerjaan detektif ketika mencoba melakukan tugas-tugas online dasar. Ini bisa menjadi perbedaan antara menawarkan pengalaman spektakuler kepada pengunjung dan menyediakan labirin bagi mereka untuk bernavigasi.

Di luar sarana aksesibilitas tradisional, ARIA menemukan jalannya ke dalam teknologi yang menyediakan kebutuhan baru dalam interaksi standar. Peningkatan jumlah sistem suara, penjelajahan agregat (seperti komputer yang tertanam di mobil, misalnya), dan inovasi lainnya menempatkan ARIA untuk digunakan, mengambil keuntungan dari peningkatan kemampuan semantiknya.

Oke, Tapi Apa Itu?

Secara keseluruhan, ARIA menghubungkan berbagai elemen secara bersama-sama dengan cara yang bermakna semantis. Ini memberikan pengguna dengan makna tambahan mengenai interaksi. Berikut adalah beberapa contoh dunia nyata tentang bagaimana penggunaannya:

  1. Mengaitkan elemen non-nested: Dengan HTML biasa, browser pengguna hanya dapat melihat hubungan berdasarkan hubungan parent / child. Namun, dalam beberapa situasi, kami mungkin menginginkan serangkaian tombol yang sejajar dengan konten dalam hierarki HTML. Dengan ARIA, kita dapat menentukan jenis pengontrol setiap tombol, dan elemen apa yang dikontrolnya di tempat lain dalam dokumen.
  2. Deklarasikan elemen interaktif: Meskipun HTML menyediakan beberapa elemen untuk interaktivitas, ARIA mendefinisikan lusinan lagi, memungkinkan penggambaran yang lebih terperinci tentang apa yang dapat dilakukan setiap elemen laman Anda. Selain itu, ini dapat ditugaskan ke tag HTML yang tidak akan umum digunakan untuk tujuan seperti itu tetapi mungkin masuk akal dalam kasus spesifik Anda. Misalnya, Anda mungkin menggunakan tag <li> untuk serangkaian kotak centang yang Anda pilih untuk tidak terdiri dari elemen formulir.
  3. Pemberitahuan pembaruan area langsung: Fitur lain yang disediakan oleh ARIA adalah definisi area konten "langsung". Ketika area konten didefinisikan dengan cara ini, ARIA akan memberi tahu pengguna kapan pun konten dalam elemen tersebut berubah. Ini dapat bermanfaat saat memastikan pengguna low-vision mengetahui bahwa sesuatu telah berubah di halaman Anda.

Menambahkan ARIA ke Halaman Web Anda

Kami telah berbicara tentang apa yang dapat dilakukan ARIA, jadi sekarang mari kita lihat beberapa contoh yang paling umum. Kami akan memulai setiap bagian dengan pernyataan singkat tentang tujuan yang ingin kami capai, diikuti dengan contoh kode tentang cara mencapainya.

Membuat Label Alternatif Dengan ARIA

Ketika datang ke pelabelan alternatif, sebagian besar pengembang sudah akrab dengan atribut alt yang biasa digunakan pada tag <img>. Tag ini melayani tujuan penting: mendeskripkan gambar yang dilampirkan untuk peningkatan aksesibilitas (atau sebagai taktik SEO umum, tergantung pada perspektif Anda).

ARIA menyediakan atribut serupa yang disebut aria-label yang dapat dilampirkan ke elemen HTML apa pun, meningkatkan aksesibilitas tidak hanya untuk gambar, tetapi bagian situs, kontrol bentuk, dan banyak lagi. Inilah contoh dari apa yang terlihat seperti:

Menentukan Elemen UI Spesifik ARIA

HTML sudah menyediakan sejumlah elemen untuk pembuatan halaman web, tetapi fokus utamanya adalah biasanya untuk menentukan area secara umum dan menyajikan pengguna dengan struktur situs. ARIA menyediakan beberapa lusin elemen tambahan yang lebih fokus pada bagaimana elemen digunakan, seperti timer, tooltip, atau bilah kemajuan.

Contoh yang digunakan di sini adalah keterangan alat yang mungkin Anda temukan di formulir. Ada beberapa cara untuk membuatnya, mulai dari tautan yang memicu beberapa JavaScript ke elemen yang menciptakan modal saat melayang di atas. Bagian yang hilang di sini adalah bahwa meskipun cara ini mungkin berhasil bagi pengguna yang awas, pengguna dengan penglihatan rendah mungkin bahkan tidak pernah tahu bahwa tooltip itu ada.

Anda dapat menentukan tooltip menggunakan ARIA seperti ini:

Tersedia Definisi ARIA

Untuk memperluas elemen UI ini, berikut daftar singkat dari beberapa "peran" paling menarik yang dapat ditentukan. Daftar lengkap tersedia dalam dokumen spesifikasi yang direferensikan.

  • search
  • banner
  • presentation
  • toolbar
  • status
  • menuitem
  • log
  • dialog
  • link

Membangun Hubungan di Luar Struktur Parent / Child

Sekarang mari kita memperluas titik yang telah kita bahas sebelumnya: struktur paksa dari HTML. Sementara hubungan parent / child baik untuk memutuskan bagaimana hal-hal yang harus dipesan, itu jatuh pendek ketika koneksi yang lebih berarti diperlukan. Contoh dari ini adalah elemen saudara. Beberapa pustaka menambahkan kemampuan untuk saudara kandung atau bentuk hubungan elemen lain untuk dilalui, tetapi ini biasanya terjadi dalam JavaScript atau bahasa lain di luar markup.

ARIA memberi kita kemampuan untuk mendefinisikan relasi ini tepat di markup, membuatnya lebih mudah untuk mengelompokkan item menu, membuat navigasi non-standar, dan melampirkan kontrol ke area elemen yang akan sulit dilakukan secara normal.

Mari kita lihat bagaimana kita dapat menggunakan ini untuk menghubungkan beberapa kontrol ke area konten:

Cuplikan ini mengatakan bahwa gambar nextbutton.jpg adalah sebuah tombol, yang merupakan kontrol untuk div tutorial di bawah ini.

Membuat Elemen "Live" di ARIA

Fitur terakhir dari ARIA yang akan kami bahas di sini adalah atribut aria-live. Sementara sebagian besar fitur ARIA lain di sini berhubungan dengan koneksi semantik, yang satu ini berhubungan langsung dengan ide memberikan pemberitahuan kepada pengguna tentang konten atau perubahan elemen.

Bagi banyak orang dengan low vision, mungkin tidak langsung jelas bahwa interaksi mereka dengan situs Anda menyebabkan perubahan di tempat lain di halaman. Hal ini terutama dapat terjadi pada perubahan halus, seperti bagian kecil teks yang dapat berubah tetapi tetap relatif sama panjangnya. Dengan menggunakan atribut ini, setiap kali konten diubah dalam elemen yang ditentukan, pengguna Anda akan diberitahu.

Kita dapat menambahkan atribut ini ke elemen seperti ini:

Membuat Web menjadi Tempat yang Lebih Baik untuk Semua Pengguna

Dengan sedikit lebih dari 2% penduduk AS yang membawa label low-vision, meningkatkan aksesibilitas situs Anda dapat meningkatkan jangkauan situs Anda secara dramatis. Bagi mereka yang memiliki situs yang menjangkau banyak negara, jumlah tersebut menjadi lebih besar. Di atas aksesibilitas, ARIA juga menyediakan cara untuk antarmuka non-browser untuk memanfaatkan situs Anda, dengan sejumlah perangkat berbasis suara yang sudah menyediakan dukungan.

Menerapkan ARIA membantu pengguna Anda dan dapat membantu traffic Anda, jadi lakukanlah!

Apakah saya kehilangan detail, atau apakah Anda memiliki pertanyaan tambahan? Tinggalkan komentar di bawah ini!

Jika Anda ingin menyelami dokumentasi ARIA lengkap atau mencoba alat pengujian resmi, periksa tautan 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.