เชื่อมข้อผิดพลาดกับช่องกรอกข้อมูลด้วย aria-describedby

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

คุณต้องเชื่อมข้อความเข้ากับช่องป้อนข้อมูลอย่างเป็นทางการ แอตทริบิวต์ที่ใช้ทำเช่นนี้คือ aria-describedby และแอตทริบิวต์นี้อยู่บนช่องดังกล่าว

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

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

aria-describedby ไม่ได้แทนที่ป้ายชื่อ ป้ายชื่อจะให้ ชื่อ ส่วน describedby จะเพิ่มข้อมูลที่อ่านต่อจากชื่อ

คุณสามารถระบุหลาย id โดยคั่นด้วยช่องว่าง เบราว์เซอร์จะอ่านตามลำดับ จึงสามารถรวม คำใบ้ และข้อผิดพลาดเข้าด้วยกันได้

เพิ่ม id ของข้อผิดพลาดใน aria-describedby เฉพาะขณะที่ข้อผิดพลาดแสดงอยู่เท่านั้น การชี้ไปยังโหนดว่างหรือซ่อนอยู่ อาจทำให้โปรแกรมอ่าน ไม่อ่านอะไรเลย หรือทำให้ผู้ใช้สับสน

องค์ประกอบที่ใช้เป็นคำอธิบายต้องมีข้อความจริงและมองเห็นได้ aria-describedby จะอ่าน เนื้อหา ขององค์ประกอบนั้น ดังนั้น span ที่ว่างเปล่าจึงไม่ให้คำอธิบายที่เป็นประโยชน์

หากเป้าหมายมีค่า display none โปรแกรมอ่านหน้าจอส่วนใหญ่จะข้ามเป้าหมายนั้น ควรแสดงข้อความข้อผิดพลาดและทำให้มองเห็นได้ เพื่อให้มีการประกาศ คำอธิบาย จริง

ใช้ describedby คู่กับ aria-invalid บนช่องเดียวกัน อันหนึ่งบอกว่าการป้อนข้อมูลไม่ผ่าน อีกอันบอกเหตุผล ทั้งสองอย่างร่วมกันจึงให้ข้อมูลครบถ้วน

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

คุณทำให้โปรแกรมอ่านหน้าจออ่านข้อผิดพลาดพร้อมกับช่องป้อนข้อมูลได้อย่างไร

เชื่อมข้อผิดพลาดเข้ากับช่องป้อนข้อมูลด้วย aria-describedby ที่ชี้ไปยัง id จริงและมองเห็นได้ จากนั้นโปรแกรมอ่านหน้าจอจะอ่านช่องป้อนข้อมูลและข้อผิดพลาดพร้อมกัน ✅