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?
<button>X</button>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í dụ với cú pháp HTML sau:<button aria-label="Close Popup">X</button>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:
<a href='/'>Trở lại trang chủ</a>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:
<a aria-label='Trở lại trang chủ' href='/'>🏠</a>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ụ:
<a href='/'><div>Quay trở lại trang chủ</div></a>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.
<a href='/doremon.jpg'>
<img alt='hình ảnh của doremon src='/doremon.jpg'>
</a>Chỉ sử dụng thuộc tính aria-label khi thẻ không diễn tả bất kì nội dung nào có thể đọc được hoặc diễn tả một nội dung không cụ thể, rõ ràng.
Một số ví dụ
Đóng mở menu/popup
<button aria-label="Close Menu">X</button><a aria-label='Trở lại trang chủ' href='/'>🏠</a><input type="text" aria-label="Nhập tên của bạn" value="Nguyen Van A">