ARIA และการเข้าถึง: label role aria-*
เชื่อมโยงป้ายกำกับกับตัวควบคุม ใช้บทบาท ARIA เมื่อจำเป็น และใช้ aria-label กับ aria-describedby เพื่อรองรับโปรแกรมอ่านหน้าจอ
ARIA และการเข้าถึง: label role aria-* เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
เหตุใดจึงต้องใช้ ARIA
ARIA (แอปพลิเคชันอินเทอร์เน็ตแบบสมบูรณ์ที่เข้าถึงได้) คือชุดแอตทริบิวต์ของ HTML ที่สื่อสารจุดประสงค์ สถานะ และคุณสมบัติของส่วนประกอบส่วนติดต่อผู้ใช้ไปยังเทคโนโลยีช่วยเหลือ เช่น โปรแกรมอ่านหน้าจอ โดยเฉพาะวิดเจ็ตแบบกำหนดเองที่ไม่มีองค์ประกอบ HTML ในตัวเทียบเท่า
กฎข้อแรกของ ARIA
อย่าใช้ ARIA หากองค์ประกอบหรือแอตทริบิวต์ HTML ในตัวสามารถทำงานนั้นได้ <button> ดีกว่า <div role="button"> เสมอ HTML ในตัวช่วยให้เข้าถึงได้โดยไม่ต้องเพิ่มค่าใช้จ่าย
บทบาทจุดสังเกต
บทบาทจุดสังเกตของ ARIA ช่วยให้ผู้ใช้โปรแกรมอ่านหน้าจอข้ามไปยังส่วนต่าง ๆ ของหน้าได้ บทบาทส่วนใหญ่สื่อโดยนัยจาก HTML เชิงความหมาย: <main> → role=main และ <nav> → role=navigation ควรเพิ่มบทบาทอย่างชัดเจนเฉพาะเมื่อไม่ได้ใช้องค์ประกอบเชิงความหมาย
<div role="main">...</div> <!-- prefer <main> -->
<div role="navigation">...</div> <!-- prefer <nav> -->
<div role="banner">...</div> <!-- prefer <header> at page level -->aria-label
aria-label ให้ชื่อที่เข้าถึงได้แบบมองไม่เห็นแก่องค์ประกอบ ใช้เมื่อไม่มีป้ายกำกับข้อความที่มองเห็นได้ให้อ้างอิง มักใช้กับปุ่มไอคอน
<button aria-label="Close dialog">×</button>
<a href="/rss.xml" aria-label="Subscribe to RSS feed">
<img src="rss-icon.svg" alt="">
</a>aria-labelledby
aria-labelledby ใช้ข้อความขององค์ประกอบอื่นเป็นป้ายกำกับ โดยอ้างอิงผ่าน ID ควรเลือกใช้แทน aria-label เมื่อมีป้ายกำกับที่มองเห็นได้อยู่แล้ว
<h2 id="billing-title">Billing Information</h2>
<form aria-labelledby="billing-title">
...
</form>aria-describedby
aria-describedby อ้างอิงข้อความอธิบายเพิ่มเติม เช่น ข้อความแสดงข้อผิดพลาดหรือคำแนะนำ เพื่อเสริมป้ายกำกับ โปรแกรมอ่านหน้าจอจะอ่านป้ายกำกับก่อน แล้วจึงอ่านคำอธิบาย
<input id="pass" type="password" aria-describedby="pass-hint">
<p id="pass-hint">Must be at least 12 characters with a symbol.</p>aria-expanded และ aria-haspopup
วิดเจ็ตแบบไดนามิกต้องมีแอตทริบิวต์ระบุสถานะ aria-expanded บ่งชี้ว่าวิดเจ็ตสำหรับเปิดเผยเนื้อหา (เช่น ส่วนพับหรือรายการแบบเลื่อนลง) เปิดหรือปิดอยู่ ให้อัปเดตค่านี้ใน JavaScript เมื่อสถานะเปลี่ยนแปลง
<button aria-expanded="false" aria-controls="menu" id="menu-btn">Menu</button>
<ul id="menu" hidden>...</ul>
<!-- On toggle: -->
btn.setAttribute('aria-expanded', 'true');
menu.removeAttribute('hidden');aria-hidden
aria-hidden="true" จะนำองค์ประกอบและองค์ประกอบลูกทั้งหมดออกจากโครงสร้างการเข้าถึง ใช้กับองค์ประกอบตกแต่ง เช่น ไอคอน SVG ที่มีข้อความที่มองเห็นได้ระบุความหมายอยู่แล้ว
<button>
<svg aria-hidden="true" focusable="false">...</svg>
Save Draft
</button>พื้นที่ประกาศแบบไลฟ์: aria-live
aria-live บอกให้โปรแกรมอ่านหน้าจอประกาศการเปลี่ยนแปลงในพื้นที่นี้ polite จะรอให้ผู้ใช้ดำเนินการปัจจุบันเสร็จสิ้น ส่วน assertive จะขัดจังหวะทันที (ควรใช้อย่างประหยัด)
<div aria-live="polite" aria-atomic="true">
<!-- Status messages announced when updated -->
Form saved successfully.
</div>role="alert"
role="alert" มีความหมายโดยนัยเทียบเท่ากับ aria-live=assertive ให้แทรกข้อความแสดงข้อผิดพลาดหรือการแจ้งเตือนสำคัญลงในองค์ประกอบที่มีบทบาทนี้ แล้วโปรแกรมอ่านหน้าจอจะประกาศทันที
const errorEl = document.querySelector('[role="alert"]');
errorEl.textContent = 'Email is required.'; // announced immediatelyข้อผิดพลาดของแบบฟอร์มที่เข้าถึงได้
เมื่อช่องข้อมูลมีข้อผิดพลาด ให้ใช้ aria-invalid="true" เชื่อมโยงข้อความแสดงข้อผิดพลาดด้วย aria-describedby และอัปเดตเนื้อหาของ role="alert" แนวทางสามส่วนนี้ช่วยให้มั่นใจว่าโปรแกรมอ่านหน้าจอจะสื่อสารข้อมูลที่จำเป็นทั้งหมด
<input id="email" type="email" aria-invalid="true" aria-describedby="email-error">
<p id="email-error" role="alert">Please enter a valid email address.</p>ตรวจสอบอย่างรวดเร็ว
แอตทริบิวต์ ARIA ใดใช้ระบุชื่อที่เข้าถึงได้ขององค์ประกอบเมื่อไม่มีป้ายกำกับข้อความที่มองเห็นได้
สรุป: พื้นฐานสำคัญของ ARIA
เลือกใช้ HTML ในตัวก่อน ARIA ใช้ aria-label สำหรับปุ่มไอคอน ใช้ aria-labelledby เพื่ออ้างอิงป้ายกำกับที่มองเห็นได้ ใช้ aria-describedby สำหรับคำแนะนำและข้อผิดพลาด ใช้ aria-expanded สำหรับวิดเจ็ตที่เปิดเผยเนื้อหา ใช้ aria-hidden สำหรับเนื้อหาตกแต่ง ใช้ aria-live สำหรับการอัปเดตสถานะแบบไดนามิก และใช้ aria-invalid ร่วมกับ role=alert สำหรับข้อผิดพลาดของแบบฟอร์ม
คำถามที่พบบ่อย
บทเรียน “ARIA และการเข้าถึง: label role aria-*” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ARIA และการเข้าถึง: label role aria-*” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ARIA และการเข้าถึง: label role aria-*”
เชื่อมโยงป้ายกำกับกับตัวควบคุม ใช้บทบาท ARIA เมื่อจำเป็น และใช้ aria-label กับ aria-describedby เพื่อรองรับโปรแกรมอ่านหน้าจอ คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “ARIA และการเข้าถึง: label role aria-*” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม
ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ตัวควบคุมฟอร์ม: ชนิด input select textarea
- ARIA และการเข้าถึง: label role aria-*
- HTML5 เชิงความหมาย: เชิงความหมายเทียบกับ div ที่ปะปน
- แอตทริบิวต์ตรวจสอบความถูกต้องของฟอร์ม