Apa Atribut Aria dalam HTML dan Mengapa Itu Penting?

Desainer web yang baru mengenal HTML mungkin menemukan sekumpulan atribut yang tidak dikenal. Diawali dengan kata ARIA, atribut ini muncul di seluruh web, tetapi tujuannya dapat menjadi misteri bagi pengguna baru.

Atribut ARIA memiliki tujuan penting dalam aksesibilitas situs web Anda. Mereka mendeskripsikan konten elemen tertentu dan cara elemen berhubungan dengan halaman atau elemen lain di sekitarnya.

Menambahkan atribut yang sangat penting ini ke situs Anda akan membantu memastikan bahwa semua pengunjung mendapatkan pengalaman yang sama, apa pun teknologi yang mereka gunakan.

Apa Itu Atribut ARIA?

ARIA adalah singkatan dari Accessible Rich Internet Applications. Dalam HTML modern, terutama aplikasi yang kaya JavaScript, tidak selalu jelas berdasarkan sintaksis tentang peran elemen individual.

Kesulitan dalam menentukan peran dapat menjadi masalah saat pengguna melihat situs menggunakan alat aksesibilitas seperti pembaca layar. Kurangnya HTML semantik yang tepat, pengguna akhir Anda mungkin tidak dapat menavigasi situs saat menggunakan alat aksesibilitas.

Sedangkan cara yang lebih disukai bagi Anda untuk mengatasi masalah ini adalah dengan gunakan elemen semantik yang tepat di HTML5, ini tidak selalu praktis atau mungkin. Di sinilah atribut ARIA pada elemen HTML masuk. Atribut ini membantu menentukan peran dan atribut elemen Anda dengan cara yang dapat diproses oleh alat aksesibilitas.

Mengapa Atribut ARIA Penting?

Singkatnya, atribut ARIA memungkinkan pengguna difabel untuk menggunakan situs web Anda. Peran dan atribut ini menentukan informasi tambahan tentang berbagai elemen di situs Anda yang mungkin tidak tersedia.

Ada berbagai macam atribut ARIA yang dapat Anda tetapkan. Anda harus menggunakannya di mana saja yang membutuhkan konteks tambahan untuk memungkinkan dokumen masuk akal dengan cara non-visual.

Misalnya, pertimbangkan situs yang memiliki navigasi utama yang terdiri dari a elemen dibungkus dalam a elemen, bukan a elemen:

<divkelas="nav">
<ul>
<li>Rumahli>
<li>Tokoli>
<li>Tentangli>
ul>
div>

Anda dapat menggunakan atribut ARIA untuk membantu pengguna menavigasi. Menambahkan atribut role dan aria-label ke elemen memungkinkan pembaca layar dan teknologi bantuan untuk mengetahui lokasi menu Anda.

<divkelas="nav">
<ulperan="navigasi"aria-label="Utama">
<li>Rumahli>
<li>Tokoli>
<li>Tentangli>
ul>
div>

Meskipun dalam banyak kasus Anda harus menggunakan elemen yang tepat, hal ini tidak selalu dapat dilakukan dalam batasan dari apa yang Anda lakukan. Jika, misalnya, situs Anda memerlukan penggunaan bilah kemajuan, tetapi Anda menginginkan desain yang tidak diizinkan oleh bilah standar.

Dalam skenario ini, Anda dapat membuat sekumpulan elemen kustom untuk menampilkan bilah progres. Namun, bagi pembaca layar, elemen ini akan terlihat berantakan; itu tidak akan dapat memberikan informasi yang berguna kepada pengunjung situs Anda.

Dengan menyetel peran pembungkus ke bilah kemajuan, dan menambahkan aria-valuenow, aria-valuemin, Dan aria-valuemax atribut ke pembungkus, Anda masih dapat menunjukkan kemajuan.

Di era modern, membangun situs web yang dapat diakses menjadi lebih penting dari sebelumnya. Ada beberapa pustaka komponen React dibangun dengan mempertimbangkan aksesibilitas.

Memiliki situs web yang dapat diakses tidak hanya dapat membantu peringkat pencarian Anda untuk beberapa mesin pencari utama, tetapi juga memastikan bahwa Anda tidak memotong grup pengguna potensial dari basis pengguna Anda.

