Nguyên tắc “Hiểu biết được” trong khả năng tiếp cận web yêu cầu thông tin được cung cấp dưới hình thức dễ dàng cho người dùng tiếp nhận qua thị giác hoặc thính giác. Nguyên tắc này rất quan trọng để đảm bảo rằng những người có khuyết tật về thị giác hoặc thính giác cũng có thể truy cập thông tin một cách chính xác và thoải mái. Bài viết này sẽ giải thích ý nghĩa của nguyên tắc “Hiểu biết được” và các phương pháp cụ thể để thực hiện nguyên tắc này.
Nguyên tắc “Hiểu biết được” là gì?
“Hiểu biết được” có nghĩa là cung cấp thông tin và các yếu tố giao diện của nội dung web theo cách dễ dàng để tất cả người dùng có thể nhận thức được. Nguyên tắc này dựa trên ba điểm chính sau:
- Có thể phân biệt được giữa nội dung văn bản và nội dung không phải văn bản
- Cung cấp các phương tiện thay thế để bổ sung thông tin thính giác và thông tin thị giác
- Cho phép người dùng tự điều chỉnh khả năng nhìn thấy thông tin hoặc nhận thức thính giác của mình
Các phương pháp cụ thể để thực hiện nguyên tắc “Hiểu biết được”
1. Cung cấp văn bản thay thế cho hình ảnh và đồ họa
Hãy thiết lập văn bản thay thế (alt attribute) thích hợp cho tất cả hình ảnh, để người dùng có khiếm khuyết về thị giác có thể hiểu được nội dung của hình ảnh qua phần mềm đọc màn hình. Ví dụ, với hình ảnh sản phẩm, bạn có thể thêm một mô tả ngắn gọn truyền đạt ý nghĩa của hình ảnh, như “Áo sơ mi đỏ, có logo ở phía trước”.
<img src="red-shirt.jpg" alt="Áo sơ mi đỏ, có logo ở phía trước">
2. Cung cấp phụ đề hoặc văn bản thay thế cho nội dung video và âm thanh
Cung cấp phụ đề hoặc bản ghi (transcript) cho nội dung âm thanh và video để người khuyết tật thính giác có thể hiểu thông tin. Ví dụ, bạn có thể nhúng phụ đề vào video hoặc cung cấp liên kết đến tệp bản ghi riêng biệt.
<video controls>
<source src="video.mp4" type="video/mp4">
<track src="subtitles.vtt" kind="subtitles" srclang="ja" label="Phụ đề tiếng Nhật">
</video>
3. Cung cấp thông tin không chỉ dựa vào màu sắc
Để người dùng không thể dựa vào thị giác cũng có thể hiểu thông tin một cách chính xác, hãy tránh việc phân biệt thông tin chỉ bằng màu sắc. Đặc biệt trong các thông báo lỗi hoặc phần nhấn mạnh, việc sử dụng thêm biểu tượng hoặc văn bản cùng với màu sắc sẽ rất hiệu quả.
Ví dụ: Bên cạnh màu đỏ, bạn có thể thêm một biểu tượng có chữ “Lỗi” vào thông báo lỗi, giúp những người không cần hỗ trợ thị giác cũng dễ dàng hiểu được tình huống.
<p class="error">
<span aria-hidden="true">⚠️</span> <span>Có lỗi trong nội dung nhập</span>
</p>
4. Đảm bảo tỷ lệ tương phản
Giữ tỷ lệ tương phản giữa màu chữ và màu nền ít nhất là 4.5:1 để tăng cường khả năng nhận diện. Đặc biệt, tránh sử dụng chữ sáng trên nền sáng hoặc chữ tối trên nền tối, và luôn xem xét khả năng đọc dễ dàng. Để kiểm tra tỷ lệ tương phản phù hợp, cũng nên sử dụng công cụ kiểm tra tương phản.
Những điểm bổ sung để nâng cao khả năng ‘Hiểu biết được’
- Cho phép thay đổi kích thước phông chữ linh hoạt: Cung cấp tính năng cho phép người dùng điều chỉnh kích thước văn bản, giúp những người có hạn chế về thị giác cũng có thể dễ dàng đọc.
- Cung cấp thông tin quan trọng dưới dạng văn bản: Dù nội dung được giải thích bằng hình ảnh hoặc video, hãy bổ sung mô tả văn bản cho các thông tin quan trọng.
Tóm tắt
Bằng cách áp dụng nguyên tắc “Hiểu biết được”, chúng ta có thể cung cấp nội dung web dễ tiếp cận cho tất cả người dùng, bao gồm cả những người có khuyết tật về thị giác và thính giác. Những cải tiến đơn giản như văn bản thay thế, phụ đề, và điều chỉnh tỷ lệ tương phản có thể giúp cải thiện đáng kể khả năng tiếp cận.
Khi tạo ra nội dung web, hãy chú ý thiết kế sao cho mọi người đều có thể sử dụng một cách bình đẳng, với một thiết kế dễ hiểu và tiếp cận được.
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.