ปุ่มที่บอกได้ว่าทำอะไร

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

สำหรับ ปุ่มทั่วไป ข้อความที่มองเห็นภายในปุ่มคือชื่อที่เข้าถึงได้ คำที่ชัดเจนย่อมทำให้การประกาศชัดเจน

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

ป้ายกำกับอย่าง OK ส่ง หรือไป อาจคลุมเครือเมื่อมีหลายปุ่มใช้คำเดียวกัน ควรระบุ การดำเนินการเฉพาะเพื่อให้แต่ละปุ่มเข้าใจได้ด้วยตัวเอง

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

ตั้งชื่อ ปุ่มที่ไม่มีข้อความด้วย aria-label ตอนนี้ไอคอนยังแสดงอยู่ แต่เทคโนโลยีสิ่งอำนวยความสะดวกจะประกาศว่าปุ่มทำอะไร

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

ปุ่มสลับควรรายงานสถานะของตัวเอง ใช้ aria-pressed เพื่อให้โปรแกรมอ่านหน้าจอบอกว่าปุ่มเปิดหรือปิดอยู่

ปุ่มที่แสดงหรือซ่อนแผงควรมี aria-expanded เพื่อให้ผู้ใช้ได้ยินว่าแผงเปิดอยู่หรือยุบอยู่

ป้ายกำกับที่ดีควรสั้นแต่ตรงตามจริง โดยบอกสิ่งที่การกดปุ่มทำอย่างชัดเจนและไม่สร้างความประหลาดใจหลังคลิก

หาก ปุ่มมีข้อความที่มองเห็นได้ ให้คงคำเหล่านั้นไว้ภายในชื่อที่เข้าถึงได้ เพื่อให้ผู้ใช้ควบคุมด้วยเสียงพูดป้ายกำกับที่เห็นได้

ตั้งชื่อทุก ปุ่มตามการดำเนินการ ตั้งชื่อปุ่มที่มีแต่ไอคอน และเปิดเผยสถานะด้วยแอตทริบิวต์ aria ตอนนี้ผู้ใช้จะรู้เสมอว่าปุ่มต่าง ๆ ทำอะไร 👍