องค์ประกอบแบบอินเทอร์แอกทีฟระบุวัตถุประสงค์และสถานะ

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

วิธีทดสอบโฟกัสภาพด้วยตนเอง

หากต้องการทดสอบโฟกัสภาพด้วยตนเอง ให้TABผ่านหน้าเว็บ

  • คุณกด Tab ไปยังองค์ประกอบแบบอินเทอร์แอกทีฟแต่ละรายการได้ไหม
  • เมื่อคุณไปถึงองค์ประกอบแบบอินเทอร์แอกทีฟ จะมีเบาะแสให้เห็นที่ผู้ใช้สามารถโต้ตอบด้วยไหม
  • องค์ประกอบแบบอินเทอร์แอกทีฟแต่ละรายการจะมีลักษณะเปลี่ยนแปลงไปหรือไม่เมื่อคุณเลือกองค์ประกอบดังกล่าว

การจัดรูปแบบตัวบ่งชี้โฟกัสสำหรับองค์ประกอบแบบอินเทอร์แอกทีฟแต่ละรายการทำได้หลายวิธี วิธีหนึ่งที่แน่นอนคือการใช้ :focus คลาส Pseudo :focus จะช่วยให้คุณใช้สไตล์แบบเดียวกันกับองค์ประกอบได้ ระบบจะใช้รูปแบบนั้นทุกครั้งที่องค์ประกอบมีการโฟกัส โดยไม่คำนึงถึงอุปกรณ์อินพุตหรือวิธีการที่ใช้เพื่อโฟกัสองค์ประกอบนั้น

ดูข้อมูลเพิ่มเติมในการเน้นสไตล์

วิธีทดสอบกับโปรแกรมอ่านหน้าจอด้วยตนเอง

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

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

ความสำคัญ

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

แหล่งข้อมูล

ซอร์สโค้ดสำหรับการตรวจสอบองค์ประกอบแบบอินเทอร์แอกทีฟ