Accessibility (tiếp cận)
Thiết kế để mọi người dùng được trang, kể cả người khiếm thị, mù màu, dùng bàn phím: các tiêu chí chính của WCAG 2.2 và cách tự kiểm tra.
- Nắm 4 nguyên tắc của WCAG và các tiêu chí quan trọng cho Landing Page.
- Áp dụng ngưỡng tương phản 4,5:1 và 3:1, vùng chạm, focus, nhãn form.
- Tự kiểm tra tiếp cận trong 15 phút bằng bàn phím, phóng to và trình đọc màn hình.
Accessibility (khả năng tiếp cận, viết tắt a11y) là thiết kế sao cho người khuyết tật và người trong hoàn cảnh hạn chế (xem dưới nắng, cầm điện thoại một tay, mạng yếu, tuổi cao) vẫn dùng được trang. Chuẩn được dùng rộng rãi là WCAG (Web Content Accessibility Guidelines) của W3C; phiên bản 2.2 được công bố năm 2023. Mức AA là mục tiêu phổ biến cho website.
WCAG xoay quanh 4 nguyên tắc: Có thể nhận biết (Perceivable) — nội dung nhìn hoặc nghe được; Có thể vận hành (Operable) — thao tác được bằng nhiều cách, kể cả bàn phím; Có thể hiểu (Understandable) — rõ ràng, dự đoán được; Mạnh mẽ (Robust) — hoạt động với nhiều trình duyệt và công nghệ hỗ trợ.
| Tiêu chí WCAG 2.2 | Yêu cầu chính | Áp dụng trên Landing Page |
|---|---|---|
| 1.1.1 Nội dung không phải văn bản (A) | Ảnh mang thông tin có văn bản thay thế | Alt cho ảnh sản phẩm; alt rỗng cho ảnh trang trí |
| 1.4.3 Tương phản tối thiểu (AA) | Chữ thường 4,5:1; chữ lớn 3:1 | Chữ nội dung, chữ trên nút, chữ trên ảnh |
| 1.4.11 Tương phản phi văn bản (AA) | Thành phần giao diện và đồ họa 3:1 | Viền ô nhập, biểu tượng, vòng focus |
| 1.4.4 / 1.4.10 Phóng chữ và dàn lại (AA) | Phóng 200% không mất nội dung; bề rộng 320 CSS px không cuộn ngang | Dùng rem, bố cục co giãn |
| 2.4.7 Focus hiển thị (AA) | Thấy rõ phần tử đang được chọn bằng bàn phím | Không xóa outline mà không thay thế |
| 2.4.11 Focus không bị che (AA, mới ở 2.2) | Phần tử đang focus không bị che hoàn toàn | Thanh CTA cố định, banner cookie không che ô đang chọn |
| 2.5.8 Kích thước vùng chạm (AA, mới ở 2.2) | Tối thiểu 24 × 24 CSS px hoặc đủ khoảng cách | Nút, liên kết trên điện thoại |
| 3.3.2 Nhãn hoặc hướng dẫn (A) | Ô nhập có nhãn, hướng dẫn khi cần | Nhãn hiển thị cho mọi trường form |
Tự kiểm tra trong 15 phút
- Bàn phím: rút chuột, chỉ dùng Tab, Shift+Tab, Enter, Space. Đi qua toàn trang: thấy rõ focus ở đâu, thứ tự hợp lý, mở được FAQ, gửi được form.
- Tương phản: đo chữ nội dung, chữ trên nút, chữ phụ, viền ô nhập bằng công cụ đo tương phản.
- Phóng to: phóng trình duyệt 200% và đặt bề rộng 320 px — không mất chữ, không phải cuộn ngang.
- Ảnh: tắt ảnh hoặc dùng công cụ kiểm tra để xem alt có mô tả đúng không.
- Trình đọc màn hình: bật VoiceOver trên iPhone (hoặc TalkBack trên Android), nghe thử Hero, một nút và form.
- Chạy công cụ tự động (ví dụ Lighthouse trong Chrome DevTools) để bắt lỗi cơ bản, nhưng nhớ rằng công cụ tự động không phát hiện được mọi vấn đề.
Dễ tiếp cận
- Dùng thẻ button cho nút, a cho liên kết, tiêu đề H1–H3 đúng thứ tự.
- html có lang="vi" để trình đọc màn hình đọc đúng tiếng Việt.
- Vòng focus rõ ràng, đủ tương phản.
- Thông báo lỗi form được đọc lên và gắn với đúng ô.
Khó tiếp cận
- Nút làm bằng div có sự kiện click, không bấm được bằng bàn phím.
- outline: none cho mọi phần tử, không có kiểu focus thay thế.
- Chữ xám nhạt trên nền trắng, chữ trắng trên ảnh sáng.
- Nút chỉ có biểu tượng, không có tên cho trình đọc màn hình.
Bài tập thực hành
Thực hiện 6 bước tự kiểm tra trên trang của bạn. Ghi lại mọi lỗi tìm thấy theo mẫu: tiêu chí WCAG – vị trí – mô tả – cách sửa. Sửa ít nhất 3 lỗi.
Gợi ý: Bắt đầu bằng bàn phím và tương phản — hai phần này phát hiện được nhiều lỗi nhất mà không cần công cụ phức tạp.
- Đi hết trang và gửi form được chỉ bằng bàn phím.
- Chữ thường đạt 4,5:1, chữ lớn đạt 3:1, viền ô nhập đạt 3:1.
- Phóng 200% và bề rộng 320 px không mất nội dung, không cuộn ngang.
- Mọi ảnh mang thông tin có alt phù hợp; trang có lang="vi".
- Đã sửa ít nhất 3 lỗi và ghi lại.
Kiểm tra kiến thức
- 2:1
- 3:1
- 4,5:1
- 7:1
Xem đáp án
B. 3:1 — Tiêu chí 1.4.3 cho phép chữ lớn ở mức 3:1 vì nét chữ lớn dễ đọc hơn; chữ thường cần 4,5:1. Mức 7:1 là yêu cầu của tiêu chí AAA 1.4.6.
- Người dùng bàn phím không thấy mình đang ở đâu (tiêu chí 2.4.7 Focus Visible)
- Không vi phạm gì
- Làm trang chậm hơn
- Vi phạm quy tắc màu sắc
Xem đáp án
A. Người dùng bàn phím không thấy mình đang ở đâu (tiêu chí 2.4.7 Focus Visible) — Người dùng bàn phím dựa vào chỉ báo focus để biết phần tử đang được chọn. Có thể thiết kế lại kiểu focus nhưng không được xóa mất.
- 1.1.1 Nội dung không phải văn bản
- 1.4.3 Tương phản tối thiểu
- 2.5.8 Kích thước vùng chạm (tối thiểu)
- 3.3.2 Nhãn hoặc hướng dẫn
Xem đáp án
C. 2.5.8 Kích thước vùng chạm (tối thiểu) — WCAG 2.2 bổ sung một số tiêu chí như 2.4.11 Focus Not Obscured, 2.5.8 Target Size (Minimum), 3.3.7 Redundant Entry, 3.3.8 Accessible Authentication.