WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) là một đặc tả giúp mô tả ý nghĩa, trạng thái và mối quan hệ của các thành phần giao diện web cho công nghệ hỗ trợ, chẳng hạn như trình đọc màn hình. Nói đơn giản, ARIA giúp trình duyệt và công nghệ hỗ trợ hiểu một nút, một vùng điều hướng, một thông báo động hoặc một thành phần tùy chỉnh đang làm gì.
Điểm quan trọng là WAI-ARIA không thay thế HTML có ngữ nghĩa. Nếu HTML tiêu chuẩn đã diễn đạt đúng vai trò của phần tử, hãy ưu tiên HTML trước. ARIA nên được dùng khi giao diện động hoặc thành phần tùy chỉnh cần bổ sung thông tin mà HTML thông thường chưa mô tả đủ.
- Dùng HTML tiêu chuẩn làm nền tảng.
- Thêm ARIA để mô tả vai trò, trạng thái hoặc mối quan hệ còn thiếu.
- Kiểm tra lại bằng bàn phím và công nghệ hỗ trợ thực tế.
Tổng quan về WAI-ARIA
WAI-ARIA được phát triển trong phạm vi Web Accessibility Initiative của W3C nhằm hỗ trợ khả năng truy cập cho ứng dụng web và nội dung động. Trong các trang web hiện đại, nhiều phần của giao diện được cập nhật bằng JavaScript hoặc được xây dựng bằng thẻ HTML trung tính như div và span. Nếu không có thông tin bổ sung, công nghệ hỗ trợ có thể không hiểu đúng mục đích của các phần tử này.
Ví dụ, một thành phần trông giống nút bấm nhưng không được đánh dấu đúng có thể không được công bố như nút bấm. Một vùng nội dung thay đổi sau khi người dùng thao tác có thể không được thông báo cho người dùng trình đọc màn hình. WAI-ARIA giúp thu hẹp khoảng cách đó bằng các vai trò và thuộc tính chuyên biệt.
Mục đích chính
- Làm rõ ý nghĩa của giao diện động: ARIA giúp công nghệ hỗ trợ nhận biết các phần tử được tạo hoặc thay đổi bằng JavaScript.
- Hỗ trợ thành phần UI tùy chỉnh: Với nút, checkbox, slider hoặc vùng điều hướng tự xây dựng, ARIA có thể bổ sung vai trò và trạng thái phù hợp.
- Cải thiện trải nghiệm dùng bàn phím và trình đọc màn hình: Khi được triển khai đúng, ARIA giúp người dùng hiểu mình đang ở đâu, đang thao tác với gì và trạng thái hiện tại là gì.
Vai trò, thuộc tính và trạng thái trong WAI-ARIA
WAI-ARIA thường được hiểu qua ba nhóm chính: vai trò, thuộc tính và trạng thái. Ba nhóm này phối hợp với nhau để mô tả loại thành phần, thông tin bổ sung và tình trạng hiện tại của thành phần đó.
| Khái niệm | Ý nghĩa | Ví dụ thường gặp |
|---|---|---|
| Vai trò | Cho biết phần tử là loại gì hoặc đảm nhiệm chức năng gì trong giao diện. | navigation, main, banner, button, slider |
| Thuộc tính | Mô tả thông tin ổn định hoặc mối quan hệ giữa các phần tử. | aria-labelledby, aria-describedby |
| Trạng thái | Cho biết tình trạng hiện tại của phần tử và có thể thay đổi khi người dùng thao tác. | aria-checked, aria-expanded, aria-pressed |
| Vùng thông báo | Cho công nghệ hỗ trợ biết rằng có nội dung động cần được thông báo. | aria-live |
Vai trò
Vai trò cho công nghệ hỗ trợ biết một phần tử dùng để làm gì. Các vai trò định hướng như navigation, main và banner giúp chia trang thành những khu vực dễ hiểu. Các vai trò widget như button, checkbox và slider mô tả thành phần có thể tương tác.
Tuy nhiên, nếu có phần tử HTML gốc phù hợp, hãy dùng phần tử đó trước. Chẳng hạn, <button> đã có vai trò nút bấm, nên thường không cần thêm role="button".
Thuộc tính và trạng thái
Thuộc tính ARIA bổ sung thông tin mô tả cho phần tử. Ví dụ, aria-labelledby có thể liên kết một phần tử với nhãn hiển thị ở nơi khác, còn aria-describedby có thể liên kết phần tử với đoạn mô tả bổ sung.
Trạng thái ARIA cho biết tình trạng hiện tại của phần tử. Ví dụ, aria-expanded cho biết một vùng nội dung đang mở hay đóng, còn aria-pressed cho biết một nút bật/tắt đang ở trạng thái được nhấn hay chưa. Khi trạng thái trên màn hình thay đổi, giá trị ARIA cũng phải thay đổi theo.
Vùng thông báo ARIA
Với nội dung cập nhật động, aria-live có thể giúp công nghệ hỗ trợ thông báo sự thay đổi cho người dùng. Loại vùng này phù hợp với các thông báo ngắn như trạng thái lưu, cảnh báo hoặc kết quả sau một thao tác.
Cách áp dụng WAI-ARIA trong HTML
Trước khi thêm ARIA, hãy tự hỏi: phần tử HTML hiện tại đã diễn đạt đúng ý nghĩa chưa? Nếu câu trả lời là có, ARIA có thể không cần thiết. Nếu giao diện tùy chỉnh hoặc nội dung động chưa được mô tả rõ, ARIA có thể bổ sung phần còn thiếu.
Ví dụ: nút bật/tắt
Với một nút bật/tắt, phần tử button đã cung cấp vai trò nút bấm. Thuộc tính aria-pressed bổ sung trạng thái bật hoặc tắt.
<button type="button" aria-pressed="false">Bật thông báo</button>Khi người dùng bấm nút và trạng thái thay đổi, giá trị aria-pressed cần được cập nhật để phản ánh đúng trạng thái hiện tại.
Ví dụ: vùng điều hướng
Phần tử nav đã thể hiện rằng đây là khu vực điều hướng. Nếu trang có nhiều vùng điều hướng, nhãn rõ ràng giúp người dùng phân biệt từng vùng.
<nav aria-label="Điều hướng chính">
...
</nav>Ví dụ: slider tùy chỉnh
Với thành phần tùy chỉnh như slider, ARIA có thể mô tả giá trị tối thiểu, tối đa và giá trị hiện tại. Đây chỉ là phần mô tả; hành vi bàn phím và cập nhật giá trị vẫn cần được triển khai đúng trong giao diện.
<div role="slider"
tabindex="0"
aria-label="Âm lượng"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="50"></div>Ví dụ: thông báo động
Khi một thao tác hoàn tất, vùng thông báo có thể giúp người dùng công nghệ hỗ trợ biết rằng nội dung đã thay đổi.
<div aria-live="polite">Đã lưu thay đổi.</div>Thực hành tốt khi triển khai WAI-ARIA
WAI-ARIA rất hữu ích, nhưng dùng sai có thể làm giao diện khó hiểu hơn. Vì vậy, mỗi thuộc tính ARIA nên gắn với một nhu cầu cụ thể của người dùng.
Chỉ dùng ARIA khi cần thiết
Nguyên tắc thực tế là: dùng HTML gốc trước, dùng ARIA để bổ sung sau. Nếu <button>, <header>, <main> hoặc <nav> đã diễn đạt đúng cấu trúc, không nên thêm vai trò trùng lặp chỉ để trang có nhiều ARIA hơn.
Chọn thuộc tính phù hợp với hành vi thật
ARIA phải phản ánh đúng những gì người dùng nhìn thấy và thao tác. Nếu một menu đang đóng nhưng vẫn được khai báo là mở, hoặc một checkbox đã đổi trạng thái nhưng aria-checked không cập nhật, công nghệ hỗ trợ sẽ truyền thông tin sai.
Kiểm tra bằng bàn phím và trình đọc màn hình
Một thành phần có ARIA không tự động trở nên dễ truy cập. Người dùng vẫn cần di chuyển đến thành phần bằng bàn phím, hiểu nhãn của nó, thao tác được và nhận phản hồi rõ ràng. Nếu cần thêm bối cảnh về nhóm người dùng này, có thể xem bài viết về trình đọc màn hình.
Đặt WAI-ARIA trong bức tranh truy cập tổng thể
ARIA chỉ là một phần của khả năng truy cập web. Cấu trúc tiêu đề, màu sắc, văn bản thay thế, khả năng dùng bàn phím, thông báo lỗi và nội dung dễ hiểu cũng cần được kiểm tra. Khi đánh giá toàn bộ trang, bài viết về tuân thủ tiêu chuẩn truy cập web sẽ là điểm tham khảo phù hợp.
Cung cấp phương án dự phòng
Giao diện nên được thiết kế sao cho thao tác cơ bản vẫn rõ ràng ngay cả khi một phần hỗ trợ ARIA không hoạt động như mong đợi. Nền tảng HTML vững, nội dung dễ hiểu và phản hồi rõ ràng giúp giảm phụ thuộc vào một kỹ thuật riêng lẻ.
Những lỗi cần tránh
- Thêm ARIA để che cấu trúc HTML yếu: ARIA không sửa được mọi vấn đề nếu phần tử nền tảng đã chọn sai.
- Khai báo trạng thái nhưng không cập nhật: Trạng thái ARIA cần thay đổi cùng giao diện thực tế.
- Dùng vai trò không khớp với hành vi: Nếu phần tử được công bố như nút bấm, người dùng cũng phải thao tác được như nút bấm.
- Bỏ qua kiểm tra thực tế: Nên kiểm tra bằng bàn phím và công nghệ hỗ trợ, không chỉ nhìn giao diện bằng mắt.
Tóm tắt
WAI-ARIA là công cụ quan trọng để cải thiện khả năng truy cập của giao diện động và thành phần tùy chỉnh. Cách dùng hiệu quả nhất là bắt đầu từ HTML có ngữ nghĩa, sau đó thêm ARIA khi cần mô tả vai trò, thuộc tính, trạng thái hoặc thông báo động mà HTML chưa thể hiện đủ.
Greeden đã phát hành UUU Web Accessibility Widget Tool, một công cụ hỗ trợ triển khai khả năng truy cập web dễ dàng hơn. Nếu bạn đang xem xét cải thiện khả năng truy cập cho website, hãy tham khảo thêm thông tin chi tiết từ công cụ này.