Menambahkan atribut ARIA yang sesuai ke situs Anda akan membantu memastikan bahwa Anda menyajikan informasi kepada semua pengguna. Hasil akhirnya akan menjadi situs yang menyambut semua audiens dan menghadirkan pengalaman yang sedekat mungkin dengan semua orang.

Atribut ARIA mana yang harus saya gunakan?

Ada banyak atribut berbeda yang harus Anda manfaatkan di situs Anda. Secara umum, atribut ini jatuh ke dalam dua kategori yang berbeda. Yang pertama adalah atribut widget yang biasanya menggambarkan elemen interaktif khusus.

Kategori lain yang perlu Anda waspadai adalah atribut hubungan. Ini adalah atribut yang menyampaikan informasi ke teknologi pendukung tentang bagaimana elemen tertentu berhubungan dengan bagian lain dari situs atau elemen lainnya.

Saat mempertimbangkan atribut ARIA mana yang harus Anda sertakan, jawaban sederhananya adalah sebanyak mungkin. Di mana pun elemen yang Anda gunakan tidak menjelaskan peran yang dipenuhi elemen tersebut, Anda harus menggunakan atribut peran.

Jika Anda memiliki bidang dengan label, bidang tersebut harus memiliki aria-labeledby atribut. Selama atribut yang Anda gunakan masuk akal, Anda hanya membuat situs Anda lebih mudah diakses dengan menambahkannya.

Atribut widget adalah kategori yang jauh lebih besar. Ini berisi sebagian besar atribut ARIA yang perlu Anda tambahkan ke situs standar. Pada contoh sebelumnya dari bilah kemajuan yang disesuaikan, aria-valuenow, aria-valuemin, dan aria-valuemax adalah semua atribut widget. Mereka menggambarkan status atau kemungkinan status elemen tempat mereka berada.

Ada banyak atribut berbeda yang dapat Anda gunakan untuk menggambarkan keadaan suatu elemen. Salah satu yang paling umum adalah aria-label. Atribut ini menerapkan label pada elemen tempat Anda meletakkannya yang hanya dapat dilihat oleh teknologi pendukung.

Sepasang atribut ARIA umum lainnya yang termasuk dalam kategori ini adalah aria-tersembunyi Dan aria-cacat. Ini dapat mengomunikasikan status elemen saat ini dan apakah pembaca layar harus membacakannya kepada pengguna. Ini bermanfaat untuk berbagai perangkat berbeda dengan pembaca layarnya sendiri.

Atribut Hubungan

Tidak seperti atribut widget, atribut relasi memberikan indikasi teknologi bantuan tentang relasi dan penggunaan suatu elemen ke elemen lain di sekitarnya. Yang paling umum adalah atribut peran. Peran menentukan tujuan apa yang dilayani elemen di dalam situs.

Jika Anda mengatur peran atribut untuk navigasi, itu akan segera diidentifikasi sebagai pembungkus navigasi.

Beberapa atribut relasi menentukan bagaimana suatu elemen berhubungan dengan elemen lain di sekitarnya. Itu aria-labeledby atribut, misalnya, menunjukkan elemen mana yang bertindak sebagai label untuk elemen ini. Ini bisa berguna saat menggunakan tata letak yang masuk akal secara visual tetapi memiliki label untuk kontrol formulir tertentu setelahnya di alur dokumen.

Meskipun atribut hubungan lebih sedikit daripada atribut widget, atribut ini sering kali lebih penting. Mereka sering dapat menjelaskan aliran dan kontrol dokumen, dan memberikan detail tambahan tentang cara pengguna dapat menavigasi situs Anda.

Atribut ini sangat penting saat Anda mendesain formulir dan item navigasi di situs Anda.

Mengapa Sangat Penting untuk Menyertakan Atribut ARIA di HTML Anda

Atribut ARIA melayani tujuan yang sederhana dan perlu di situs web Anda. Mereka berfungsi untuk memastikan bahwa situs dapat diakses oleh semua pengguna, terlepas dari penggunaan perangkat lunak aksesibilitas. Untuk pengguna penyandang disabilitas, memiliki atribut ini di situs Anda dapat membuat situs tersebut dapat digunakan.

Metode yang disukai untuk bekerja dengan teknologi bantuan adalah dengan menggunakan elemen semantik yang tepat. Namun, jika hal itu tidak memungkinkan, atribut ARIA memungkinkan untuk bekerja secara bebas tanpa membuat pengguna Anda kehilangan konten.