ข้อความผิดพลาดที่ดีควรระบุสาเหตุอย่างเฉพาะ บอกวิธีแก้ทีละขั้น โทนสุภาพไม่โทษผู้ใช้ วางใกล้จุดที่เกิด อ่านได้ด้วยคีย์บอร์ด/โปรแกรมอ่านหน้าจอ (aria-live, โฟกัส) และบันทึกเทเลเมทรีเพื่อปรับปรุงต่อ; หลีกเลี่ยงรหัสลับ/เทคนิค คำกำกวม หรือการปิดกั้นงาน.

เขียนข้อความผิดพลาดที่ดี (เข้าถึงได้และแก้ได้จริง) — ตัวอย่างโค้ด

สำหรับทีมผลิตภัณฑ์/มาร์เก็ตติ้ง/นักพัฒนา เป้าหมายคือ ช่วยผู้ใช้แก้ปัญหาเร็วที่สุด โดย: อธิบาย “เกิดอะไร” + “ทำอย่างไรต่อ” ด้วยภาษาคน, วางข้อความติดกับฟิลด์/บริบท, ทำให้ โปรแกรมอ่านหน้าจอรับรู้, และ เก็บสัญญาณ เพื่อแก้สาเหตุที่ต้นทาง

ตาราง: ข้อความแย่ vs ข้อความที่ดี (พร้อมเหตุผล)

หลักเขียนข้อความผิดพลาด (ยึด UX/WCAG)

• เฉพาะเจาะจง + ใช้ภาษาคน: บอก “อะไรผิด” และ “ให้ทำอะไรต่อ” ใน 1–2 ประโยค
• โทนสุภาพ/ไม่โทษผู้ใช้: เน้นร่วมแก้ ไม่ใช่ตำหนิ
• วางถูกที่: Inline ติดฟิลด์ + Summary ด้านบนที่ลิงก์ไปยังแต่ละฟิลด์
• เข้าถึงได้ (A11y): ใช้ aria-invalid, aria-describedby, role="alert" หรือ aria-live เพื่อให้โปรแกรมอ่านหน้าจอรับรู้
• ไม่เปิดเผยข้อมูลอ่อนไหว: หลีกเลี่ยงยืนยันว่า “อีเมลนี้มีบัญชีอยู่แล้ว” บนหน้าล็อกอิน เป็นต้น
• แก้ที่ต้นเหตุ: วัด error rate ต่อฟิลด์/ขั้นตอน แล้วปรับ UI/validation

ตัวอย่างโค้ด: ฟอร์มที่เข้าถึงได้ + แจ้งเตือนอัตโนมัติ

HTML + ARIA

<form id="signup" novalidate>
  <label for="email">อีเมล</label>
  <input id="email" name="email" type="email" aria-describedby="emailErr">
  <p id="emailErr" class="inline-error" role="alert" aria-live="polite" hidden></p>

  <label for="password">รหัสผ่าน</label>
  <input id="password" name="password" type="password" aria-describedby="pwErr">
  <p id="pwErr" class="inline-error" role="alert" aria-live="polite" hidden></p>