aria-describedby สำหรับบริบทเพิ่มเติม

บางครั้งการควบคุมต้องมีมากกว่าชื่อ aria-describedby จะเชื่อมโยงบริบทเพิ่มเติม ซึ่งโปรแกรมอ่านหน้าจอจะอ่านต่อจากชื่อ

เช่นเดียวกับ labelledby aria-describedby จะเก็บ id ขององค์ประกอบอื่นไว้ เบราว์เซอร์จะดึงข้อความขององค์ประกอบนั้นมาเป็นคำอธิบาย

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

คำแนะนำของช่อง เช่น กฎรูปแบบข้อมูล ควรอยู่ใน aria-describedby เพื่อให้ระบบอ่านคำแนะนำโดยอัตโนมัติเมื่อช่องได้รับโฟกัส

คำอธิบายเป็นข้อมูลเสริม หากองค์ประกอบมีเพียง aria-describedby และไม่มีชื่อ องค์ประกอบนั้นก็ยังถือว่าไม่มีป้ายกำกับอย่างมีประสิทธิภาพ

ใส่ id หลายรายการคั่นด้วยช่องว่างใน aria-describedby แล้วเบราว์เซอร์จะรวมข้อความเข้าด้วยกัน ซึ่งเหมาะสำหรับคำแนะนำที่มาพร้อมข้อผิดพลาด

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

คำอธิบายควรเป็นประโยคสั้น ๆ ข้อความ aria-describedby ที่ยาวจะถูกอ่านทั้งหมดทุกครั้ง ซึ่งทำให้เหนื่อยหน่ายได้อย่างรวดเร็ว

ต่างจากป้ายกำกับที่ซ่อนอยู่ คำแนะนำที่อ้างอิงมักยังคง มองเห็นได้ บนหน้าจอ จึงช่วยผู้ใช้ที่มองเห็นได้เช่นเดียวกับผู้ใช้กลุ่มอื่น

โปรแกรมอ่านหน้าจอส่วนใหญ่รองรับ aria-describedby แต่บางโปรแกรมจะประกาศข้อความนี้เฉพาะในบางโหมด ดังนั้นโปรดทดสอบคำแนะนำด้วยโปรแกรมอ่านจริง

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

คุณได้เรียนรู้ว่า aria-describedby ใช้การอ้างอิง id เพื่ออ่านคำแนะนำและข้อผิดพลาดหลังชื่อ ซึ่งเป็นข้อมูลเสริมและไม่สามารถใช้แทนชื่อได้ 💬