0Pricing
Web Accessibility Academy · บทเรียน

การนำทางด้วยจุดสังเกต: ผู้ใช้ข้ามไปมาอย่างไร

สัมผัสประสบการณ์การย้ายจากภูมิภาคหนึ่งไปอีกภูมิภาคด้วยโปรแกรมอ่านหน้าจอ

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

การกระโดด ไม่ใช่การเลื่อน

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

ปุ่มลัดของจุดสังเกต

โปรแกรมอ่านหน้าจอส่วนใหญ่มีปุ่มสำหรับวนไปยังจุดสังเกต ใน NVDA ปุ่ม D จะข้ามไปยังพื้นที่ถัดไปโดยไม่ต้องใช้เมาส์

รายการพื้นที่

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

ข้ามสิ่งที่ปรากฏซ้ำ

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

วงล้อ VoiceOver

บน Mac ผู้ใช้ VoiceOver สามารถเปิด วงล้อแล้วเลือกจุดสังเกต เพื่อไปยังพื้นที่ต่าง ๆ ตามชื่อและบทบาท

เหตุผลที่ชื่อมีประโยชน์

ในรายการจุดสังเกต ค่าของ ป้ายกำกับอาเรียจะกลายเป็นรายการเมนู ดังนั้นชื่อที่ดีก็คือสิ่งที่ทำให้การกระโดดมีประโยชน์

<nav aria-label="Main">...</nav>

ลำดับเป็นไปตามโครงสร้าง DOM

จุดสังเกตจะถูกเข้าถึงตามลำดับ ต้นฉบับ ดังนั้นลำดับ HTML ที่สมเหตุสมผลจึงทำให้ทุกคนกระโดดไปตามลำดับที่สมเหตุสมผล

จุดสังเกตมากเกินไปทำให้ใช้งานยาก

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

ครอบคลุมทั้งหน้า

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

ทดสอบด้วยตนเอง

เปิดโปรแกรมอ่านหน้าจอแล้วกดปุ่มจุดสังเกต หากคุณสามารถ กระโดดผ่านหน้าได้อย่างราบรื่น แสดงว่าพื้นที่ต่าง ๆ ทำงานถูกต้อง 🎧

เร็วกว่าใช้แท็บ

การกระโดดระหว่างจุดสังเกตเร็วกว่าการกด แท็บหลายสิบครั้ง การกดไม่กี่ครั้งช่วยแทนการไล่ผ่านลิงก์ทุกลิงก์เป็นเวลานาน

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

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

ทบทวน: กระโดดไปมา

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

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

บทเรียน “การนำทางด้วยจุดสังเกต: ผู้ใช้ข้ามไปมาอย่างไร” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การนำทางด้วยจุดสังเกต: ผู้ใช้ข้ามไปมาอย่างไร”

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

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

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

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

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

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

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

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

  1. header, nav, main, footer: สี่ส่วนสำคัญ
  2. ใส่เนื้อหาใน main และใช้ main เพียงหนึ่งรายการ
  3. ตั้งชื่อหลายภูมิภาคด้วย aria-label
  4. การนำทางด้วยจุดสังเกต: ผู้ใช้ข้ามไปมาอย่างไร
← กลับไปที่ Web Accessibility Academy