Ba tiêu chí khác nhau, hay bị gộp làm một:
| Tiêu chí | Mức | Yêu cầu |
|---|---|---|
| 1.4.10 Reflow | AA | Nội dung dùng được ở bề rộng 320 CSS px mà không phải cuộn theo cả hai chiều |
| 1.4.4 Resize Text | AA | Phóng chữ tới 200% không mất nội dung hay chức năng |
| 1.4.12 Text Spacing | AA | Không vỡ khi người dùng ép line-height: 1.5, letter-spacing: .12em, word-spacing: .16em, khoảng cách đoạn 2em |
Vì sao 400% zoom lại ra con số 320px: trên viewport 1280px, zoom 400% khiến vùng hiển thị còn tương đương 320 CSS px. Nghĩa là nếu responsive tới 320px đúng cách thì 1.4.10 gần như tự đạt — reflow không phải yêu cầu riêng cho người khuyết tật, nó chính là mobile layout.
Những gì làm hỏng reflow: width cố định bằng px, min-width trên container, bảng nhiều cột nhồi ngang, modal width: 600px cứng.
/* trượt */
.panel { width: 600px; }
/* đạt */
.panel { width: min(600px, 100%); }Ngoại lệ của 1.4.10: nội dung buộc phải bố cục hai chiều mới dùng được — bản đồ, bảng dữ liệu lớn, sơ đồ, khuông nhạc. Bảng dữ liệu được miễn cuộn ngang; card layout thì không.
Kiểm tra: DevTools đặt viewport 320x256, hoặc Cmd/Ctrl + + bảy lần trên màn 1280px. Với 1.4.12 thì chạy bookmarklet Text Spacing của WAI.