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