ย้ายโฟกัสไปยังข้อผิดพลาดแรก

ผู้ใช้ส่งแบบฟอร์ม หน้าแสดงข้อผิดพลาดไว้ด้านบน แต่โฟกัสยังอยู่ที่ปุ่ม ผู้ใช้จึงไม่รู้เลยว่ามีบางอย่าง ไม่ผ่าน 😕

เมื่อการส่งแบบฟอร์มไม่ผ่าน ให้ย้าย โฟกัส ไปยังช่องแรกที่ไม่ถูกต้อง ผู้ใช้จะไปอยู่ตรงจุดเริ่มต้นของการแก้ไขพอดี โดยไม่ต้องค้นหา

ค้นหาตัวควบคุมที่ไม่ผ่านตัวแรก แล้วเรียก focus() กับตัวควบคุมนั้น ตอนนี้ทั้งผู้ใช้แป้นพิมพ์และผู้ใช้โปรแกรมอ่านหน้าจอจะเริ่มต้นจากตำแหน่งที่ถูกต้อง

เมื่อโฟกัสไปถึงจุดนั้น โปรแกรมอ่านหน้าจอจะประกาศชื่อช่อง บอกว่าช่องนั้น ไม่ถูกต้อง และอ่านข้อผิดพลาดที่อธิบายไว้ทั้งหมดในครั้งเดียว

เลือกข้อผิดพลาด แรก ตามลำดับในเอกสารเสมอ การกระโดดไปยังช่องที่อยู่ถัดไปจะข้ามปัญหาที่ผู้ใช้ยังต้องแก้ไข

การเลื่อนข้อผิดพลาดให้เข้ามาอยู่ในมุมมองช่วยผู้ใช้เมาส์ แต่ผู้ใช้แป้นพิมพ์และโปรแกรมอ่านหน้าจอต้องการให้ย้าย โฟกัส จริง ๆ ไม่ใช่เพียงเลื่อนภาพ

หากมีข้อผิดพลาดหลายรายการ ให้โฟกัสที่ สรุปข้อผิดพลาดด้านบนก่อน แสดงปัญหาแต่ละรายการเป็นลิงก์ที่กระโดดไปยังช่องของปัญหานั้น

โดยค่าเริ่มต้น หัวข้อหรือ div จะรับโฟกัสไม่ได้ ให้เพิ่ม tabindex="-1" เพื่อให้สคริปต์ย้ายโฟกัสไปยังองค์ประกอบนั้นได้โดยใช้โปรแกรม

ภายในสรุป แต่ละรายการคือลิงก์ไปยัง id ของช่อง เมื่อเปิดใช้งาน ลิงก์จะส่งโฟกัสตรงไปยัง ช่องรับข้อมูลที่มีปัญหา

ย้ายโฟกัสเพื่อตอบสนองต่อการ ส่งแบบฟอร์ม ของผู้ใช้เท่านั้น อย่าย้ายทุกครั้งที่กดแป้นพิมพ์ การดึงโฟกัสออกระหว่างพิมพ์ทำให้สะดุดและไม่เป็นที่ต้องการ

หลังจากผู้ใช้แก้ไขทุกอย่างและส่งแบบฟอร์มอีกครั้ง ให้ย้ายโฟกัสไปยัง ข้อความแจ้งความสำเร็จ เพื่อให้ผู้ใช้ได้ยินว่าสุดท้ายแล้วดำเนินการสำเร็จ

เมื่อการส่งแบบฟอร์มไม่ผ่าน ควรย้ายโฟกัสไปที่ใด

เมื่อไม่ผ่าน ให้ย้าย โฟกัส ไปยังช่องแรกที่ไม่ถูกต้องหรือสรุปข้อผิดพลาดที่รับโฟกัสได้ และเมื่อผ่านแล้วให้ย้ายไปยังข้อความแจ้งความสำเร็จ ✅