aria-label กับ aria-labelledby
เลือกใช้ชื่อที่ระบุไว้ในบรรทัดเดียวหรือชื่อที่อ้างอิงจากส่วนอื่น
aria-label กับ aria-labelledby เป็นบทเรียน Web Accessibility Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Web Accessibility Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
สองวิธีในการตั้งชื่อ
เมื่อการตั้งชื่อโดยธรรมชาติไม่เพียงพอ คุณมีเครื่องมือ ARIA สองอย่าง ได้แก่ aria-label สำหรับข้อความที่ระบุโดยตรง และ aria-labelledby สำหรับอ้างถึงข้อความที่มีอยู่แล้ว
aria-label เก็บข้อความ
ใช้ aria-label เมื่อไม่มีข้อความที่มองเห็นให้ยืม คุณจะพิมพ์ชื่อที่ต้องการให้พูดลงบนองค์ประกอบโดยตรง
<button aria-label="Search">🔍</button>aria-labelledby เก็บ ID
ใช้ aria-labelledby เมื่อข้อความที่มองเห็นบนหน้าสามารถใช้เป็นชื่อได้ ค่าของมันคือ id ขององค์ประกอบนั้น ไม่ใช่ข้อความ
<h2 id="sec">Billing</h2>
<section aria-labelledby="sec">...</section>ควรเลือกข้อความที่มองเห็น
ให้เลือกใช้ aria-labelledby ก่อน การนำข้อความบนหน้าจอกลับมาใช้จะทำให้ชื่อที่พูดกับชื่อที่มองเห็นสอดคล้องกันโดยอัตโนมัติ
labelledby รวม ID ได้หลายรายการ
กำหนด ID หลายรายการให้กับ aria-labelledby โดยคั่นด้วยช่องว่าง แล้วเบราว์เซอร์จะนำข้อความของแต่ละรายการมาต่อกันตามลำดับเป็นชื่อเดียว
<span aria-labelledby="verb noun">Go</span>
<span id="verb">Delete</span> <span id="noun">file</span>labelledby มีลำดับเหนือ label
หากมีทั้งสองอย่าง aria-labelledby จะมีลำดับความสำคัญสูงกว่า เบราว์เซอร์จะไม่สนใจ aria-label ทั้งหมด ดังนั้นอย่าคาดหวังให้ทั้งสองรวมกัน
องค์ประกอบสามารถตั้งชื่อให้ตัวเองได้
ด้วย aria-labelledby องค์ประกอบสามารถอ้างถึง id ของตัวเองได้ ซึ่งมีประโยชน์สำหรับตั้งชื่อบริเวณจากข้อความหัวข้อที่มองเห็น
label มองไม่เห็น
aria-label จะไม่ปรากฏบนหน้าจอ แต่เปลี่ยนเฉพาะสิ่งที่เทคโนโลยีสิ่งอำนวยความสะดวกประกาศ ผู้ใช้ที่มองเห็นจึงไม่สังเกตความแตกต่าง
ระวังกับดักด้านการแปล
aria-label เป็นข้อความธรรมดาที่ผู้แปลหน้าเว็บมักข้ามไป ขณะที่ labelledby นำเนื้อหาที่มองเห็นและได้รับการแปลมาใช้ซ้ำ
ID ต้องตรงกันทุกประการ
ID ใน aria-labelledby ต้องตรงกับ id ขององค์ประกอบจริง หากพิมพ์ผิด องค์ประกอบจะไม่มีชื่อที่คำนวณแล้วโดยไม่มีการแจ้งเตือน
เลือกจากแหล่งข้อมูลหลัก
ลองถามว่าชื่อนั้นอยู่ที่ใด หากมีอยู่บนหน้าจอแล้ว ให้ใช้ aria-labelledby แต่หากมีไว้สำหรับเทคโนโลยีสิ่งอำนวยความสะดวกเท่านั้น ให้ใช้ aria-label
ตรวจสอบอย่างรวดเร็ว
ส่วนหนึ่งของหน้าแสดงหัวข้อ h2 อยู่แล้ว คุณควรตั้งชื่อให้ส่วนนั้นอย่างไร
สรุป: label หรือ labelledby
คุณได้เรียนรู้ให้ใช้ aria-labelledby กับข้อความที่มองเห็นอยู่แล้ว และใช้ aria-label กับชื่อที่ระบุโดยตรงและมองไม่เห็น โดยไม่คาดหวังให้ทั้งสองรวมกัน 🎯
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 30
- บทเรียน
- 120
คำถามที่พบบ่อย
บทเรียน “aria-label กับ aria-labelledby” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “aria-label กับ aria-labelledby” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Web Accessibility Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “aria-label กับ aria-labelledby”
เลือกใช้ชื่อที่ระบุไว้ในบรรทัดเดียวหรือชื่อที่อ้างอิงจากส่วนอื่น คุณปฏิบัติ Web Accessibility Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Web Accessibility Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Web Accessibility Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “aria-label กับ aria-labelledby” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Web Accessibility Academy นี้ได้ไหม
ได้ บทเรียน Web Accessibility Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ทำความเข้าใจกระบวนการคำนวณชื่อที่เข้าถึงได้
- aria-label กับ aria-labelledby
- aria-describedby สำหรับบริบทเพิ่มเติม
- ข้อผิดพลาดในการตั้งชื่อที่ทำให้ตัวควบคุมเงียบ