ความแตกต่างพื้นฐานระหว่าง type="text" และ type="password"

type="text"

• เป็นช่องข้อความธรรมดา เนื้อหาที่พิมพ์สามารถมองเห็นได้ชัดเจน
• Screen reader มักประกาศว่าเป็นช่องข้อความ เช่น
  • NVDA "Edit"
  • JAWS "Edit box"
  • VoiceOver (Mac) "Text field"

type="password"

• เป็นช่องสำหรับกรอกรหัสผ่าน เนื้อหาจะถูกซ่อนด้วยสัญลักษณ์ เช่น •••••
• Screen reader มักประกาศว่าเป็นช่องรหัสผ่าน เช่น
  • NVDA "Password edit"
  • JAWS "Password edit box"
  • VoiceOver "Password field" หรือ "Secure text field"

ความแตกต่างในการอ่านและตีความของ Screen Reader

การระบุประเภทของ input

• type="text" บอกว่าเป็นช่องข้อความปกติ
• type="password" แจ้งให้ผู้ใช้ทราบว่าเป็นช่องรหัสผ่าน ซึ่งช่วยให้เข้าใจว่าข้อมูลในช่องนี้มีความสำคัญและอาจต้องป้องกัน

การอ่านเนื้อหาในช่อง

• type="text" Screen reader จะอ่านเนื้อหาที่พิมพ์ เช่น ถ้าพิมพ์ "hello" จะพูดว่า "Edit, hello"
• type="password" Screen reader จะไม่อ่านเนื้อหาจริง แต่จะพูดเพียงว่า "Password edit" หรือ "Protected" (บางกรณีอาจแจ้งจำนวนตัวอักษร เช่น "5 characters")

การตอบสนองขณะพิมพ์ (Real-time feedback)

• type="text" ถ้าเปิด echo characters Screen reader จะพูดตัวอักษรที่พิมพ์ เช่น พิมพ์ a จะพูดว่า "a"
• type="password" Screen reader อาจพูดตัวอักษรที่พิมพ์ แต่เมื่อออกจากช่องจะไม่อ่านเนื้อหาย้อนหลังเพื่อป้องกันการเปิดเผยรหัสผ่าน

พฤติกรรมเมื่อสลับระหว่าง text และ password (Toggle Button)

หากใช้ปุ่มสลับ (toggle) เปลี่ยน type ของ input จะมีผลต่อ Screen reader ดังนี้

• เมื่อเปลี่ยนจาก password → text Screen reader อาจอ่านเนื้อหาของช่อง
• เมื่อเปลี่ยนจาก text → password Screen reader จะไม่อ่านเนื้อหาที่ถูกซ่อน
• บาง Screen reader (เช่น NVDA) อาจไม่แจ้งการเปลี่ยนแปลงทันทีหากโฟกัสยังอยู่ที่เดิม

การแจ้งเตือนให้ Screen Reader รับรู้

• การใช้ aria-label กับปุ่ม toggle เช่น "Show password" / "Hide password" ช่วยให้ผู้ใช้เข้าใจว่ากำลังเปิดหรือปิดการแสดงรหัสผ่าน
• aria-live สามารถใช้แจ้งการเปลี่ยนแปลงสถานะแบบ real-time

สรุปความแตกต่างที่สำคัญ

คุณสมบัติ	type="text"	type="password"
เนื้อหามองเห็นได้	✅ ใช่	❌ ไม่ (ซ่อนด้วย •)
Screen reader อ่านเนื้อหา	✅ อ่านทั้งหมด	❌ ไม่อ่าน (แจ้งแค่ว่าเป็นช่องรหัสผ่าน)
Echo ขณะพิมพ์	✅ อ่านตัวอักษรที่พิมพ์	✅ อาจอ่าน แต่จะไม่ย้อนอ่านเนื้อหาเมื่อออกจากช่อง
เปลี่ยน type ระหว่าง text/password	✅ อ่านเนื้อหาเมื่อเป็น text	❌ ซ่อนเนื้อหาเมื่อเป็น password
ใช้ aria-label กับ toggle button	⚠️ ไม่จำเป็น	✅ ควรใช้ (Show password / Hide password)

ข้อสังเกต

• type="password" ออกแบบมาเพื่อปกป้องข้อมูล ไม่เปิดเผยเนื้อหาผ่าน Screen reader
• หากมีปุ่ม toggle ควรใช้ aria-label หรือ aria-live เพื่อช่วยให้ผู้ใช้ทราบถึงการเปลี่ยนแปลง