Ảnh chụp màn hình App Store dễ tiếp cận: độ tương phản, cỡ chữ, alt text
Ảnh chụp màn hình App Store không thể duyệt bằng trình đọc màn hình theo cách một trang web thông thường — Apple không hiển thị alt text của ảnh chụp màn hình trực tiếp cho người dùng. Nhưng các quy tắc khả năng tiếp cận hình ảnh (độ tương phản, cỡ chữ, độc lập màu sắc) hoàn toàn áp dụng được, và chúng trùng với những quy tắc chi phối khả năng đọc ở kích thước hình thu nhỏ. Đáng làm cả hai vì chúng là cùng một việc.
Độ tương phản: WCAG AA là mức nền
Tỷ lệ độ tương phản WCAG AA:
- Văn bản thường: tối thiểu 4,5:1 so với nền.
- Văn bản lớn (từ 24pt regular hoặc 18pt bold trở lên): tối thiểu 3:1.
- Phần tử đồ họa / điều khiển giao diện: 3:1.
Dùng công cụ kiểm tra độ tương phản — có nhiều công cụ miễn phí — để kiểm tra từng chú thích so với nền của bảng nó đặt trên. Nếu nền là gradient, hãy kiểm tra tại điểm tối nhất và sáng nhất của gradient nơi chú thích nằm.
Lỗi phổ biến: chữ trắng trên gradient từ cam nhạt sang cam đậm. Ở nơi chú thích nằm trên nền cam nhạt, độ tương phản giảm xuống dưới 4,5:1 và chữ biến mất ở kích thước hình thu nhỏ.
Cỡ chữ ở kích thước hình thu nhỏ
Ảnh chụp màn hình App Store hiển thị ở nhiều kích thước khác nhau:
- Kích thước đầy đủ trên trang sản phẩm (~1.290 px rộng).
- Xem trước kết quả tìm kiếm (~600 px rộng).
- Hình thu nhỏ kết quả tìm kiếm (~300 px rộng).
Nếu chú thích của bạn là 60px trong file thiết kế ở 1.290 × 2.796, nó hiển thị ~14px trong hình thu nhỏ 300px. 14px thấp hơn kích thước tối thiểu được khuyến nghị để đọc được. Cách khắc phục: thiết kế chú thích ở 80-100px để chúng hiển thị 18-22px trong hình thu nhỏ. Đặc biệt với bảng 1-3 vì đó là phần hiển thị trong tìm kiếm.
Độc lập màu sắc
Đừng chỉ dùng màu sắc để truyền tải thông tin. Vi phạm phổ biến nhất: chữ chú thích có màu chỉ phân biệt với nền qua màu sắc (chữ đỏ trên nền xanh lá, chẳng hạn). Người mù màu đỏ-xanh lá sẽ thấy một màu lầy nhão.
Kiểm tra: nếu bạn chuyển ảnh chụp màn hình sang thang xám, bạn có còn đọc được mọi chú thích không? Nếu có, bạn độc lập màu sắc. Nếu không, hãy tăng sự khác biệt về độ sáng, không chỉ sự khác biệt màu sắc.
Alt text trong App Store Connect
App Store Connect không hiển thị alt text ảnh chụp màn hình theo cách trang web hiển thị thuộc tính alt. Nhưng App Store Connect có trường "accessibility tags" cho mỗi ảnh chụp màn hình, được VoiceOver sử dụng khi người dùng duyệt App Store. Hãy điền vào đó. Mô tả ngắn về nội dung ảnh chụp màn hình: "Màn hình chính với tổng quan chi tiêu hàng tháng" thay vì "Ảnh chụp màn hình 1".
Đây là cải thiện khả năng tiếp cận lớn nhất vì hầu như không có nhà phát triển nào làm điều này. Người dùng VoiceOver khi duyệt App Store hiện tại nghe "ảnh chụp màn hình 1, ảnh chụp màn hình 2" với đại đa số ứng dụng. Vài câu mô tả mỗi bảng giúp danh sách ứng dụng của bạn dễ dùng hơn nhiều với nhóm người dùng đó.
Anti-pattern "phông chữ nhỏ, kiểu trang trí"
Phông chữ trang trí (chữ viết tay, phông chữ hiển thị siêu mỏng) hầu như luôn thất bại cả bài kiểm tra khả năng tiếp cận lẫn hình thu nhỏ. Những nét mảnh trông thanh lịch ở kích thước đầy đủ trở nên khó đọc ở 300px và không đọc được với người dùng có thị lực kém.
Dùng những kiểu trang trí này tối đa một từ nhấn mạnh trong toàn bộ carousel. Chú thích thân bài và bất kỳ văn bản quan trọng nào cần phông chữ có độ dày nét nhất quán ở các kích thước bạn quan tâm — hầu hết các sans-serif grotesque hiện đại (Inter, SF Pro, Roboto) đều đáp ứng được.
Vị trí chú thích và vùng an toàn
Apple đôi khi phủ giao diện lên trên carousel App Store (nút "Tải", chip đánh giá độ tuổi, nút "Mở" sau khi cài đặt). Nếu chú thích của bạn nằm ở những khu vực đó, nó sẽ bị che khuất. Giữ chú thích trong vùng an toàn: 60px từ mỗi cạnh, 80px từ phía trên, và 200px trống ở phía dưới cho giao diện App Store.
Kiểm tra trước khi triển khai
- Chạy từng chú thích qua công cụ kiểm tra độ tương phản so với nền của bảng.
- Xem ảnh chụp màn hình của bạn ở chiều rộng 300px trong bộ mô phỏng hình thu nhỏ (hoặc chỉ cần thu nhỏ trong Figma). Mọi chú thích vẫn phải đọc được.
- Kiểm tra thang xám để đảm bảo độc lập màu sắc.
- Viết accessibility tags cho từng bảng trong App Store Connect.
- Nếu bạn có người dùng VoiceOver trong nhóm kiểm thử, hãy nhờ họ duyệt danh sách ứng dụng và báo cáo.
Tại sao điều này quan trọng hơn chỉ là khả năng tiếp cận
Các quy tắc về độ tương phản và kích thước mà WCAG đặt ra được rút ra từ nghiên cứu thị giác của con người. Chúng không tùy tiện — đây là các ngưỡng mà dưới đó một tỷ lệ đáng kể người dùng không thể đọc văn bản một cách thoải mái. Thiết kế cho chuẩn AA nghĩa là thiết kế cho nhóm dân số bao gồm người dùng lớn tuổi, người dùng trên màn hình sáng ngoài trời, người dùng có vấn đề thị lực nhẹ chưa được chỉnh, cộng với tất cả những người cuộn nhanh qua kết quả tìm kiếm.
Những quy tắc giúp người dùng thị lực kém đọc ảnh chụp màn hình của bạn cũng giúp người dùng cuộn App Store trên tàu điện dưới nắng. Cùng một vấn đề; cùng một giải pháp.