ARIA (Accessible Rich Internet Applications) là một tập hợp các attribute thêm ngữ nghĩa accessibility — role, state, và property — mà HTML native không diễn đạt được. Nhưng quy tắc ARIA quan trọng nhất là: ưu tiên HTML native trước.
Save
Save
Các element native đi kèm role đúng, hành vi bàn phím và focus miễn phí. Chỉ tìm tới ARIA khi không có element native nào làm được việc đó.
<!-- 1. Role — một element LÀ gì (cho các widget tùy chỉnh) -->
<div role="tablist"><div role="tab" aria-selected="true">Tab 1</div></div>
<!-- 2. State — tình trạng hiện tại (động) -->
<button aria-expanded="false" aria-controls="menu">Menu</button>
<input aria-invalid="true" aria-describedby="err" />
<!-- 3. Property — mối quan hệ / nhãn -->
<input aria-label="Search" />
<div aria-labelledby="heading-id"></div>
<div aria-live="polite">3 results found</div> <!-- screen reader thông báo cập nhật -->
<div aria-live="assertive" role="alert">Error saving!</div> <!-- ngắt ngang -->
Đây là ARIA thực sự hữu ích: báo cho screen reader về nội dung thay đổi mà không reload trang (kết quả tìm kiếm, toast, lỗi validation).
ARIA sai còn tệ hơn không có — nó cung cấp thông tin sai cho người dùng screen reader. Và ARIA chỉ thay đổi ngữ nghĩa, không bao giờ thay đổi hành vi: role="button" trên một <div> không làm nó nhận focus hay click được; bạn phải tự thêm tabindex và các trình xử lý phím.
Dùng semantic HTML cho 95% trường hợp; dùng ARIA để lấp các khoảng trống cho các widget tùy chỉnh (tab, combobox, menu) và để thông báo các cập nhật động qua live region.
Hãy tuân theo các quy tắc — ưu tiên native, đừng thay đổi ngữ nghĩa native một cách không cần thiết, giữ các state đồng bộ, và đừng bao giờ áp dụng một role mà bạn không triển khai đầy đủ.