aria-label, aria-labelledby và aria-describedby khác nhau thế nào?

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

Khi làm UI accessible, ba thuộc tính ARIA này thường bị dùng lẫn lộn. Bài viết này so sánh aria-label, aria-labelledby và aria-describedby bằng ví dụ thực chiến.

#A11y #ARIA #Screen Reader

aria-label, aria-labelledby và aria-describedby nhìn giống nhau, nhưng vai trò của chúng khác nhau. Nếu phân biệt không rõ, bạn sẽ dễ tạo ra markup vừa dài, vừa sai nghĩa, vừa khó bảo trì.

Web accessibility illustration

ARIA naming illustration
A labeled button, a reference label and a longer description connected by arrows.

Đặt tên đúng cho control: nhãn ngắn cho name, mô tả dài cho description.

Khác nhau cơ bản

  • aria-label: đặt tên trực tiếp cho control khi trên DOM không có text phù hợp.
  • aria-labelledby: lấy tên từ một hoặc nhiều phần tử khác trong DOM.
  • aria-describedby: cung cấp mô tả dài hơn, thường là hint, note hoặc error.

MDN cũng nhấn mạnh rằng label nên ngắn gọn, còn description là phần giải thích thêm. Xem thêm: aria-describedby.

Khi nào dùng aria-label?

Dùng khi control không có text hữu ích, ví dụ nút icon, nút đóng modal, nút search chỉ có biểu tượng. Nếu control đã có text nhìn thấy rõ thì thường không cần.

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

Khi nào dùng aria-labelledby?

Dùng khi bạn đã có một label visible trong DOM và muốn lấy nó làm accessible name. Đây là lựa chọn tốt cho heading, form group, hoặc card có tiêu đề rõ ràng.

<h2 id="settings-title">Cài đặt thông báo</h2>
<div role="region" aria-labelledby="settings-title">...</div>

Khi nào dùng aria-describedby?

Dùng cho hint text, ghi chú phụ hoặc lỗi validate. Nó không thay thế label; nó chỉ bổ sung thông tin.

<label for="email">Email</label>
<input id="email" type="email" aria-describedby="email-hint email-error">
<p id="email-hint">Dùng email công ty nếu có.</p>
<p id="email-error">Email chưa đúng định dạng.</p>

Sai lầm phổ biến

  • Gắn aria-label vào phần tử đã có text rõ ràng, làm screen reader đọc dư.
  • Dùng aria-labelledby trỏ đến element không tồn tại hoặc bị trùng id.
  • Nhét cả đoạn văn dài vào aria-label thay vì dùng description thật.
  • Dùng ARIA để “sửa” semantic HTML thay vì dùng đúng element native.

Bài nên đọc tiếp

SEO checklist trước khi publish

  • Title chứa đủ 3 keyword chính: aria-label, aria-labelledby, aria-describedby.
  • Ngay intro đã nói rõ khác biệt.
  • Có code sample ngắn, dễ copy.
  • Internal link đi tới bài A11y nền và bài ARIA hiện có.
  • Không lạm dụng thuật ngữ nếu không giải thích kèm ví dụ.

Tham khảo thêm: MDN aria-describedby và MDN aria-labelledby.