Khả năng tiếp cận web là cách thiết kế và xây dựng nội dung để nhiều người có thể đọc, hiểu và thao tác, kể cả khi khả năng nhìn của họ bị hạn chế. Với người thị lực kém, một trang web dễ sử dụng không chỉ cần chữ lớn hơn. Văn bản, độ tương phản, bố cục, khả năng phóng to, thao tác bàn phím và cách kiểm thử phải hỗ trợ lẫn nhau.
Năm nhóm nguyên tắc dưới đây giúp đội ngũ thiết kế và phát triển nhận ra những điểm cần kiểm tra trước khi xuất bản một trang web.
Thị lực kém là gì?
Thị lực kém (low vision) là tình trạng suy giảm thị giác vẫn gây khó khăn trong sinh hoạt dù người dùng đã áp dụng biện pháp điều chỉnh phù hợp. Người thị lực kém không nhất thiết mất hoàn toàn khả năng nhìn. Nhiều người vẫn đọc và thao tác bằng phần thị giác còn lại, thường kết hợp với phóng to màn hình, tăng tương phản hoặc thay đổi cách hiển thị.
Trải nghiệm của mỗi người khác nhau, nhưng những khó khăn thường gặp có thể gồm:
- Hình ảnh hoặc chữ bị mờ: chi tiết nhỏ và nét chữ mảnh khó nhận biết.
- Trường nhìn bị thu hẹp hoặc thiếu một phần: người dùng khó quan sát đồng thời toàn bộ màn hình.
- Độ nhạy tương phản giảm: chữ và thành phần giao diện dễ hòa vào nền.
- Nhạy cảm với ánh sáng chói: nền quá sáng hoặc vùng sáng mạnh có thể gây khó chịu và cản trở việc đọc.
- Khó phân biệt một số màu: thông tin chỉ được biểu đạt bằng màu sắc có thể bị bỏ sót.
Vì những nhu cầu này không giống nhau, thiết kế nên cho phép người dùng điều chỉnh cách hiển thị thay vì áp đặt một cấu hình duy nhất.
1. Làm cho văn bản dễ đọc
Cỡ chữ, kiểu chữ và khoảng cách
Cỡ chữ khoảng 16px có thể dùng làm điểm khởi đầu cho nội dung chính, nhưng một con số cố định không bảo đảm khả năng đọc. Trang web còn phải cho phép người dùng phóng to hoặc tăng cỡ chữ mà nội dung không bị che, cắt hoặc mất chức năng.
- Ưu tiên phông chữ ít trang trí, có hình dáng ký tự rõ ràng; phông sans-serif thường là một lựa chọn dễ thử nghiệm.
- Tránh chữ quá mảnh, đoạn văn viết toàn chữ in hoa và dòng văn bản quá sít nhau.
- Dùng khoảng cách dòng và khoảng cách đoạn đủ để mắt nhận ra từng dòng, nhưng không tách các phần liên quan thành những khối rời rạc.
- Kiểm tra cả nội dung chính, nhãn biểu mẫu, nút, thông báo lỗi và chú thích, không chỉ phần thân bài.
Độ tương phản và cách nhận biết liên kết
Độ tương phản là mức khác biệt về độ sáng giữa chữ và nền. Theo WCAG và các hướng dẫn cải thiện khả năng tiếp cận web, tỷ lệ tương phản tối thiểu 4,5:1 áp dụng cho văn bản thông thường. Tuy nhiên, đạt tỷ lệ này không thay thế việc kiểm tra trực tiếp trên các màn hình và chế độ hiển thị khác nhau.
- Chọn chữ tối trên nền sáng hoặc chữ sáng trên nền tối với độ tương phản đủ rõ.
- Không truyền đạt trạng thái chỉ bằng màu. Ví dụ, trường nhập sai nên có thông báo bằng chữ thay vì chỉ đổi viền sang màu đỏ.
- Làm cho liên kết dễ nhận biết bằng gạch chân hoặc dấu hiệu trực quan khác, thay vì chỉ dùng một màu hơi khác phần văn bản xung quanh.
2. Giảm gánh nặng thị giác bằng bố cục rõ ràng
Khoảng trắng phải thể hiện quan hệ giữa các phần
Khoảng trắng giúp phân tách tiêu đề, đoạn văn, nhóm điều khiển và các khu vực chức năng. Mục tiêu không phải là làm trang trống hơn, mà là giúp người dùng nhận ra phần nào thuộc cùng một nhóm và phần nào bắt đầu một chủ đề mới.
- Dùng tiêu đề theo thứ tự hợp lý và giữ cách trình bày nhất quán giữa các phần.
- Tránh đặt quá nhiều cột, thẻ nội dung hoặc lời kêu gọi hành động cạnh nhau.
- Nếu dùng màu nền để phân chia khu vực, vẫn phải bảo đảm chữ và thành phần tương tác có độ tương phản rõ.
- Loại bỏ chuyển động trang trí không cần thiết, đặc biệt là hiệu ứng nhấp nháy hoặc chuyển động nhanh làm người dùng khó tập trung vào nội dung.
Cho phép người dùng thay đổi cách hiển thị
Người nhạy cảm với ánh sáng có thể thích giao diện tối, trong khi người có độ nhạy tương phản thấp lại đọc tốt hơn với một cấu hình khác. Vì vậy, chế độ tối nên là một lựa chọn, không phải giải pháp duy nhất cho mọi người.
Khi trang web cung cấp điều khiển đổi cỡ chữ, độ tương phản hoặc giao diện sáng và tối, nhãn của từng lựa chọn cần rõ ràng và trạng thái đã chọn phải dễ nhận biết. Cách tiếp cận này phù hợp với nguyên tắc thay đổi cách hiển thị theo nhu cầu người dùng.
3. Giữ nội dung sử dụng được khi phóng to
Người thị lực kém thường phóng to toàn trang hoặc dùng công cụ phóng đại màn hình. Khi đó, bố cục không cần giữ nguyên hình dạng ban đầu; nội dung cần tự sắp xếp lại để vẫn đọc và thao tác được.
- Cho phép dòng chữ xuống hàng thay vì cắt bớt nội dung.
- Tránh để nút, hộp thoại hoặc thanh cố định che mất văn bản và thành phần đang thao tác.
- Giữ thứ tự đọc hợp lý khi bố cục nhiều cột chuyển thành một cột.
- Kiểm tra menu, biểu mẫu, bảng và thông báo ở nhiều mức phóng to, không chỉ kiểm tra đoạn văn.
Thiết kế đáp ứng hỗ trợ mục tiêu này khi các thành phần co giãn và sắp xếp lại theo không gian còn lại. Một trang chỉ làm chữ lớn hơn nhưng khiến nút bị khuất hoặc nội dung phải cuộn ngang liên tục vẫn gây khó sử dụng.
4. Hỗ trợ bàn phím và hiển thị tiêu điểm rõ ràng
Một số người thị lực kém dùng bàn phím vì con trỏ chuột khó quan sát ở mức phóng đại cao. Tất cả liên kết, nút và trường nhập liệu cần có thể tiếp cận theo một thứ tự hợp lý bằng phím Tab.
Tiêu điểm bàn phím là dấu hiệu cho biết thành phần nào sẽ nhận thao tác tiếp theo. Viền hoặc nền của thành phần đang có tiêu điểm phải đủ rõ và không bị loại bỏ. Bài viết về tiêu điểm trong WCAG giải thích kỹ hơn khái niệm này.
- Thử đi qua toàn bộ trang bằng Tab và Shift+Tab.
- Kiểm tra xem menu, hộp thoại và biểu mẫu có thể mở, sử dụng và đóng bằng bàn phím hay không.
- Giữ tiêu điểm luôn nhìn thấy, kể cả khi trang có đầu trang hoặc chân trang cố định.
- Chỉ thêm phím tắt riêng khi chức năng và cách dùng được giải thích rõ; phím tắt không nên thay thế thao tác bàn phím tiêu chuẩn.
5. Kết hợp công cụ kiểm tra với phản hồi của người dùng
Công cụ kiểm tra khả năng tiếp cận có thể phát hiện nhanh một số vấn đề như độ tương phản thấp hoặc cấu trúc thiếu sót. Công cụ không thể tự xác nhận rằng nội dung dễ đọc, thứ tự thao tác hợp lý hoặc giao diện thoải mái với người thị lực kém.
- Kiểm tra tự động: tìm lỗi có thể đo được và ghi lại vị trí cần xem xét.
- Kiểm tra thủ công: phóng to trang, thay đổi cách hiển thị và hoàn thành các tác vụ chỉ bằng bàn phím.
- Thử nghiệm với người dùng: mời người thị lực kém tham gia từ giai đoạn thiết kế, quan sát điểm họ gặp trở ngại và ưu tiên sửa các lỗi cản trở tác vụ.
- Kiểm tra lại sau khi sửa: bảo đảm thay đổi ở một khu vực không tạo ra vấn đề mới ở khu vực khác.
Danh sách kiểm tra trước khi xuất bản
| Hạng mục | Câu hỏi cần trả lời |
|---|---|
| Văn bản | Chữ có rõ, khoảng cách dễ đọc và vẫn đầy đủ khi phóng to không? |
| Tương phản | Chữ, liên kết, nút và trạng thái có nổi bật trên nền không? |
| Bố cục | Các nhóm nội dung có dễ phân biệt và giữ đúng thứ tự khi màn hình thay đổi không? |
| Bàn phím | Mọi chức năng có dùng được bằng bàn phím và tiêu điểm có luôn nhìn thấy không? |
| Tùy chỉnh | Người dùng có thể chọn cách hiển thị phù hợp mà không mất nội dung hoặc chức năng không? |
| Kiểm thử | Kết quả công cụ đã được đối chiếu bằng kiểm tra thủ công và phản hồi thực tế chưa? |
Kết luận
Thiết kế cho người thị lực kém bắt đầu từ nội dung dễ đọc, nhưng không dừng ở cỡ chữ. Độ tương phản, bố cục, khả năng tùy chỉnh, phóng to, thao tác bàn phím và kiểm thử thực tế quyết định liệu người dùng có thể hoàn thành công việc trên trang hay không.
Nếu cần tìm hiểu một giải pháp hỗ trợ triển khai khả năng tiếp cận web, hãy xem UUU Web Accessibility Widget Tool.