เหตุผลที่ต้องมีการข้ามไปยังเนื้อหาหลัก
ต้นทุนของการกดแท็บผ่านแถบนำทางในทุกหน้า
เหตุผลที่ต้องมีการข้ามไปยังเนื้อหาหลัก เป็นบทเรียน Web Accessibility Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Web Accessibility Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Web Accessibility Academy มีบทเรียนทั้งหมด 4 บทเรียน
ส่วนหัวเดิมในทุกหน้า
ทุกหน้าในเว็บไซต์เริ่มต้นด้วยโลโก้ ช่องค้นหา และเมนูแบบเดียวกัน ผู้ใช้ที่มองเห็นอาจกวาดตาผ่านสิ่งเหล่านี้ไปในพริบตา แต่ไม่ใช่ทุกคนที่จะกวาดตาได้ 👀
การกด Tab เป็นเส้นตรง
ผู้ใช้แป้นพิมพ์จะเคลื่อนผ่านหน้าเว็บด้วย Tab ทีละองค์ประกอบที่รับโฟกัสได้ ไม่มีการมองข้ามไปข้างหน้า มีเพียงการก้าวไปทีละขั้น
ลองนับต้นทุน
ลองนึกภาพเมนูนำทางที่มีลิงก์ 20 รายการ หากต้องการไปยังบทความ ผู้ใช้แป้นพิมพ์ต้องกด Tab 20 ครั้ง แล้วลองคูณจำนวนนี้กับทุกหน้าที่พวกเขาเข้าชม
โปรแกรมอ่านหน้าจอก็อ่านซ้ำเช่นกัน
ผู้ใช้โปรแกรมอ่านหน้าจอมักได้ยิน เมนูนำทางทั้งหมดถูกอ่านออกเสียง ก่อนเนื้อหาจะเริ่มต้น ส่วนหัวเดิมซ้ำ ๆ นี้เกิดขึ้นทุกครั้ง
ปัญหานี้มีชื่อเรียก
WCAG เรียกปัญหานี้ว่าเนื้อหาแบบ บล็อกซ้ำ วิธีแก้คือเปิดทางให้ผู้ใช้ข้ามบล็อกเหล่านี้ได้ จึงเป็นที่มาของชื่อเกณฑ์ Bypass Blocks
มารู้จักลิงก์ข้าม
ลิงก์ข้าม คือทางลัดที่อยู่ด้านบนสุดของหน้า เมื่อเปิดใช้งาน โฟกัสจะกระโดดตรงไปยังเนื้อหาหลัก
<a href="#main">Skip to main content</a>ให้ลิงก์นี้อยู่ก่อนโดยตั้งใจ
โดยปกติลิงก์ข้ามจะเป็น องค์ประกอบแรกที่รับโฟกัสได้ ในหน้า เพื่อให้เป็นสิ่งแรกที่ Tab ไปถึงก่อนลิงก์ในเมนูนำทาง
ใครได้ประโยชน์มากที่สุด
ลิงก์ข้ามช่วย ผู้ใช้แป้นพิมพ์และโปรแกรมอ่านหน้าจอ ได้มากที่สุด แต่ผู้ที่ใช้อุปกรณ์สวิตช์หรือการควบคุมด้วยเสียงก็ได้รับความสะดวกเช่นเดียวกัน
เป็นเกณฑ์ความสำเร็จ
Bypass Blocks คือ WCAG 2.4.1 ซึ่งเป็นข้อกำหนดระดับ A หมายความว่านี่คือมาตรฐานพื้นฐาน ไม่ใช่ส่วนเสริมที่มีก็ดีไม่มีก็ได้
เพิ่มง่าย ได้ประโยชน์มาก
ลิงก์ข้ามเป็นเพียง จุดยึดหนึ่งรายการ ที่ชี้ไปยังเนื้อหาของคุณ ใช้ความพยายามเพียงเล็กน้อย แต่ช่วยประหยัดการกดแป้นพิมพ์ให้ผู้ใช้จริงได้หลายสิบครั้งต่อการเข้าชมหนึ่งครั้ง ✨
มีมากกว่าหนึ่งวิธี
ลิงก์ข้ามเป็นวิธีแก้ที่ใช้กันทั่วไป แต่ แลนด์มาร์ก ที่กำหนดอย่างถูกต้องและโครงสร้างหัวข้อที่เป็นระเบียบก็ช่วยให้ผู้ใช้ข้ามเนื้อหาที่ซ้ำกันได้เช่นกัน
ตรวจสอบอย่างรวดเร็ว
เหตุใดเนื้อหาที่ซ้ำกันจึงทำให้ผู้ใช้แป้นพิมพ์รู้สึกหงุดหงิด
สรุป
ส่วนหัวที่ซ้ำกันทำให้ผู้ใช้แป้นพิมพ์ต้องออกแรงจริง ลิงก์ข้ามซึ่งเป็นวิธีแก้สำหรับ WCAG Bypass Blocks จะพาพวกเขาไปยังเนื้อหาโดยตรง 🎯
คำถามที่พบบ่อย
บทเรียน “เหตุผลที่ต้องมีการข้ามไปยังเนื้อหาหลัก” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “เหตุผลที่ต้องมีการข้ามไปยังเนื้อหาหลัก” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ 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 ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “เหตุผลที่ต้องมีการข้ามไปยังเนื้อหาหลัก” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Web Accessibility Academy นี้ได้ไหม
ได้ บทเรียน Web Accessibility Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- เหตุผลที่ต้องมีการข้ามไปยังเนื้อหาหลัก
- สร้างลิงก์ข้ามที่ใช้งานได้จริง
- ซ่อนไว้ทางภาพจนกว่าจะได้รับโฟกัส
- ลิงก์ข้ามหลายจุดสำหรับหน้าขนาดใหญ่