ความแตกต่างระหว่าง type="text" และ type="password" กับผลกระทบต่อ Screen Reader

ความแตกต่างพื้นฐานระหว่าง `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 เพื่อช่วยให้ผู้ใช้ทราบถึงการเปลี่ยนแปลง