การสร้างลิงค์ Skip to Content ที่ถูกต้องเพื่อประสบความสำเร็จในการเข้าถึงเว็บไซต์
การเข้าถึงเนื้อหาบนเว็บไซต์เป็นสิ่งสำคัญอย่างมากสำหรับผู้ใช้ที่มีความต้องการเข้าถึงข้อมูลหรือเนื้อหาที่เผยแพร่อยู่บนเว็บไซต์นั้น แต่มีผู้ใช้บางคนที่อาจจะมีความยากลำบากในการนำทางไปยังเนื้อหาหลักๆ ของเว็บไซต์ ทำให้เกิดประสบการณ์การใช้งานที่ไม่สะดวก นอกจากนี้ผู้ใช้ที่มีความจำเป็นในการใช้งานเว็บไซต์แต่ไม่มีความสามารถในการใช้คีย์บอร์ด หรือมีความจำเป็นในการเข้าถึงเนื้อหาด่วน ก็อาจพบปัญหาในการนำทางบนเว็บไซต์ที่มีโครงสร้างที่ซับซ้อน
เพื่อแก้ไขปัญหาดังกล่าว มีการใช้ลิงค์ "Skip to Content" หรือ "ข้ามไปยังเนื้อหา" ที่ถูกต้องเพื่อช่วยให้ผู้ใช้สามารถข้ามไปยังเนื้อหาหลักๆ ของเว็บไซต์ได้อย่างสะดวกสบาย โดยไม่ต้องผ่านการนำทางในทุกส่วนของหน้าเว็บ โดยเฉพาะ "เมนู"
ด้านล่างคือตัวอย่างการสร้างลิงค์ Skip to Content ลงในเว็บไซต์ของคุณ
โค้ด CSS ของลิงค์
โค้ดด้านบนเป็นการใช้ CSS เพื่อซ่อนลิงค์ Skip to Content ให้ไม่สามารถมองเห็นได้ แต่ยังให้ผู้ใช้สามารถเข้าถึงได้โดยการใช้คีย์บอร์ด (ได้รับโฟกัส) ซึ่งหากลิงค์นี้ได้รับโฟกัส แล้วมีการกด Enter (ให้ผลเหมือนการคลิกลิงค์) จะทำให้โฟกัสถูกย้ายไปที่ #content และทำให้เกิดการเลื่อนนื้อหาขึ้นไปชิดขอบจอด้านบนแทน (เหมือนกับการเลื่อนหน้าเว็บไปยังเนื้อหา)
สิ่งสำคัญของการสร้างลิงค์ Skip to Content คือการวางลิงค์ Skip to Content ไว้ที่ด้านบนสุดของเว็บไซต์ เพื่อให้มันสามารถรับโฟกัสได้เป็นรายการแรกเมื่อมีการแสดงหน้าเว็บไซต์ พร้อมกับการชี้ href ไปยัง ไอดีของส่วนที่เป็นเนื้อหา (#content)
และพื้นที่ส่วน #content ที่เราใช้แสดงผลครับ
หมายเหตุ หลักการของลิงค์ Skip to Content จะคล้ายๆกับการสร้างปุ่ม Back to Top ครับ ต่างกันที่ Skip to Content จะใช้ในการข้ามเมนูของเว็บไซต์เพื่อไปบังเนื้อหาตรงๆ (ลืงค์มาจากบนสุดของเว็บไซต์) แต่ Back to Top มักใช้เพื่อกลับไปยังเมนูหลักเพื่ออ่านข้อมูลอื่นๆต่อไป เมื่ออ่านมาจนสุดด้านล่างแล้ว (โดยไม่ต้อง Scroll หน้าเว็บด้วยตัวเองกลับขึ้นไปด้านบน)
เพื่อแก้ไขปัญหาดังกล่าว มีการใช้ลิงค์ "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 หน้าเว็บด้วยตัวเองกลับขึ้นไปด้านบน)