Frontend Academy · บทเรียน

บทบาทและแอตทริบิวต์ ARIA

ใช้บทบาทกำหนดขอบเขตหลัก ภูมิภาคแบบสด และแอตทริบิวต์ aria-* เพื่อเพิ่มความสามารถให้คอมโพเนนต์ในกรณีที่ HTML ดั้งเดิมไม่เพียงพอ

บทบาทและแอตทริบิวต์ ARIA เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

ARIA คืออะไร

ARIA (Accessible Rich Internet Applications) คือชุดแอตทริบิวต์ของ HTML ที่อธิบายบทบาท สถานะ และคุณสมบัติขององค์ประกอบให้เทคโนโลยีสิ่งอำนวยความสะดวกเข้าใจ เป็นสะพานเชื่อมสำหรับวิดเจ็ตแบบกำหนดเองที่ไม่สามารถสร้างความหมายด้วย HTML ดั้งเดิมได้

กฎข้อแรกของ ARIA: อย่าใช้ ARIA

หากองค์ประกอบดั้งเดิมทำสิ่งที่ต้องการได้ ให้ใช้องค์ประกอบนั้น <button> ดีกว่า <div role="button"> การใช้ ARIA ผิดวิธีแย่กว่าการไม่ใช้ ARIA เพราะทำให้ดูเหมือนเข้าถึงได้ ทั้งที่ผู้ใช้ยังไม่สามารถใช้งานต่อได้

หมวดหมู่ของแอตทริบิวต์ ARIA

มีสามหมวดหมู่ ได้แก่ บทบาท (สิ่งนั้นคืออะไร) คุณสมบัติ (ค่อนข้างคงที่ เช่น ป้ายชื่อที่เข้าถึงได้และคำอธิบายที่เชื่อมโยง) และ สถานะ (เปลี่ยนแปลงได้ เช่น สถานะการขยาย สถานะการกด และสถานะการเลือก)

บทบาทระบุส่วนสำคัญ

ใช้ระบุภูมิภาคหลักของหน้า ส่วนใหญ่มีองค์ประกอบ HTML5 ที่เทียบเท่ากัน และควรเลือกใช้องค์ประกอบเหล่านั้นก่อน

<!-- HTML5 (preferred): -->
<nav>...</nav>
<main>...</main>
<aside>...</aside>

