Người khiếm thị và người nhìn kém vẫn dùng điện thoại hằng ngày. Họ bật trình đọc màn hình (TalkBack trên Android, VoiceOver trên iPhone), vuốt từng mục và nghe điện thoại đọc to nội dung. Với họ, một website có ảnh đẹp nhưng không có chữ mô tả, hay một nút chỉ là biểu tượng không tên, gần như vô dụng. Làm website dễ tiếp cận không đòi hỏi công nghệ đặc biệt; phần lớn là thói quen viết và dựng trang cẩn thận. Bài này đưa ra sáu điểm kiểm tra cụ thể và cách tự thử.
Các điểm dưới đây dựa trên nguyên tắc chung của bộ hướng dẫn quốc tế về khả năng tiếp cận nội dung web (WCAG). Bài viết không phải đánh giá chuẩn đầy đủ; doanh nghiệp cần tuân thủ yêu cầu riêng nên hỏi người có chuyên môn.
Người khiếm thị dùng website như thế nào
Trình đọc màn hình đọc nội dung theo thứ tự trong mã trang. Người dùng có thể nhảy giữa các tiêu đề, các liên kết, các ô nhập. Nghĩa là: website có tiêu đề rõ ràng, liên kết có tên, ảnh có mô tả thì họ "lướt" nhanh như người nhìn thấy. Ngược lại, họ phải nghe từng đoạn, hoặc nghe những câu vô nghĩa như "hình ảnh, IMG_2031" hay "nút, nút, nút".
Người nhìn kém (nhiều người lớn tuổi cũng thuộc nhóm này) thì thường phóng to chữ hoặc phóng to trang. Website vỡ bố cục khi phóng to, hay chữ xám nhạt trên nền trắng, đều làm khó họ.
Sáu điểm kiểm tra
1. Thẻ alt cho ảnh có nội dung
Thẻ alt là dòng chữ mô tả ảnh, trình đọc màn hình đọc dòng này thay cho ảnh. Viết như đang tả cho người qua điện thoại: "Bánh xèo tôm mực, đĩa 5 cái" thay vì "ảnh 1". Ảnh chỉ để trang trí (họa tiết, đường kẻ) thì để alt rỗng để trình đọc bỏ qua. Ảnh có chữ quan trọng (bảng giá, thực đơn chụp) thì phải có bản chữ ngay trên trang, vì alt không đủ chỗ cho cả bảng giá.
2. Tương phản chữ và nền đủ rõ
Chữ xám nhạt trên nền trắng, chữ trắng trên ảnh sáng là lỗi rất phổ biến trên các mẫu web "thời thượng". Nguyên tắc chung: chữ nội dung nên đậm màu trên nền sáng hoặc ngược lại. Có nhiều công cụ kiểm tra tương phản miễn phí trên mạng; chỉ cần nhập mã màu chữ và nền là biết đạt hay không.
3. Phóng to vẫn đọc được
Thử phóng trang lên gấp đôi trên máy tính, hoặc chỉnh cỡ chữ lớn trong cài đặt điện thoại. Chữ không được bị cắt, không chồng lên nhau, không phải cuộn ngang mới đọc hết dòng. Cũng đừng chặn tính năng phóng to bằng hai ngón tay trên điện thoại.
4. Tiêu đề theo đúng cấp
Mỗi trang một tiêu đề chính, các mục lớn là tiêu đề cấp 2, mục con là cấp 3. Đừng dùng thẻ tiêu đề chỉ để làm chữ to, cũng đừng dùng chữ in đậm thay cho tiêu đề. Người dùng trình đọc màn hình dựa vào cấp tiêu đề để nhảy nhanh đến "Bảng giá" hay "Liên hệ".
5. Nút và liên kết có tên
Nút chỉ có biểu tượng điện thoại, biểu tượng Zalo, kính lúp sẽ bị đọc thành "nút" không tên. Hãy có chữ đi kèm ("Gọi cửa hàng", "Nhắn Zalo") hoặc nhãn ẩn cho trình đọc. Liên kết cũng vậy: "Xem bảng giá dịch vụ" rõ hơn nhiều so với "Bấm vào đây".
6. Form có nhãn và báo lỗi bằng chữ
Mỗi ô nhập cần nhãn gắn với ô ("Số điện thoại"), không chỉ là chữ mờ bên trong ô (chữ này biến mất khi bắt đầu gõ). Khi khách nhập sai, báo lỗi bằng chữ cụ thể ("Số điện thoại cần 10 chữ số"), đừng chỉ tô viền ô màu đỏ, vì người không phân biệt được màu sẽ không biết lỗi ở đâu.
Tự thử trong mười phút
- Bật TalkBack (Android: Cài đặt → Hỗ trợ tiếp cận) hoặc VoiceOver (iPhone: Cài đặt → Trợ năng).
- Mở trang chủ website của bạn, nhắm mắt và thử tìm số điện thoại, giờ mở cửa.
- Nghe xem ảnh được đọc thế nào, các nút có tên không.
- Tắt trình đọc, tăng cỡ chữ lên lớn nhất và xem lại trang.
Lần đầu dùng trình đọc màn hình sẽ hơi lạ tay, nhưng chỉ vài phút là bạn hiểu ngay những chỗ khó nhất của website mình.
Bắt đầu từ đâu nếu website đã có sẵn
Không cần làm lại. Ưu tiên theo thứ tự: alt cho ảnh ở trang chủ và trang sản phẩm, tên cho các nút gọi, Zalo, rồi đến màu chữ và form. Khi chọn mẫu giao diện mới, hãy mở thử vài mẫu trong kho mẫu website của WebCut trên điện thoại, phóng to chữ và xem mẫu nào vẫn gọn. Nếu cần chỉnh lại website cho dễ đọc, có thể xem cách chúng tôi làm việc ở trang dịch vụ website ở Quảng Ngãi. Bài thiết kế cho khách lớn tuổi cũng có thêm gợi ý về cỡ chữ và nút bấm.
Muốn kiểm tra website của bạn với trình đọc màn hình? Nhắn Zalo 0947805184 hoặc gọi 0947588971, WebCut cùng bạn rà lại các điểm trên.
Câu hỏi thường gặp
Website nhỏ có cần quan tâm khả năng tiếp cận không?
Nên. Phần lớn việc cần làm rất nhỏ (alt ảnh, tên nút, màu chữ) mà giúp được cả người khiếm thị, người lớn tuổi và người đọc dưới nắng.
Viết thẻ alt có giúp SEO không?
Alt giúp Google hiểu ảnh, nên có ích cho tìm kiếm hình ảnh. Nhưng hãy viết để mô tả đúng ảnh, không nhồi từ khóa.
Có công cụ tự kiểm tra miễn phí không?
Có. Công cụ Lighthouse trong trình duyệt Chrome có mục "Accessibility" chỉ ra nhiều lỗi cơ bản như thiếu alt, thiếu nhãn, tương phản thấp.
