Khám phá vai trò của accessible name trong HTML

Accessible name đóng vai trò then chốt giúp nội dung web dễ tiếp cận hơn với người dùng trình đọc màn hình. Chúng cung cấp văn bản mà trình đọc màn hình thông báo để mô tả một phần tử, hỗ trợ người dùng điều hướng và tương tác với nội dung một cách hiệu quả.

Xem thêm: HTML là gì? Ưu nhược điểm và vai trò của HTML trong lập trình web?

Accessible Name là gì?

Accessible name 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 trang web. Nó là một phần quan trọng của 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 web một cách hiệu quả.

Ví dụ:

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

Tốt nhất là sử dụng văn bản hiển thị làm accessible name. Nhiều phần tử, bao gồm <a> và <button>, có thể lấy accessible name từ nội dung của chúng. Ví dụ, với <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 là "Tìm hiểu thêm về các dịch vụ của chúng tôi". Nếu không có accessible name, trình đọc màn hình có thể thông báo các nhãn chung chung hoặc không hữu ích như "nút" hoặc "liên kết", khiến người dùng bối rối.

Cách tính toán Accessible Name

Accessible name của một phần tử được xác định bằng một thuật toán cụ thể 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á các nguồn văn bản khác nhau theo thứ tự ưu tiên được xác định để tính toán tên.

Đối với các phần tử như nút và liên kết, accessible name được tính như sau:

• aria-labelledby: Tham chiếu 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: Xác định trực tiếp accessible name ngay 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: Hoạt động như một phương án dự phòng khi không có phương pháp đặt tên nào khác được cung cấp.

Đối với các input của biểu mẫu (ví dụ: <input>, <textarea>, <select>), accessible name cũng có thể được xác định bởi các phần tử <label> được liên kết. Văn bản trong <label> được liên kết với input là nguồn chính cho tên.

Ví dụ về Accessible Name trong thực tế

Một nút có văn bản hiển thị:

<button>Submit</button>

Accessible name là "Submit". Một nút có biểu tượng và aria-label:

<button aria-label="Settings">
  <svg>...</svg>
</button>

Accessible name là "Settings". Một trường Input có <label> được liên kết:

<label for="search-box">Search</label>
<input id="search-box" type="text">

Accessible name là "Search".

Thứ tự ưu tiên của Accessible Name

Việc tính toán hơi khác nhau đối với các loại phần tử khác nhau khi xác định accessible name của một phần tử, nhưng thứ tự ưu tiên chung như sau: aria-labelledby: Tham chiếu 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. Điều này có mức ưu tiên cao nhất trên tất cả các loại phần tử. aria-label: Cung cấp một nhãn nội tuyến trực tiếp trên phần tử. Phần tử <label> được liên kết (đối với input biểu mẫu): Nội dung văn bản trong <label> được liên kết với điều khiển biểu mẫu (ví dụ: <input> hoặc <textarea>) được sử dụng làm accessible name. Nội dung phần tử: Văn bản hiển thị bên trong phần tử, chẳng hạn như nội dung của thẻ <button> hoặc <a>. Thuộc tính alt (đối với phần tử <img>): Mô tả nội dung hoặc mục đích của hình ảnh. Thuộc tính title: Hoạt động như một phương án dự phòng và chỉ được sử dụng nếu không có phương pháp đặt tên nào có mức ưu tiên cao hơn được cung cấp.

Những điểm chính cần ghi nhớ

• Accessible name 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 (ví dụ: nút, liên kết) nên có accessible name.
• Sử dụng các thuộc tính như aria-labelledby một cách tiết kiệm vì nó có thứ tự ưu tiên cao nhất và việc tính toán tên của một phần tử có aria-labelledby có thể phức tạp và tham chiếu đến nội dung ẩn.
• Hãy chắc chắn 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.

Cảm ơn các bạn đã theo dõi!