<!-- ARIA equivalents (use only when HTML5 won't work): -->
<div role="navigation">...</div>
<div role="main">...</div>
<div role="complementary">...</div>

ป้ายชื่อที่เข้าถึงได้และการอ้างอิงป้ายชื่อ

aria-label: กำหนดชื่อที่เข้าถึงได้ด้วยข้อความ aria-labelledby: อ้างอิงข้อความขององค์ประกอบอื่นเป็นชื่อ ใช้เมื่อไม่มีข้อความที่มองเห็นได้หรือข้อความนั้นไม่เพียงพอ

<!-- Icon-only button needs a label: -->
<button aria-label="Close dialog">
  <svg>...</svg>
</button>

<!-- Section labelled by its heading: -->
<section aria-labelledby="settings-title">
  <h2 id="settings-title">Settings</h2>
  ...
</section>

คำอธิบายเพิ่มเติมสำหรับคำใบ้

aria-describedby เชื่อมองค์ประกอบเข้ากับคำอธิบายที่ยาวขึ้น มีประโยชน์สำหรับคำใบ้ในแบบฟอร์ม ข้อความแสดงข้อผิดพลาด และคำแนะนำแบบป๊อปอัป

<label for="password">Password</label>
<input id="password" type="password" aria-describedby="pw-hint">
<p id="pw-hint">Must be at least 12 characters with a number and symbol.</p>

สถานะการขยายสำหรับการเปิดเผยเนื้อหา

ปุ่มที่ใช้เปิดหรือปิดแผงควรเปิดเผยสถานะ aria-expanded = true/false

<button aria-expanded="false" aria-controls="faq-1" onclick="toggle()">
  How do I cancel?
</button>
<div id="faq-1" hidden>
  Visit Settings &gt; Billing to cancel.
</div>

สถานะการกดสำหรับปุ่มสลับ

ปุ่มที่มีสถานะเปิดหรือปิด เช่น ปิดเสียงหรือทำตัวหนา ให้ใช้ aria-pressed

<button aria-pressed="true" onclick="toggleBold()">
  Bold
</button>

ภูมิภาคเนื้อหาแบบสด: aria-live

เนื้อหาที่อัปเดตแบบไดนามิก เช่น ข้อความแจ้งเตือน ผลการค้นหา และสรุปข้อผิดพลาด ควรอยู่ในภูมิภาคเนื้อหาแบบสด เพื่อให้โปรแกรมอ่านหน้าจอประกาศการเปลี่ยนแปลง polite จะรอจนถึงช่วงหยุด ส่วน assertive จะขัดจังหวะทันที

<!-- Toast container -->
<div aria-live="polite" aria-atomic="true" id="toast-region"></div>

<!-- Critical alert -->
<div role="alert">Session expired. Please log in again.</div>

รูปแบบย่อของบทบาทแจ้งเตือน

role="alert" เป็นรูปแบบย่อของภูมิภาคเนื้อหาแบบสดที่ขัดจังหวะทันที พร้อมคุณสมบัติที่รวมเนื้อหาเป็นหนึ่งเดียว ควรใช้อย่างประหยัด เพราะการแจ้งเตือนทุกครั้งจะขัดจังหวะผู้ใช้

ซ่อนเนื้อหาตกแต่ง

aria-hidden="true" นำองค์ประกอบออกจากแผนผังการเข้าถึง ใช้กับไอคอนตกแต่งที่อยู่ถัดจากป้ายข้อความ มิฉะนั้นโปรแกรมอ่านหน้าจอจะประกาศไอคอนซ้ำโดยไม่จำเป็น

<button>
  <svg aria-hidden="true" focusable="false">...</svg>
  Save
</button>

ทดสอบด้วยโปรแกรมอ่านหน้าจอ

วิธีเดียวที่จะรู้ว่า ARIA ทำงานหรือไม่คือการทดสอบ VoiceOver (macOS/iOS ใช้ได้ฟรี), NVDA (Windows ใช้ได้ฟรี) และ TalkBack (Android ใช้ได้ฟรี) การใช้ VoiceOver 10 นาทีจะช่วยให้พบปัญหาได้มากกว่าเครื่องมือตรวจสอบใด ๆ

ตรวจสอบความเข้าใจ

ควรกำหนดแอตทริบิวต์ ARIA ใดให้กับปุ่มที่มีเพียงไอคอนและไม่มีป้ายข้อความที่มองเห็นได้?

ทบทวน: ARIA

ARIA อธิบายบทบาท คุณสมบัติ และสถานะให้เทคโนโลยีสิ่งอำนวยความสะดวกทราบ ควรใช้ HTML ดั้งเดิมก่อนเลือกใช้ ARIA ป้ายชื่อที่เข้าถึงได้และการอ้างอิงป้ายชื่อใช้กำหนดชื่อที่เข้าถึงได้ คำอธิบายที่เชื่อมโยงใช้สำหรับคำใบ้ สถานะการขยายและสถานะการกดใช้สำหรับปุ่มสลับ ภูมิภาคเนื้อหาแบบสดใช้สำหรับการประกาศแบบไดนามิก ส่วนเนื้อหาตกแต่งควรซ่อนจากเทคโนโลยีสิ่งอำนวยความสะดวก ควรทดสอบด้วยโปรแกรมอ่านหน้าจอจริงเสมอ

คำถามที่พบบ่อย

บทเรียน “บทบาทและแอตทริบิวต์ ARIA” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “บทบาทและแอตทริบิวต์ ARIA” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “บทบาทและแอตทริบิวต์ ARIA”

ใช้บทบาทกำหนดขอบเขตหลัก ภูมิภาคแบบสด และแอตทริบิวต์ aria-* เพื่อเพิ่มความสามารถให้คอมโพเนนต์ในกรณีที่ HTML ดั้งเดิมไม่เพียงพอ คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “บทบาทและแอตทริบิวต์ ARIA” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Frontend Academy