Tiêu chuẩn ‘Tên (name), Vai trò (role), và Giá trị (value)’ trong tiêu chuẩn truy cập web là những hướng dẫn quan trọng nhằm đảm bảo các yếu tố giao diện trên màn hình được truyền đạt chính xác đến người dùng khiếm thị hoặc người có khuyết tật nhận thức. Tuân thủ tiêu chuẩn này giúp công nghệ hỗ trợ truyền đạt chính xác nội dung và chức năng của các yếu tố, từ đó ngăn ngừa sai sót khi thao tác.
Bài viết này sẽ giải thích về những lợi ích mà ‘Tên, Vai trò, và Giá trị’ mang lại, cũng như cách triển khai cụ thể của chúng.
Tên (name), Vai trò (role), và Giá trị (value) là gì?
Tên, Vai trò, và Giá trị’ là thông tin giúp các công nghệ hỗ trợ, đặc biệt là các công cụ đọc màn hình và nhận diện giọng nói, có thể giải thích đúng các yếu tố trên trang web và truyền đạt thông tin cho người dùng.
-
Tên (name): Là tên của yếu tố, là văn bản dễ hiểu đối với người dùng. Ví dụ, khi một nút có nhãn “Gửi” hoặc “Tìm kiếm”, nhãn này sẽ tương ứng với “Tên”.
-
Vai trò (role): Là chức năng hoặc mục đích của yếu tố. Ví dụ, các nút bấm, ô kiểm, thanh trượt, v.v., được sử dụng để công nghệ hỗ trợ nhận dạng loại yếu tố.
-
Giá trị (value): Là trạng thái hiện tại hoặc nội dung đã được chọn của yếu tố. Ví dụ, trạng thái “Bật/Tắt” của ô kiểm hoặc vị trí của thanh trượt sẽ tương ứng với “Giá trị”.
Tầm quan trọng của ‘Tên, Vai trò, và Giá trị’ trong tiêu chuẩn WCAG
Trong WCAG (Web Content Accessibility Guidelines), việc các yếu tố giao diện có ‘Tên, Vai trò, và Giá trị’ chính xác là điều được khuyến khích. Điều này giúp công nghệ hỗ trợ có thể truyền đạt thông tin một cách chính xác như sau.
- Tên: Giúp truyền đạt ý nghĩa của yếu tố, giúp người dùng có thể thao tác mà không bị nhầm lẫn.
- Vai trò: Giúp làm rõ mục đích của yếu tố, từ đó truyền đạt được ý định thao tác.
- Giá trị: Giúp người dùng hiểu được trạng thái hiện tại của yếu tố, từ đó dễ dàng xác định được thao tác cần thiết.
Cách thiết lập Tên, Vai trò, và Giá trị
1. Thiết lập Tên
Bằng cách thiết lập tên dễ hiểu cho các yếu tố, người dùng sẽ dễ dàng nhận diện ý nghĩa và nội dung của yếu tố đó. Ví dụ, đối với nút bấm hoặc liên kết, có thể gắn nhãn văn bản hoặc sử dụng thuộc tính ARIA aria-label để thiết lập tên.
<button aria-label="Gửi">📤</button>
2. Thiết lập Vai trò
Để thiết lập vai trò cho một yếu tố cụ thể, bạn sử dụng thuộc tính role. Ví dụ, nếu bạn muốn xử lý một yếu tố liên kết như một nút bấm, có thể thiết lập như sau.
<a href="#" role="button">Gửi</a>
3. Thiết lập Giá trị
Đối với các yếu tố động, cần thiết lập giá trị để truyền đạt trạng thái hiện tại và giá trị cho người dùng. Việc thiết lập để người dùng có thể nắm bắt được giá trị hiện tại, như trạng thái của ô kiểm hoặc công tắc, là rất quan trọng.
<input type="checkbox" aria-checked="false" aria-label="Đồng ý">
Những điểm cần lưu ý khi thiết lập Tên, Vai trò, và Giá trị
-
Tính nhất quán giữa nhãn và tên: Đối với các yếu tố không có nhãn, sử dụng thuộc tính aria-label để giúp công nghệ hỗ trợ đọc chính xác nội dung.
-
Cập nhật các yếu tố động: Đối với các yếu tố có giá trị thay đổi (như ô kiểm, công tắc, thanh trượt, v.v.), sử dụng thuộc tính aria-live để công nghệ hỗ trợ có thể truyền đạt thông tin cập nhật theo thời gian thực.
-
Tránh sử dụng quá nhiều thuộc tính ARIA: Thuộc tính ARIA chỉ nên sử dụng ở những nơi cần thiết, và tránh cài đặt quá mức. Ví dụ, đối với yếu tố <button> gốc, không cần thiết phải thiết lập role=“button”.
Tóm tắt
Việc thiết lập chính xác ‘Tên, Vai trò, và Giá trị’ là yếu tố quan trọng để đảm bảo tất cả người dùng có thể sử dụng nội dung web một cách bình đẳng. Đặc biệt đối với người dùng sử dụng công nghệ hỗ trợ, khi tên gọi và chức năng của mỗi yếu tố được truyền đạt chính xác, điều này giúp ngăn ngừa sai sót và nhầm lẫn, từ đó tạo điều kiện cho thao tác mượt mà hơn.
Như một nguyên tắc cơ bản về truy cập, hãy chú ý đến việc thiết lập Tên, Vai trò, và Giá trị, và hướng đến việc xây dựng một trang web mà tất cả người dùng đều có thể thao tác một cách thoải mái.
Chúng tôi đã phát hành UUU Web Accessibility Widget Tool, công cụ giúp dễ dàng triển khai khả năng truy cập web. Nếu bạn quan tâm đến việc cải thiện khả năng truy cập, hãy xem thêm thông tin chi tiết.