27/30 trang chủ WooCommerce có lỗi serious về accessibility

Ngày 03/09/2026 tôi quét 30 trang chủ WooCommerce đang chạy thật bằng axe-core, để kiểm chứng A11yLog, plugin accessibility cho WordPress tôi đang xây. Trước khi viết thêm dòng code nào, tôi muốn có số liệu thật: những lỗi accessibility nào thật sự xuất hiện trên site WooCommerce, phổ biến tới đâu, và những overlay mà một số site đã cài sẵn có thật sự sửa được gì không. Bài này là số liệu đó — cách làm, kết quả, những gì một lượt quét tự động không thể cho biết, và ý nghĩa của tất cả với người đang chạy một cửa hàng WooCommerce.

Cách quét được thực hiện

Tôi lấy 59 domain ứng viên từ một trang showcase WooCommerce và bốn bài listicle “WooCommerce store examples 2026” (Omnisend, Do Dropshipping, WPZOOM, Colorlib), bỏ qua các thương hiệu lớn như Nalgene hay NutriBullet vì khách hàng mục tiêu của A11yLog là cửa hàng nhỏ hoặc agency vận hành những cửa hàng đó, không phải doanh nghiệp lớn. Với mỗi domain, một script mở trang chủ trong context trình duyệt riêng, chờ bốn giây cho script ổn định, kiểm tra WordPress (/wp-content/ trong trang) và WooCommerce (chuỗi woocommerce trong HTML), kiểm tra bảy overlay đã biết (accessiBe, UserWay, Accessibly, AudioEye, EqualWeb, AllAccessible, OneTap), rồi chạy axe-core 4.13.0 theo bộ rule WCAG 2.0/2.1 mức A và AA cộng với rule mức AA của WCAG 2.2, qua Playwright và Chromium chạy trong Docker.

Trong 59 domain, 33 domain vẫn chạy WordPress, và 30 trong số đó chạy WooCommerce — tôi dừng lại khi đủ 30. Hai domain lỗi hoàn toàn (một lỗi DNS, một lỗi SSL). Riêng 24 domain lấy từ các bài listicle đã rời WordPress từ trước khi quét — do listicle cũ, hoặc các site đó đã chuyển nền tảng kể từ lúc được nhắc tới. Mọi con số dưới đây chỉ tính trên trang chủ, và chỉ qua axe-core: không có kiểm tra thủ công.

axe-core kiểm tra được gì, và không kiểm tra được gì

WCAG (Web Content Accessibility Guidelines) là chuẩn của W3C cho nội dung web dễ tiếp cận: ba phiên bản ổn định — 2.0, 2.1, 2.2 — mỗi bản thêm rule mới trên nền bản trước, với success criteria ở ba mức A, AA, AAA. axe-core là engine kiểm tra mã nguồn mở do Deque Systems xây dựng và duy trì. Tài liệu chính thức của Deque viết: “you can find on average 57% of WCAG issues automatically” (trung bình tìm được 57% lỗi WCAG một cách tự động). Phần còn lại cần có người: những phán đoán như alt text có thật sự mô tả đúng ảnh không, thứ tự tab có hợp lý không, người dùng screen reader có thật sự hoàn tất được checkout không.

Đó là khung cho mọi con số dưới đây: lỗi có thật, trên phần WCAG mà máy kiểm tra được.

Kết quả quét được

Chỉ số	Kết quả
Domain thử / đang chạy WordPress / đang chạy WooCommerce	59 / 33 / 30
Site có ít nhất 1 lỗi serious	27 / 30
Site có ít nhất 1 lỗi critical	10 / 30
Site không có lỗi tự động nào	3 / 30
Ảnh trên 30 trang chủ	1.519
Ảnh thiếu thuộc tính alt	62 (4,1%)
Ảnh có alt rỗng (alt="")	509 (33,5%)

Các site này lấy từ showcase và listicle “cửa hàng WooCommerce đẹp nhất”, không phải mẫu ngẫu nhiên — đây là những cửa hàng từng được ai đó chọn ra để giới thiệu. 27 trên 30 vẫn có lỗi serious ngay trên trang chủ. Một cửa hàng chưa từng lọt vào danh sách nào thì càng ít lý do để sạch hơn.

Những lỗi thật sự xuất hiện nhiều nhất

Thiếu alt text là lỗi accessibility mà hầu hết mọi người nghĩ tới đầu tiên. Nhưng đây không phải lỗi lớn nhất trong lần quét này — chỉ 7 trên 30 site dính lỗi image-alt.

