Pada artikel sebelumnya kita telah mempelajari berbagai atribut ARIA seperti aria-invalid, aria-describedby, dan role="alert" untuk membantu teknologi bantu memahami formulir.

Mungkin setelah mempelajari semua itu muncul keinginan untuk menambahkan atribut ARIA ke hampir setiap elemen HTML.

Sebelum melakukannya, ada satu prinsip penting yang perlu diketahui.

Dokumentasi resmi WAI-ARIA Authoring Practices memiliki sebuah aturan yang sangat terkenal:

The first rule of ARIA is: If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

Artinya:

Gunakan elemen HTML yang memang dibuat untuk tujuan tersebut. Jangan menggunakan ARIA jika HTML sudah mampu menyelesaikan masalahnya.

Sekilas aturan ini terdengar aneh.

Mengapa justru dianjurkan tidak menggunakan ARIA, padahal ARIA dibuat untuk meningkatkan aksesibilitas?

Mari kita bahas.

Mengapa HTML Lebih Baik daripada ARIA?

HTML modern sebenarnya sudah memiliki banyak fitur aksesibilitas bawaan.

Sebagai contoh:

1. <button>
2. <a>
3. <input>
4. <select>
5. <textarea>
6. <details>
7. <summary>
8. <dialog>
9. <progress>

Semua elemen tersebut sudah memiliki:

1. peran (role) bawaan;
2. dukungan keyboard;
3. informasi untuk screen reader;
4. perilaku (behavior) yang konsisten di berbagai browser.

Artinya, kita tidak perlu menambahkan ARIA hanya agar elemen-elemen tersebut dapat dikenali oleh teknologi bantu.

Analogi Sederhana

Bayangkan Anda memiliki sepeda yang masih berfungsi dengan baik.

Untuk berangkat ke kantor, tentu Anda akan langsung mengendarainya.

Anda tidak akan membongkar seluruh sepeda, kemudian memasang roda, rem, dan rantai sendiri dari awal.

Begitu pula dengan HTML.

Elemen HTML sudah memiliki "mesin" aksesibilitas bawaan.

ARIA bukanlah pengganti HTML.

ARIA adalah pelengkap ketika HTML memang belum mampu menjelaskan suatu kondisi atau perilaku tertentu.

Kesalahan yang Sering Terjadi

Banyak developer membuat tombol menggunakan <div>.

Misalnya:

Sekilas terlihat sudah aksesibel.

Padahal sebenarnya developer harus membuat sendiri hampir seluruh perilaku tombol.

Misalnya:

1. mendukung tombol Enter;
2. mendukung tombol Space;
3. mengatur fokus keyboard;
4. memberi tahu screen reader bahwa elemen tersebut adalah tombol.

Semua pekerjaan itu sebenarnya sudah disediakan oleh browser.

Cara yang Lebih Sederhana

Gunakan elemen yang memang dibuat untuk tujuan tersebut.

Selesai.

Tanpa:

1. role="button"
2. tabindex
3. JavaScript tambahan untuk keyboard
4. pengaturan aksesibilitas lainnya

Browser sudah menangani semuanya.

HTML Sudah Memiliki Semantik Bawaan

Perhatikan beberapa contoh berikut.

Semua elemen tersebut sudah mempunyai semantik dan perilaku bawaan.

Dalam banyak kasus, Anda tidak perlu menambahkan ARIA sama sekali.

Lalu Kapan ARIA Dibutuhkan?

ARIA digunakan ketika HTML belum mampu menjelaskan status, hubungan, atau komponen interaktif yang kompleks.

Misalnya pada kondisi berikut.

1. Menunjukkan Status Komponen

Dropdown, accordion, atau sidebar biasanya memiliki kondisi:

1. terbuka;
2. tertutup.

HTML tidak mengetahui status tersebut.

Karena itu kita menggunakan:

Ketika menu dibuka, JavaScript cukup mengubah nilainya menjadi:

Screen reader akan mengetahui bahwa menu sekarang sedang terbuka.

2. Menghubungkan Elemen

Misalnya pada formulir.

ARIA membantu menghubungkan kedua elemen tersebut.

3. Menunjukkan Keadaan Dinamis

Misalnya:

1. aria-selected
2. aria-current
3. aria-pressed
4. aria-busy

Atribut tersebut menjelaskan keadaan suatu komponen yang dapat berubah selama aplikasi berjalan.

4. Komponen UI yang Kompleks

Beberapa komponen memang tidak memiliki padanan HTML yang lengkap.

Contohnya:

1. Tabs
2. Tree View
3. Menu Bar
4. Combobox
5. Grid interaktif

Komponen seperti ini biasanya membutuhkan kombinasi:

1. role
2. aria-selected
3. aria-controls
4. aria-activedescendant
5. dan atribut ARIA lainnya.

Namun implementasinya cukup rumit sehingga sebaiknya menggunakan pustaka (library) yang telah mengikuti spesifikasi WAI-ARIA daripada membangunnya dari nol.

Yang Perlu Diingat: ARIA Tidak Menambah Perilaku

Ini adalah kesalahan yang paling sering terjadi.

Misalnya:

Sebagian developer mengira elemen tersebut sudah menjadi tombol.

Padahal tidak.

role="button" hanya memberi tahu screen reader bahwa elemen tersebut adalah tombol.

ARIA tidak membuat elemen tersebut bisa diklik menggunakan keyboard.

Developer tetap harus menambahkan sendiri:

1. fokus keyboard;
2. dukungan Enter;
3. dukungan Space;
4. manajemen fokus;
5. dan perilaku lainnya.

Inilah alasan mengapa HTML asli hampir selalu menjadi pilihan yang lebih baik.

Kesalahan yang Sering Terjadi

Praktik Cepat: Audit Penggunaan ARIA

Buka proyek yang sedang Anda kerjakan.

Kemudian lakukan pencarian terhadap kata:

Setelah menemukannya, tanyakan beberapa hal berikut.

1. Apakah atribut ARIA tersebut benar-benar diperlukan?
2. Apakah elemen tersebut sebenarnya dapat diganti dengan HTML semantik?
3. Apakah saya menggunakan <div> atau <span> padahal sudah tersedia elemen HTML yang sesuai?
4. Apakah seluruh perilaku keyboard sudah berfungsi sebagaimana mestinya?

Sering kali Anda akan menemukan bahwa beberapa atribut ARIA dapat dihilangkan karena HTML sebenarnya sudah menyediakan solusi yang lebih sederhana.

ARIA merupakan teknologi yang sangat penting dalam pengembangan aplikasi web modern. Namun ARIA bukanlah pengganti HTML semantik.

Gunakan HTML terlebih dahulu. Apabila HTML sudah menyediakan elemen yang sesuai, manfaatkan kemampuan aksesibilitas bawaan yang telah diberikan oleh browser. Gunakan ARIA hanya ketika diperlukan untuk menjelaskan status, hubungan, atau komponen interaktif yang tidak dapat dijelaskan oleh HTML saja.

Prinsip ini sering diringkas oleh komunitas aksesibilitas menjadi satu kalimat yang sederhana:

No ARIA is better than Bad ARIA.

Dengan memahami kapan menggunakan HTML dan kapan menggunakan ARIA, Anda akan menghasilkan kode yang lebih sederhana, lebih mudah dipelihara, dan jauh lebih andal bagi seluruh pengguna, termasuk mereka yang menggunakan teknologi bantu seperti screen reader.