Biểu mẫu là phần tử cho phép người dùng cung cấp dữ liệu vào một trường hoặc 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 gồm nhiều trường trên mỗi trang, xác thực thông tin đầu vào và đôi khi là CAPTCHA.
Biểu mẫu được xem là một trong những phần khó nhất để có được ngay từ một khía cạnh hỗ trợ tiếp cận, vì chúng đòi hỏi kiến thức về tất cả các yếu tố mà chúng tôi đã đề cập, cũng như các quy tắc bổ sung dành riêng cho các biểu mẫu. Với một số người dùng và thời gian, bạn có thể tạo một biểu mẫu dễ tiếp cận phù hợp với bạn và người dùng.
Biểu mẫu là học phần 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 học phần 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 biểu mẫu phần tử.
Trường
Nền tảng của biểu mẫu là trường. Các trường là những mẫu tương tác nhỏ, chẳng hạn như phần tử đầu vào hoặc nút chọn, cho phép người dùng nhập nội dung hoặc tạo lựa chọn. Có nhiều trường biểu mẫu để lựa chọn.
Đề xuất mặc định là sử dụng các mẫu HTML đã thiết lập thay vì xây dựng một số tính năng tuỳ chỉnh bằng ARIA, chẳng hạn như một số tính năng và các chức năng (chẳng hạn như trạng thái của trường, thuộc tính và giá trị) về bản chất là tích hợp vào các phần tử HTML, nhưng bạn phải thêm ARIA tuỳ chỉnh theo cách thủ công.
ARIA
<div role="form" id="sundae-order-form"> <!-- form content --> </div>
HTML
<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, trong đó có thể áp dụng, 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 giúp chi tiết hơn định nghĩa hoặc xác định mục đích đối với 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 chiếc bánh sinh nhật trong một trường có tính năng tự động hoàn thành ngày sinh nhật
được gán cho thuộc tính đó (bday). Nhìn chung, các thuộc tính tự động hoàn thành giúp
điền biểu mẫu dễ dàng và nhanh chóng hơn. Điều này đặc biệt hữu ích đối với những người
những người mắc chứng rối loạn nhận thức và đọc hiểu cũng như những người sử dụng ATSH, chẳng hạn như màn hình
độc giả.
<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 tâm đ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 đó trước đó bằng cách sử dụng thành phần này. Ví dụ: Biểu mẫu không được gửi tự động 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 thông báo cho người dùng về mục đích của một trường (nếu bắt buộc phải là trường này), cũng như có thể cung cấp thông tin về các yêu cầu của trường, chẳng hạn như thông tin đầu vào . Nhãn phải luôn hiển thị và mô tả chính xác biểu mẫu cho người dùng.
Một trong những nguyên lý nền tảng về hình thức dễ tiếp cận là thiết lập một nguyên tắc rõ ràng kết nối chính xác giữa trường và nhãn của trường đó. Điều này đúng cả về mặt hình ảnh theo phương thức lập trình. Nếu không có bối 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 phải được nhóm theo phương thức lập trình và trực quan. Một phương pháp là sử dụng nhóm trường/huyền thoại để nhóm các phần tử tương tự nhau.
Nội dung mô tả
Mô tả trường tương tự như nhãn ở chỗ chúng được dùng để cung cấp thêm bối cảnh cho trường và các yêu cầu. Nội dung mô tả trường không khớp cần thiết cho khả năng tiếp cận nếu nhãn hoặc hướng dẫn biểu mẫu mang tính mô tả đủ.
Tuy nhiên, có những trường hợp mà 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ư dưới dạng MM-DD-YYYY).
Bạn có thể sử dụng nhiều phương pháp để 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
aria-mô tả
cho phần tử biểu mẫu, ngoài phần tử <label>. Màn hình
người đọc sẽ đọc cả nội dung mô tả và nhãn.
Nếu bạn thêm thuộc tính
aria-gắn nhãn
cho phần tử của bạn, thì giá trị thuộc tính sẽ ghi đè văn bản trong
<label>. Như thường lệ, hãy nhớ kiểm thử mã cuối cùng với tất cả các AT mà bạn
.
Lỗi
Khi tạo biểu mẫu dễ tiếp cận, có nhiều biện pháp để ngăn người dùng mắc lỗi biểu mẫu. Trong phần trước của học phần này, chúng tôi đã đề cập đến cách đánh dấu rõ ràng các trường, tạo nhãn nhận dạng và thêm mô tả chi tiết bất cứ khi nào nhất có thể. Nhưng cho dù bạn nghĩ biểu mẫu của mình rõ ràng đến mức nào thì cuối cùng, người dù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à thông báo lỗi. Trường nơi 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 pháp để hiển thị lỗi , chẳng hạn như:
- Cửa sổ bật lên, cùng dòng gần nơi xảy ra lỗi
- Tập hợp các 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à tuỳ chọn khu vực trực tiếp của ARIA khi thông báo lỗi.
Bất cứ khi nào có thể, hãy đề xuất chi tiết cho người dùng về cách khắc phục . Có hai thuộc tính dùng để thông báo lỗi cho người dùng.
- Bạn có thể sử dụng thuộc tính HTML bắt buộc. Trình duyệt sẽ đưa ra thông báo lỗi chung dựa trên thông 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 cho AT. 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 nhìn thấy thông báo.
Sau 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 phản hồi về kết quả gửi. Một lỗi thông báo cho người dùng biết họ cần thực hiện thêm nội dung cập nhật nào, trong khi một thông báo thành công xác nhận rằng họ đã khắc phục tất cả các lỗi và gửi biểu mẫu thành công.
Kiểm tra kiến thức
Kiểm tra kiến thức của bạn về các biểu mẫu có thể truy cập
Câu trả lời nào dưới đây là cách nhập biểu mẫu 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>