ARIA là gì?

ARIA (Accessible Rich Internet Applications) là bộ attribute bổ sung ngữ nghĩa cho screen reader khi HTML gốc không diễn tả đủ.

Ba nhóm:

<!-- role: vai trò -->
<div role="dialog" aria-modal="true">...</div>

<!-- state: trạng thái, thay đổi theo tương tác -->
<button aria-expanded="false" aria-controls="menu">Menu</button>

<!-- property: thuộc tính, thường cố định -->
<input aria-label="Tìm kiếm" aria-describedby="hint">

Quy tắc số 1 của ARIA: đừng dùng ARIA nếu HTML đã làm được.

<div role="button" tabindex="0" onkeydown="...">Gửi</div>   <!-- phải tự viết lại mọi thứ -->
<button>Gửi</button>                                        <!-- đã có sẵn tất cả -->

ARIA chỉ đổi cách screen reader mô tả, không thêm hành vi: đặt role="button" lên <div> không làm phím Enter hoạt động, không đưa nó vào tab order, không có trạng thái disabled.

Lưu ý: ARIA sai còn tệ hơn không có ARIA. aria-hidden="true" trên một nút đang focus được sẽ tạo ra phần tử "tồn tại với bàn phím nhưng vô hình với screen reader" — người dùng tab vào một chỗ không được đọc tên.