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 thông tin đầu vào và đôi khi là một hình ảnh xác thực.
Biểu mẫu được coi là một trong những phần tử khó điều chỉnh nhất theo quan điểm về khả năng tiếp cận, vì chúng đòi hỏi kiến thức về tất cả các phần tử mà chúng ta đã đề cập, cũng như các quy tắc bổ sung chỉ dành riêng cho biểu mẫu. Chỉ cần bỏ ra chút thời gian và công sức, 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 phần tử biểu mẫu.
Trường
Cấu trúc cơ bản của biểu mẫu là các trường. Trường là các mẫu tương tác nhỏ, chẳng hạn như phần tử nút chọn hoặc đầu vào, cho phép người dùng nhập nội dung hoặc 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ẫu tuỳ chỉnh bằng ARIA, vì một số tính năng và chức năng (chẳng hạn như trạng thái, thuộc tính và giá trị của trường) 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 tự thêm ARIA.
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ó thể), 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. Việc thêm các thuộc tính tự động hoàn thành cho phép xác định hoặc nhận dạng mục đích một 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 ngày 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 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 nghệ hỗ trợ (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 những thay đổi theo ngữ cảnh khi nhận được tiêu điểm hoặc hoạt động đầ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ụ: biểu mẫu không được tự động gửi khi một trường nhận được tiêu điểm hoặc 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 dễ 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 và theo phương thức 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 theo cách lập trình và trực quan. Một phương pháp là sử dụng mẫu fieldset và chú thích để nhóm các phần tử tương tự.
Mô tả
Nội dung mô tả trường có mục đích tương tự như nhãn, đó là dùng để cung cấp thêm ngữ cảnh cho trường và các yêu cầu. Bạn không bắt buộc phải có nội dung mô tả trường để hỗ trợ tiếp cận nếu nhãn hoặc hướng dẫn về biểu mẫu có đủ nội dung mô tả.
Tuy nhiên, trong một số 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 thông tin đầu vào cho trường mật khẩu hoặc cho người dùng biết nên sử dụng định dạng lịch nào (chẳng hạn như DD-MM-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 thức hiệu quả 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ã cuối cùng với tất cả các công nghệ hỗ trợ mà bạn dự định hỗ trợ.
Lỗi
Khi tạo biểu mẫu dễ 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ể. Nhưng dù bạn cho rằng biểu mẫu của mình rõ ràng đến đâu, cuối cùng thì người dùng vẫn 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 đó. Bạn phải xác định rõ trường xảy ra lỗi và mô tả lỗi đó 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 phương thức cùng dòng xuất hiện gần vị trí xảy ra lỗi
- Một nhóm lỗi được gộp vào một thông báo lớn hơn ở đầu trang
Hãy chú ý đến tiêu điểm bàn phím và các lựa chọn về khu vực 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ó 2 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 required. Trình duyệt sẽ cung cấp một thông báo lỗi chung dựa trên các thông số xác thực đã điền.
- 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 cho các công nghệ hỗ trợ. Chỉ AT mới nhận được thông báo, trừ phi bạn thêm mã bổ sung để tất cả người dùng đều thấy thông báo.
Sau khi người dùng cho rằng tất cả lỗi đã được giải quyết, 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ả của việc gửi biểu mẫu. Thông báo lỗi cho người dùng biết rằng họ cần thực hiện thêm các nội dung cập nhật, trong khi thông báo thành công xác nhận rằng họ đã giải quyết tất cả các lỗi và gửi biểu mẫu thành công.
Các tiêu chí bổ sung để đánh giá mức độ thành công
WCAG 2.2 đã giới thiệu 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: