Web Accessibility Academy · บทเรียน

บทบาท status, alert และ log

เลือกบทบาทถ่ายทอดสดที่เหมาะกับการอัปเดตแต่ละประเภท

บทเรียน 2 จาก 413 ขั้นตอน

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

บทบาทต่าง ๆ มีความสุภาพในตัว

บทบาท ARIA บางประเภทจะเปลี่ยนองค์ประกอบให้เป็น live region ให้คุณ พร้อมกำหนดระดับ ความสุภาพ ที่เหมาะสมโดยอัตโนมัติ ทำให้คุณเขียนมาร์กอัปน้อยลง

role status ใช้ Polite

บทบาท status ใช้ระบุ region ที่อัปเดตอย่างสุภาพ เหมาะอย่างยิ่งสำหรับการยืนยันเล็กน้อย เช่น ข้อความที่บันทึกหรือคัดลอกแล้ว 📋

<div role="status">Copied to clipboard</div>

status หมายถึง aria-live polite

การใช้ role status เป็นรูปแบบย่อของการตั้งค่า aria-live เป็น polite คุณจะได้พฤติกรรมเดียวกันโดยสื่อเจตนาเชิงความหมายได้ชัดเจนกว่า

role alert ใช้ Assertive

บทบาท alert จะประกาศอย่างเร่งด่วนทันทีที่เนื้อหาปรากฏ ใช้เมื่อบางสิ่งต้องได้รับความสนใจในตอนนี้ ⚠️

<div role="alert">Payment failed</div>

alert หมายถึง aria-live assertive

alert ทำงานเหมือน aria-live assertive ร่วมกับ aria-atomic true โดยจะขัดจังหวะและอ่านข้อความทั้งหมดเป็นข้อความเดียว

role log ใช้สำหรับกระแสข้อมูล

บทบาท log เหมาะกับเนื้อหาที่มีรายการใหม่เพิ่มเข้ามาตามลำดับ เช่น เธรดแชตหรือฟีดกิจกรรม โดยจะอ่านอย่างสุภาพ

<ul role="log" aria-live="polite"></ul>

log รักษาลำดับ

log สื่อว่าข้อความเก่ายังคงสำคัญและลำดับมีความหมาย ดังนั้นเทคโนโลยีสิ่งอำนวยความสะดวกจะอ่านรายการที่เพิ่มเข้ามาตามลำดับที่มาถึง

Status เทียบกับ Alert ในการใช้งานจริง

เลือก สถานะ สำหรับการยืนยันอย่างสุภาพ และเลือกการแจ้งเตือนสำหรับปัญหา ป้ายแสดงว่าบันทึกแล้วคือสถานะ ส่วนข้อผิดพลาดของแบบฟอร์มที่ขัดขวางการทำงานคือการแจ้งเตือน

การแจ้งเตือนควรเกิดจากเหตุอันควร

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

กำหนดบทบาทก่อนใส่เนื้อหา

เช่นเดียวกับพื้นที่ถ่ายทอดสดแบบดิบ องค์ประกอบที่มี บทบาท สถานะ ควรมีอยู่ก่อนที่คุณจะใส่ข้อความ เพื่อให้โปรแกรมอ่านหน้าจอเฝ้าดูองค์ประกอบนั้นอยู่แล้ว

<p role="status" id="out"></p>

บทบาทก็เพิ่มความหมายเช่นกัน

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

ตรวจสอบอย่างรวดเร็ว

คุณต้องประกาศข้อผิดพลาดจากการส่งแบบฟอร์มที่ขัดขวางผู้ใช้ทันที บทบาทใดเหมาะสม

สรุป: บทบาทถ่ายทอดสด

ตอนนี้คุณทราบแล้วว่า สถานะ ใช้น้ำเสียงสุภาพ การแจ้งเตือนใช้น้ำเสียงหนักแน่น และบันทึกใช้เก็บลำดับข้อมูล เลือกบทบาทให้ตรงกับความสำคัญของการอัปเดต ✅

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส
30
บทเรียน
120

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

บทเรียน “บทบาท status, alert และ log” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “บทบาท status, alert และ log”

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

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

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

บทเรียน “บทบาท status, alert และ log” ใช้เวลานานแค่ไหน

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

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

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

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

  1. สุภาพกับเร่งด่วน: เลือกระดับความเร่งด่วน
  2. บทบาท status, alert และ log
  3. ประกาศข้อความป๊อปอัป ตัวโหลด และจำนวน
  4. เหตุใดภูมิภาคถ่ายทอดสดจึงล้มเหลวและวิธีแก้ไข
← กลับไปที่ Web Accessibility Academy