ป้าย <label> ให้ชื่อที่เข้าถึงได้และเป้าหมายคลิกที่ใหญ่ขึ้นให้กับการควบคุมแบบฟอร์ม มีสองวิธีในการเชื่อมโยงพวกเขา และการทำเช่นนี้เป็นสิ่งจำเป็นสำหรับการเข้าถึงได้
วิธีที่ 1: for + id (ชัดแจ้ง)
html
Email address
ป้าย <label> ให้ชื่อที่เข้าถึงได้และเป้าหมายคลิกที่ใหญ่ขึ้นให้กับการควบคุมแบบฟอร์ม มีสองวิธีในการเชื่อมโยงพวกเขา และการทำเช่นนี้เป็นสิ่งจำเป็นสำหรับการเข้าถึงได้
for + id (ชัดแจ้ง)Email address
for ของป้ายตรงกับ id ของอินพุต สิ่งนี้ใช้ได้แม้ว่าพวกเขาไม่อยู่ติดกันในมาร์กอัป
<label>
Email address
<input type="email" />
</label>
อินพุตซ้อนกันอยู่ภายในป้าย — ไม่จำเป็นต้องใช้ id
<label><input type="checkbox" /> I agree to the terms</label>
<!-- clicking the text toggles the checkbox -->
<input placeholder="Email" /> <!-- ❌ disappears on typing, poor contrast, not a label -->
placeholder หายไปเมื่อผู้ใช้พิมพ์และไม่ได้ประกาศอย่างเชื่อถือได้ — อย่าใช้เป็นป้ายเพียงอย่างเดียว
<input type="search" aria-label="Search products" /> <!-- accessible name, no visible label -->
ใช้ aria-label (หรือ aria-labelledby) เฉพาะเมื่อป้ายที่มองเห็นได้ไม่สามารถเป็นไปได้จริง
ป้ายที่เชื่อมโยงอย่างถูกต้องเป็นหนึ่งในแนวปฏิบัติการเข้าถึงที่มีผลกระทบมากที่สุดสำหรับแบบฟอร์ม — พวกเขาให้ชื่อสำหรับเทคโนโลยีสนับสนุนสำหรับการควบคุมแต่ละครั้งและขยายเป้าหมายคลิกสำหรับทุกคน
ควรใช้ป้าย <label> จริง หลีกเลี่ยงไปยัง aria-label เมื่อจำเป็น และอย่าเชื่อ placeholder เป็นป้าย