Một ứng dụng giao hàng dùng chữ xám nhạt trên nền trắng cho thời gian dự kiến, trông rất thanh lịch trong phòng họp máy lạnh. Ra ngoài đường, dưới nắng trưa, chính người thiết kế cũng phải nghiêng máy mới đọc được.
Đó là điều hay bị hiểu sai về khả năng tiếp cận (accessibility): nó không chỉ phục vụ một nhóm nhỏ người khuyết tật. Người đứng dưới nắng, người đang bế con một tay, người lớn tuổi mắt kém, người vừa mổ mắt, tất cả đều gặp đúng những rào cản đó.
Bốn nguyên tắc làm khung
Bộ hướng dẫn tiếp cận nội dung web (WCAG) xếp mọi yêu cầu vào bốn nguyên tắc. Nhớ bốn chữ này để biết mình đang kiểm cái gì:
- Nhận biết được: người dùng thấy hoặc nghe được thông tin (tương phản, chữ thay thế cho ảnh, phụ đề).
- Thao tác được: dùng được bằng bàn phím, vùng chạm đủ lớn, không có gì bắt thao tác quá nhanh.
- Hiểu được: nhãn rõ, lỗi được giải thích, hành vi nhất quán.
- Bền vững: mã đủ chuẩn để trình đọc màn hình và công nghệ hỗ trợ hiểu đúng.
Mức mà phần lớn tổ chức nhắm tới là mức AA. Bài này tập trung vào những gì nhà thiết kế kiểm soát được trực tiếp.
Tương phản: các ngưỡng cần thuộc
| Thành phần | Tỷ lệ tối thiểu (mức AA) |
|---|---|
| Chữ thường | 4,5 : 1 |
| Chữ lớn (từ khoảng 24px thường hoặc 18,5px đậm trở lên) | 3 : 1 |
| Thành phần giao diện và đồ hoạ mang thông tin (viền ô nhập, biểu tượng, đường biểu đồ) | 3 : 1 so với màu bên cạnh |
| Chữ trang trí, logo, thành phần bị vô hiệu | Không bắt buộc |
Vài hệ quả thực tế:
- Xám #999 trên trắng chỉ đạt khoảng 2,8:1, không đủ cho chữ thường. Muốn chữ phụ màu xám trên nền trắng đạt 4,5:1, xám phải đậm cỡ #767676 trở xuống.
- Chữ trắng trên nút màu cam sáng hay vàng thường trượt. Hoặc làm màu nút đậm hơn, hoặc dùng chữ tối.
- Ô nhập chỉ có viền xám rất nhạt không đạt 3:1, người mắt kém không thấy ô ở đâu.
- Chữ đặt trên ảnh: tương phản thay đổi theo từng vùng ảnh. Thêm lớp phủ tối hoặc đặt chữ trong khối nền.
Công cụ: plugin kiểm tương phản trong Figma, hoặc công cụ kiểm tương phản trực tuyến. Kiểm bằng số, không bằng mắt; mắt bạn đang nhìn màn hình tốt trong phòng đủ sáng.
Không chỉ dựa vào màu
Khoảng 1 trong 12 nam giới có một dạng rối loạn sắc giác, phổ biến nhất là khó phân biệt đỏ và xanh lá. Những chỗ hay mắc:
- Ô nhập lỗi chỉ đổi viền sang đỏ. Thêm biểu tượng và dòng chữ giải thích lỗi.
- Biểu đồ đường phân biệt các chuỗi chỉ bằng màu. Thêm nhãn trực tiếp ở cuối đường hoặc kiểu nét khác nhau.
- Trạng thái đơn hàng xanh là xong, đỏ là huỷ. Thêm chữ “Đã giao”, “Đã huỷ”.
- Liên kết trong đoạn văn chỉ khác màu. Thêm gạch chân.
Cách kiểm nhanh: chuyển bản thiết kế sang thang xám. Nếu còn phân biệt được mọi trạng thái thì ổn.
Trạng thái tiêu điểm: thứ hay bị xoá nhất
Người dùng bàn phím, người dùng công tắc hỗ trợ, và cả người dùng thường khi bấm Tab để điền biểu mẫu đều dựa vào vòng tiêu điểm (focus ring) để biết mình đang ở đâu. Nhiều nhóm xoá nó đi vì “trông xấu”.
Đừng xoá, hãy thiết kế lại: một viền 2px màu tương phản 3:1 với nền, cách thành phần 2px. Thiết kế nó như một trạng thái chính thức của mọi thành phần, cạnh trạng thái di chuột và nhấn.
Cũng cần đánh dấu thứ tự tiêu điểm trên các màn phức tạp: bấm Tab lần lượt sẽ đi qua những gì, theo thứ tự nào. Thứ tự này nên trùng thứ tự đọc.
Nhãn và chữ thay thế
- Ô nhập phải có nhãn nhìn thấy được. Chữ gợi ý mờ trong ô (placeholder) biến mất khi gõ, người dùng quên mình đang điền gì, và thường không đạt tương phản.
- Nút chỉ có biểu tượng cần nhãn cho trình đọc màn hình. Ghi nhãn này ngay trong bản thiết kế để lập trình không phải đoán: nút kính lúp là “Tìm kiếm”, không phải “Kính lúp”.
- Ảnh mang thông tin cần chữ thay thế mô tả thông tin đó. Ảnh trang trí thì đánh dấu để trình đọc bỏ qua.
- Thông báo lỗi nói rõ sai gì và sửa thế nào: “Số điện thoại cần 10 chữ số”, không phải “Dữ liệu không hợp lệ”.
Chữ co giãn
Cả iOS lẫn Android cho người dùng tăng cỡ chữ hệ thống. Nhiều người lớn tuổi đặt ở mức lớn nhất. Giao diện thiết kế cứng chiều cao sẽ cắt chữ, chồng chữ.
Kiểm bằng cách làm một bản các màn quan trọng với cỡ chữ tăng lên 150–200%. Những chỗ vỡ thường gặp: nút có chiều cao cố định, thanh điều hướng dưới với nhãn dài, thẻ có số dòng cố định.
Quy trình kiểm một màn hình trong 60 phút
- 10 phút – tương phản: kiểm mọi cặp chữ/nền và viền thành phần, ghi cặp nào trượt.
- 5 phút – thang xám: chuyển sang xám, tìm chỗ chỉ dựa vào màu.
- 10 phút – vùng chạm: đo mọi nút và biểu tượng bấm được, tối thiểu 44 hoặc 48.
- 10 phút – tiêu điểm: vẽ trạng thái tiêu điểm và đánh số thứ tự Tab.
- 10 phút – nhãn: rà mọi ô nhập, nút biểu tượng, ảnh, thông báo lỗi.
- 10 phút – chữ lớn: nhân đôi cỡ chữ, xem chỗ nào vỡ.
- 5 phút – ghi chú bàn giao: gom tất cả vào một danh sách cho lập trình.
Nếu sản phẩm đã chạy, thêm một bước: bật trình đọc màn hình có sẵn trên điện thoại (VoiceOver hoặc TalkBack), nhắm mắt và thử hoàn thành một việc đơn giản. Năm phút trải nghiệm này dạy nhiều hơn mọi danh sách kiểm.
Việc nên làm tiếp theo: chọn màn quan trọng nhất trong sản phẩm của bạn, thường là màn thanh toán hoặc đăng ký, và chạy đúng quy trình 60 phút trên. Sửa xong những gì trượt tương phản và thiếu nhãn là đã giải quyết phần lớn vấn đề mà người dùng thật gặp phải.
Câu hỏi thường gặp
Tỷ lệ tương phản chữ tối thiểu là bao nhiêu?
Theo WCAG mức AA, chữ thường cần ít nhất 4,5:1 so với nền, chữ lớn cần 3:1. Viền thành phần và biểu tượng mang thông tin cũng cần 3:1.
WCAG là gì?
Là bộ hướng dẫn tiếp cận nội dung web, đưa ra các tiêu chí giúp sản phẩm số dùng được với nhiều người hơn, xếp theo mức A, AA, AAA. Mức AA là mức phổ biến được nhắm tới.
Có nên bỏ viền tiêu điểm vì xấu không?
Không. Người dùng bàn phím và công nghệ hỗ trợ cần nó để biết mình đang ở đâu. Hãy thiết kế lại cho đẹp và đủ tương phản thay vì xoá.
Placeholder có thay được nhãn ô nhập không?
Không. Placeholder biến mất khi gõ, người dùng dễ quên đang điền gì, và thường không đủ tương phản. Ô nhập cần nhãn nhìn thấy được ở ngoài ô.
Làm sao kiểm tra khả năng tiếp cận nhanh?
Kiểm tỷ lệ tương phản bằng công cụ, chuyển thiết kế sang thang xám, đo vùng chạm, thiết kế trạng thái tiêu điểm, rà nhãn và thử tăng cỡ chữ. Nếu sản phẩm đã chạy, dùng thử trình đọc màn hình.
