เทคนิคสร้างช่องกรอกเลข VIN ให้เข้าถึงได้ง่ายด้วย HTML และ TypeScript

ฟอร์มกรอกหมายเลขประจำตัวรถหรือ VIN ที่ใช้งานได้ดีเฉพาะบนเบราว์เซอร์ที่ใช้เมาส์คลิกถือว่าเป็นงานที่ยังไม่เสร็จสมบูรณ์ ผู้ใช้งานโปรแกรมอ่านหน้าจอ ผู้ใช้งานที่ใช้คีย์บอร์ดอย่างเดียว และผู้ที่จำเป็นต้องซูมขยายข้อความ ต่างก็ต้องการความชัดเจนในระดับเดียวกับผู้ใช้งานทั่วไป ไม่ว่าจะเป็นป้ายกำกับที่แท้จริง ข้อความแจ้ง error ที่คาดเดาได้ และเสียงประกาศยืนยันเมื่อกระบวนการถอดรหัสเสร็จสิ้น บทความนี้ได้รวบรวมรูปแบบ HTML และ TypeScript เชิงปฏิบัติสำหรับช่องค้นหา VIN ฟรี เพื่อช่วยป้องกันปัญหาความล้มเหลวเงียบที่มักเกิดขึ้นกับผู้ใช้งานกลุ่มนี้

ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง

การใช้เพียง placeholder ที่จะหายไปเมื่อเริ่มพิมพ์นั้นใช้งานยากและมองข้ามได้ง่าย นักพัฒนาจึงควรใช้แท็ก <label for="..."> ที่มองเห็นได้ชัดเจน หรือใช้วิธีห่อหุ้มอินพุต และเก็บข้อความ placeholder ไว้สำหรับแสดงตัวอย่างรูปแบบเท่านั้น

การใช้กรอบสีแดงอย่างเดียวเพื่อบอกความผิดพลาดนั้นสร้างปัญหาให้กับผู้ใช้ที่มีภาวะตาบอดสี และมักใช้ไม่ได้ผลกับโปรแกรมอ่านหน้าจอหากไม่มีการอัปเดตข้อความ เมื่อการตรวจสอบความถูกต้องล้มเหลว นักพัฒนาควรตั้งค่า aria-invalid="true" เปิดแสดงโหนดแจ้งเตือน และระบุเหตุผลเป็นตัวหนังสือให้ชัดเจน ในระหว่างที่ระบบกำลังส่งคำขอ ผู้ใช้งานที่มองเห็นจะมองเห็นไอคอนหมุน spinner แต่สำหรับผู้ใช้เทคโนโลยีสิ่งอำนวยความสะดวก จำเป็นต้องประกาศสถานะเดียวกันผ่าน live region แบบสุภาพ เพื่อไม่ให้ระบบต้องคาดเดาเอง

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