Vai Trò của Tên Khả Dụng (Accessible Name) trong HTML

Tên khả dụng là một yếu tố cực kỳ quan trọng trong việc tạo ra nội dung web dễ tiếp cận cho tất cả người dùng, đặc biệt là những người sử dụng trình đọc màn hình. Tên này cung cấp thông tin mô tả cho các phần tử trên trang web, giúp người dùng có thể dễ dàng điều hướng và tương tác với nội dung mà không gặp khó khăn.

Tên Khả Dụng Là Gì?

Tên khả dụng (accessible name) đóng vai trò là văn bản hoặc nhãn mà các công nghệ hỗ trợ, như trình đọc màn hình, thông báo để mô tả một phần tử trên website. Điều này cực kỳ quan trọng để cải thiện khả năng tiếp cận kỹ thuật số, cho phép người dùng dựa vào công nghệ hỗ trợ để hiểu và tương tác với nội dung một cách hiệu quả.

Ví Dụ Về Tên Khả Dụng

Một nút có thể có tên khả dụng như "Gửi biểu mẫu".
Một liên kết có thể được gọi là "Tìm hiểu thêm về các dịch vụ của chúng tôi".

Theo lý tưởng, văn bản hiển thị nên được sử dụng làm tên khả dụng. Nhiều phần tử HTML như <a> và <button> tự động lấy tên khả dụng từ nội dung của chúng. Chẳng hạn, với đoạn mã

html Copy

<a href="services.html">Tìm hiểu thêm về các dịch vụ của chúng tôi</a>

accessible name của liên kết này chính là "Tìm hiểu thêm về các dịch vụ của chúng tôi". Nếu không có tên khả dụng, trình đọc màn hình có thể thông báo các nhãn không rõ ràng như "nút" hoặc "liên kết", gây khó khăn cho người dùng trong việc hiểu chức năng của phần tử.

Cách Tính Toán Tên Khả Dụng

Accessible name của một phần tử được xác định thông qua một thuật toán gọi là Thuật Toán Tính Toán Tên và Mô Tả Truy Cập (Accessible Name and Description Computation). Thuật toán này đánh giá nhiều nguồn văn bản khác nhau theo một thứ tự ưu tiên nhất định để tính toán tên khả dụng.

Đối Với Các Phần Tử Như Nút Và Liên Kết, Cách Tính Toán Là:

aria-labelledby: Tham chiếu đến một hoặc nhiều phần tử mà nội dung văn bản của chúng cung cấp tên.
aria-label: Đặt tên khả dụng trực tiếp trong phần tử.
Nội dung phần tử: Văn bản hiển thị bên trong chính phần tử.
Thuộc tính title: Là phương án dự phòng khi không có các nguồn tên khác.

Đối Với Các Input Của Biểu Mẫu:

Accessible name có thể được xác định bởi các phần tử <label> liên kết với chúng. Văn bản trong <label> sẽ là nguồn chính cho tên.

Ví Dụ Về Tên Khả Dụng Trong Thực Tế

Một nút có văn bản hiển thị:
html Copy
```
<button>Gửi</button>
```
Accessible name là "Gửi".
Một nút có biểu tượng và aria-label:
html Copy
```
<button aria-label="Cài đặt">
  <svg>...</svg>
</button>
```
Accessible name là "Cài đặt".
Một trường input có <label> liên kết:
html Copy
```
<label for="search-box">Tìm kiếm</label>
<input id="search-box" type="text">
```
Accessible name là "Tìm kiếm".

Thứ Tự Ưu Tiên Của Tên Khả Dụng

Thứ tự ưu tiên trong việc tính toán tên khả dụng khác nhau với các loại phần tử nhưng thường theo thứ tự sau:

aria-labelledby: Mức ưu tiên cao nhất.
aria-label: Nhãn nội tuyến trực tiếp trên phần tử.
Nội dung văn bản trong phần tử: Như văn bản của thẻ <button> hoặc <a>.
Thuộc tính alt: Đối với các phần tử <img>, mô tả mục đích của hình ảnh.
Thuộc tính title: Là phương án dự phòng cuối cùng.

Những Điểm Chính Cần Nhớ

Tên khả dụng rất cần thiết để cải thiện khả năng sử dụng cho người dùng trình đọc màn hình.
Tất cả các phần tử điều khiển (như nút, liên kết) nên có tên khả dụng để đảm bảo trải nghiệm người dùng tối ưu.
Sử dụng các thuộc tính như aria-labelledby một cách tiết kiệm vì chúng có thứ tự ưu tiên cao nhất và có thể gây phức tạp trong việc tính toán.
Hãy kiểm tra bằng trình đọc màn hình để đảm bảo những gì được thông báo cho người dùng là hợp lý và chính xác.

Cảm ơn bạn đã theo dõi bài viết này! Hy vọng rằng nó đã giúp bạn hiểu rõ hơn về vai trò của tên khả dụng trong HTML.
source: viblo

Khám Phá Vai Trò của Tên Khả Dụng (Accessible Name) trong HTML