aria-label là gì và sử dụng như thế nào?

KP
Khoi Pro
Đăng ngày 18/05/2024 · Cập nhật 05/06/2026 · 4 phút đọc

aria-label dùng để đặt tên truy cập cho phần tử không có nhãn hiển thị rõ ràng, nhất là icon button, vùng điều hướng và các control cần mô tả ngắn gọn cho screen reader.

#A11y #ARIA #Coding Standards #Khái niệm

aria-label là thuộc tính ARIA dùng để đặt tên truy cập cho một phần tử khi phần tử đó không có nhãn hiển thị rõ ràng hoặc nhãn nhìn thấy chưa đủ mô tả. Screen reader sẽ đọc giá trị này thay cho tên mặc định của phần tử.

Cách dùng tốt nhất là chỉ áp dụng khi thật sự cần. Nếu UI đã có text hiển thị đủ rõ, hãy dùng luôn text đó. Nếu phần tử đã có nhãn hiển thị nhưng cần gắn thêm ngữ nghĩa, thường aria-labelledby là lựa chọn phù hợp hơn. Bài so sánh chi tiết có thể xem ở aria-label, aria-labelledby và aria-describedby khác nhau thế nào?.

aria-label dùng khi nào?

Thuộc tính này hợp nhất trong các tình huống phần tử không có text đủ rõ, hoặc khi text hiển thị ngắn quá nên cần thêm mô tả cho người dùng dùng screen reader.

  • Nút chỉ có icon, ví dụ nút đóng modal hoặc nút mở menu.
  • Liên kết có text hiển thị giống nhau nhưng dẫn tới các đích khác nhau.
  • Landmark như nav hoặc region cần phân biệt rõ giữa nhiều khu vực trên cùng một trang.
  • Control trong form cần tên ngắn gọn, dễ hiểu cho người dùng công nghệ hỗ trợ.

Ví dụ thực tế

Nút đóng modal

<button type="button" aria-label="Đóng hộp thoại">
  <svg aria-hidden="true" focusable="false">...</svg>
</button>

Với nút chỉ có icon, aria-label giúp screen reader đọc ra mục đích của nút thay vì chỉ đọc biểu tượng.

Điều hướng chính và phụ

<nav aria-label="Điều hướng chính">
  ...
</nav>
<nav aria-label="Điều hướng phụ">
  ...
</nav>

Khi trên trang có nhiều khối điều hướng, nhãn truy cập giúp người dùng biết họ đang ở khu vực nào.

Liên kết lặp lại

<a href="/san-pham/a" aria-label="Xem chi tiết sản phẩm A">Xem chi tiết</a>
<a href="/san-pham/b" aria-label="Xem chi tiết sản phẩm B">Xem chi tiết</a>

Ở đây text nhìn thấy được vẫn ngắn gọn, nhưng tên truy cập cho screen reader đã đủ cụ thể để phân biệt từng link.

Khi nào không nên dùng?

  • Không dùng aria-label để thay cho alt của ảnh.
  • Không dùng nếu text hiển thị đã mô tả đầy đủ hành động hoặc nội dung.
  • Không dùng để chữa một cấu trúc HTML sai nghĩa; hãy ưu tiên thẻ semantic trước, rồi mới bổ sung ARIA khi cần.

Ghi nhớ ngắn

Nếu có thể đặt tên cho phần tử bằng text hiển thị hoặc bằng label / aria-labelledby, hãy ưu tiên cách đó. Chỉ dùng aria-label khi phần tử thật sự thiếu nhãn hữu ích cho công nghệ hỗ trợ.

Tham khảo thêm

MDN: aria-label

W3C: ARIA14 – Using aria-label to provide an invisible label