ARIA Roles Used Incorrectly: Lỗi dùng sai ARIA và cách tránh “over-engineering accessibility”

Đây là lỗi rất đáng viết bài vì nó không dành cho người mới, mà dành cho những ai đã biết HTML, biết ARIA, nhưng dùng sai chỗ.

ARIA là gì và sinh ra để làm gì

ARIA (Accessible Rich Internet Applications) là tập thuộc tính giúp bổ sung thông tin cho công nghệ hỗ trợ trong các trường hợp HTML thuần không đủ khả năng mô tả.

ARIA không được sinh ra để thay thế HTML semantic. Nó chỉ nên được dùng khi:

• Không có thẻ HTML semantic phù hợp
• UI được tạo động bằng JavaScript
• Cần mô tả trạng thái hoặc vai trò đặc biệt

Một nguyên tắc rất quan trọng: nếu HTML gốc đã làm được, đừng dùng ARIA.

Lỗi ARIA dùng sai thường gặp nhất

Dùng role khi không cần thiết

<button role="button">Gửi</button>

Thẻ <button> đã có role mặc định. Việc thêm role="button" là dư thừa và có thể gây xung đột.

Dùng role sai cho phần tử

<a href="#" role="button">Mở</a>

Link không phải button. Nếu hành vi là button, hãy dùng thẻ <button> thay vì vá bằng ARIA.

Dùng ARIA để “giả semantic”

<div role="heading" aria-level="2">
  Tiêu đề
</div>

Trong khi hoàn toàn có thể dùng:

<h2>Tiêu đề</h2>

Vì sao lỗi này nguy hiểm

Lỗi ARIA không giống các lỗi accessibility thông thường. Nó có thể:

• Làm screen reader đọc sai vai trò phần tử
• Gây hành vi không nhất quán giữa các trình đọc màn hình
• Khiến code khó bảo trì và khó debug
• Làm audit accessibility tệ hơn, không phải tốt hơn

ARIA sai còn tệ hơn không có ARIA.

Những vị trí hay bị lạm dụng ARIA

• Custom button, custom dropdown
• Modal và dialog tự build
• Component JavaScript phức tạp
• Website cố “đạt chuẩn” bằng mọi giá

Nguyên tắc dùng ARIA đúng cách

• Ưu tiên HTML semantic trước
• Không thêm role cho phần tử đã có role mặc định
• Không dùng ARIA để sửa lỗi semantic
• ARIA chỉ bổ sung, không thay thế HTML
• Test với screen reader thật, không chỉ audit tool

Ví dụ dùng ARIA đúng

Trong trường hợp cần mô tả trạng thái:

<button aria-expanded="false">
  Mở menu
</button>

ARIA ở đây bổ sung thông tin mà HTML không tự cung cấp.

Những sai lầm cần tránh

• Thêm ARIA cho mọi phần tử “cho chắc”
• Dùng role để vá HTML sai
• Sao chép ARIA từ ví dụ mà không hiểu
• Chỉ fix audit tool mà không hiểu bản chất

Lợi ích khi dùng ARIA đúng

Khi ARIA được dùng đúng chỗ:

• Screen reader hiểu UI chính xác hơn
• Trải nghiệm người dùng nhất quán
• Code sạch, dễ bảo trì
• Accessibility thực sự được cải thiện

Kết luận

Lỗi ARIA roles used incorrectly không xuất phát từ thiếu kiến thức, mà từ việc dùng kiến thức sai cách. ARIA là công cụ mạnh, nhưng cũng rất nguy hiểm nếu lạm dụng. Hãy nhớ: HTML semantic luôn là nền tảng, ARIA chỉ là lớp hỗ trợ phía trên. Dùng ít nhưng đúng còn tốt hơn dùng nhiều mà sai.