การสร้างลิงค์ Skip to Content ที่ถูกต้องเพื่อประสบความสำเร็จในการเข้าถึงเว็บไซต์

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

เพื่อแก้ไขปัญหาดังกล่าว มีการใช้ลิงค์ "Skip to Content" หรือ "ข้ามไปยังเนื้อหา" ที่ถูกต้องเพื่อช่วยให้ผู้ใช้สามารถข้ามไปยังเนื้อหาหลักๆ ของเว็บไซต์ได้อย่างสะดวกสบาย โดยไม่ต้องผ่านการนำทางในทุกส่วนของหน้าเว็บ โดยเฉพาะ "เมนู"

ด้านล่างคือตัวอย่างการสร้างลิงค์ Skip to Content ลงในเว็บไซต์ของคุณ
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example Website</title>
</head>
<body>
    <a class="skip" href="#content">Skip to content</a>
    <header>
        <!-- ส่วนหัวเว็บไซต์ -->
    </header>
    <nav>
        <!-- เมนูการนำทาง -->
    </nav>
    <main id="content">
        <!-- เนื้อหาหลัก -->
    </main>
    <footer>
        <!-- ส่วนท้ายเว็บไซต์ -->
    </footer>
</body>
</html>

โค้ด CSS ของลิงค์
.skip {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
}

โค้ดด้านบนเป็นการใช้ CSS เพื่อซ่อนลิงค์ Skip to Content ให้ไม่สามารถมองเห็นได้ แต่ยังให้ผู้ใช้สามารถเข้าถึงได้โดยการใช้คีย์บอร์ด (ได้รับโฟกัส) ซึ่งหากลิงค์นี้ได้รับโฟกัส แล้วมีการกด Enter (ให้ผลเหมือนการคลิกลิงค์) จะทำให้โฟกัสถูกย้ายไปที่ #content และทำให้เกิดการเลื่อนนื้อหาขึ้นไปชิดขอบจอด้านบนแทน (เหมือนกับการเลื่อนหน้าเว็บไปยังเนื้อหา)

สิ่งสำคัญของการสร้างลิงค์ Skip to Content คือการวางลิงค์ Skip to Content ไว้ที่ด้านบนสุดของเว็บไซต์ เพื่อให้มันสามารถรับโฟกัสได้เป็นรายการแรกเมื่อมีการแสดงหน้าเว็บไซต์ พร้อมกับการชี้ href ไปยัง ไอดีของส่วนที่เป็นเนื้อหา (#content)
<a class="skip" href="#content">Skip to content</a>

และพื้นที่ส่วน #content ที่เราใช้แสดงผลครับ
<main id="content">


หมายเหตุ หลักการของลิงค์ Skip to Content จะคล้ายๆกับการสร้างปุ่ม Back to Top ครับ ต่างกันที่ Skip to Content จะใช้ในการข้ามเมนูของเว็บไซต์เพื่อไปบังเนื้อหาตรงๆ  (ลืงค์มาจากบนสุดของเว็บไซต์) แต่ Back to Top มักใช้เพื่อกลับไปยังเมนูหลักเพื่ออ่านข้อมูลอื่นๆต่อไป เมื่ออ่านมาจนสุดด้านล่างแล้ว (โดยไม่ต้อง Scroll หน้าเว็บด้วยตัวเองกลับขึ้นไปด้านบน)
ผู้เขียน goragod โพสต์เมื่อ 23 มี.ค. 2567 เปิดดู 11,215 ป้ายกำกับ Web Accessibility
^