Biểu mẫu liên hệ dễ tiếp cận và Đạo luật Khả năng tiếp cận châu Âu

Biểu mẫu liên hệ thường là cánh cửa duy nhất giữa khách truy cập và doanh nghiệp. Nếu chỉ có thể mở cửa bằng chuột, thị lực tốt và kiên nhẫn giải câu đố hình ảnh mờ, một số người đơn giản đứng ngoài. Từ giữa năm 2025, đây không còn chỉ là vấn đề dễ sử dụng: với nhiều doanh nghiệp bán hàng cho người tiêu dùng trong EU, nó đã trở thành vấn đề pháp lý.

Phạm vi của Đạo luật Khả năng tiếp cận châu Âu

Đạo luật Khả năng tiếp cận châu Âu (Chỉ thị (EU) 2019/882) được áp dụng từ ngày 28 tháng 6 năm 2025. Luật đặt yêu cầu tiếp cận cho một số sản phẩm và dịch vụ cung cấp cho người tiêu dùng, gồm thương mại điện tử, dịch vụ ngân hàng tiêu dùng, sách điện tử, truyền thông điện tử và một phần vận tải hành khách. Với website, điều đó nghĩa là toàn bộ cửa hàng trực tuyến hoặc dịch vụ ngân hàng, kể cả biểu mẫu khách dùng để liên hệ, đặt câu hỏi hay khiếu nại. Doanh nghiệp siêu nhỏ cung cấp dịch vụ được miễn: doanh nghiệp có dưới mười nhân viên và doanh thu hằng năm hoặc tổng giá trị bảng cân đối kế toán không quá 2 triệu EUR. Những gì chỉ được cung cấp cho doanh nghiệp khác nhìn chung nằm ngoài phạm vi áp dụng.

Mỗi quốc gia thành viên đã chuyển chỉ thị thành luật quốc gia. Tại Đức là Barrierefreiheitsstärkungsgesetz (BFSG), tại Ba Lan là đạo luật năm 2024 về bảo đảm một số sản phẩm và dịch vụ đáp ứng yêu cầu tiếp cận. Cơ quan giám sát và chế tài khác nhau giữa các nước, nhưng thước đo kỹ thuật nhìn chung giống nhau: trong thực tế là tiêu chuẩn châu Âu EN 301 549, vốn dựa trên Hướng dẫn về khả năng tiếp cận nội dung web (WCAG).

Vì sao vẫn đáng làm dù không có nghĩa vụ pháp lý

Có thể doanh nghiệp được miễn hoặc chỉ phục vụ công ty khác. Biểu mẫu dễ tiếp cận vẫn đáng làm vì lý do đơn giản: mỗi người bỏ cuộc giữa chừng là một yêu cầu bạn không bao giờ nhận được. Cách sửa giúp người dùng trình đọc màn hình cũng giúp người điền trên điện thoại trong tàu, dưới nắng gắt, khi cổ tay bị gãy hoặc bằng ngôn ngữ thứ hai. Nhãn rõ ràng và thông báo lỗi hữu ích giảm số biểu mẫu bị bỏ dở cho mọi người — và không điều nào làm bảo vệ chống thư rác yếu đi.

Danh sách kiểm tra thực tế có tham chiếu WCAG 2.2

