วิธีใช้ลิงก์ข้ามเพื่อทำให้ไซต์ WordPress ของคุณเข้าถึงได้ง่ายขึ้น
เผยแพร่แล้ว: 2017-07-06ในบทนำสู่ซีรี่ส์การช่วยสำหรับการเข้าถึง เราได้พูดคุยเกี่ยวกับพื้นฐานสำหรับแนวทางการเข้าถึงเนื้อหาเว็บ (WCAG) ต่างๆ ตอนนี้ก็ถึงเวลาที่จะดำเนินการในขั้นตอนต่อไปโดยดูหลักเกณฑ์สำคัญบางประการและแสดงวิธีทำให้ไซต์ของคุณเข้าถึงได้ง่ายขึ้น เริ่มจากบล็อกบายพาส หรือที่เรียกกันทั่วไปว่าข้ามลิงก์
ลิงค์ข้ามคืออะไร?
ลิงก์ข้ามคือลิงก์พิเศษที่ซ่อนอยู่ในไซต์ของคุณจนกว่าจะถึง :focus ผ่านแป้นแท็บหรือโปรแกรมอ่านหน้าจอ จุดประสงค์ของพวกเขาคือเพื่อให้ผู้ใช้เทคโนโลยีทางเลือก (ผู้ที่ใช้แป้นพิมพ์และโปรแกรมอ่านหน้าจอ) สามารถข้ามบล็อกของเนื้อหาได้ ตรงจากมาตรฐาน:
“มีกลไกในการข้ามบล็อกของเนื้อหาที่ทำซ้ำในหลาย ๆ เว็บเพจ” – มาตรฐาน WCAG 2.4.1 – บายพาสบล็อก
2.4.1 เป็นมาตรฐานระดับ A ซึ่งหมายความว่าอยู่ภายใต้มาตรา 508 และกฎหมายกำหนด คุณ ต้อง มีลิงก์ข้าม
คุณเดาได้ไหมว่าบล็อกลิงก์ข้ามเนื้อหาที่ใช้บ่อยที่สุดคืออะไร หากคุณเดา "เมนู" คุณก็ถูก เมนูปรากฏบนแทบทุกหน้าของเว็บไซต์ ผู้ใช้ที่มองเห็นและผู้ใช้เมาส์มักจะเลื่อนไปทางขวาเพราะเป็นหนึ่งในองค์ประกอบของไซต์ที่คุณคาดหวังว่าจะได้อยู่ที่นั่น แต่เมนูนำทางไม่ได้เป็นเพียงบล็อกเดียวที่ต้องข้ามลิงก์
พื้นที่ที่มองข้ามโดยทั่วไปสำหรับลิงก์ข้ามคือแถบด้านข้างทางซ้าย (หรือแถบด้านข้างทางขวามือสำหรับไซต์ในภาษาที่อ่านจากขวาไปซ้าย เช่น ภาษาอาหรับ) เนื่องจากตำแหน่งที่พวกเขามักจะจัดอยู่ในลำดับความหมาย ผู้ใช้จะต้องข้ามผ่านแถบด้านข้างที่ทำซ้ำเป็นประจำเพื่อไปยังเนื้อหาได้โดยตรง
เช่นเดียวกับบล็อกโพสต์เด่นที่ปรากฏนอกหน้าแรก การออกแบบไซต์บางอย่างมีส่วนโพสต์หรือตัวเลื่อนที่โดดเด่นไปยังหน้าภายใน เว้นแต่เนื้อหาของส่วนเหล่านั้นจะเปลี่ยนแปลง เช่น: หมวดหมู่หรือหน้าเก็บถาวร ควรมีลิงก์ข้าม
ข้อมูลเบื้องต้นเกี่ยวกับการเข้าถึง: ตอนที่ 1
การช่วยสำหรับการเข้าถึงเป็นคำที่คุณได้ยินอยู่เสมอ แต่อาจยังไม่เข้าใจอย่างถ่องแท้ ส่วนหนึ่งเป็นเพราะตัวคำเองอาจทำให้สับสนได้ รากศัพท์ การเข้าถึง ทำให้แนวคิดดูเหมือนผูกติดอยู่กับสิ่งต่างๆ เช่น...
คุณจะเพิ่มลิงค์ข้ามได้อย่างไร?
เมื่อคุณทราบแล้วว่าการข้ามลิงก์คืออะไร ก็ถึงเวลาเพิ่มลงในไซต์ของคุณ มีสองวิธีในการแก้ปัญหานี้ วิธีง่ายๆ (และสำหรับคุณที่ไม่ใช่ผู้เข้ารหัส วิธีเดียว) คือการติดตั้งปลั๊กอิน วิธีที่ยากคือการเขียนโค้ดลงในธีมของคุณเอง
การใช้ปลั๊กอิน
มีปลั๊กอินสองตัวที่ฉันแนะนำเมื่อพูดถึงการข้ามลิงก์: การเข้าถึง WP โดย Joe Dolson และ Genesis Accessible โดย Rian Rietveld ปลั๊กอินทั้งสองช่วยแก้ไขปัญหาการช่วยสำหรับการเข้าถึงหลายประการ รวมถึงการเพิ่มลิงก์ข้ามพื้นฐานให้กับคุณ โปรดทราบว่า Genesis Accessible มีไว้สำหรับไซต์ที่สร้างโดยใช้ Genesis Framework โดยเฉพาะ หากคุณไม่มีไซต์ Genesis ให้ใช้ WP Accessibility
เข้ารหัสด้วยตัวเอง
อีกทางเลือกหนึ่งของคุณคือเขียนโค้ดข้ามลิงก์ด้วยตัวเอง โค้ดนั้นค่อนข้างเรียบง่ายและต้องการเพียงแค่ความรู้พื้นฐานเกี่ยวกับ HTML และ CSS เท่านั้น แต่คุณจะต้องคุ้นเคยกับวิธีการทำงานของธีมและเทมเพลตของ WordPress ก่อนที่จะลองใช้วิธีนี้ จากนี้ไป ฉันจะถือว่าคุณรู้วิธีค้นหาไฟล์ที่อ้างอิงและวิธีแก้ไข
เราจะเริ่มต้นด้วยการเขียนลิงก์ข้ามจริงก่อน ซึ่งจะช่วยให้คัดลอกและวางลงในไฟล์เทมเพลตได้ง่าย เมื่อระลึกถึงความรู้ HTML คุณจะต้องเขียนแท็กสมอ โปรดทราบว่าการจัดรูปแบบที่นี่มีไว้เพื่อให้อ่านง่าย
<a href=”[don’t fill this in yet]” class=”skip-link”> Skip to Main Content </a>
เราปล่อยให้แอตทริบิวต์ href ว่างเปล่าโดยตั้งใจ เนื่องจากเราต้องกำหนดว่าลิงก์ข้ามของเราจะลิงก์ไปที่ใด สำหรับตัวอย่างนี้ เราจะใช้องค์ประกอบ <main> เป็นเป้าหมายของเรา เนื่องจากเราไม่สามารถเชื่อมโยงโดยตรงไปยังองค์ประกอบที่ไม่มี ID เราจึงต้องตรวจสอบให้แน่ใจว่าองค์ประกอบ <main> ของเรามีหนึ่งรายการ องค์ประกอบ <main> ของคุณจะอยู่ใน header.php แต่ไม่เสมอไป เมื่อคุณพบองค์ประกอบแล้ว คุณจะต้องตรวจสอบให้แน่ใจว่าองค์ประกอบนั้นมีรหัส ถ้าไม่เพิ่มหนึ่งเช่น:
&lt;main id=”main-content”&gt; [a bunch more code below]
ค่าเฉพาะของ ID ไม่สำคัญ แต่คุณจะต้องจำไว้ ตอนนี้ คุณจะต้องอัปเดตโค้ดลิงก์ข้ามด้วยค่า ID
&lt;a href=”#main-content” class=”skip-link”&gt; Skip to Main Content &lt;/a&gt;
เมื่อคุณสร้างลิงก์ข้ามแล้ว ให้กลับไปที่ header.php หรือที่ใดก็ตามที่มีแท็กเปิด <body> ของธีมอยู่ แท็ก <body> เป็นตำแหน่งที่จำเป็นสำหรับการข้ามลิงก์ เนื่องจากต้องเป็นสิ่งแรกที่รวมอยู่ใน :focus สำหรับผู้ใช้แป้นพิมพ์และโปรแกรมอ่านหน้าจอ
หลังแท็ก <body> ให้วาง HTML ที่กรอกเสร็จแล้ว ต่อไปนี้แสดงตัวอย่างที่มีรายละเอียดมากขึ้นพร้อมลิงก์ข้ามหลายลิงก์ หากคุณต้องการเพิ่มหลายลิงก์ไปยังไซต์ของคุณ ตรวจสอบให้แน่ใจว่าใช้ ID อย่างถูกต้อง
&lt;body&gt; &lt;a href=”#left-sidebar” class=”skip-link”&gt;Skip to Sidebar&lt;/a&gt; &lt;a href=”#featured-posts-block” class=”skip-link”&gt;Skip to Featured Posts&lt;/a&gt; &lt;a href=”#main-content” class=”skip-link”&gt;Skip to Main Content&lt;/a&gt; [Header navigation goes here]
ตอนนี้คุณมีลิงก์ข้ามในโค้ดแล้ว แต่คุณยังทำไม่เสร็จ! หากคุณโหลดหน้าของคุณตอนนี้ คุณจะเห็นลิงก์ข้ามที่ด้านบน ได้เวลาเพิ่ม CSS แล้ว การจัดรูปแบบของลิงก์ข้ามนั้นค่อนข้างง่าย โดยใช้ตัวอย่างด้านล่าง:
.skip-link
{
position: absolute;
top: 0;
z-index: 9999;
right: 100%;
padding: 5px;
padding: 0.5rem;
font-size: 20px;
font-size: 2rem;
color: #000;
background: #FFF;
}
.admin-bar .skip-link
{
top: 32px;
}
.skip-link:focus
{
right: auto;
}
สิ่งที่คุณไม่เห็นคือการใช้ display: none การใช้จะทำให้โปรแกรมอ่านหน้าจอข้ามลิงก์ทั้งหมด เป็นการเอาชนะจุดประสงค์ทั้งหมด การซ่อนทำได้โดยการวางข้อความไว้นอกหน้าจอโดยใช้ right: 100% และเลื่อนไป right: auto on :focus
เมื่อคุณใช้ CSS คุณก็พร้อมแล้ว ลิงก์ข้ามของคุณอยู่ในตำแหน่ง แต่ซ่อนไว้ เมื่อผู้ใช้แป้นพิมพ์หรือโปรแกรมอ่านหน้าจอโหลดหน้าเว็บของคุณเมื่อเริ่มต้น :focus ลิงก์ข้ามของคุณจะช่วยให้พวกเขาไปยังเนื้อหาที่ต้องการได้ทันที
ห่อหมก
ข้ามลิงก์เป็นตัวอย่างที่สมบูรณ์แบบของคุณลักษณะการช่วยสำหรับการเข้าถึงซึ่งดูเหมือนว่าจะใช้งานได้มาก แต่จริงๆ แล้วไม่ใช่ ทั้งหมดที่เราทำในด้านโค้ดคือเพิ่ม HTML และ CSS สองสามบรรทัด สำหรับแนวทางที่ไม่ใช่ด้านเทคนิค เราได้ติดตั้งปลั๊กอิน ไม่มีวิธีใดใช้เวลานานมาก ซึ่งเป็นสิ่งสำคัญที่ควรทราบ เนื่องจากลิงก์ข้ามเป็นมาตรฐานระดับ A สำหรับ WCAG 2.0 (มาตรฐาน WCAG ล่าสุด) กฎหมายกำหนด ให้คุณต้องมีข้อมูลเหล่านี้ในเว็บไซต์ของคุณ อย่าทำให้ตัวเองตกอยู่ในความเสี่ยง เพิ่มลิงค์ข้ามของคุณวันนี้!