Form accessible: label, hint, error message và trạng thái cần có

Form accessibility là nơi rất nhiều website “đẹp” bị điểm rớt. Chỉ cần label thiếu, error message không gắn đúng control, hoặc focus nhảy sai sau khi submit là trải nghiệm của người dùng assistive technology đã xấu đi rõ rệt.

Label là bắt buộc

Placeholder không phải là label. Người dùng cần label thật để hiểu field này dùng cho gì kể cả khi đang nhập, zoom lên lớn, hoặc khi screen reader đọc từng control.

<label for="full-name">Họ và tên</label>
<input id="full-name" name="full_name" type="text" autocomplete="name">

Hint text và error text

Hint text nên là mô tả ngắn trước khi người dùng nhập. Error text nên rõ ràng, cụ thể, và liên kết bằng aria-describedby hoặc cơ chế tương đương.

• Hint: ví dụ “Mật khẩu tối thiểu 8 ký tự”.
• Error: ví dụ “Mật khẩu phải có ít nhất 8 ký tự”.

Fieldset và legend

Khi form có nhóm radio hoặc checkbox, fieldset và legend giúp screen reader hiểu cả nhóm đang trả lời câu hỏi nào.

<fieldset>
  <legend>Bạn muốn nhận thông tin qua kênh nào?</legend>
  ...
</fieldset>

Trạng thái cần khai báo

• required cho field bắt buộc.
• aria-invalid khi field sai sau validate.
• aria-describedby để nối hint/error vào control.
• aria-live cho thông báo lỗi tổng hợp sau submit.

Nếu form là một phần của flow lớn hơn, hãy trả focus về lỗi đầu tiên hoặc vùng thông báo lỗi để người dùng không phải mò lại từ đầu.

Bài nên đọc tiếp

• Tuỳ biến form đăng nhập WordPress
• Toàn tập sử dụng Gravity Forms Plugin trong WordPress
• Bảo vệ form AJAX bằng WordPress nonce
• Web Accessibility là gì và tại sao lập trình viên cần quan tâm?

SEO checklist trước khi publish

• Title nêu rõ intent “form accessible”.
• Có ví dụ code ngắn, thực dụng.
• Internal links dẫn vào các bài WordPress/form liên quan.
• Media minh hoạ đúng ngữ cảnh và có caption.
• Bài có phần test checklist để dev áp dụng ngay.