HTML Lanjutan | #3 Aksesibilitas

Aksesibilitas Web dan ARIA di HTML5

Ketika kita berbicara tentang aksesibilitas web, kita merujuk pada pembuatan konten web yang bisa diakses oleh semua pengguna, termasuk mereka yang memiliki keterbatasan fisik, kognitif, atau teknologi. HTML5 dan atribut ARIA membantu kita membuat situs web lebih mudah digunakan oleh orang-orang dengan berbagai kebutuhan aksesibilitas.

Memahami Pentingnya Aksesibilitas Web

Aksesibilitas web bukan hanya tentang membantu pengguna dengan disabilitas, tapi juga memperbaiki pengalaman pengguna secara keseluruhan. Aksesibilitas mencakup:

• Memastikan konten dapat diakses oleh pengguna dengan alat bantu seperti screen reader.
• Meningkatkan navigasi dengan keyboard untuk mereka yang tidak menggunakan mouse.
• Menyediakan deskripsi alternatif pada elemen visual untuk mereka yang memiliki keterbatasan penglihatan.

Situs web yang lebih inklusif memberikan manfaat tidak hanya untuk individu, tetapi juga memperluas jangkauan bisnis atau proyek Anda ke lebih banyak orang.

Penggunaan Atribut ARIA

ARIA (Accessible Rich Internet Applications) adalah sekumpulan atribut yang dapat ditambahkan ke HTML untuk meningkatkan aksesibilitas elemen-elemen kompleks seperti navigasi, dialog, atau elemen interaktif lainnya. Atribut ARIA membantu alat bantu seperti screen reader dalam menafsirkan konten dengan lebih baik.

Contoh Atribut ARIA

Berikut adalah contoh penggunaan atribut ARIA pada elemen tombol untuk menandakan apakah sebuah elemen terbuka atau tertutup:

<button aria-expanded="false" aria-controls="menu">Menu</button>
<div id="menu" role="menu">
  <a href="#" role="menuitem">Item 1</a>
  <a href="#" role="menuitem">Item 2</a>
</div>

        

Dalam contoh di atas, atribut aria-expanded memberi tahu alat bantu apakah tombol menu sedang memperlihatkan kontennya. Atribut role="menu" dan role="menuitem" digunakan untuk mendefinisikan peran masing-masing elemen sebagai menu dan item-menu.

Penggunaan aria-label dan aria-labelledby

Atribut ARIA juga bisa digunakan untuk memberikan label tambahan pada elemen-elemen yang mungkin tidak memiliki teks langsung di dalamnya. Misalnya, kita bisa menggunakan aria-label untuk memberi label pada tombol ikon.

<button aria-label="Cari">
  <img src="search-icon.png" alt="">
</button>

        

Dengan menambahkan aria-label, screen reader akan mengetahui bahwa tombol tersebut berfungsi untuk "Cari," meskipun elemen itu hanya memiliki ikon tanpa teks.

Manfaat Menerapkan Aksesibilitas

Dengan menerapkan aksesibilitas web, Anda memastikan bahwa semua pengguna dapat merasakan pengalaman yang sama dalam mengakses informasi dan layanan. Hal ini juga meningkatkan kepatuhan terhadap standar web dan menjadikan situs web Anda lebih ramah pengguna.

Mari mulai memperhatikan aksesibilitas dalam pengembangan web kita, dan manfaatkan HTML5 serta atribut ARIA untuk menciptakan situs web yang inklusif bagi semua orang!