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