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 đơn lẻ 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, phương thức xác thực dữ liệu đầu vào và đôi khi là một hình ảnh xác thực (CAPTCHA).
Biểu mẫu được coi là một trong những phần tử khó nhất để tiếp cận được ngay từ góc độ hỗ trợ tiếp cận, vì loại biểu mẫu này đòi hỏi bạn phải biết mọi thành phần mà chúng tôi đã đề cập, cũng như các quy tắc bổ sung dành riêng cho biểu mẫu. Chỉ cần dành chút thời gian và hiểu biết, bạn có thể tạo một biểu mẫu dễ tiếp cận phù hợp với cả 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 từng 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 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, tâm đ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.
Các trường
Cốt lõi 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 nhập hoặc nút chọn, 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ì xây dựng nội dung 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 trường, thuộc tính và giá trị) vốn đã được tích hợp vào các phần tử HTML, trong khi 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ễ truy cập 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 định nghĩa hoặc nhận dạng mục đích chi tiết hơn đối với tác nhân người dùng và công nghệ hỗ trợ (AT).
Các thuộc tính tự động hoàn thành cho phép người dùng cá nhân hoá các 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. Nhìn 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 đối với những người mắc chứng rối loạn nhận thức và đọc sách, cũng như những người sử dụng 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 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ụ: không được 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 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) của trường 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 dữ liệu đầ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 lý cơ bản của các 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 và 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 được nhóm theo phương thức lập trình và hình ảnh. Có một phương thức là sử dụng tập trường/mẫu mô tả để nhóm các thành phần tương tự nhau.
Thông tin mô tả
Nội dung mô tả trường tương tự như nhãn về mục đích là dùng để cung cấp thêm ngữ cảnh cho trường và các yêu cầu. Nếu nhãn hoặc hướng dẫn về biểu mẫu đã đủ mô tả thì không bắt buộc phải mô tả trường cho tính năng hỗ trợ tiếp cận.
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ề thời lượng nhập tối thiểu 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ư 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 thức tốt nhất là thêm thuộc tính aria-descriptionby 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ư 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 định hỗ trợ.
Lỗi
Khi tạo các biểu mẫu hỗ trợ tiếp cận, bạn có thể làm rất nhiều việc để 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 ta đã đề cập đến các trường được đánh dấu rõ rà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, cho dù bạn có nghĩ biểu mẫu rõ ràng đến mức nào thì rốt cuộc 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à xác định lỗi. Trường xảy ra lỗi phải được xác định rõ ràng và bản thân 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
- Tập hợp các lỗi được nhóm 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 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 đưa ra đề xuất chi tiết cho người dùng về cách khắc phục lỗi. Có hai thuộc tính dùng để thông báo cho người dùng về lỗi.
- Bạn có thể dùng thuộc tính HTML required (bắt buộc). Trình duyệt sẽ cung cấp thông báo lỗi chung dựa trên tham số xác thực được gửi.
- Hoặc bạn có thể dùng thuộc tính aria-required (bắt buộc) để 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 để hiển thị thông báo cho tất cả người dùng.
Khi người dùng cho rằng tất cả các lỗi đã được khắc phục, hãy cho phép họ gửi lại biểu mẫu và đưa ra ý 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 họ cần thực hiện thêm các bước cập nhật khác, còn thông báo thành công xác nhận rằng họ đã khắc phục tất cả lỗi và đã gửi biểu mẫu thành công.
Kiểm tra mức độ hiểu biết của bạn
Kiểm tra kiến thức của bạn về các biểu mẫu hỗ trợ tiếp cận
Câu trả lời nào sau đây là nội dung mà bạn dễ dàng tiếp cận nhất trong biểu mẫu?
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>