Kiểm thử biểu mẫu trên nhiều thiết bị và nền tảng

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, hoặc bằng trình đọc màn hình hay từ một máy tính xách tay cũ. Hãy xem làm thế nào bạn có thể đảm bảo biểu mẫu của mình hoạt động trên các thiết bị khác nhau và trong các ngữ cảnh khác nhau.

Đảm bảo biểu mẫu của bạn hoạt động cho người dùng bàn phím

Một cách kiểm tra hiệu quả đầu tiên để đảm bảo rằng người dùng dễ dàng truy cập được vào biểu mẫu là bạn chỉ cần dùng bàn phím để điền vào biểu mẫu. Mở biểu mẫu rồi thử di chuyển bằng phím tab. Bạn có rõ trường biểu mẫu nào đang hoạt động không? Để giúp người dùng biết trường nào trong biểu mẫu đang hoạt động, bạn có thể dùng các chỉ báo lấy nét.

Hãy dùng thử. Sử dụng phím tab để chuyển đến phương thức nhập. Bạn có thấy bố cục khi mục nhập đang hoạt động không? Đó là chỉ báo lấy tiêu điểm. Bạn có thể thêm các chỉ báo lấy nét bằng cách sử dụng Lớp giả :focus CSS.

input:focus {
  outline: 4px solid #222;
}

Tìm hiểu thêm về thiết kế chỉ báo tiêu điểm dễ tiếp cận.

Giúp người dùng di chuyển đến biểu mẫu

Một cách kiểm tra hiệu quả khác về khả năng hữu dụng và hỗ trợ tiếp cận là đảm bảo 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 thông qua biểu mẫu của bạn. Bạn có nhận thấy thao tác nhảy điều hướng bất hợp lý nào không? Hãy đả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 thành biểu mẫu của bạn trên thiết bị cảm ứng

Tuyệt vời! Bạn đã đảm bảo rằng biểu mẫu hoạt động với bàn phím. Bây giờ, hãy cùng xem cách bạn có thể đảm bảo Gemini cũng hoạt động được trên thiết bị cảm ứng, chẳng hạn như điện thoại di động.

Mở biểu mẫu trên thiết bị cảm ứng của bạn, đ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ế độ điều khiển biểu mẫu không? Vấn đề có thể là khu vực nhấn quá nhỏ. Hãy đảm bảo rằng kích thước đích nhấn của nút tối thiểu là 48 px, và mỗi <input>, <select> đều đủ lớn để nhấn vào. Bạn cũng có thể giúp người dùng di chuyển đến biểu mẫu trên thiết bị cảm ứng bằng cách thêm đủ khoảng cách giữa các thành phần điều khiển biểu mẫu.

Đảm bảo người dùng có được bàn phím 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 cách sử dụng thuộc tính type hoặc inputmode.

Đang mở cửa bản minh hoạ trên điện thoại rồi nhấn vào trường số điện thoại. Lưu ý rằng số được hiển thị theo mặc định trên bàn phím ảo, cùng với các ký tự khác mà bạn có thể cần cho số điện thoại. Sử dụng type="tel" để thiết lập bàn phím ảo được tối ưu hoá để nhập số điện thoại.

Sử dụng điện thoại để tự mình trải nghiệm, 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 không. Nếu bạn muốn biết cách hoạt động của bàn phím ảo cho một type khác, hãy thử dùng type="email" trong bản minh hoạ.

Đảm bảo các nút biểu mẫu không bị ẩn

Hãy tưởng tượng rằng bạn đã điền vào một biểu mẫu dài, và bạn đã sẵn sàng gửi video đó. Nhưng nút Gửi nằm ở đâu? Thanh công cụ 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 đều hiển thị là sử dụng hàm CSS env(). Tìm hiểu cách đảm bảo giao diện người dùng của thiết bị không che khuất các nút.

Đảm bảo biểu mẫu của bạn hoạt động được trên nhiều nền tảng

Hãy cố gắng kiểm tra các biểu mẫu của bạn trên nhiều thiết bị nhất có thể. 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à kiểm tra biểu mẫu của bạn. Bạn của bạn có một chiếc máy tính bảng? Mượn và kiểm tra biểu mẫu của bạn trê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 hoạt động trên nhiều nền tảng trong học phần sau.

BrowserStack cung cấp tài khoản thử nghiệm miễn phí cho các dự án nguồn mở, và Trình duyệt cung cấp bản dùng thử miễn phí để thử nghiệm 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 thành biểu mẫu 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 các ngữ cảnh khác nhau. Hãy dùng thử ngay! Lúc này ngoài trời có nắng không? Hãy cầm điện thoại rồi đ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ó 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 của bạn hoạt động khi kết nối kém

Giả sử bạn đi du lịch đến nơi nào đó trên xe lửa. Bạn mở một trang web trên điện thoại. Bạn sẽ thắc mắc tại sao việc tải một trang web lại mất nhiều thời gian như vậy phóng ra sao.

Bạn có thể mô phỏng các 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ề thử nghiệm 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

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 cũng như nhận thông báo yêu cầu công ty bảo hiểm hoàn thành 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 biểu mẫu trong khi vẫn đi bộ và 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 khi làm 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 rằng biểu mẫu của bạn dễ sử dụng.

Hãy thử tự đặt ra giới hạn thời gian để hoàn thành biểu mẫu. Hãy cố gắng mô phỏng các điều kiện không hoàn hảo để bạn có thể kiểm tra biểu mẫu của mình.

Đừng quên 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 biết được những nhiệm vụ quan trọng nhất.

Tìm hiểu thêm về chia sẻ kết quả kiểm tra.

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

Tài nguyên

• WebPageTest: Kiểm tra hiệu suất và tối ưu hoá trang web
• Thử nghiệm với băng thông thấp và độ trễ cao
• Chia sẻ kết quả kiểm thử