Cara Menggunakan ARIA di HTML Situs WordPress Anda

Salah satu tujuan utama pengembangan web adalah menciptakan pengalaman pengguna yang menarik. Anda akan sering melakukan ini dengan menyertakan fitur interaktif dan elemen visual yang memukau di situs web Anda. Namun, aspek tersebut belum tentu dapat diakses oleh setiap pengunjung potensial, terutama mereka yang mengandalkan pembaca layar.

Untungnya, ada sistem untuk membantu semua pengguna Anda merasakan hasil kerja keras Anda. Menggabungkan Aplikasi Internet Kaya yang Dapat Diakses (ARIA) dalam HTML situs Anda hanya membutuhkan sedikit usaha ekstra, dan itu dapat memberikan hasil yang besar. Posting ini akan memperkenalkan Anda kepada ARIA dan cara menggunakannya. Ayo pergi!

Pengantar ARIA: Apa Itu dan Mengapa Anda Mungkin Ingin Menggunakannya

Singkatnya, ARIA adalah cara untuk menentukan atribut HTML sehingga pembaca layar dapat mengidentifikasinya secara akurat dan kemudian menyampaikannya kepada pengunjung. Ini adalah aspek kunci dari pengembangan web yang dapat diakses, dan membantu menciptakan pengalaman yang lebih akurat bagi pengguna pembaca layar.

Ini karena menggabungkan ARIA dalam HTML Anda memengaruhi cara browser memodifikasi halaman web Anda untuk pembaca layar. Konten yang dimodifikasi ini disajikan dalam pohon aksesibilitas, dan ARIA mengambil tugas menerjemahkan elemen HTML Anda ke dalamnya.

Misalnya, Anda memiliki halaman dengan kotak centang dan Anda telah menggunakan ARIA di HTML Anda. ARIA akan memberi tahu pembaca layar untuk memberi tahu pengguna bahwa ada kotak centang di halaman, dan akan menunjukkan apakah itu dicentang atau tidak. HTML asli tidak dapat melakukan ini sendiri.

Pikirkan tentang seberapa sering Anda menggunakan web, tidak hanya dalam pekerjaan Anda tetapi juga dalam kehidupan Anda sehari-hari. Sekarang bayangkan jika sebagian besar web tidak dapat digunakan untuk Anda. Anda akan memiliki akses ke sumber daya yang lebih sedikit untuk pendidikan, pekerjaan, perawatan kesehatan, informasi, komunikasi, dan bahkan hiburan.

Menggunakan praktik terbaik untuk pengembangan web yang dapat diakses adalah salah satu cara untuk melakukan bagian Anda untuk menjadikan internet sebagai tempat dengan kesempatan yang sama bagi semua orang, tanpa memandang usia atau kemampuan. Ini dianggap sebagai hak asasi manusia oleh Perserikatan Bangsa-Bangsa, dan merupakan tujuan yang layak dikejar karena kemampuannya sendiri.

Namun, jika itu tidak cukup untuk membuat Anda berinvestasi dalam menggunakan ARIA, Anda mungkin juga ingin mencatat bahwa pengembangan yang dapat diakses juga berguna dari perspektif bisnis. Ini tumpang tindih dengan praktik terbaik Pengoptimalan Mesin Pencari, dan meningkatkan jangkauan situs web Anda. Plus, dalam beberapa kasus itu diwajibkan oleh hukum. Dengan kata lain, ada banyak alasan untuk mengambil beberapa langkah sederhana untuk membuat situs Anda lebih mudah diakses.

Cara Menggunakan ARIA di HTML Situs WordPress Anda (3 Praktik Utama)

Kami pasti akan merekomendasikan agar Anda terus mendidik diri sendiri tentang ARIA dan aksesibilitas web di luar cakupan posting ini. Anda mungkin ingin mempertimbangkan untuk menguji aksesibilitas situs Anda saat ini.

Yang mengatakan, sebenarnya hanya ada tiga hal yang perlu Anda ketahui untuk mulai menggunakan ARIA di HTML situs WordPress Anda. Mempelajari praktik di bawah ini akan memberi Anda dasar yang kuat.

1. Menggunakan ARIA Dengan HTML Semantik

Sebelum kita membahas bagaimana menerapkan ARIA ke HTML Anda, penting untuk diperhatikan kapan waktu yang tepat untuk menggunakannya. Meskipun HTML asli saja tidak membuat konten web dapat diakses, ada beberapa elemen semantik yang membuat ARIA tidak diperlukan, atau akan bertentangan dengan ARIA jika tidak digunakan dengan benar.

Elemen semantik – seperti <header> , <figure> , dan <nav> – menjelaskan tujuan HTML mereka. Memasukkan ARIA ke dalam elemen-elemen ini akan berlebihan, karena HTML semantik sudah menyiratkan peran elemen (kita akan berbicara lebih banyak tentang peran ARIA sebentar lagi).

