Bạn có thể điền vào biểu mẫu theo nhiều cách. Mọi người có thể sử dụng biểu mẫu của bạn trên điện thoại thông minh khi đang đứng trong một chiếc xe buýt đông đúc, khi sử dụng trình đọc màn hình hoặc trên máy tính xách tay cũ. Hãy xem cách bạn có thể đảm bảo biểu mẫu của mình hoạt động trên nhiều thiết bị và trong những ngữ cảnh khác nhau.
Đảm bảo biểu mẫu hoạt động đối với người dùng bàn phím
Bạn nên thử nghiệm đầu tiên để đảm bảo biểu mẫu có thể truy cập được là điền vào biểu mẫu chỉ bằng bàn phím.
Mở biểu mẫu rồi thử di chuyển bằng phím tab.
Bạn có biết rõ trường biểu mẫu nào hiện đang hoạt động không?
Để giúp người dùng biết trường biểu mẫu nào đang hoạt động, bạn có thể sử dụng chỉ báo tiêu điểm.
Dùng thử.
Dùng phím tab để chuyển đến phương thức nhập.
Bạn có thấy đường viền khi đầu vào đang hoạt động không?
Đó là chỉ báo lấy nét.
Bạn có thể thêm chỉ báo tiêu điểm bằng cách sử dụng lớp giả lập CSS :focus.
input:focus {
outline: 4px solid #222;
}
Tìm hiểu thêm về cách thiết kế chỉ báo tiêu điểm hỗ trợ tiếp cận.
Giúp người dùng di chuyển trong biểu mẫu
Một cách kiểm tra hữu ích khác về khả năng hữu dụng và khả năng tiếp cận là đảm bảo rằng thứ tự thẻ hợp lý tuân theo thứ tự thẻ hình ảnh. Làm cách nào để kiểm tra thứ tự thẻ? Nhấn phím tab hoàn toàn qua biểu mẫu của bạn. Bạn có nhận thấy bất kỳ bước chuyển hướng phi logic nào không? Đảm bảo thứ tự DOM khớp với thứ tự hình ảnh.
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 hoàn tất biểu mẫu của bạn trên thiết bị cảm ứng
Vậy thì tuyệt quá! Bạn chắc chắn rằng biểu mẫu của mình tương thích với bàn phím. Bây giờ, hãy xem cách bạn có thể đảm bảo tính năng này cũng hoạt động trên các thiết bị cảm ứng như điện thoại di động.
Mở biểu mẫu trên thiết bị cảm ứng, điền vào tất cả các trường và gửi biểu mẫu.
Bạn có phải nhấn nhiều lần để chọn một chế độ kiểm soát biểu mẫu không?
Vấn đề có thể là do khu vực nhấn quá nhỏ.
Hãy đảm bảo kích thước mục tiêu nhấn của nút tối thiểu là 48px, đồng thời mỗi <input> và <select> đều đủ lớn để nhấn vào.
Bạn cũng có thể giúp người dùng di chuyển trong biểu mẫu của mình trên các thiết bị cảm ứng bằng cách thêm đủ khoảng cách giữa các chế độ điều khiển biểu mẫu.
Đảm bảo người dùng nhận được bàn phím được tối ưu hoá
Trong các mô-đun trước, bạn đã tìm hiểu cách kích hoạt một bàn phím ảo khác bằng thuộc tính type hoặc inputmode.
Mở bản minh hoạ trên điện thoại rồi nhấn vào trường số điện thoại.
Xin lưu ý rằng theo mặc định, các số sẽ xuất hiện trên bàn phím ảo, cùng với các ký tự khác mà bạn có thể cần đến cho số điện thoại.
Sử dụng type="tel" để có bàn phím ảo được tối ưu hoá cho việc nhập số điện thoại.
Sử dụng điện thoại để tự mình dùng thử và xem liệu bạn có thể dễ dàng nhập mọi ký tự cần thiết để điền số điện thoại hay không.
Nếu bạn muốn biết bàn phím ảo hoạt động như thế nào với type khác, hãy thử type="email" trong bản minh hoạ.
Đảm bảo các nút trên biểu mẫu không bị ẩn
Hãy tưởng tượng bạn điền vào một biểu mẫu dài
và sẵn sàng gửi đi. Nhưng nút Submit (Gửi) ở đâu?
Biểu tượng này có thể nằm phía sau thanh công cụ của trình duyệt, nằm ở cuối màn hình.
Một cách để đảm bảo các nút hiển thị là dùng hàm CSS env().
Tìm hiểu cách đảm bảo các nút không bị giao diện người dùng trên thiết bị che khuất.
Đảm bảo biểu mẫu của bạn hoạt động trên nhiều nền tảng
Hãy cố gắng kiểm tra biểu mẫu của bạn trên càng nhiều thiết bị càng tốt. Bạn có máy tính xách tay cũ? Mở trình duyệt mặc định trên trình duyệt đó và thử nghiệm biểu mẫu của bạn. Bạn của bạn có máy tính bảng? Hãy mượn và thử nghiệm biểu mẫu của bạn ở đó.
Một số kiểu trông có khác trong một trình duyệt không? Bạn có thể tìm hiểu cách đảm bảo kiểu của mình hoạt động trên nhiều nền tảng trong mô-đun sau.
BrowserStack cung cấp các tài khoản kiểm thử miễn phí cho các dự án nguồn mở, còn Browserling cung cấp bản dùng thử miễn phí để kiểm thử trên nhiều trình duyệt, thiết bị và hệ điều hành.
Giúp người dùng hoàn tất biểu mẫu của bạn trong nhiều ngữ cảnh
Mọi người không chỉ sử dụng các trình duyệt, thiết bị và hệ điều hành khác nhau. Mọi người cũng sử dụng biểu mẫu của bạn trong nhiều ngữ cảnh. Hãy dùng thử ngay! Ngoài trời đang nắng phải không? Cầm điện thoại rồi ra ngoài. Sử dụng biểu mẫu trong điều kiện ánh sáng chói là một cách hay để kiểm tra xem tỷ lệ tương phản có thể sử dụng được hay không.
Tìm hiểu thêm về khả năng hỗ trợ tiếp cận về màu sắc và độ tương phản.
Đảm bảo biểu mẫu hoạt động khi kết nối kém
Giả sử bạn đi du lịch ở đâu đó trên tàu. Bạn mở một trang web trên điện thoại. Bạn tự hỏi vì sao việc tải một trang web lại có thể mất nhiều thời gian đến vậy 😅.
Bạn có thể mô phỏng kết nối chậm và nhiều loại mạng bằng WebPageTest hoặc DevTools.
Tìm hiểu thêm về kiểm thử với băng thông thấp và độ trễ cao.
Giúp người dùng sử dụng biểu mẫu của bạn khi họ đang di chuyển
Hãy tưởng tượng rằng bạn đang đi bộ đến một cuộc hẹn. Đột nhiên, điện thoại của bạn đổ chuông, bạn trả lời cuộc gọi và đồng thời nhận được thông báo từ công ty bảo hiểm về việc hoàn tất biểu mẫu đăng ký mà bạn đã bắt đầu. Bạn mở biểu mẫu, cố gắng điền vào trong khi vẫn vừa đi vừa nói.
Hãy nhớ rằng mọi người sẽ sử dụng biểu mẫu của bạn trong nhiều ngữ cảnh khác nhau. Trong những tình huống căng thẳng, trong khi làm những việc khác, khi đang di chuyển. Bạn có thể giúp người dùng bằng cách đảm bảo biểu mẫu của bạn dễ sử dụng.
Hãy thử đặt cho mình một giới hạn thời gian để hoàn thành biểu mẫu. Cố gắng mô phỏng các điều kiện không hoàn hảo mà bạn có thể thử nghiệm biểu mẫu của mình.
Nhớ chia sẻ kết quả thử nghiệm
Ghi lại tất cả các thử nghiệm và chia sẻ kết quả với nhóm của bạn. Điều này sẽ giúp sắp xếp thứ tự ưu tiên cho các mục hành động, để đảm bảo mọi người trong nhóm của bạn đều biết những công việc quan trọng nhất.
Tìm hiểu thêm về cách chia sẻ kết quả kiểm thử.
Kiểm tra kiến thức
Kiểm tra kiến thức của bạn về kiểm thử trên nhiều nền tảng
Bạn có thể chỉ hiện chỉ báo tiêu điểm cho người dùng bàn phím không?
:focus-visible.:focus-detected.:focus-shown.Tài nguyên
- WebPageTest: Kiểm tra hiệu suất và tối ưu hóa trang web
- Kiểm thử với băng thông thấp và độ trễ cao
- Chia sẻ kết quả thử nghiệm