- เน้นปัญหาของการใช้ข้อความลิงก์แบบทั่วไป เช่น "คลิกที่นี่"
- เพื่อปรับปรุง การเข้าถึง ข้อความลิงก์ควรสื่อ ความหมายของเนื้อหา ให้ชัดเจน
- ส่งผลกระทบเชิงลบต่อเสิร์ชเอนจินและ ประสบการณ์ของผู้ใช้โปรแกรมอ่านหน้าจอ
- ข้อความลิงก์ที่ชัดเจนและสะท้อนบริบท ให้ประโยชน์ทั้งต่อผู้ใช้และเทคโนโลยี
- ตั้งแต่ปี 2001 เป็นต้นมา มีการผลักดันให้ใช้ข้อความลิงก์ที่ถูกต้องในระดับ มาตรฐานเว็บและหลักการ UX
บทนำ
- การใช้ ข้อความลิงก์แบบทั่วไป เช่น "คลิกที่นี่" หรือ "click here" เป็นแนวปฏิบัติที่พบได้บ่อยในหมู่นักพัฒนาเว็บมาอย่างยาวนาน
- อย่างไรก็ตาม วิธีดังกล่าวมีข้อเสียสำคัญในด้าน การเข้าถึง การใช้งาน และ SEO
ความหมายของข้อความลิงก์และปัญหาที่เกิดขึ้น
- ข้อความลิงก์ควรมีหน้าที่ให้ข้อมูลเพื่อให้ผู้ใช้ คาดเดาได้ก่อนคลิกว่าลิงก์นั้นจะพาไปที่ใด
- หากเขียนเพียงว่า "คลิกที่นี่" ลิงก์จะขาดบริบท ทำให้เกิด ความสับสนของผู้ใช้ และ การเข้าถึงที่ลดลง
ผลกระทบต่อการเข้าถึงและประสบการณ์ผู้ใช้
- ผู้ใช้โปรแกรมอ่านหน้าจอเมื่อไล่ดูรายการลิงก์ในหน้า จะได้ยินแต่ข้อความเดิมว่า "คลิกที่นี่" ทั้งหมด ทำให้ เข้าถึงข้อมูลได้ยาก
- เมื่อลิงก์เขียนด้วย ข้อความที่เฉพาะเจาะจงและมีความหมาย จะช่วยเพิ่ม ประสิทธิภาพของประสบการณ์ ให้ทั้งผู้ใช้ที่มีความบกพร่องทางการมองเห็นและผู้ใช้ในสถานการณ์ที่หลากหลาย
ข้อพิจารณาด้านการปรับแต่งเว็บไซต์ให้ติดอันดับบนเสิร์ชเอนจิน (SEO)
- เสิร์ชเอนจิน เองก็วิเคราะห์ข้อความลิงก์เพื่อประเมินความเกี่ยวข้องและคุณภาพของเนื้อหา
- ข้อความลิงก์ที่มีคีย์เวิร์ดสำคัญและบริบทที่เหมาะสมส่งผลเชิงบวกต่อ อันดับการค้นหาและการมองเห็น
คำแนะนำในการเขียนข้อความลิงก์ที่ถูกต้อง
- แนะนำให้ใช้ข้อความลิงก์ที่สะท้อนบริบทอย่างชัดเจน
- ตัวอย่าง: "ดูแนวทางการเข้าถึงล่าสุด"
- หลักการนี้ถูกเน้นย้ำอย่างต่อเนื่องมาตั้งแต่ปี 2001 ในกระบวนการของ การเกิดขึ้นของมาตรฐานเว็บและการเสริม UX
บทสรุป
- การใช้ ข้อความที่มีความหมาย เป็นลิงก์ แทนที่จะใช้ "คลิกที่นี่" คือหลักเกณฑ์ที่จำเป็นสำหรับทั้งเว็บในปัจจุบันและเว็บในอนาคต
1 ความคิดเห็น
ความคิดเห็นบน Hacker News
จากมุมมองด้านการเข้าถึง โปรแกรมอ่านหน้าจอ สำหรับผู้พิการทางสายตามักจะอ่านหน้าเว็บแบบเป็นลำดับเส้นตรง
เพื่อให้หลุดจากการอ่านแบบเส้นตรง มันก็มักมีวิธีให้สำรวจรายการองค์ประกอบอย่างหัวข้อหรือลิงก์แยกต่างหาก โดยไม่มีบริบทจากตำแหน่งเดิม
ถ้าลิงก์ทั้งหมดเป็น “click here” ก็เท่ากับแทบจะพราก การเข้าถึงแบบไม่เป็นเส้นตรง ไปจากผู้ใช้เหล่านี้
ดังนั้นแบบ “get Amaya” หรือ “go to the Amaya website” ก็ดูโอเค
อีกอย่าง การที่ปุ่มดาวน์โหลดบน github.io ไปดึงไฟล์ปฏิบัติการจากเว็บที่ถูกมองเหมือนแหล่งมัลแวร์อย่าง SourceForge ก็ไม่ใช่วิธีที่ดี นึกถึง wxMaxima เลย
ไม่ได้หมายความว่าควรเปลี่ยนเครื่องมือ แต่ควรมีวิธีแสดงภาพให้คนที่คงไม่ลงไปขุดเองว่าโปรแกรมอ่านหน้าจอทำงานอย่างไร
แต่ไม่แน่ใจว่าเทคนิคแรกได้รับการรองรับในโปรแกรมอ่านหน้าจอดีแค่ไหน
แก้ไข: อัปเดตลิงก์จาก WCAG 2.0 เป็น 2.2 แล้ว
แต่ถึงอย่างนั้น แทนที่จะมีแค่ “Amaya” ตามตัวอย่างในบทความ ผมคงใส่ การกระทำ เข้าไปมากขึ้น เช่น “Get Amaya”
ผู้ใช้สามารถย้ายระหว่างแลนด์มาร์ก ระหว่างหัวข้อ หรือทั้งสองอย่างร่วมกันในโหมด สำรวจโครงร่าง ได้
ประเด็นสำคัญคือการนำทางด้วยโปรแกรมอ่านหน้าจอ ไม่เหมือนกับการนำทางด้วยคีย์บอร์ด
ไม่เห็นด้วยอย่างสิ้นเชิง ตัวอย่างที่พวกเขายกมาเป็นตัวอย่างแย่ ๆ อย่าง “To download W3C's editor/browser Amaya, click here.” นั้นชัดเจนมาก
กดลิงก์แล้วก็น่าจะดาวน์โหลดทันที หรือไปยังหน้าดาวน์โหลด
ตรงกันข้าม “Get Amaya!” ดูเหมือนลิงก์ไปเว็บไซต์ของ Amaya มากกว่า ไม่ได้ดูเหมือนหน้าดาวน์โหลด จึงไม่ค่อยได้ผลสำหรับการดาวน์โหลด
“Tell me more about Amaya: W3C's free editor/browser that lets you create HTML, SVG, and MathML documents.” ก็ไม่ดีนัก มันไม่ใช่ประโยคเกี่ยวกับการดาวน์โหลด และ “tell me more” เป็นคำสั่ง แต่กลับไม่ใช่ลิงก์
การใช้ตามขนบของเว็บอย่าง “To download W3C's editor/browser Amaya, click here.” หรือ “Download Amaya, the W3C's editor/browser.” นั้นใช้ได้สมบูรณ์แบบ
ความคิดที่ว่าลิงก์ไม่ควรเป็นคำกริยาดูค่อนข้างแปลก ถ้ามันรวมการกระทำอย่างดาวน์โหลดหรืออ่านเพิ่มเติม ลิงก์ก็เป็น คำกริยา ได้อยู่แล้ว
มันต่างจากกรณีอ่านเพิ่มเติมเกี่ยวกับหัวข้อใดหัวข้อหนึ่ง อย่างลิงก์อ้างอิงใน Wikipedia
“click here” ทำให้ชัดเจนมากว่าลิงก์นั้นไม่ใช่ลิงก์อ้างอิงธรรมดา แต่เป็น ลิงก์สำหรับทำการกระทำ เมื่อเห็น “Get Amaya!” จะรู้สึกว่าไม่ได้บอกวิธีเอา Amaya มา แต่ “Amaya” เป็นลิงก์อ้างอิง ไม่ใช่ลิงก์ดาวน์โหลด
แม้จะทำเสิร์ชเอนจิน “click here” จะให้ข้อมูลอะไรกับดัชนีได้?
ผมไม่ได้เห็นด้วยว่าคำกริยาเองเป็นปัญหาใหญ่ แต่ถ้าคำกริยาคือ click และกรรมคือ here ก็อีกเรื่อง
ข้อความลิงก์ “Click Here to download Amaya” ยังพอทนได้ แต่ถ้าลิงก์มีตัวอักษรแค่สองคำว่า “click here” จริง ๆ ก็แยกไม่ออกจากลิงก์อื่นในหลายบริบท
“Download Amaya” เป็นลิงก์ที่ดีได้ ส่วนมีแค่ “Amaya” หรือแค่ “click here” นั้นไม่ดี เว้นแต่กรณีที่พาไปหน้าข้อมูลของ Amaya
สุดท้ายปัญหา “click here” คือปัญหาด้านการเข้าถึงอย่างที่คอมเมนต์อื่น ๆ พูด แต่พอเอาไปปนกับประเด็นว่าข้อความลิงก์สะท้อนปลายทางได้ถูกต้องหรือไม่ สารที่ต้องการสื่อเลยดูเลือนลงพอสมควร
aria-describedbyอาจช่วยได้ แต่ถ้าทำให้ข้อความภายในลิงก์เองดีขึ้น ก็หลีกเลี่ยงความจำเป็นนั้นได้ส่วนเรื่องคำกริยา เห็นด้วย
Government Digital Service ของสหราชอาณาจักรก็ให้คำแนะนำคล้ายกันในแนวทางด้านการเข้าถึง: https://design.homeoffice.gov.uk/accessibility/links
อาจไม่ใช่สิ่งที่สวยที่สุด แต่ การเข้าถึงต้องมาก่อนการออกแบบ มากกว่าสิ่งอย่างเส้นขอบสีดำ/เหลืองหนา ๆ ของคอมโพเนนต์ฟอร์ม
W3C บอกว่า “Get Amaya”, “Read more about Amaya” ส่วน Home Office บอกว่า “Get Amaya”, “Read more about Amaya”
แบบหลังดูสมเหตุสมผลกว่ามาก แต่ถ้าใช้ในบริบทของประโยคก็จะเกิดปัญหาอื่น
โดยส่วนตัวคิดว่าทั้งสองแบบกำลังสับสนระหว่างกรณีใช้งานสองแบบที่ต่างกัน ลิงก์มักถูกใช้แบบอินไลน์ภายในประโยค และกรณีที่ W3C กับ Home Office พูดถึงน่าจะเหมาะกับการทำเป็นปุ่มนอกประโยค เช่น
[Download],[Documentation]มากกว่าแต่ในกรณีใช้งานไฮเปอร์ลิงก์ในข้อความอินไลน์ ทั้งสองแบบดูฝืน ๆ
ตัวอย่างเช่น “PiPedal is a guitar effects pedal that runs on Raspberry Pi. To download PiPedal, click here. To read the documentation, click here.” ควรแก้ยังไงดี?
เข้าใจเหตุผลที่คัดค้าน แต่การแก้เป็น “PiPedal is a guitar effects pedal that runs on Raspberry Pi. Get Pipedal. Read the documentation.” นั้นยอมรับได้ยาก ไม่เป็นสำนวนภาษาอังกฤษ
ในเอกสารจริงเขียนไว้ว่า “To download PiPedal, visit the Download Page. To learn more about Pipedal, view the Documentation.” แต่จากประสบการณ์ การทำให้ “click here” กลายเป็น คำนาม มักยากมาก
ยิ่งในประโยคอย่าง “Ubuntu Server installs don't suffer from this problem; but before choosing an Ubuntu Server install, you should read the Ubuntu Server section of the "Installing on Ubuntu" page.” ยิ่งเป็นแบบนั้น
แล้วก็เกิดคำถามว่า การใช้ “here” เป็นสรรพนามแทนสิ่งที่อ้างถึงนั้นผิดตรงไหนกันแน่
ในกรณีใช้งานนี้ ลิงก์อยู่ในประโยคที่ให้บริบททั้งหมดว่าทำไมต้องมีลิงก์ จึงอาจไม่มีปัญหาด้านการเข้าถึงจริง ๆ ก็ได้
ตัวอย่างแรกก็เป็นประโยคนำของเว็บเพจที่ความกระชับสำคัญ
“To download PiPedal, click here.” เป็นปัญหาด้านการเข้าถึงจริงหรือ? โดยเฉพาะถ้ามีปุ่ม
[ Download ] [ Documentation ]อยู่ด้านบนทันทีตัวชี้วัดที่สำคัญจริง ๆ ตรงนี้คือมีคนเข้าไปยังหน้าดาวน์โหลดมากแค่ไหน
เมื่อมองแบบนั้น ก็น่าสงสัยไม่น้อยว่า “To download PiPedal, visit the Download Page.” จะดีกว่าจริงหรือไม่
โดยส่วนตัวคิดว่าตัวอย่างที่สองที่พวกเขาบอกให้หลีกเลี่ยงนั้นดีกว่า: “To download Amaya, go to the Amaya_Website and get the necessary software.”
ลิงก์ที่มีแค่ “Amaya” ทำให้ไม่รู้ว่าเป็นลิงก์ภายในหรือลิงก์ภายนอก และแม้จากบริบทจะชัดว่าต้องการดาวน์โหลด Amaya ก็ยังยากจะรู้ว่าไปยังไฟล์โดยตรงหรือไปยัง หน้าดาวน์โหลด
ไม่รู้ว่าเพราะแก่ขึ้นหรือเปล่า แต่ผมคิดมาโดยสัญชาตญาณเสมอว่าลิงก์ควรชี้ไปที่ คำนาม
ลิงก์ชี้ไปยังสถานที่หนึ่ง และสถานที่นั้นมีชื่อ ไม่ใช่คำกริยาหรือคำคุณศัพท์
ดังนั้นลิงก์ไปยัง “เว็บไซต์ของฉัน” จึงโอเค แต่ลิงก์อย่าง “ไปยังเว็บไซต์ของฉัน” ให้ความรู้สึกว่าโดยเนื้อแท้แล้วไม่ถูกต้อง
ผมยังไม่ชอบน้ำเสียงแบบคำสั่งอย่างมากด้วย จึงไม่เคยใช้ประโยคอย่าง “go to my website” หรือ “follow this link” เลย
แต่ถ้าลิงก์เริ่มการกระทำบางอย่าง เช่น ดาวน์โหลด ก็จะกำกวมขึ้น ถึงอย่างนั้นถ้ามองว่าเป็นคำนามอย่าง “ดาวน์โหลด” หรือ “ตัวดาวน์โหลด” มันก็ยังเป็นคำนามอยู่ดี
นี่คงเป็นประเด็นถกเถียงบนอินเทอร์เน็ตที่ผมจะยืนกรานไปจนสุด
ข้อความกระตุ้นให้ดำเนินการ เป็นอีกเรื่องหนึ่ง แต่หน้าที่ลิงก์เฉพาะคำว่า “here” อย่างเดียวนั้นเป็นความล้มเหลวอย่างชัดเจนของผู้เขียนที่ไม่เข้าใจสื่อไฮเปอร์เท็กซ์
“click here” ดูเหมือนคำสั่งบนเวทีที่เผลอทิ้งไว้
ผู้เขียนส่วนใหญ่เวลาเขียนไม่ได้เขียนในบริบทของไฮเปอร์เท็กซ์ และถือเอาคำสั่งบนเวทีเป็นค่าเริ่มต้น แทนที่จะใช้รูปแบบลิงก์อย่าง Markdown
นึกถึงบทความเกี่ยวกับลิงก์ที่เขียนว่า “I forgot my password”
ตอนแรกคิดว่าถ้าเขียนว่า “click here if...” จะดีขึ้นไหม แต่โดยสัญชาตญาณก็รู้ว่ามันก็ยังไม่ถูกอยู่ดี
การมองข้ามองค์ประกอบไร้ประโยชน์บนหน้าเว็บเป็นทักษะที่บางคนไม่มี และไม่รู้ว่าจะสอนเรื่องนี้อย่างไร
เรื่องนี้ผุดขึ้นมาทุกครั้งที่ช่วยคนที่ไม่มีความรู้พื้นฐานให้ใช้เว็บ ผู้ใช้บางคน แม้รายการแรกบนหน้าจะเป็น “Please enable notifications” แบบตัวอักษรล้วน ๆ ก็ยังจะคิดพิจารณามันอย่างจริงจังก่อนจะได้ดูรายการที่สองเสียอีก
ยิ่งตอนนี้ Google Search แสดงขยะยาวหลายหน้าจอก่อนผลลัพธ์จริง ก็ยิ่งเป็นแบบนั้น
ปัญหาที่เกี่ยวข้องคือ บางคนไม่เข้าใจ สถานะเชิงญาณวิทยา ของข้อความบนหน้าเว็บตามประเภทต่าง ๆ
ตัวอย่างเช่น มีผู้ใช้ที่เห็นลิงก์ที่คลิกได้ว่า “I forgot my password” แล้วเชื่อว่านั่นเป็นประโยคที่บอกว่าตนลืมรหัสผ่าน ไม่ใช่หมายความว่าตรงนั้นคือที่ที่ควรกดเมื่อลืมรหัสผ่าน
แน่นอนว่า การล่มสลายของมาตรฐาน UI ทำให้ปัญหานี้แย่ลงมาก
https://mstdn.io/@mattskala/113188291223682980
จำได้ว่ามีช่วงหนึ่งที่ Microsoft เอาปุ่มจำนวนมากออกจาก UI แล้วเปลี่ยนเป็นลิงก์ข้อความสี ๆ ที่กำกวม หลังจากนั้นการหาว่าควรคลิกอะไรยากขึ้นมาก
ผู้ใช้ปรับตัวเข้าหาเครื่องโดยสัญชาตญาณ และนักพัฒนาก็ปรับตัวเข้าหาผู้ใช้ จนเกิดวงจรป้อนกลับ
พูดอีกอย่างคือ เพราะเว็บไซต์และแอปจำนวนมากมีลิงก์ “I forgot my password” ความหมายทางภาษาก็อาจเปลี่ยนไปด้วยมากทีเดียว
อย่างน้อยในบริบทนั้น คนส่วนใหญ่ก็จะปรับตัวจนเข้าใจเจตนา
คนรุ่นใหม่ที่ไม่รู้จักวิธีอื่นอาจไม่มองว่ามันเป็นเรื่องน่าใส่ใจด้วยซ้ำ
ดังนั้นแม้ขนบธรรมเนียมบางอย่างเมื่อแยกมาดูเดี่ยว ๆ จะไม่สมเหตุสมผล แต่ก็ยังมี คุณค่าในการรักษาขนบธรรมเนียม อยู่
ถ้าทุกตัวอย่างตั้งอยู่บนสมมติฐานที่สอดคล้องกันว่าจริง ๆ แล้วเป็นการดาวน์โหลด “Amaya” ผมว่าทำเป็นไฮเปอร์ลิงก์ Download Amaya ไปเลยจะดีกว่า
ถ้าเป็นไปได้ ก็ควรมี ไอคอนดาวน์โหลด ที่บอกว่าไปยังไฟล์จริงด้วย
เพราะจะได้รู้ว่านี่ไม่ใช่ลิงก์ไปยังหน้าอื่นที่มีปุ่มดาวน์โหลดจริงซ่อนอยู่ท่ามกลางโฆษณา 4 อัน
Dragan Espenschied(despens) เขียนบทความในปี 2022 เกี่ยวกับว่าข้อความลิงก์เปลี่ยนไปอย่างไรตามกาลเวลา: https://despens.systems/2022/06/button-pushes-you/
เขาชี้ให้เห็นการเปลี่ยนจากข้อความกระตุ้นให้ลงมือทำ ไปเป็นข้อความบนปุ่มที่บรรยายตัวผู้ใช้
ประมาณว่า “แทนที่จะเป็นเช่นนั้น พวกมันต้องสร้างสภาวะของผู้ใช้ขึ้นใหม่ ผู้ใช้ต้องยอมรับคาถาที่เขียนไว้และเปลี่ยนท่าที ก่อนจะเข้าถึงข้อมูลถัดไปได้”
“Get Amaya.”, “Tell me more about Amaya.” ดูไม่ค่อยสง่างาม