ตรวจสอบว่าตัวควบคุมที่กำหนดเองทั้งหมดมี role ที่เหมาะสมและแอตทริบิวต์ ARIA ที่จำเป็นซึ่งระบุพร็อพเพอร์ตี้และสถานะ
เช่น ช่องทําเครื่องหมายที่กําหนดเองต้องมี role="checkbox" และ aria-checked="true|false" เพื่อสื่อสถานะอย่างถูกต้อง
ดูวิธีใช้ ARIA และ HTML เพื่อทําความเข้าใจว่าควรระบุข้อมูลเชิงความหมายที่ขาดหายไปสําหรับตัวควบคุมที่กําหนดเองเมื่อใด
วิธีทดสอบ
หากต้องการตรวจสอบว่าการควบคุมแบบอินเทอร์แอกทีฟที่กำหนดเองทั้งหมดมีบทบาท ARIA ที่เหมาะสม ให้ทดสอบหน้าเว็บโดยใช้แผงการช่วยเหลือพิเศษของ Chrome DevTools หรือโปรแกรมอ่านหน้าจอ
JAWS และ NVDA เป็น 2 ในโปรแกรมอ่านหน้าจอที่ได้รับความนิยมมากกว่าสำหรับ Windows VoiceOver เป็นโปรแกรมอ่านหน้าจอที่มีอยู่ใน macOS
เมื่อใช้ CSS คุณสามารถจัดสไตล์องค์ประกอบ <div> และ <button> เพื่อสื่อความหมายเดียวกันได้ แต่ประสบการณ์การใช้งานจะแตกต่างกันมากเมื่อใช้โปรแกรมอ่านหน้าจอ <div> เป็นเพียงองค์ประกอบการจัดกลุ่มทั่วไป ดังนั้นโปรแกรมอ่านหน้าจอจะอ่านออกเสียงเฉพาะเนื้อหาข้อความของ <div>
ระบบจะประกาศ <button> เป็น "ปุ่ม" ซึ่งเป็นสัญญาณที่ชัดเจนกว่ามากสำหรับผู้ใช้ว่านี่คือสิ่งที่โต้ตอบได้
ดูความหมายและโปรแกรมอ่านหน้าจอด้วย
วิธีแก้ไข
ทางออกที่ดีที่สุดสำหรับปัญหานี้คือหลีกเลี่ยงการควบคุมแบบอินเทอร์แอกทีฟที่กําหนดเองโดยสิ้นเชิง เช่น แทนที่ <div> ที่ทํางานเหมือนปุ่มด้วย <button> จริง
<button>Learn more</button>
หากต้องใช้ <div> ให้เพิ่ม role="button" และ aria-pressed="false"
<div role="button" aria-pressed="false">Learn more</div>
ตอนนี้โปรแกรมอ่านหน้าจอจะอ่านออกเสียงบทบาทและสถานะการโต้ตอบของ <div>
ความสำคัญ
หากไม่เคยใช้เทคโนโลยีความช่วยเหลือพิเศษมาก่อน คุณอาจไม่ทราบว่าเนื้อหามีประสิทธิภาพเพียงใดสำหรับผู้ใช้เทคโนโลยีความช่วยเหลือพิเศษ ทางที่ดีคือคุณควรพูดคุยกับผู้ใช้ที่ใช้เทคโนโลยีความช่วยเหลือพิเศษเป็นประจำและสามารถแชร์ความคิดเห็นเกี่ยวกับประสิทธิภาพของเว็บไซต์หรือเว็บแอปพลิเคชัน
อีกวิธีหนึ่งในการทําความเข้าใจประสบการณ์การใช้งานเนื้อหาของผู้ใช้เทคโนโลยีความช่วยเหลือพิเศษคือการทดสอบด้วยเทคโนโลยีความช่วยเหลือพิเศษ การใช้โปรแกรมอ่านหน้าจอจะช่วยให้คุณเข้าใจได้ชัดเจนขึ้นว่าเนื้อหาติดป้ายกำกับอย่างไร และมีการบดบังการไปยังส่วนต่างๆ หรือไม่
แหล่งข้อมูล
คุณสามารถดูซอร์สโค้ดสําหรับการตรวจสอบการควบคุมที่กําหนดเองซึ่งมีบทบาท ARIA