ARIA (Accessible Rich Internet Applications) ialah satu set atribut yang menambah semantik kebolehcapaian — peranan (roles), keadaan (states), dan sifat (properties) — yang tidak dapat diungkapkan oleh HTML asli. Tetapi peraturan ARIA yang paling penting ialah: utamakan HTML asli terlebih dahulu.
Save
Save
Elemen asli datang dengan peranan yang betul, gelagat papan kekunci, dan fokus secara percuma. Gunakan ARIA hanya apabila tiada elemen asli yang mampu melakukan tugas tersebut.
<!-- 1. Roles — what an element IS (for custom widgets) -->
<div role="tablist"><div role="tab" aria-selected="true">Tab 1</div></div>
<!-- 2. States — current condition (dynamic) -->
<button aria-expanded="false" aria-controls="menu">Menu</button>
<input aria-invalid="true" aria-describedby="err" />
<!-- 3. Properties — relationships / labels -->
<input aria-label="Search" />
<div aria-labelledby="heading-id"></div>
<div aria-live="polite">3 results found</div> <!-- screen reader announces updates -->
<div aria-live="assertive" role="alert">Error saving!</div> <!-- interrupts -->
Ini ialah ARIA yang benar-benar berguna: memberitahu pembaca skrin tentang kandungan yang berubah tanpa muat semula halaman (hasil carian, toast, ralat pengesahan).
ARIA yang tidak betul adalah lebih teruk daripada tiada langsung — ia memberi pengguna pembaca skrin maklumat palsu. Dan ARIA hanya mengubah semantik, bukan gelagat: role="button" pada <div> tidak menjadikannya boleh difokus atau boleh diklik; anda mesti menambah tabindex dan pengendali kekunci sendiri.
Gunakan HTML semantik untuk 95% kes; gunakan ARIA untuk mengisi jurang bagi widget tersuai (tab, combobox, menu) dan untuk mengumumkan kemas kini dinamik melalui kawasan langsung.
Ikut peraturan — utamakan asli, jangan ubah semantik asli tanpa keperluan, kekalkan keadaan segerak, dan jangan sekali-kali menggunakan peranan yang anda tidak laksanakan sepenuhnya.