HTMLAccessible name là chuỗi mà screen reader đọc lên để định danh phần tử (khác với role và state). Trình duyệt tính nó theo thuật toán accname, duyệt lần lượt và dừng ở nguồn đầu tiên có giá trị không rỗng:
1. aria-labelledby — trỏ tới id của phần tử khác, nối nội dung các phần tử đó lại.
2. aria-label — chuỗi viết thẳng.
3. Nguồn gốc của HTML — <label for> với form control, <caption> với table, alt với img, <legend> với fieldset.
4. Nội dung bên trong — chỉ với các role cho phép lấy tên từ nội dung (button, link, heading...).
5. title — chỉ là lưới an toàn cuối cùng, không nên dựa vào.
<!-- Đọc là "Đóng": aria-labelledby thắng cả text bên trong -->
<button aria-labelledby="t" aria-label="Huỷ">X<span id="t" hidden>Đóng</span></button>Hệ quả hay bị dính khi phỏng vấn:
- aria-label ghi đè nội dung nhìn thấy → người dùng ra lệnh giọng nói đọc chữ trên nút mà không khớp tên. Nếu có chữ hiển thị, accessible name nên chứa đúng chữ đó.
- aria-labelledby vẫn lấy được nội dung của phần tử hidden, nhưng phần tử đích phải tồn tại — id sai thì tên rỗng, không có cảnh báo nào.
- aria-label trên phần tử không tương tác, không có role (như div, span) thường bị bỏ qua.
Kiểm tra bằng tab Accessibility của DevTools: xem trường "Name" và nguồn nào đang thắng.