Biểu mẫu bạn tạo là dành cho mọi người. Mọi người sử dụng các thiết bị khác nhau. Một số dùng chuột, một số dùng thiết bị cảm ứng, một số dùng bàn phím, một số dùng thiết bị bằng cử động mắt. Một số dùng trình đọc màn hình, một số dùng màn hình nhỏ, một số dùng phần mềm phóng to văn bản. Mọi người đều muốn sử dụng biểu mẫu của bạn. Hãy tìm hiểu cách giúp mọi người dễ dàng truy cập và sử dụng biểu mẫu của bạn.
Đảm bảo người dùng hiểu được mục đích của một trường trong biểu mẫu
Có nhiều chế độ kiểm soát biểu mẫu để bạn lựa chọn.
Điểm chung của tất cả những người này là gì?
Mỗi thành phần điều khiển biểu mẫu phải có một phần tử <label> liên kết.
Phần tử <label> mô tả mục đích của việc kiểm soát biểu mẫu.
Văn bản <label> được liên kết trực quan với bảng điều khiển biểu mẫu và được trình đọc màn hình đọc to.
Ngoài ra, thao tác nhấn hoặc nhấp vào <label> sẽ tập trung vào chế độ điều khiển biểu mẫu được liên kết và khiến đối tượng này trở thành mục tiêu lớn hơn.
Sử dụng HTML có ý nghĩa để truy cập các tính năng tích hợp của trình duyệt
Trên lý thuyết, bạn có thể tạo một biểu mẫu chỉ bằng các phần tử <div>.
Bạn thậm chí có thể làm cho nó trông giống như một <form> gốc.
Có vấn đề gì khi sử dụng các phần tử không có ngữ nghĩa?
Các phần tử biểu mẫu được tích hợp sẵn cung cấp nhiều tính năng tích hợp sẵn. Hãy cùng xem một ví dụ.
Rõ ràng, <input> (mã đầu tiên trong ví dụ này) và <div> trông giống nhau.
Bạn thậm chí có thể chèn văn bản cho cả hai, vì <div> có thuộc tính contenteditable.
Tuy nhiên, có nhiều điểm khác biệt giữa việc sử dụng phần tử <input> thích hợp và việc <div> trông giống như <input>.
Người dùng trình đọc màn hình không nhận ra <div> là thành phần đầu vào và không thể hoàn thành biểu mẫu.
Tất cả người dùng trình đọc màn hình đều nghe thấy "Tên", không có chỉ báo cho biết phần tử này là một đối tượng điều khiển biểu mẫu để thêm văn bản.
Thao tác nhấp vào <div>Name</div> không tập trung vào <div> đi kèm với nó, trong khi <label> và <input> được kết nối bằng cách sử dụng thuộc tính for và id.
Sau khi gửi biểu mẫu, dữ liệu đã nhập vào <div> sẽ không được đưa vào yêu cầu.
Mặc dù bạn có thể đính kèm dữ liệu bằng JavaScript, nhưng <input> sẽ thực hiện việc đó theo mặc định.
Phần tử biểu mẫu tích hợp sẵn có các tính năng khác.
Ví dụ: với các thành phần biểu mẫu thích hợp và inputmode hoặc type chính xác, bàn phím ảo sẽ hiển thị các ký tự thích hợp. Việc sử dụng thuộc tính inputmode trên <div> thì không thể làm được việc đó.
Đảm bảo người dùng biết định dạng dữ liệu dự kiến
Bạn có thể xác định nhiều quy tắc xác thực cho một chế độ kiểm soát biểu mẫu.
Ví dụ: giả sử một trường biểu mẫu phải luôn có ít nhất 8 ký tự.
Bạn dùng thuộc tính minlength để cho biết quy tắc xác thực cho các trình duyệt.
Làm cách nào để bạn có thể đảm bảo người dùng cũng biết về quy tắc xác thực? Kể cho họ biết.
Thêm thông tin về định dạng hợp lệ ngay bên dưới mục kiểm soát biểu mẫu.
Để làm rõ các thiết bị hỗ trợ, hãy sử dụng thuộc tính aria-describedby trên bảng điều khiển biểu mẫu và id trên thông báo lỗi có cùng giá trị để kết nối cả hai.
Giúp người dùng tìm thông báo lỗi để kiểm soát biểu mẫu
Trong mô-đun trước về xác thực, bạn đã tìm hiểu cách hiển thị thông báo lỗi trong trường hợp nhập dữ liệu không hợp lệ.
<label for="name">Name</label>
<input type="text" name="name" id="name" required>
Ví dụ: nếu một trường có thuộc tính required và bạn nhập dữ liệu không hợp lệ, thì trình duyệt sẽ hiển thị thông báo lỗi bên cạnh mục điều khiển biểu mẫu khi bạn gửi biểu mẫu. Trình đọc màn hình cũng sẽ đưa ra thông báo lỗi.
Bạn cũng có thể xác định thông báo lỗi của riêng mình:
Ví dụ này cần thêm thay đổi để kết nối thông báo lỗi với bảng điều khiển biểu mẫu.
Một phương pháp đơn giản là sử dụng thuộc tính aria-describedby
trên thành phần điều khiển biểu mẫu khớp với id trên phần tử thông báo lỗi.
Sau đó, hãy sử dụng aria-live="assertive" đối với thông báo lỗi.
Khu vực trực tiếp của ARIA sẽ thông báo lỗi cho người dùng trình đọc màn hình ngay khi lỗi xuất hiện.
Nhược điểm của phương pháp này đối với các biểu mẫu có nhiều trường là aria-live thường chỉ thông báo lỗi đầu tiên trong trường hợp có nhiều lỗi.
Như đã giải thích trong bài viết này về nhiều thông báo aria-live cho cùng một hành động, bạn có thể tạo một thông báo duy nhất bằng cách nối tất cả các lỗi. Một cách khác là thông báo nếu có lỗi, sau đó thông báo từng lỗi riêng lẻ khi trường được lấy tiêu điểm.
Đảm bảo người dùng nhận ra lỗi
Đôi khi, các nhà thiết kế sẽ tô màu đỏ cho trạng thái không hợp lệ bằng cách sử dụng lớp giả :invalid.
Tuy nhiên, để thông báo lỗi hoặc thành công,
bạn không nên chỉ dựa vào màu sắc.
Đối với những người bị mù màu đỏ/xanh lục, đường viền màu xanh lục và màu đỏ trông gần giống nhau.
Không thể xem liệu thông báo có liên quan đến lỗi hay không.
Ngoài màu sắc, hãy sử dụng biểu tượng hoặc thêm loại lỗi vào trước thông báo lỗi.
<span class="error">
<strong>Error:</strong>Please use at least eight characters.
</span>
Giúp người dùng di chuyển trong biểu mẫu
Bạn có thể thay đổi thứ tự hiển thị của các thành phần điều khiển biểu mẫu bằng CSS. Sự ngắt kết nối giữa thứ tự hình ảnh và điều hướng bằng bàn phím (thứ tự DOM) là vấn đề đối với trình đọc màn hình và người dùng bàn phím.
Tìm hiểu thêm về cách đảm bảo thứ tự hình ảnh trên trang tuân theo thứ tự DOM.
Giúp người dùng xác định chế độ kiểm soát biểu mẫu đang được đặt tiêu điểm
Hãy sử dụng bàn phím để di chuyển qua biểu mẫu này.
Bạn có nhận ra rằng kiểu của các thành phần điều khiển biểu mẫu đã thay đổi sau khi hoạt động không?
Đây là kiểu tiêu điểm mặc định.
Bạn có thể ghi đè lớp này bằng lớp giả lập CSS :focus.
Bất kể bạn sử dụng kiểu nào bên trong :focus, hãy luôn đảm bảo có thể nhận ra được sự khác biệt về hình ảnh giữa trạng thái mặc định và trạng thái lấy nét.
Tìm hiểu thêm về cách thiết kế chỉ báo tiêu điểm.
Đảm bảo biểu mẫu hữu dụng
Bạn có thể xác định nhiều vấn đề thường gặp bằng cách điền thông tin vào biểu mẫu bằng nhiều thiết bị. Chỉ sử dụng bàn phím, sử dụng trình đọc màn hình (chẳng hạn như NVDA trên Windows hoặc VoiceOver trên Mac) hoặc thu phóng trang lên 200%. Hãy luôn kiểm thử biểu mẫu trên nhiều nền tảng, đặc biệt là những thiết bị hoặc chế độ cài đặt mà bạn không dùng đến mỗi ngày. Bạn có biết người nào đó sử dụng trình đọc màn hình hoặc người nào đó sử dụng phần mềm phóng to văn bản không? Hãy đề nghị họ điền vào biểu mẫu của bạn. Các bài đánh giá về khả năng hỗ trợ tiếp cận rất tốt, việc thử nghiệm với người dùng thực tế thậm chí còn tốt hơn nữa.
Tìm hiểu thêm về cách đánh giá khả năng hỗ trợ tiếp cận và cách kiểm thử với người dùng thực tế.