• Nhãn hiển thị gắn với ô nhập (1.3.1, 3.3.2): mỗi trường có nhãn hiển thị nối với nó bằng for/id. Riêng văn bản gợi ý trong ô không phải nhãn — nó biến mất ngay khi bắt đầu gõ.
• Thông báo lỗi giải thích cách sửa (3.3.1, 3.3.3): nêu tên trường, nói sai ở đâu và sửa thế nào — bằng chữ, không chỉ viền đỏ. “Vui lòng nhập địa chỉ e-mail như name@example.com” hữu ích hơn “Dữ liệu không hợp lệ”.
• Thao tác hoàn toàn bằng bàn phím (2.1.1, 2.1.2): có thể tới và dùng mọi trường, ô đánh dấu, CAPTCHA và nút gửi bằng Tab, Space và Enter, không có bẫy bàn phím.
• Tiêu điểm nhìn thấy được (2.4.7): luôn biết trường nào đang hoạt động. Xóa đường viền tiêu điểm của trình duyệt mà không thay thế là không đạt tiêu chí này.
• Độ tương phản đủ (1.4.3): chữ, nhãn và thông báo lỗi có tỷ lệ tương phản tối thiểu 4.5:1 so với nền (3:1 cho chữ lớn).
• Kích thước mục tiêu (2.5.8): nút, ô đánh dấu và liên kết có kích thước ít nhất 24 × 24 pixel CSS hoặc đủ khoảng trống xung quanh.
• Phương án thay thế CAPTCHA (1.1.1) và xác thực dễ tiếp cận (3.3.8): 1.1.1 yêu cầu nội dung thay thế bằng văn bản và CAPTCHA ở nhiều hơn một hình thức giác quan; 3.3.8 chỉ bao quát bước đăng nhập, nhưng ý tưởng có thể áp dụng ở đây — câu đố như gõ lại chữ méo hoặc giải phép cộng không nên là con đường duy nhất. Hãy cung cấp phương án khác hoặc dùng cách không cần câu đố.
• Honeypot được ẩn khỏi công nghệ hỗ trợ: trường bẫy có aria-hidden="true" trên phần bao và tabindex="-1", để người dùng trình đọc màn hình và bàn phím không bao giờ tới đó.

CAPTCHA và honeypot: nơi chống thư rác gặp khả năng tiếp cận

Nói chính xác, tiêu chí 3.3.8 dành cho bước đăng nhập và xác thực, không phải biểu mẫu liên hệ. Tuy nhiên, ý tưởng phía sau áp dụng rất phù hợp: gõ chữ méo, giải phép cộng hoặc chọn đèn giao thông trong lưới ảnh loại trừ hoàn toàn một số người. Phương án thường hoạt động không cần câu đố — như Cloudflare Turnstile, Friendly Captcha, honeypot kết hợp kiểm tra thời gian hoặc lọc phía máy chủ như Akismet — ngăn thư rác mà không yêu cầu khách chứng minh gì. Honeypot chỉ thân thiện nếu thực sự vô hình, cả với trình đọc màn hình và người dùng bàn phím:

<div class="hp" aria-hidden="true">
  <label for="hp-website">Để trống trường này</label>
  <input type="text" id="hp-website" name="website"
         tabindex="-1" autocomplete="off">
</div>
<!-- CSS: .hp { position: absolute; left: -10000px; } -->

Tự thử biểu mẫu trong mười lăm phút

1. 1Cất chuột đi và điền toàn bộ biểu mẫu chỉ bằng bàn phím. Bạn có tới được mọi trường và nút gửi, và luôn nhìn thấy mình đang ở đâu không?
2. 2Gửi biểu mẫu trống rồi gửi với địa chỉ e-mail sai. Lỗi có xuất hiện bằng chữ cạnh đúng trường và có rõ cần làm gì không?
3. 3Mở trang trên điện thoại hoặc tăng thu phóng trình duyệt lên 200%. Mọi thứ có đọc được, nút có dễ chạm, và biểu ngữ cookie hay widget trò chuyện có che nút gửi không?
4. 4Bật trình đọc màn hình (VoiceOver, NVDA hoặc TalkBack) rồi nghe: mỗi trường có được đọc kèm nhãn và honeypot có giữ im lặng không?
5. 5Chạy kiểm tra tự động như axe-core. Nó nhanh chóng tìm nhãn thiếu và vấn đề tương phản, nhưng không tìm được mọi thứ — vẫn cần các bước thủ công ở trên.

Nếu muốn bắt đầu bằng tổng quan, formexposed xem biểu mẫu công khai từ bên ngoài mà không gửi gì. Kiểm tra tiếp cận chạy axe-core trên từng biểu mẫu, đánh dấu CAPTCHA không có phương án thay thế dễ tiếp cận và honeypot bị trình đọc màn hình thông báo, đồng thời xem biểu mẫu trên điện thoại — mục tiêu chạm, lớp phủ che nút gửi, cuộn ngang. Kiểm tra miễn phí cho mức tổng thể; chi tiết này nằm trong báo cáo đầy đủ. Đây là điểm bắt đầu tốt cho danh sách trên, không thay thế kiểm thử với người thật.