Rule axe-core	Site bị ảnh hưởng (/30)	Số lần	Ý nghĩa
link-name	24	237	Link không có accessible name — thường là link ảnh sản phẩm, icon giỏ hàng, hoặc icon mạng xã hội
color-contrast	23	277	Chữ không đạt tỉ lệ tương phản tối thiểu
image-alt	7	19	Ảnh không có alt text
target-size	6	49	Vùng chạm nhỏ hơn 24×24 px (rule của WCAG 2.2)
meta-viewport	6	6	Chặn zoom trên mobile
markup list / listitem	5	26	Cấu trúc <ul>/<li> sai, thường ở menu hoặc slider
aria-hidden-focus	4	18	Phần tử bị ẩn với screen reader nhưng vẫn nhận được focus bàn phím
button-name	3	5	Nút không có accessible name

Các rule còn lại — frame title, ARIA role, label form, khoảng cách chữ — chỉ xuất hiện trên một hoặc hai site.

link-name là lỗi nổi bật nhất, và trên một site WooCommerce nó hiếm khi ngẫu nhiên: đó là ảnh sản phẩm, bọc trong một link, không có chữ nào — lặp lại một lần cho mỗi sản phẩm trong product loop. Đó là một pattern nhân bản khắp trang, không phải 24 lỗi rời rạc chẳng liên quan gì nhau, và vì WordPress render loop đó ở server, một plugin có thể sửa thật: lấy tên sản phẩm làm accessible name cho link. color-contrast lại là kiểu lỗi ngược lại. Sửa nó nghĩa là đổi một màu ai đó đã chọn có chủ đích, không phải thêm một attribute chẳng ai để ý.

Overlay đã cài sẵn không đổi được kết quả

Bốn trong 30 site đã cài overlay accessibility từ trước khi tôi quét. Cả bốn vẫn còn lỗi serious — từ 3 đến 14 lỗi mỗi site. Overlay chạy JavaScript đè lên trang đã render; nó không viết lại HTML mà axe-core đọc. Dù nó có đổi gì cho người xem đi nữa, thứ đó không nằm trong markup vào lúc quét chạy.

Điều này có ý nghĩa gì nếu bạn đang chạy một cửa hàng WooCommerce

Một lượt quét là sàn, không phải phán quyết cuối cùng. Nó bắt được những thứ có thật và sửa được: link thiếu tên, ảnh thiếu alt text, markup list mà screen reader không đọc được, zoom bị chặn trên mobile — và phần lớn trong đó sửa rất nhàm chán, không cần redesign. Lỗi link-name và button-name thường chỉ là thiếu một attribute, không phải thiếu cả một tính năng.

Nó cũng không kiểm tra được phần lớn thứ thật sự quan trọng với người dùng screen reader trên site của bạn: bộ lọc có dùng được bằng bàn phím không, lỗi form ở checkout có được đọc to lên không, alt text một khi đã có thì có nói lên điều gì hữu ích không. Và nó chỉ quét một trang — trang chủ — không phải trang sản phẩm hay checkout, những trang có nhiều phần tử tương tác hơn trang chủ và, nhìn vào những gì xuất hiện ở đây, không có lý do gì để sạch hơn.

A11yLog nằm ở đâu trong chuyện này, và dừng lại ở đâu

A11yLog là plugin mà lượt quét này được xây ra để validate. Nó chạy đúng kiểu quét axe-core này trên chính site WordPress hoặc WooCommerce của bạn, ghi bản sửa thật vào HTML của trang cho những nhóm lỗi an toàn để tự động hoá — accessible name cho link và nút, alt text, markup list, meta-viewport — và giữ một log có ngày ghi chính xác những gì đã đổi. Lỗi color-contrast được báo cáo kèm gợi ý sửa, không tự động áp dụng, vì đổi một màu là quyết định thiết kế, không phải sửa bug.

Nó chưa ra mắt. Chưa có lượt cài nào, chưa có khách trả tiền nào — lượt quét này là một phần của việc quyết định nên xây gì, không phải minh chứng nó đã hoạt động. Và có một lời hứa nó sẽ không bao giờ đưa ra: A11yLog sẽ không bao giờ nói một site “compliant”, “WCAG certified”, “ADA compliant”, hay “lawsuit-proof”. Không gì trong số liệu này chống lưng cho kiểu tuyên bố đó, từ bất kỳ công cụ nào — theo con số của chính Deque, axe-core tìm được trung bình 57% lỗi WCAG, phần còn lại vẫn cần người nhìn vào. Tìm lỗi thật, sửa những gì an toàn để sửa, giữ một log trung thực về những gì đã đổi. Đó là toàn bộ lời hứa.