วิธีใช้การข้ามลิงก์เพื่อทำให้ไซต์ WordPress ของคุณสามารถเข้าถึงได้มากขึ้น
เผยแพร่แล้ว: 2023-02-26ในบทแนะนำเกี่ยวกับซีรี่ส์การช่วยสำหรับการเข้าถึง เราได้พูดคุยเกี่ยวกับพื้นฐานสำหรับแนวทางการช่วยสำหรับการเข้าถึงเนื้อหาเว็บ (WCAG) ต่างๆ ตอนนี้ได้เวลาดำเนินการขั้นต่อไปโดยดูหลักเกณฑ์สำคัญบางส่วนและแสดงวิธีทำให้ไซต์ของคุณเข้าถึงได้มากขึ้น เรามาเริ่มกันที่บล็อกบายพาส หรือที่เรียกกันทั่วไปว่าลิงก์ข้าม
ข้ามลิงค์คืออะไร?
ลิงก์ข้ามคือลิงก์พิเศษที่ซ่อนอยู่ในไซต์ของคุณจนกว่าจะเข้าสู่ :focus ผ่านปุ่มแท็บหรือโปรแกรมอ่านหน้าจอ จุดประสงค์คือเพื่อให้ผู้ใช้เทคโนโลยีทางเลือก (ผู้ใช้แป้นพิมพ์และโปรแกรมอ่านหน้าจอ) สามารถข้ามบล็อกเนื้อหาได้ ตรงจากมาตรฐาน:
“มีกลไกในการเลี่ยงบล็อกเนื้อหาที่ซ้ำกันบนหน้าเว็บหลายหน้า” – มาตรฐาน WCAG 2.4.1 – บล็อกบายพาส
2.4.1 เป็นมาตรฐานระดับ A ซึ่งหมายความว่าอยู่ภายใต้มาตรา 508 และกฎหมายกำหนด คุณ ต้อง มีลิงก์ข้าม
คุณเดาได้ไหมว่าบล็อกลิงก์ข้ามเนื้อหาที่พบมากที่สุดใช้กับอะไร หากคุณเดาว่า "เมนู" คุณจะถูก เมนูปรากฏเกือบทุกหน้าของไซต์ ผู้ใช้ที่มองเห็นและผู้ใช้เมาส์มักจะเลื่อนไปทางขวาเพราะเป็นหนึ่งในองค์ประกอบของไซต์ที่คุณคาดหวังให้อยู่ที่นั่น แต่เมนูนำทางไม่ใช่บล็อกเดียวที่ต้องข้ามลิงก์
พื้นที่ที่มักถูกมองข้ามสำหรับลิงก์ข้ามคือแถบด้านข้างด้านซ้าย (หรือแถบด้านข้างด้านขวาสำหรับไซต์ในภาษาที่อ่านจากขวาไปซ้าย เช่น ภาษาอาหรับ) เนื่องจากตำแหน่งเหล่านี้มักจะอยู่ในลำดับความหมาย ผู้ใช้จึงต้องการวิธีข้ามผ่านแถบด้านข้างที่ทำซ้ำเป็นประจำเพื่อไปยังเนื้อหาโดยตรง
เช่นเดียวกับบล็อกโพสต์เด่นที่แสดงนอกหน้าแรก การออกแบบเว็บไซต์บางแห่งมีส่วนโพสต์เด่นหรือแถบเลื่อนไปยังหน้าภายใน เว้นแต่ว่าเนื้อหาของส่วนเหล่านั้นจะมีการเปลี่ยนแปลง เช่น: หมวดหมู่หรือหน้าเก็บถาวร ควรมีลิงก์ข้ามไว้
คุณจะเพิ่มลิงค์ข้ามได้อย่างไร?
ตอนนี้คุณรู้แล้วว่าลิงก์ข้ามคืออะไร ก็ถึงเวลาเพิ่มลงในไซต์ของคุณ มีสองวิธีในการแก้ปัญหานี้ วิธีง่ายๆ (และวิธีเดียวสำหรับผู้ที่ไม่ใช่ผู้เขียนโค้ด) คือการติดตั้งปลั๊กอิน วิธีที่ยากคือการโค้ดให้เป็นธีมของคุณเอง
การใช้ปลั๊กอิน
ปลั๊กอินหนึ่งที่เราแนะนำเมื่อพูดถึงการข้ามลิงก์: WP Accessibility โดย Joe Dolson ช่วยแก้ปัญหาการช่วยสำหรับการเข้าถึงหลายอย่าง รวมถึงการเพิ่มลิงก์ข้ามพื้นฐานให้กับคุณ
เข้ารหัสด้วยตัวคุณเอง
ตัวเลือกอื่นของคุณคือการเขียนโค้ดข้ามลิงก์ด้วยตัวคุณเอง โค้ดนั้นค่อนข้างเรียบง่ายและต้องการความรู้พื้นฐานเกี่ยวกับ HTML และ CSS เท่านั้น แต่คุณจะต้องคุ้นเคยกับวิธีการทำงานของธีมและเทมเพลตของ WordPress ก่อนที่จะลองใช้วิธีนี้ จากจุดนี้ เราจะถือว่าคุณรู้วิธีค้นหาไฟล์ที่อ้างอิงและวิธีแก้ไข
เราจะเริ่มต้นด้วยการเขียนลิงก์ข้ามจริงก่อน ซึ่งจะช่วยให้คัดลอกและวางลงในไฟล์เทมเพลตได้ง่าย จำความรู้ HTML คุณจะต้องเขียนแท็กสมอ โปรดทราบว่าการจัดรูปแบบที่นี่มีไว้เพื่อให้อ่านง่าย
&amp;lt;a href=”[don't fill this in yet]” class=”skip-link”&amp;gt; Skip to Main Content &amp;lt;/a&amp;gt; เราปล่อยให้แอตทริบิวต์ href ว่างไว้โดยเจตนา เนื่องจากเราจำเป็นต้องกำหนดว่าลิงก์ข้ามของเราจะลิงก์ไปที่ใด สำหรับตัวอย่างนี้ เราจะใช้องค์ประกอบ <main> เป็นเป้าหมายของเรา เนื่องจากเราไม่สามารถเชื่อมโยงไปยังองค์ประกอบโดยตรงได้หากไม่มีรหัส เราจะต้องแน่ใจว่าองค์ประกอบ <main> ของเรามีองค์ประกอบดังกล่าว องค์ประกอบ <main> ของคุณมักจะพบใน header.php แต่ไม่เสมอไป เมื่อคุณพบองค์ประกอบแล้ว คุณจะต้องตรวจสอบให้แน่ใจว่ามีรหัส ถ้าไม่ใช่ให้เพิ่มสิ่งต่อไปนี้:
&amp;lt;main id=”main-content”&amp;gt; [a bunch more code below]ค่าเฉพาะของ ID นั้นไม่สำคัญ แต่คุณจะต้องจำให้ได้ ตอนนี้ คุณจะต้องอัปเดตรหัสลิงก์ข้ามของคุณด้วยค่ารหัส
&amp;lt;a href=”#main-content” class=”skip-link”&amp;gt; Skip to Main Content &amp;lt;/a&amp;gt; เมื่อคุณสร้างลิงก์ข้ามแล้ว ให้กลับไปที่ไฟล์ header.php หรือที่ใดก็ตามที่มีแท็กเปิด <body> ของธีม แท็ก <body> เป็นตำแหน่งที่จำเป็นสำหรับการข้ามลิงก์เนื่องจากจำเป็นต้องเป็นสิ่งแรกที่เข้ามา :focus สำหรับผู้ใช้แป้นพิมพ์และโปรแกรมอ่านหน้าจอ
ต่อจากแท็ก <body> ให้วาง HTML ที่สมบูรณ์ของคุณ ต่อไปนี้แสดงตัวอย่างที่มีรายละเอียดมากขึ้นพร้อมลิงก์ข้ามหลายลิงก์ หากคุณต้องการเพิ่มหลายลิงก์ไปยังไซต์ของคุณ ตรวจสอบให้แน่ใจว่าใช้ ID อย่างถูกต้อง
&amp;lt;body&amp;gt; &amp;lt;a href=”#left-sidebar” class=”skip-link”&amp;gt;Skip to Sidebar&amp;lt;/a&amp;gt; &amp;lt;a href=”#featured-posts-block” class=”skip-link”&amp;gt;Skip to Featured Posts&amp;lt;/a&amp;gt; &amp;lt;a href=”#main-content” class=”skip-link”&amp;gt;Skip to Main Content&amp;lt;/a&amp;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 ของคุณ คุณก็พร้อมแล้ว ลิงก์ข้ามของคุณอยู่ในตำแหน่ง แต่ถูกซ่อนไว้ เมื่อผู้ใช้แป้นพิมพ์หรือโปรแกรมอ่านหน้าจอโหลดหน้าเว็บของคุณที่ initiales :focus ลิงก์ข้ามของคุณจะช่วยให้พวกเขาไปยังเนื้อหาที่ต้องการได้ทันที
ห่อมันขึ้น
การข้ามลิงก์เป็นตัวอย่างที่สมบูรณ์แบบของคุณลักษณะการช่วยสำหรับการเข้าถึงที่ดูเหมือนใช้งานได้มาก แต่จริงๆ แล้วไม่ใช่เลย ทั้งหมดที่เราทำในด้านโค้ดคือเพิ่ม HTML และ CSS สองสามบรรทัด สำหรับแนวทางที่ไม่ใช่ด้านเทคนิค เราได้ติดตั้งปลั๊กอิน วิธีการทั้งสองไม่ใช้เวลานานมาก ซึ่งเป็นสิ่งสำคัญที่ควรทราบ เนื่องจากลิงก์ข้ามเป็นมาตรฐานระดับ A สำหรับ WCAG 2.0 (มาตรฐาน WCAG ล่าสุด) คุณต้องมีกฎหมายกำหนด ไว้ในไซต์ของคุณอย่าเอาตัวเองไปเสี่ยง เพิ่มลิงค์ข้ามของคุณวันนี้!