Biểu mẫu là một phần tử cho phép người dùng cung cấp dữ liệu vào một trường hoặc một nhóm trường. Biểu mẫu có thể đơn giản như một trường duy nhất hoặc phức tạp như một phần tử biểu mẫu nhiều bước với nhiều trường trên mỗi trang, xác thực dữ liệu đầu vào và đôi khi là một CAPTCHA.
Biểu mẫu được coi là một trong những thành phần khó xử lý nhất từ góc độ hỗ trợ tiếp cận, vì chúng đòi hỏi kiến thức về tất cả các thành phần mà chúng ta đã đề cập, cũng như các quy tắc bổ sung dành riêng cho biểu mẫu. Với một chút hiểu biết và thời gian, bạn có thể tạo một biểu mẫu hỗ trợ tiếp cận phù hợp với bạn và người dùng.
Biểu mẫu là mô-đun cuối cùng dành riêng cho thành phần trong khoá học này. Mô-đun này sẽ tập trung vào các nguyên tắc dành riêng cho biểu mẫu, nhưng tất cả các nguyên tắc khác mà bạn đã tìm hiểu trong các mô-đun trước đó, chẳng hạn như cấu trúc nội dung, tiêu điểm bàn phím và độ tương phản màu, cũng áp dụng cho các thành phần biểu mẫu.
Trường
Các trường là phần cốt lõi của biểu mẫu. Trường là các mẫu tương tác nhỏ, chẳng hạn như phần tử nhập hoặc nút chọn, cho phép người dùng nhập nội dung hoặc đưa ra lựa chọn. Có nhiều trường biểu mẫu để bạn lựa chọn.
Đề xuất mặc định là sử dụng các mẫu HTML đã thiết lập thay vì tạo một mẫu tuỳ chỉnh bằng ARIA, vì một số tính năng và hàm nhất định (chẳng hạn như trạng thái trường, thuộc tính và giá trị) vốn được tích hợp sẵn vào các phần tử HTML. Các trường tuỳ chỉnh yêu cầu bạn thêm ARIA theo cách thủ công.
Không nên – HTML tuỳ chỉnh có ARIA
<div role="form" id="sundae-order-form">
<!-- form content -->
</div>
Nên dùng — HTML chuẩn
<form id="sundae-order-form">
<!-- form content -->
</form>
Ngoài việc chọn các mẫu trường biểu mẫu dễ tiếp cận nhất (nếu có), bạn cũng nên thêm thuộc tính tự động hoàn thành HTML vào các trường của mình. Việc thêm các thuộc tính tự động hoàn thành cho phép xác định hoặc xác minh mục đích chi tiết hơn cho các tác nhân người dùng và công nghệ hỗ trợ (AT).
Thuộc tính tự động hoàn thành cho phép người dùng cá nhân hoá bản trình bày trực quan, chẳng hạn như hiển thị biểu tượng bánh sinh nhật trong một trường có thuộc tính tự động hoàn thành sinh nhật (bday) được chỉ định cho trường đó. Nói chung, các thuộc tính tự động hoàn thành giúp việc điền thông tin vào biểu mẫu trở nên dễ dàng và nhanh chóng hơn. Điều này đặc biệt hữu ích cho những người mắc chứng rối loạn nhận thức và đọc cũng như những người sử dụng công cụ hỗ trợ tiếp cận (AT), chẳng hạn như trình đọc màn hình.
<form id="sundae-order-form">
<p>Name: <input type="name" autocomplete="name"></p>
<p>Telephone: <input type="tel" autocomplete="tel"></p>
<p>Email address: <input type="email" autocomplete="email"></p>
</form>
Cuối cùng, các trường biểu mẫu không được tạo ra thay đổi theo ngữ cảnh khi nhận được tiêu điểm hoặc dữ liệu đầu vào của người dùng, trừ phi người dùng đã được cảnh báo về hành vi này trước khi sử dụng thành phần. Ví dụ: không nên tự động gửi biểu mẫu khi một trường nhận được tiêu điểm hoặc sau khi người dùng thêm nội dung vào trường.
Nhãn
Nhãn cho người dùng biết mục đích của một trường (nếu trường đó là bắt buộc) và cũng có thể cung cấp thông tin về các yêu cầu của trường, chẳng hạn như định dạng đầu vào. Nhãn phải luôn hiển thị và mô tả chính xác trường biểu mẫu cho người dùng.
Một trong những nguyên tắc cơ bản của biểu mẫu hỗ trợ tiếp cận là thiết lập mối liên kết rõ ràng và chính xác giữa một trường và nhãn của trường đó. Điều này đúng cả về mặt hình ảnh lẫn lập trình. Nếu không có ngữ cảnh này, người dùng có thể không hiểu cách điền vào các trường trong biểu mẫu.
<form id="sundae-order-form">
<p><label>Name (required): <input type="name" autocomplete="name" required></label></p>
<p><label>Telephone (required): <input type="tel" autocomplete="tel" required></label></p>
<p><label>Email address: <input type="email" autocomplete="email"></label></p>
</form>
Ngoài ra, các trường biểu mẫu có liên quan, chẳng hạn như địa chỉ gửi thư, cần được nhóm lại bằng cách lập trình và trực quan. Một phương pháp là sử dụng fieldset và mẫu chú giải để nhóm các phần tử tương tự nhau.
Nội dung mô tả
Nội dung mô tả trường có mục đích tương tự như nhãn ở chỗ chúng được dùng để cung cấp thêm ngữ cảnh cho trường và các yêu cầu. Nội dung mô tả trường không bắt buộc đối với chức năng hỗ trợ tiếp cận nếu nhãn hoặc hướng dẫn biểu mẫu đủ mô tả.
Tuy nhiên, có những trường hợp việc thêm thông tin bổ sung sẽ hữu ích để tránh lỗi biểu mẫu, chẳng hạn như chuyển tiếp thông tin về độ dài tối thiểu của dữ liệu đầu vào cho trường mật khẩu hoặc cho người dùng biết định dạng lịch cần sử dụng (chẳng hạn như MM-DD-YYYY).
Bạn có thể sử dụng nhiều phương thức để thêm nội dung mô tả trường vào biểu mẫu. Một trong những phương pháp tốt nhất là thêm thuộc tính aria-describedby vào phần tử biểu mẫu, ngoài phần tử <label>. Trình đọc màn hình sẽ đọc cả nội dung mô tả và nhãn.
Nếu bạn thêm thuộc tính aria-labelledby vào phần tử, thì giá trị thuộc tính sẽ ghi đè văn bản trong <label>. Như mọi khi, hãy nhớ kiểm thử mã hoàn thiện với tất cả các AT mà bạn dự định hỗ trợ.
Lỗi
Khi tạo biểu mẫu hỗ trợ tiếp cận, bạn có thể làm nhiều việc để ngăn người dùng mắc lỗi khi điền biểu mẫu. Trước đó trong mô-đun này, chúng ta đã đề cập đến việc đánh dấu rõ ràng các trường, tạo nhãn nhận dạng và thêm nội dung mô tả chi tiết bất cứ khi nào có thể. Tuy nhiên, dù bạn cho rằng biểu mẫu của mình rõ ràng đến mức nào, cuối cùng người dùng cũng sẽ mắc lỗi.
Khi người dùng gặp lỗi biểu mẫu, bước đầu tiên là cho người dùng biết lỗi. Trường xảy ra lỗi phải được xác định rõ ràng và lỗi phải được mô tả cho người dùng bằng văn bản.
Có nhiều phương thức để hiển thị thông báo lỗi, chẳng hạn như:
- Một cửa sổ bật lên, cùng dòng gần nơi xảy ra lỗi
- Một tập hợp lỗi được nhóm lại trong một thông báo lớn hơn ở đầu trang
Hãy nhớ chú ý đến tiêu điểm bàn phím và các tuỳ chọn vùng trực tiếp ARIA khi thông báo lỗi.
Bất cứ khi nào có thể, hãy đưa ra cho người dùng một đề xuất chi tiết về cách khắc phục lỗi. Có hai thuộc tính để thông báo cho người dùng về lỗi.
- Bạn có thể sử dụng thuộc tính HTML bắt buộc. Trình duyệt sẽ cung cấp thông báo lỗi chung dựa trên các tham số xác thực đã gửi.
- Hoặc bạn có thể sử dụng thuộc tính aria-required để chia sẻ thông báo lỗi tuỳ chỉnh với các AT. Chỉ AT mới nhận được thông báo, trừ phi bạn thêm mã để tất cả người dùng đều nhìn thấy thông báo.
Khi người dùng cho rằng tất cả lỗi đã được khắc phục, hãy cho phép họ gửi lại biểu mẫu và cung cấp ý kiến phản hồi về kết quả gửi. Thông báo lỗi cho người dùng biết rằng họ cần cập nhật thêm, trong khi thông báo thành công xác nhận rằng họ đã giải quyết tất cả lỗi và gửi biểu mẫu thành công.
Các tiêu chí thành công khác
WCAG 2.2 đã đưa ra các tiêu chí thành công sau đây tập trung vào trải nghiệm biểu mẫu dễ tiếp cận hơn:
Kiểm tra mức độ hiểu biết
Kiểm tra kiến thức của bạn về các biểu mẫu hỗ trợ tiếp cận
Phương thức nhập dữ liệu vào biểu mẫu nào sau đây dễ tiếp cận nhất?
Email address: <input type="email" required><label>Email address: <input type="email" required></label><label>Email address: <input type="email" required autocomplete="email"></label><label>Email address (required): <input type="email" required aria-describedby="email-validation"> <span id="email-validation" class="validation-message">Please provide a valid email address using the format name@place.com</span></label>