Sử dụng thuộc tính aria-label trong quy ước WCAG 2.0

3.2/5 - (4 bình chọn)

aria-label là một thuộc tính được HTML5 cung cấp nhằm tăng cường phần giải thích cho người khuyết tật. Nó là một phần quan trọng của Web Accessibility mà Code Tốt đã giới thiếu trước đây.

aria-label là gì?

Đây là một thuộc tính được thêm vào trong HTML5 nhằm giúp giải thích nội dung hoặc hành động trên các trình đọc (screen readers) hỗ trợ người khuyết tật.

Lấy ví dụ, bạn có một nút bấm đóng popup như sau:

<button>x</button>

Nếu trong trình đọc, nó sẽ chỉ phát ra âm thanh “x” mà không giúp người dùng nhận biết hành vi nào sẽ được tiến hành.

Khi sử dụng aria-label, trình đọc sẽ phát ra âm thanh, ví dụ:

<button aria-label="Close a popup">x</button>

Điều này là cần thiết nhằm giúp tăng khả năng tiếp cận của người khuyết tật với website của bạn.

Các kĩ thuật triển khai aria-label

Sử dụng aria-label cần xác định hoàn cảnh và môi trường hành vi sử dụng. Một số ví dụ phổ biến dưới đây giúp ta cân nhắc sử dụng thuộc tính này một cách hợp lý.

Tình huống 1: Nút đóng trong popup/modal

Tình huống này đã được mình mô tả ở trên, tức là phần mô tả nội dung cho các nút bấm theo dạng action (không liên kết).

<button class="modal__button js-modal-close" aria-label="Close a modal"><span class="icon-close"></span></button>

Tình huống 2: Sử dụng trong liên kết

Đối với các liên kết, việc gắn thêm mô tả giúp người dùng chỉ hướng tốt hơn, đặc biệt là với nhiều loại liên kết có cùng kiểu nhưng khác nội dung như “View Room”, “View Detail” đối với nhiều loại “Room” khác nhau chẳng hạn. Việc cụ thể hóa liên kết bằng cách gắn thêm thông tin là điều cần thiết.

<a href="/view-room?type=standard" aria-label="View room Standard">View room</a>
<a href="/view-room?type=premium" aria-label="View room Premium">View room</a>

Tình huống 3: Form nhập dữ liệu với mô tả

Tình huống này chỉ dấu aria-label giúp người dùng phân biệt cụ thể các loại input họ sẽ nhập.

<div role="group" aria-labelledby="groupLabel">
  <span id="groupLabel>Work Phone</span>
  <input type="number" aria-label="country code" value="084">
  <input type="number" aria-label="area code">
  <input type="number" aria-label="subscriber number">
</div>

Tình huống 4: Sử dụng kết hợp cùng thuộc tính role

Với các thuộc tính role trong HTML5, việc xác định thêm aria-label là cần thiết nhằm giúp phân tách các loại khác nhau.

<div role="navigation" aria-label="Primary Navigation">
  <ul></ul>
</div>
<div role="navigation" aria-label="Secondary Navigation">
  <ul></ul>
</div>

Thuộc tính arial-labelby

Bên cạnh thuộc tính aria-label vừa nhắc đến, ta cũng cần biết cách sử dụng aria-labelby trong các trường hợp được xác định.

arial-labelby khác biệt đôi chút vì yêu cầu xác định đối tượng sẽ đóng vai trò label trong một khu vực. Nói thì khó nhưng tham khảo ví dụ dưới đây sẽ thấy rất dễ hiểu:

<section class="hero" aria-labelby="hero-title">
  <h2 id="hero-title">Welcome to our team</h2>
</section>

Thực chất, nó giống như một chỉ định vào 1 element có chứa id để screen reader có thể đọc. Cũng bởi nguyên do trên, nó yêu cầu:

Element chỉ định cần phải sử dụng thuộc tính id="".
Element không bắt buộc nằm trong hay nằm ngoài, miễn là nó xác định trong document là được.
aria-labelby sẽ ghi đè nếu có các thuộc tính khác, như aria-label hay tag <label>

Một ví dụ khác về aria-labelby để các bạn nắm được rõ hơn:

<span id="types-label">Types</span>
<div class="form__group" role="radiogroup" aria-labelby="types-label"></div>

Tài liệu tham khảo

Các bạn quan tâm có thể tham khảo khóa học Web Accessibility Compliance (TreeHouse) để nắm vững hơn nhé.

Nguyễn Minh Khôi

Giám đốc tại Công ty CP CODE TỐT. Quản lý ngôn ngữ bản địa tiếng Việt tại WordPress. Là tác giả chính tại codetot.net, Khôi muốn ghi lại một sốvấn đề kỹ thuật trong quá trình phát triển các dự án website với khách hàng.