Selain itu, ada aturan tertentu yang berlaku untuk menggunakan ARIA, untuk mencegah pengembang menggunakannya dengan cara yang bertentangan dengan HTML semantik. World Wide Web Consortium (W3C) memiliki tabel berguna yang menguraikan elemen HTML semantik mana yang menyiratkan peran ARIA:

Kolom pertama menentukan elemen HTML, sedangkan kolom kedua mencantumkan peran tersirat. Jika elemen memiliki peran tersirat yang tercantum, Anda tidak perlu menyertakan peran ARIA tambahan untuk elemen tersebut. Kolom ketiga mencantumkan peran yang dapat dimiliki setiap elemen HTML, menurut praktik terbaik.

2. Menambahkan Peran ke Tag HTML

Setelah Anda yakin elemen HTML yang sedang Anda kerjakan memerlukan penggunaan ARIA, Anda dapat langsung menggunakan 'peran' dan 'atribut'. Anda mungkin sudah memiliki gambaran tentang apa yang dilakukan peran ARIA dari bagian sebelumnya. Mereka menentukan jenis elemen yang terkandung dalam tag, dan menunjukkan tujuan elemen.

Jadi misalnya, jika Anda ingin membuat peringatan untuk memberi tahu pengguna bahwa mereka perlu menginstal pembaruan, Anda akan menggunakan peran 'peringatan' seperti ini:

 <div peran="peringatan">
<p>Silakan instal pembaruan terbaru!</p>
</div>

Seperti yang kami jelaskan sebelumnya, Anda tidak perlu menetapkan peran jika elemennya semantik dan menyiratkan peran, dan Anda tidak boleh menetapkan peran baru ke elemen yang bertentangan dengan peran tersiratnya. Namun, Anda juga harus memperhatikan bahwa Anda hanya dapat menerapkan satu peran untuk setiap elemen.

Pikirkan cara ini - mendefinisikan peran apa elemen. Sebuah elemen tidak bisa menjadi dua hal pada saat yang sama, jadi Anda harus memilih peran yang paling menggambarkannya. Karena itu, bila perlu, Anda dapat memilih untuk menyarangkan satu elemen di dalam elemen dengan peran yang berbeda.

Misalnya, jika Anda ingin menambahkan lansiran di atas ke header Anda, mungkin akan terlihat seperti ini:

 <header><div role="alert">
<p>Silakan instal pembaruan terbaru!</p>
</div></header>

Daripada menyatakan bahwa satu elemen adalah header dan peringatan, ini memperjelas bahwa ada peringatan yang terkandung di dalam header.

3. Termasuk Atribut untuk Catatan Negara dan Properti

Atribut adalah elemen kedua yang membentuk ARIA. Mereka berbeda dari peran karena mereka memberi tahu pembaca layar sesuatu yang penting tentang elemen tertentu, daripada mendefinisikan apa elemen itu. Ada dua jenis atribut ARIA:

• Negara berbagi informasi mengenai fitur yang mungkin berubah saat pengguna berinteraksi dengannya. Misalnya, ini mungkin termasuk kotak centang atau tombol radio.
• Properti menunjukkan fitur yang tidak mungkin berubah selama penggunaan. Sebuah elemen yang melabeli elemen lain, atau tingkat hierarki di mana sebuah elemen berada, keduanya merupakan properti.

Keduanya mudah dikenali, karena selalu dimulai dengan aria- diikuti oleh status atau properti tertentu yang digunakan. Misalnya, status yang digunakan untuk memberi tahu pembaca layar bahwa kotak centang diisi secara default adalah aria-checked, seperti dalam contoh ini:

 <span role="kotak centang" 
aria-checked="benar"
tabindex="0">
</span>

Demikian juga, properti yang digunakan untuk mencatat ketika satu elemen melabeli yang lain adalah aria-labelledby. Anda dapat menerapkan atribut ini ke gambar, misalnya, untuk menunjukkan teks yang terkait dengannya:

 <figure aria-labelledby="operahouse_1" role="group">
<img src="operahousesteps.jpg" alt="Gedung Opera Sydney">
<figcaption>Kami melihat opera <cite>Barber of Seville</cite> di sini!</figcaption>
</figur>

Sebaiknya lihat daftar peran, status, dan properti W3C yang diizinkan, untuk melihat lebih banyak contoh atribut yang dapat Anda gunakan.

Kesimpulan

Dalam hal pengembangan web, membuat konten yang dapat diakses mungkin bukan hal pertama yang Anda pikirkan. Namun, dengan mengikuti praktik terbaik aksesibilitas web, dan menggabungkan HTML ARIA di situs Anda, Anda dapat berperan dalam membuat web tersedia untuk semua orang.

Tiga praktik utama untuk menggunakan ARIA di situs WordPress Anda meliputi:

1. Menggunakan ARIA dengan HTML semantik.
2. Menambahkan peran ke tag HTML.
3. Termasuk atribut untuk mencatat status dan properti.

Apakah Anda memiliki pertanyaan tentang penggunaan ARIA di situs WordPress Anda? Beri tahu kami di bagian komentar di bawah!

Artikel Gambar Thumbnail EgudinKa / shutterstock.com