วิธีการเชื่อมต่อ ARIA สำหรับข้อผิดพลาดในฟอร์ม

ฟอร์มส่วนใหญ่ใช้งานได้ดีสำหรับผู้ที่มองเห็น แต่กลับใช้งานไม่ได้สำหรับผู้ที่ใช้เทคโนโลยีสิ่งอำนวยความสะดวก (assistive technology) ผู้ที่มองเห็นจะเห็นขอบสีแดงและข้อความแจ้งข้อผิดพลาด แต่ผู้ใช้โปรแกรมอ่านหน้าจอ (screen reader) มักจะไม่ได้รับข้อมูลใดๆ เลย

คุณสามารถแก้ไขปัญหานี้ได้ด้วยคุณลักษณะ (attribute) ของ ARIA สองตัวและ live region ขนาดเล็ก ซึ่งการเปลี่ยนแปลงนี้ใช้โค้ดไม่ถึง 50 บรรทัด

นี่คือวิธีที่คุณจะเชื่อมต่อข้อผิดพลาดเข้ากับช่องกรอกข้อมูล (input) ของคุณ

  1. ใช้ aria-describedby ช่องกรอกข้อมูลจำเป็นต้องชี้ไปยังองค์ประกอบที่แสดงข้อผิดพลาด ให้เพิ่ม aria-describedby ลงใน input ของคุณ และกำหนดค่าเป็น ID ของ div ที่แสดงข้อผิดพลาด

ตัวอย่าง:

  • Input ID: email-input
  • Error ID: email-error
  • Code: aria-describedby="email-error"

สิ่งนี้จะบอกให้โปรแกรมอ่านหน้าจออ่านข้อความแจ้งข้อผิดพลาดเมื่อผู้ใช้โฟกัสที่ช่องกรอกข้อมูล คุณสามารถเพิ่มหลาย ID ได้หากคุณมีข้อความช่วยเหลือ (help text) ด้วย

  1. ใช้ aria-invalid คุณลักษณะนี้จะบอกผู้ใช้ว่าข้อมูลที่กรอกนั้นไม่ถูกต้อง ให้ตั้งค่า aria-invalid เป็น true เมื่อมีข้อผิดพลาดปรากฏขึ้น และตั้งค่าเป็น false เมื่อข้อผิดพลาดถูกลบออกไป

ข้อผิดพลาดที่พบบ่อยคือการกำหนดสไตล์ให้ wrapper div เป็นสีแดง แต่กลับใส่ aria-invalid ไว้ที่ input เพียงอย่างเดียว ซึ่งจะทำให้เกิดความไม่สอดคล้องกัน ควรตรวจสอบให้แน่ใจว่าสไตล์ที่มองเห็นและคุณลักษณะ ARIA ของคุณมุ่งเป้าไปที่องค์ประกอบเดียวกัน

  1. เพิ่ม live region หากข้อผิดพลาดปรากฏขึ้นในขณะที่ผู้ใช้กำลังพิมพ์อยู่ พวกเขาอาจจะไม่สังเกตเห็น ให้ใช้ aria-live="polite" ใน div ที่แสดงข้อผิดพลาดของคุณ
  • aria-live="polite" จะบอกให้โปรแกรมอ่านหน้าจอประกาศข้อผิดพลาดในช่วงที่มีการหยุดพักตามธรรมชาติ
  • อย่าใช้ "assertive" เว้นแต่จะเป็นกรณีฉุกเฉิน เพราะข้อผิดพลาดในฟอร์มไม่ใช่เรื่องฉุกเฉิน
  1. จัดการกับการตรวจสอบแบบ async หากคุณมีการตรวจสอบชื่อผู้ใช้หรือที่อยู่แบบเบื้องหลัง (background) ผู้ใช้จำเป็นต้องทราบว่าระบบกำลังทำงานอยู่
  • รูปแบบ A: ใช้ aria-busy="true" ที่ input ในขณะที่กำลังดำเนินการตรวจสอบ
  • รูปแบบ B: ใช้ live region ที่ซ่อนอยู่เพื่อประกาศการอัปเดตสถานะ เช่น "Verifying username..."

รูปแบบ B มีความน่าเชื่อถือมากกว่าเมื่อใช้งานกับโปรแกรมอ่านหน้าจอที่แตกต่างกัน

การทดสอบเป็นสิ่งที่จำเป็น เครื่องมืออัตโนมัติมีประโยชน์แต่ไม่สามารถแทนที่การทดสอบด้วยตนเองได้ ให้ใช้ NVDA บน Windows หรือ VoiceOver บน macOS

รายการตรวจสอบการทดสอบของคุณ:

  • กด Tab เข้าไปในช่องกรอกข้อมูล เลเบล (label) ควรจะถูกประกาศออกมา
  • กรอกค่าที่ไม่ถูกต้อง ข้อผิดพลาดควรจะถูกประกาศออกมา
  • กด Tab กลับมาที่ช่องเดิม เลเบลควรจะถูกประกาศออกมาพร้อมกับข้อผิดพลาด
  • แก้ไขข้อผิดพลาด ข้อความแจ้งข้อผิดพลาดควรจะหายไป

Source: https://dev.to/137foundry/how-to-wire-aria-describedby-and-aria-invalid-on-form-errors-without-breaking-your-styles-4583