เครื่องคำนวณ Accessible Name
เครื่องคำนวณ accessible name ฟรี วาง HTML เพื่อดูชื่อที่ screen reader จะอ่านออกเสียงของทุก element: แก้ปม aria-labelledby, aria-label, การผูก label, alt
Loading tool...
เครื่องคำนวณ Accessible Name คืออะไร?
เครื่องคำนวณ Accessible Name เป็นเครื่องมือ accessibility ออนไลน์ฟรี ที่ parse HTML ที่วางมา แล้วคำนวณ accessible name ที่ screen reader จะประกาศจริงสำหรับทุก element ที่มีชื่อได้ โดยทำตาม W3C Accessible Name Computation: แก้ปม aria-labelledby ตามลำดับ reference, ให้เกียรติ aria-label, ตรวจการผูก label element, อ่าน native semantics เช่น text ในปุ่ม, value ของ input, alt ของรูป, legend ของ fieldset, caption ของตาราง และ svg title แล้ว fallback ไปที่ attribute title — พร้อมทำเครื่องหมายทุก interactive element ที่ไม่มีชื่อ คำนวณใน browser ของคุณทั้งหมด
ประโยชน์หลัก
- เห็นชื่อที่จะถูกประกาศ ไม่ใช่แค่ผ่านหรือไม่ผ่าน
- เรียนรู้ว่ากฎไหนให้ชื่อนั้นมาและเพราะอะไร
- จับ WCAG 4.1.2 failure ก่อนที่ผู้ใช้ screen reader จะเจอ
- พบ input ที่มีแต่ placeholder และ labelledby ที่อ้างอิงหล่น
- ส่งออกรายงาน name audit แบบ text แบ่งปันได้
กรณีการใช้งาน
- •ตรวจ form ก่อนส่ง VPAT หรือ review ตาม WCAG
- •ยืนยันว่า custom ARIA widget มีชื่อถูกต้อง
- •ตรวจ icon button และ image link ที่ label หาย
- •สอนนักพัฒนาว่า accessible name algorithm ทำงานอย่างไร
- •บันทึก accessible name ใน spec ของ component ใน design system
วิธีใช้เครื่องคำนวณ Accessible Name
- วาง HTML ของคุณ: คัดลอก markup ของ component, form หรือ template ที่ต้องการตรวจสอบ มาวางในช่อง input หรือกดปุ่มตัวอย่างเพื่อลองดู
- อ่านชื่อที่คำนวณได้: element ที่มีชื่อได้ทุกตัวจะแสดง accessible name ที่ screen reader จะอ่านออกเสียงจริง พร้อมระบุกฎที่ให้ชื่อนั้น เช่น labelledby, aria-label, label, content, alt หรือ title
- ตรวจคำเตือน: interactive element ที่ไม่มีชื่อจะถูกทำเครื่องหมายว่าเป็น failure ตาม WCAG 4.1.2 พร้อมกับ input ที่ใช้ placeholder แทน label, aria-labelledby ที่อ้างอิง id ไม่พบ และรูปภาพที่ไม่มี alt
- แก้ไขและส่งออก: เพิ่ม label หรือ alt text ในจุดที่ถูกทำเครื่องหมาย ตรวจซ้ำว่าชื่อที่คำนวณได้ตรงตามตั้งใจ แล้วคัดลอกหรือดาวน์โหลดรายงาน audit เก็บไว้
คุณสมบัติหลัก
- คำนวณชื่อตามลำดับของ W3C Accessible Name Computation
- แก้ปม aria-labelledby ที่อ้างอิงหลาย element และซ้อนกัน
- ตรวจจับแหล่งชื่อจาก label for, wrapping label, value, alt, legend, caption และ svg title
- ระบุ interactive element ที่ไม่มี accessible name (WCAG 4.1.2)
- เตือนเรื่อง placeholder แทน label, id ที่อ้างอิงไม่พบ และ alt ที่หายไป
- ส่งออกรายงาน audit ชื่อ accessible แบบ text ได้
คำถามที่พบบ่อย
accessible name คืออะไร
accessible name คือชื่อที่ screen reader ประกาศเมื่อ element ได้รับ focus หรือถูกเลื่อนไปถึง โดยคำนวณจากลำดับความสำคัญตาม spec ของ W3C Accessible Name Computation: เริ่มจาก aria-labelledby จากนั้น aria-label ตามด้วย native semantics เช่น การผูก label element, text content, attribute value หรือ alt และสุดท้ายคือ attribute title
ทำไมปุ่มที่ไม่มีชื่อถึง fail WCAG
WCAG 4.1.2 (Name, Role, Value) กำหนดให้ทุก UI component ต้องมี accessible name ที่บอกจุดประสงค์ของมัน ปุ่มหรือ link ที่ไม่มีชื่อจะถูกอ่านแค่ "button" หรือ "link" ทำให้ผู้ใช้ screen reader ไม่รู้ว่ามันทำอะไร วิธีแก้ที่พบบ่อยคือใส่ text ที่มองเห็นได้, aria-label หรือ label element สำหรับ form control
ต่างจาก accessible description อย่างไร
name คือชื่อสั้นที่ถูกประกาศก่อน ส่วน description คือข้อมูลเพิ่มเติมที่ประกาศตามหลัง มักมาจาก aria-describedby หรือ title ในกรณีที่มี name อยู่แล้ว เครื่องมือนี้คำนวณเฉพาะ name เพราะเป็นสิ่งที่ WCAG 4.1.2 บังคับสำหรับ interactive element
ใช้ placeholder เป็น accessible name ได้ไหม
ไม่ได้ placeholder จะหายไปทันทีที่ผู้ใช้พิมพ์ข้อความ มักถูก assistive technology ข้าม และ contrast แย่ตามค่า default แม้บาง browser จะใช้มันเป็น fallback ระดับสุดท้าย แต่ไม่น่าเชื่อถือ ควรใช้ label ที่มองเห็นได้, aria-label หรือ aria-labelledby แทน — เครื่องมือนี้จะเตือนเมื่อ placeholder เป็น text เดียวที่ input มี
ผลลัพธ์ตรงกับ browser จริงไหม
เครื่องมือ implement แก่นของ algorithm accname — ปม labelledby, label, native semantics และ fallback ด้วย title — ด้วยการ parse HTML แบบ static ไม่ได้จำลอง runtime state อย่าง CSS display none, การแก้ DOM ด้วย JavaScript หรือ attribute hidden บน label ก่อนตรวจสอบขั้นสุดท้าย ควรยืนยันด้วย screen reader จริง เช่น NVDA คู่กับ Chrome หรือ VoiceOver คู่กับ Safari