aria-label là gì và sử dụng như thế nào?

aria-label là một thuộc tính HTML được sử dụng để cung cấp một nhãn văn bản thay thế cho một phần tử HTML. Nhãn này được sử dụng bởi các công nghệ hỗ trợ, chẳng hạn như trình đọc màn hình, để cung cấp thông tin về phần tử cho người dùng khuyết tật và là tiêu chuẩn trong A11y.

Đừng nhầm lẫn, thuộc tính aria-label không thay thế cho thuộc tính alt của thẻ <img>. Thuộc tính alt được sử dụng để cung cấp văn bản thay thế cho hình ảnh, trong khi aria-label được sử dụng cho các phần tử HTML khác.

Cách sử dụng thuộc tính aria-label

Thuộc tính aria-label được thêm vào phần tử HTML mà bạn muốn cung cấp nhãn. Cú pháp như sau:

<button aria-label="Toggle a mobile menu">
  <svg></svg>
</button>

Trong ví dụ này, nút bấm không chứa bất kỳ chữ nào nhưng trình đọc màn hình sẽ đọc “Toggle a mobile menu” cho người dùng khuyết tật.

Khi nào nên sử dụng thuộc tính aria-label?

Bạn nên sử dụng aria-label trong các trường hợp sau:

• Khi phần tử HTML không có văn bản có ý nghĩa, chẳng hạn như nút bấm hoặc biểu tượng.
• Khi văn bản của phần tử HTML không đầy đủ mô tả chức năng của nó.
• Khi bạn muốn cung cấp thêm thông tin về phần tử HTML cho người dùng khuyết tật.

Các tình huống sử dụng thuộc tính aria-label cụ thể

Thêm aria-label vào các nút bấm để cung cấp mô tả rõ ràng hơn về chức năng của chúng (như ví dụ ở trên).

Gợi ý: khi bạn có một khu vực sử dụng icon SVG, hoặc ảnh, hoặc các nội dung media, aria-label giúp máy đọc đọc được thông tin này thay vì phải ẩn.

Thêm vào vùng chứa nội dung để cung cấp thông tin cụ thể hơn.

<div role="region" aria-label="Bài viết mới">
  <h2>You might be interest</h2>
  <ul>
    <li><a href="/gia-vang-15-10/">Giá vàng ngày 15/10</a></li>
    <li><a href="/gia-vang-14-10/">Giá vàng ngày 14/10</a></li>
    <li><a href="/gia-vang-13-10/">Giá vàng ngày 13/10</a></li>
  </ul>
</div>

Trong ví dụ này, vùng chứa có vai trò là region và aria-label là “Bài viết mới”. Điều này cho trình đọc màn hình biết rằng vùng chứa này chứa các bài báo tin tức mới nhất.

Thêm aria-label vào các yếu tố điều khiển để cung cấp hướng dẫn cho người dùng

<input id="price" type="range" min="0" max="1000000" value="100000" aria-label="Điều chỉnh lọc theo giá">

Trong ví dụ này, thanh trượt có giá trị mặc định là 100,000đ và aria-label là “Điều chỉnh lọc theo giá”.

Thêm aria-label vào các bảng để cung cấp thông tin về hàng và cột

<table>
  <thead>
    <tr>
      <th scope="col" aria-label="Tên">Tên</th>
      <th scope="col" aria-label="Tuổi">Tuổi</th>
      <th scope="col" aria-label="Công ty">Công ty</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Khôi Nguyễn</td>
      <td>35</td>
      <td>Hà Nội</td>
    </tr>
  </tbody>
</table>

Trong ví dụ này, bảng có các tiêu đề cột với aria-label. Điều này cho trình đọc màn hình biết thông tin được hiển thị trong mỗi cột.

Lưu ý: Đây chỉ là một vài ví dụ về cách sử dụng aria-label. Có rất nhiều cách khác để sử dụng aria-label để cải thiện khả năng truy cập của trang web của bạn.

Tham khảo thêm

Đọc thêm trên MDN – aria-label

Đọc thêm về ARIA – các thẻ hỗ trợ A11y

Xem sự hỗ trợ của các trình duyệt với thuộc tính aria-label