Một lỗi ở nguyên tử là một lỗi ở mọi trang
Khả năng tiếp cận (accessibility) thường được làm như một đợt kiểm tra cuối dự án: thuê người kiểm, nhận danh sách hai trăm lỗi, sửa từng màn hình. Cách đó tốn kém và không bền, vì màn hình mới làm tháng sau lại mắc đúng những lỗi cũ.
Design system đổi bài toán này. Phần lớn lỗi tiếp cận nằm ở những thứ nhỏ: độ tương phản của một màu, kích thước vùng chạm của một nút, ô nhập không có nhãn, trạng thái được chọn bằng bàn phím không nhìn thấy. Tất cả những thứ đó là nguyên tử và token. Sửa một lần ở đó, mọi trang dùng thư viện đều được sửa theo. Ngược lại, một nguyên tử sai sẽ lặp lỗi ở mọi nơi nó xuất hiện.
Ví dụ ở Giỏ Xanh: màu thương hiệu không đủ tương phản
Khi kiểm tra token màu, đội nền tảng giao diện tính độ tương phản theo chuẩn WCAG 2.1 mức AA. Chuẩn này yêu cầu chữ thường có tỉ lệ tương phản tối thiểu 4.5:1 với nền, chữ lớn và các thành phần giao diện như viền ô nhập tối thiểu 3:1.
| Màu | Dùng cho | Tương phản trên nền trắng | Kết quả |
|---|---|---|---|
#4CC37A (xanh nhạt cũ) | Nút chính trên 9 màn hình | 2.24:1 | Không đạt, kể cả cho chữ lớn |
#1F8A4C (xanh thương hiệu) | Nút, liên kết | 4.38:1 | Đạt cho chữ lớn và viền, không đạt cho chữ thường |
#15703D (xanh đậm) | Đề xuất cho hành động chính | 6.15:1 | Đạt |
#9AA3AE (xám chữ gợi ý) | Chữ gợi ý trong ô nhập | 2.55:1 | Không đạt |
#6B7480 (xám đề xuất) | Chữ phụ, chữ gợi ý | 4.74:1 | Đạt |
color-action-primary trỏ vào green-700 (#15703D) thay vì màu thương hiệu green-600. Màu thương hiệu vẫn dùng cho mảng lớn, minh hoạ, chữ cỡ lớn. Nhưng nút và liên kết, nơi có chữ cỡ thường, dùng sắc đậm hơn. Vì token là ngữ nghĩa, quyết định này được thực hiện bằng một dòng, và 9 màn hình dùng xanh nhạt cũ được sửa khi chúng chuyển sang component Button.Danh sách việc làm một lần ở tầng nguyên tử
| Nguyên tử | Điều cần đảm bảo trong component | Nếu để từng màn hình tự lo |
|---|---|---|
| Token màu | Mọi cặp chữ và nền đạt 4.5:1, thành phần giao diện đạt 3:1 | Mỗi designer tự chọn, kiểm từng màn |
| Nút | Vùng chạm tối thiểu khoảng 44 đến 48 điểm, có tên đọc được, có trạng thái được chọn bằng bàn phím nhìn rõ | Nút biểu tượng không có tên, trình đọc màn hình đọc "nút" |
| Ô nhập | Luôn có nhãn, lỗi được nói bằng chữ chứ không chỉ bằng màu đỏ, lỗi gắn với ô | Nhãn biến mất khi gõ, người mù màu không thấy lỗi |
| Biểu tượng | Biểu tượng trang trí bị ẩn khỏi trình đọc màn hình, biểu tượng có nghĩa có tên | Trình đọc màn hình đọc tên file ảnh |
| Chữ | Cỡ chữ tính theo đơn vị co giãn, chịu được người dùng phóng to chữ | Chữ tràn, cắt mất khi phóng 200% |
| Hộp thoại | Giữ tiêu điểm trong hộp, phím Esc đóng, trả tiêu điểm về chỗ cũ | Người dùng bàn phím bị kẹt |
Nhất quán cũng là một dạng tiếp cận
Khả năng tiếp cận không chỉ dành cho người khuyết tật. Khi cùng một hành động luôn trông giống nhau và nằm ở chỗ quen, mọi người dùng đều học nhanh hơn, nhất là người lớn tuổi hay người ít dùng app, một nhóm khách quan trọng của một app đi chợ. Ở Giỏ Xanh, nút "Thanh toán" xanh ở web và cam ở app (bài 1) không vi phạm chuẩn nào, nhưng khiến người dùng chuyển nền tảng phải tìm lại.
Một vài quy tắc nhất quán Giỏ Xanh đưa vào tài liệu thư viện:
- Mỗi màn hình tối đa một nút chính.
- Hành động phá huỷ (xoá, huỷ đơn) luôn dùng biến thể nguy hiểm và luôn hỏi xác nhận.
- Thông báo thành công, cảnh báo, lỗi luôn dùng cùng một bộ màu, biểu tượng và vị trí.
- Cùng một khái niệm dùng cùng một từ: "giỏ hàng", không lúc "giỏ" lúc "túi".
Kiểm tra vẫn cần, nhưng ở chỗ khác
Làm ở tầng nguyên tử không có nghĩa là không cần kiểm tra trang. Nguyên tử đúng có thể bị ghép sai: hai nút chính trên một màn, thứ tự đọc của trình đọc màn hình lộn xộn vì bố cục, hình ảnh sản phẩm thiếu mô tả. Nhưng danh sách kiểm tra cho mỗi màn hình mới ngắn đi nhiều, vì những thứ cơ bản đã được thư viện đảm bảo. QA của Giỏ Xanh giờ kiểm tiếp cận ở hai chỗ: một lần kỹ cho mỗi component khi phát hành, và một lần nhẹ cho thứ tự, nội dung và cách ghép ở mỗi màn hình.
PM nên đòi hỏi gì
- Mỗi component trong thư viện có mục "khả năng tiếp cận" ghi rõ những gì đã đảm bảo.
- Token màu có bảng tương phản, và không token chữ nào dưới 4.5:1 trên nền dự kiến.
- Một yêu cầu "làm màu nhạt hơn cho sang" phải đi qua kiểm tra tương phản trước khi vào thư viện.
Làm ngay
Lấy ba màu chữ và ba màu nút phổ biến nhất trong sản phẩm của bạn. Dùng một công cụ kiểm tra độ tương phản miễn phí để đo từng cặp chữ và nền, ghi tỉ lệ và đạt hay không theo mức AA. Sau đó thử dùng sản phẩm chỉ bằng bàn phím trong năm phút: bạn có luôn thấy mình đang ở đâu không? Ghi các lỗi tìm được và đánh dấu lỗi nào nằm ở nguyên tử, sửa một lần là xong.