การนำทางด้วยจุดสังเกต: ผู้ใช้ข้ามไปมาอย่างไร
สัมผัสประสบการณ์การย้ายจากภูมิภาคหนึ่งไปอีกภูมิภาคด้วยโปรแกรมอ่านหน้าจอ
การนำทางด้วยจุดสังเกต: ผู้ใช้ข้ามไปมาอย่างไร เป็นบทเรียน 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- header, nav, main, footer: สี่ส่วนสำคัญ
- ใส่เนื้อหาใน main และใช้ main เพียงหนึ่งรายการ
- ตั้งชื่อหลายภูมิภาคด้วย aria-label
- การนำทางด้วยจุดสังเกต: ผู้ใช้ข้ามไปมาอย่างไร