Label HTML là gì

Aria-label là một thuộc tính mới của HTML5 được sử dụng để nhắm đến mục đích thuận tiện hơn cho người khuyết tât [và nó là một phần vô cùng quan trọng ảnh hưởng đến điểm số Web Accessibility] thông qua một số công cụ hỗ trợ nguyền khuyết tật như trình đọc màn hình [screen readers].

Sử dụng aria-label như thế nào?

Ví dụ giải sử với cú pháp HTML sau sẽ tạo ra một nút đóng [close]

Với những người bình thường. Thì sẽ dễ dàng nhận thấy rằng đây là một nút đóng [close]. Tuy nhiên với những người mắc một số khuyết điểm về mắt như người khiếm thị, buộc phải sử dụng và phụ thuộc vào trình đọc màn hình. Lúc này, trình đọc màn hình sẽ chỉ đọc duy nhất chữ [X], thậm chí với những coder sử dụng X là một lọai font awesome nữa thì nó sẽ không đọc bất kì kí tự nào! Điều này khiến người khuyết tật không phân biệt được họ sẽ click chuột vào thứ gì! Và vì vậy aria-label đã ra đời.

Vậy khi nào cần sử dụng aria-label?

Chỉ sử dụng aria-label khi nội dung text hiển thị không rõ ràng hoặc không chứa nội dung text cụ thể nào. Ví dụ với cú pháp liên kết a sau:

thì trình đọc màn hình sẽ vẫn đọc được là "Trở lại trang chủ" rõ ràng và dễ hiểu, tuy nhiên cũng chức năng trên nhưng với cú pháp sau đây. Thì aria-label buộc phải sử dụng:

Tuy nhiên nếu nội dung con của nó [ở ví dụ dưới đó là thẻ div lồng trong thẻ a] chứa một text rõ ràng thì text đó vẫn được chấp nhận và trình đọc màn hình sẽ đọc nó, lúc này aria-label không thực sự cần thiết. Ví dụ:

Với điều kiện là nội dung con chứa text đó không phải là một phần tử có thuộc tính CSS "display:none" hoặc "visibility:hidden" hoặc "width[height]:0px". Đối với thẻ img được lồng trong thẻ a thì aria-label không cần thiết nếu thẻ img đã có thuộc tính alt rõ ràng.