Hầu hết các nhà phát triển web đều quen thuộc với HTML, nhưng không phải ai cũng hiểu rõ về ARIA (Accessible Rich Internet Applications). Cả HTML và ARIA đều đóng vai trò quan trọng trong việc hỗ trợ tiếp cận cho người dùng, đặc biệt là những người sử dụng công nghệ hỗ trợ (AT) như trình đọc màn hình. Bài viết này sẽ giúp bạn hiểu rõ hơn về “Phần Tử Là Gì” trong ngữ cảnh HTML và ARIA, cách chúng tương tác với nhau để tạo ra trải nghiệm web tốt hơn cho tất cả mọi người.
Giới Thiệu Về ARIA
ARIA là một tập hợp các thuộc tính có thể thêm vào các phần tử HTML để tăng khả năng hỗ trợ tiếp cận. Các thuộc tính này truyền tải vai trò, trạng thái và thuộc tính cho các công nghệ hỗ trợ thông qua API hỗ trợ tiếp cận.
Ví dụ, bạn có thể sử dụng thuộc tính role để xác định vai trò của một phần tử trên trang:
<div role="button">Tự hủy</div>
Ví dụ về mã ARIA với thuộc tính role button, cho thấy phần tử div được gán vai trò là một nút nhấn.
ARIA không thay đổi chức năng hoặc giao diện của một phần tử. Thay vào đó, nó cung cấp thông tin bổ sung cho các công cụ hỗ trợ tiếp cận để giúp người dùng dễ dàng tương tác với trang web.
Các Tính Năng Chính Của ARIA
Ba tính năng chính của ARIA là:
- Vai trò (Role): Xác định phần tử là gì hoặc làm gì trên trang. Ví dụ:
role="button",role="navigation". - Thuộc tính (Attribute): Thể hiện các đặc điểm hoặc mối quan hệ với một đối tượng. Ví dụ:
aria-describedby="more-info". - Trạng thái/Giá trị (State/Value): Xác định các điều kiện hiện tại hoặc giá trị dữ liệu liên kết với phần tử. Ví dụ:
aria-pressed="false".
Khi Nào Nên Sử Dụng ARIA?
Năm 2014, W3C đã chính thức xuất bản đề xuất về HTML5, bao gồm việc bổ sung các phần tử điểm tham chiếu như <article>, <nav>, <aside>, <header>, <footer> và các thuộc tính như hidden và required. Với các phần tử và thuộc tính HTML5 mới này, một số phần của ARIA hiện ít quan trọng hơn.
Tuy nhiên, ARIA vẫn bao gồm nhiều vai trò, trạng thái và thuộc tính không có trong bất kỳ phiên bản HTML nào. Vì vậy, khi nào bạn nên sử dụng ARIA? Hãy xem xét năm quy tắc của ARIA:
- Không sử dụng ARIA: Nếu có thể sử dụng phần tử HTML ngữ nghĩa tương đương, hãy sử dụng nó.
- Không thêm ARIA (không cần thiết) vào HTML: Trong hầu hết các trường hợp, các phần tử HTML hoạt động tốt và không cần thêm ARIA.
- Luôn hỗ trợ thao tác bằng bàn phím: Tất cả các thành phần điều khiển ARIA tương tác phải có thể truy cập bằng bàn phím.
- Không ẩn các phần tử có thể lấy tiêu điểm: Không thêm
role="presentation"hoặcaria-hidden="true"vào các phần tử cần có tiêu điểm. - Sử dụng tên dễ đọc cho các thành phần tương tác: Đảm bảo rằng tất cả các thành phần đều có tên có thể truy cập cho những người sử dụng thiết bị hỗ trợ tiếp cận.
Ví dụ, thay vì sử dụng:
<a role="button">Submit</a>Tốt hơn nên sử dụng:
<button>Submit</button>Vì <button> là một phần tử HTML ngữ nghĩa và dễ tiếp cận hơn.
Hỗ Trợ Thao Tác Bằng Bàn Phím
Tất cả các thành phần điều khiển ARIA tương tác (không bị tắt) phải có thể truy cập bằng bàn phím. Bạn có thể thêm tabindex="0" vào bất kỳ phần tử nào cần tiêu điểm mà thường không nhận được tiêu điểm bàn phím. Tránh sử dụng chỉ mục thẻ bằng số nguyên dương bất cứ khi nào có thể để ngăn các vấn đề về thứ tự tiêu điểm bàn phím có thể xảy ra.
ARIA Trong HTML
Mặc dù phương pháp hay nhất là sử dụng riêng các phần tử HTML, bạn có thể thêm các phần tử ARIA trong một số trường hợp nhất định. Ví dụ: bạn có thể ghép nối ARIA với HTML trong các mẫu cần hỗ trợ AT ở cấp cao hơn do các quy tắc ràng buộc môi trường hoặc làm phương thức dự phòng cho các phần tử HTML không được tất cả trình duyệt hỗ trợ đầy đủ.
Ví dụ, thay vì chỉ định sai vai trò:
<a role="heading">Read more</a>Tốt hơn nên sử dụng đúng vai trò và nội dung mô tả bổ sung cho đường liên kết:
<a aria-label="Read more about some awesome article title">Read More</a>Tính Phức Tạp Của ARIA
ARIA rất phức tạp và bạn phải luôn thận trọng khi sử dụng. Mặc dù các ví dụ về mã trong bài học này khá đơn giản, nhưng việc tạo các mẫu tùy chỉnh có thể truy cập nhanh chóng trở nên phức tạp.
Có nhiều điều cần chú ý, bao gồm nhưng không giới hạn ở: tương tác bằng bàn phím, giao diện cảm ứng, hỗ trợ AT/trình duyệt, nhu cầu dịch, các quy tắc ràng buộc về môi trường, mã cũ và lựa chọn ưu tiên của người dùng.
Kết Luận
Hiểu rõ về “phần tử là gì” trong HTML và ARIA là rất quan trọng để tạo ra các trang web dễ tiếp cận cho tất cả mọi người. Hãy luôn ưu tiên sử dụng các phần tử HTML ngữ nghĩa và chỉ sử dụng ARIA khi cần thiết. Bằng cách tuân thủ các quy tắc và nguyên tắc này, bạn có thể giúp tạo ra một thế giới kỹ thuật số cởi mở hơn cho tất cả mọi người.
