การประกาศเพื่อการเข้าถึง (aria-live)
ใช้บริเวณ aria-live เพื่อประกาศการเปลี่ยนแปลงโดยไม่แย่งโฟกัส เลือกระดับสุภาพหรือเร่งด่วน กำหนด aria-atomic และรวมศูนย์การประกาศ
การประกาศเพื่อการเข้าถึง (aria-live) เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 3 บทเรียน
ทำไมต้องมีการประกาศ
เป้าหมาย: ประกาศการเปลี่ยนแปลงให้โปรแกรมอ่านหน้าจอทราบโดยไม่แย่งโฟกัส
- aria-live: แบบสุภาพเทียบกับแบบเร่งด่วน
- role="status" / role="alert"
- aria-atomic สำหรับข้อความที่สมบูรณ์
แบบสุภาพเทียบกับแบบเร่งด่วน
- แบบสุภาพ: ประกาศในไม่ช้า โดยไม่ขัดจังหวะ
- แบบเร่งด่วน: ใช้กับเรื่องสำคัญ อาจขัดจังหวะได้
- แบบทั้งข้อความ: อ่านโหนดทั้งหมดเมื่อมีการเปลี่ยนแปลง
- ควรใช้ status สำหรับข้อมูลความสำเร็จ และใช้ alert สำหรับข้อผิดพลาด
สาธิต: พื้นที่สถานะแบบสุภาพ
พื้นที่ สถานะ จะประกาศการอัปเดตข้อความโดยไม่ย้ายโฟกัส
<div id="root"></div>สาธิต: ฮุก useAnnounce (แบบสุภาพ)
รวมการประกาศไว้ที่บริบทและฮุก ผู้ประกาศ ขนาดเล็ก
<div id="root"></div>สาธิต: การแจ้งเตือนข้อผิดพลาดแบบเร่งด่วน
ใช้แบบ เร่งด่วน (หรือ role="alert") อย่างจำกัดสำหรับข้อผิดพลาดที่ต้องได้รับความสนใจทันที
<div id="root"></div>เคล็ดลับและรายการตรวจสอบ
- ควรใช้ แบบสุภาพ (role=status) สำหรับความสำเร็จหรือข้อมูลทั่วไป
- ใช้ alert/แบบเร่งด่วน สำหรับข้อผิดพลาดเร่งด่วน
- ตั้งค่า aria-atomic="true" เพื่ออ่านข้อความทั้งหมด
- อย่าย้ายโฟกัสเว้นแต่จำเป็น
ตรวจความเข้าใจพื้นฐานการประกาศ
สรุป
สรุป: เพิ่มพื้นที่ aria-live ส่วนกลาง (แบบสุภาพ) สำหรับการอัปเดตทั่วไป และใช้แบบเร่งด่วนหรือ alert สำหรับข้อผิดพลาดเร่งด่วน ทำให้ข้อความเป็นข้อความที่สมบูรณ์ และหลีกเลี่ยงการแย่งโฟกัส
คำถามที่พบบ่อย
บทเรียน “การประกาศเพื่อการเข้าถึง (aria-live)” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การประกาศเพื่อการเข้าถึง (aria-live)” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 3 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การประกาศเพื่อการเข้าถึง (aria-live)”
ใช้บริเวณ aria-live เพื่อประกาศการเปลี่ยนแปลงโดยไม่แย่งโฟกัส เลือกระดับสุภาพหรือเร่งด่วน กำหนด aria-atomic และรวมศูนย์การประกาศ คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน
บทเรียน “การประกาศเพื่อการเข้าถึง (aria-live)” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม
ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- พอร์ทัล การกักโฟกัส และกด Escape เพื่อปิด
- ตัวจัดการโอเวอร์เลย์ส่วนกลาง (Context + Reducer)
- การประกาศเพื่อการเข้าถึง (aria-live)