aria-label, aria-labelledby, aria-describedby khác nhau?

Cả ba đều cấp tên hoặc mô tả cho screen reader, khác nhau ở nguồn chữ và vai trò.

<!-- aria-label: đặt tên bằng chuỗi, khi không có chữ hiển thị -->
<button aria-label="Đóng">×</button>

<!-- aria-labelledby: lấy tên từ element khác, nối nhiều id được -->
<div role="dialog" aria-labelledby="dlg-title">
  <h2 id="dlg-title">Xác nhận xoá</h2>
</div>

<!-- aria-describedby: mô tả PHỤ, đọc sau tên -->
<input id="pw" type="password" aria-describedby="pw-hint pw-err">
<p id="pw-hint">Tối thiểu 8 ký tự</p>
<p id="pw-err" role="alert"></p>

Thứ tự tính tên: aria-labelledby > aria-label > <label for> > nội dung bên trong.

Lưu ý 1: aria-label đè lên chữ hiển thị. Nút ghi "Gửi đơn" mà aria-label="Submit" thì người dùng lệnh giọng nói đọc thấy "Gửi đơn" nhưng hệ thống lại chờ "Submit".

Lưu ý 2: aria-label không có tác dụng trên element không có role tương tác như <div>, <span> thuần — nhiều screen reader bỏ qua hoàn toàn.