Kiểm thử khả năng tiếp cận (Accessibility/a11y) cơ bản cho người mới (có trắc nghiệm)

1. Tóm tắt nhanh & màn hình bạn sẽ test

Chào bạn mới! 'Kiểm thử accessibility' nghe có vẻ to tát, nhưng thực ra bắt đầu rất đơn giản: rút chuột ra khỏi máy, thử dùng app ShopEasy chỉ bằng bàn phím xem có làm được mọi việc không. Rất nhiều app đẹp mắt trên màn hình lại 'khoá cửa' hoàn toàn với người chỉ dùng được bàn phím, người khiếm thị dùng screen reader, hay người mù màu. Trong bài này chúng ta sẽ đi qua trang sản phẩm và form của ShopEasy, chỉ ra những lỗi accessibility phổ biến nhất mà người mới có thể tự phát hiện ngay hôm nay.

2. Vì sao accessibility quan trọng & WCAG mức A/AA cơ bản

Theo nhiều thống kê, khoảng 1/6 dân số thế giới sống chung với một dạng khuyết tật nào đó, và con số này còn chưa tính những người gặp khó khăn tạm thời (gãy tay, đang ở nơi ồn ào, màn hình bị chói nắng). Nếu app ShopEasy chỉ hoạt động tốt khi dùng chuột, mắt nhìn hoàn hảo, tay bấm chuẩn xác, bạn đang tự loại một lượng khách hàng không nhỏ ngay từ khâu trải nghiệm — chưa kể ở một số quốc gia, không đáp ứng accessibility còn có thể vi phạm quy định pháp lý.

WCAG (Web Content Accessibility Guidelines) là bộ tiêu chuẩn quốc tế phổ biến nhất về khả năng tiếp cận web, chia thành 3 mức: A (tối thiểu bắt buộc), AA (mức phổ biến doanh nghiệp hướng tới), và AAA (cao nhất, ít bắt buộc). Người mới không cần thuộc lòng cả bộ tiêu chuẩn — chỉ cần nắm vững 6-7 tiêu chí cốt lõi ở mức A/AA trong bảng checklist trên: điều hướng bàn phím, focus rõ, alt text, nhãn form, tương phản màu, không chỉ dựa vào màu, và cỡ chữ thu phóng được. Nắm chắc từng ấy đã giúp bạn bắt được phần lớn lỗi accessibility phổ biến trong thực tế.

3. Điều hướng bàn phím & trạng thái focus rõ ràng

Kỹ thuật đầu tiên và dễ tự làm nhất: rút chuột ra, dùng phím Tab để đi tới, Shift+Tab để đi lùi, Enter/Space để kích hoạt nút hoặc liên kết. Trên trang sản phẩm ShopEasy, bạn cần đi qua được tất cả các phần tử tương tác — ảnh (nếu có link), tên sản phẩm, nút 'Thêm vào giỏ', bộ lọc màu/size — theo đúng thứ tự hợp lý, không bị 'kẹt' ở đâu, không bị nhảy lung tung ngoài ý muốn.

▶ Bước 1: Rút chuột ra hoặc quyết định không chạm chuột trong suốt phiên test.

▶ Bước 2: Bấm Tab lần lượt từ đầu trang, quan sát xem có nhìn thấy phần tử đang được chọn không (viền/khung sáng).

▶ Bước 3: Với mỗi nút/link đang focus, bấm Enter hoặc Space để xác nhận nó hoạt động đúng như khi bấm chuột.

4. Alt text ảnh & thứ tự đọc màn hình (screen reader)

Screen reader (VoiceOver trên macOS/iOS, TalkBack trên Android, NVDA trên Windows) là công cụ đọc to nội dung màn hình cho người khiếm thị. Nó đọc theo THỨ TỰ trong mã HTML, không theo vị trí đẹp mắt trên màn hình — nên nếu bố cục CSS sắp xếp lại vị trí nhưng thứ tự HTML lộn xộn, screen reader có thể đọc tên nút trước, mô tả sản phẩm sau, khiến người nghe rất khó hình dung.