ระบุสถานะไม่ถูกต้องด้วย aria-invalid

กรอบสีแดงบอกผู้ใช้ที่มองเห็นว่าช่องป้อนข้อมูลไม่ผ่าน แต่ผู้ใช้โปรแกรมอ่านหน้าจอไม่เห็นสี จึงต้องระบุความล้มเหลวไว้ใน โค้ด 🚫

แอตทริบิวต์ aria-invalid ใช้ระบุว่าการควบคุมไม่ผ่านการตรวจสอบความถูกต้อง ตั้งค่าเป็น true แล้วเทคโนโลยีสิ่งอำนวยความสะดวกจะประกาศสถานะข้อผิดพลาด

ช่องที่ไม่มี aria-invalid จะถือว่าถูกต้อง คุณควรเพิ่ม aria-invalid="true" เฉพาะเมื่อการตรวจสอบล้มเหลวจริงเท่านั้น

เมื่อผู้ใช้แก้ไขค่าแล้ว ให้ตั้งค่า aria-invalid เป็น false หรือลบค่าออก การปล่อยให้เป็น true จะประกาศข้อผิดพลาดที่ไม่มีอยู่แล้ว

ใช้ aria-invalid เมื่อคุณ ตรวจสอบ จริง ๆ ไม่ใช่ตอนโหลดหน้า การทำเครื่องหมายช่องว่างว่าไม่ถูกต้องก่อนที่ผู้ใช้จะเริ่มพิมพ์เป็นการสร้างอุปสรรค

aria-invalid บอกว่ามีบางอย่างผิดพลาด แต่ไม่ได้บอกว่าเป็นอะไร ให้ใช้คู่กับ aria-describedby เสมอ เพื่อให้ผู้ใช้ได้ยินเหตุผลด้วย

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

คุณสามารถเลือกแอตทริบิวต์นี้ใน CSS เพื่อแสดงวงแหวนสีแดงได้ วิธีนี้ช่วยให้ ภาพที่แสดง และความหมายเชิงโครงสร้างสอดคล้องกันอย่างสมบูรณ์

aria-invalid ยังรับค่าอย่าง grammar หรือ spelling ได้ด้วย แต่สำหรับแบบฟอร์มส่วนใหญ่ การใช้ true ธรรมดาคือสิ่งที่ต้องการ

อย่าพึ่งพา class สีแดงเพียงอย่างเดียวเพื่อสื่อว่ามีข้อผิดพลาด class จะมองไม่เห็นสำหรับเทคโนโลยีสิ่งอำนวยความสะดวก ส่วน aria-invalid คือสิ่งที่ถ่ายทอดความหมาย

ทำเครื่องหมายให้แต่ละตัวควบคุมที่ไม่ผ่านแยกกัน การตั้งค่า aria-invalid บนตัวครอบหรือแบบฟอร์มไม่ได้บอกผู้ใช้ว่า ช่องรับข้อมูล ใดต้องแก้ไข

aria-invalid="true" สื่อสารอะไรจริง ๆ

ใช้ aria-invalid เพื่อทำเครื่องหมายช่องที่ไม่ผ่าน ตั้งค่าเป็น true เมื่อเกิดข้อผิดพลาดและเป็น false เมื่อแก้ไขแล้ว พร้อมใช้คู่กับข้อความแสดงข้อผิดพลาดที่มีการอธิบาย ✅