ห้ามใช้ข้อความลิงก์แบบ “คลิกที่นี่” (2001)

 (w3.org)
1 คะแนน โดย GN⁺ 2025-07-03 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • เน้นปัญหาของการใช้ข้อความลิงก์แบบทั่วไป เช่น "คลิกที่นี่"
  • เพื่อปรับปรุง การเข้าถึง ข้อความลิงก์ควรสื่อ ความหมายของเนื้อหา ให้ชัดเจน
  • ส่งผลกระทบเชิงลบต่อเสิร์ชเอนจินและ ประสบการณ์ของผู้ใช้โปรแกรมอ่านหน้าจอ
  • ข้อความลิงก์ที่ชัดเจนและสะท้อนบริบท ให้ประโยชน์ทั้งต่อผู้ใช้และเทคโนโลยี
  • ตั้งแต่ปี 2001 เป็นต้นมา มีการผลักดันให้ใช้ข้อความลิงก์ที่ถูกต้องในระดับ มาตรฐานเว็บและหลักการ UX

บทนำ

  • การใช้ ข้อความลิงก์แบบทั่วไป เช่น "คลิกที่นี่" หรือ "click here" เป็นแนวปฏิบัติที่พบได้บ่อยในหมู่นักพัฒนาเว็บมาอย่างยาวนาน
  • อย่างไรก็ตาม วิธีดังกล่าวมีข้อเสียสำคัญในด้าน การเข้าถึง การใช้งาน และ SEO

ความหมายของข้อความลิงก์และปัญหาที่เกิดขึ้น

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

ผลกระทบต่อการเข้าถึงและประสบการณ์ผู้ใช้

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

ข้อพิจารณาด้านการปรับแต่งเว็บไซต์ให้ติดอันดับบนเสิร์ชเอนจิน (SEO)

  • เสิร์ชเอนจิน เองก็วิเคราะห์ข้อความลิงก์เพื่อประเมินความเกี่ยวข้องและคุณภาพของเนื้อหา
  • ข้อความลิงก์ที่มีคีย์เวิร์ดสำคัญและบริบทที่เหมาะสมส่งผลเชิงบวกต่อ อันดับการค้นหาและการมองเห็น

คำแนะนำในการเขียนข้อความลิงก์ที่ถูกต้อง

  • แนะนำให้ใช้ข้อความลิงก์ที่สะท้อนบริบทอย่างชัดเจน
    • ตัวอย่าง: "ดูแนวทางการเข้าถึงล่าสุด"
  • หลักการนี้ถูกเน้นย้ำอย่างต่อเนื่องมาตั้งแต่ปี 2001 ในกระบวนการของ การเกิดขึ้นของมาตรฐานเว็บและการเสริม UX

บทสรุป

  • การใช้ ข้อความที่มีความหมาย เป็นลิงก์ แทนที่จะใช้ "คลิกที่นี่" คือหลักเกณฑ์ที่จำเป็นสำหรับทั้งเว็บในปัจจุบันและเว็บในอนาคต

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2025-07-03
ความคิดเห็นจาก Hacker News

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

    • มีการชี้ว่า ถ้าลิงก์ทั้งหมดแสดงเป็นเพียงคำนามอย่าง "Amaya" โดยไม่มีคำกริยา ก็อาจเข้าใจความหมายของแต่ละลิงก์ได้ยาก จึงมองว่าวลีอย่าง "get Amaya" หรือ "go to the Amaya website" ก็ถือว่าใช้ได้ดีเช่นกัน อีกทั้งยังยกกรณีของ wxMaxima เป็นตัวอย่างว่า ปุ่มดาวน์โหลดที่อยู่บน github.io แต่สุดท้ายพาไปเอาไฟล์ปฏิบัติการจากเว็บอย่าง sourceforge ซึ่งมีความเสี่ยงด้านมัลแวร์นั้นไม่ใช่เรื่องที่ดี
    • มีข้อเสนอเชิงประชดเล็กน้อยว่า ควรมีอะไรบางอย่างที่ช่วยให้คนซึ่งไม่ได้จำเป็นต้องใช้เครื่องมือด้านการเข้าถึงจริง ๆ สามารถมองเห็นภาพการทำงานของเครื่องมือเหล่านี้และเข้าใจได้ง่ายขึ้น ไม่ใช่เพื่อเปลี่ยนเครื่องมือ แต่เพื่อให้คนจำนวนมากขึ้นได้ลองสัมผัสประสบการณ์แบบ screen reader ด้วยตัวเอง
    • ปัญหานี้มีวิธีแก้อยู่แล้วหลายแบบ โดยยก WCAG 2.2 HTML H33 guide และ WCAG 2.2 CSS C7 guide เป็นข้อมูลอ้างอิง แต่ก็ยังไม่แน่ใจว่าวิธีแรกจะได้รับการรองรับจาก screen reader จริงมากน้อยแค่ไหน
    • มองว่าเป็นข้อโต้แย้งที่ดี แต่ก็ยังเห็นว่าข้อความลิงก์ควรมีการกระทำที่ชัดเจนมากกว่า "Amaya" เช่น "Get Amaya"
    • screen reader มีวิธีนำทางภายในหน้าหลายแบบ การเลื่อนแบบเชิงเส้นเป็นเพียงวิธีที่ไม่มีประสิทธิภาพที่สุดเท่านั้น ผู้ใช้สามารถกระโดดไปยังตำแหน่งที่ต้องการได้อย่างรวดเร็วผ่าน landmark, heading หรือโหมดนำทางตามโครงร่าง ประเด็นสำคัญคือ วิธีนำทางของ screen reader กับการนำทางด้วยคีย์บอร์ดนั้นไม่เหมือนกัน

  • ผู้แสดงความเห็นคนหนึ่งมองว่าตัวอย่าง "มีปัญหา" ที่ยกในบทความคือ

    หากต้องการดาวน์โหลด Amaya ซึ่งเป็น editor/browser ของ W3C ให้ คลิกที่นี่
    นั้นจริง ๆ แล้วเข้าใจได้ง่ายมาก เพราะคาดเดาได้ว่าคลิกลิงก์แล้วจะเริ่มดาวน์โหลดทันทีหรือพาไปยังหน้าดาวน์โหลด
    ในทางกลับกัน
    Get Amaya!
    กลับให้ความรู้สึกเหมือนจะพาไปหน้าแรกของเว็บไซต์มากกว่า จึงมีประสิทธิภาพน้อยลงถ้าใช้เป็นลิงก์สำหรับดาวน์โหลดจริง
    และ
    อ่านเพิ่มเติมเกี่ยวกับ Amaya
    ก็ไม่ได้เกี่ยวอะไรกับการดาวน์โหลดเลย อีกทั้งคำกริยา "อ่านเพิ่มเติม" ไม่ได้อยู่ในลิงก์ ทำให้สับสนว่าเมื่อลิงก์อยู่ที่คำว่า "Amaya" จะพาไปหน้า landing page หรือหน้าข้อมูลกันแน่
    ธรรมเนียมบนเว็บมักเป็นแบบตัวอย่างเดิมคือ
    หากต้องการดาวน์โหลด Amaya ซึ่งเป็น editor/browser ของ W3C ให้ คลิกที่นี่
    ดาวน์โหลด Amaya, editor/browser ของ W3C
    จึงไม่เห็นด้วยกับข้ออ้างที่ว่าข้อความลิงก์ไม่ควรใช้คำกริยา ตรงกันข้าม ถ้าลิงก์นั้นต้องการให้ผู้ใช้ทำอะไรบางอย่าง เช่น ดาวน์โหลดหรือดูข้อมูล ก็ควรมีคำกริยาที่ชัดเจนอยู่ในลิงก์
    โดยเฉพาะ "คลิกที่นี่" นั้นเข้าใจได้ง่ายมาก เพราะมันสื่อว่านี่ไม่ใช่ลิงก์อ้างอิงธรรมดา แต่เป็นลิงก์ที่มีการกระทำ
    Get Amaya!
    ให้ความรู้สึกเหมือนเป็นเพียงลิงก์อ้างอิง ไม่ใช่ลิงก์ที่จะบอกวิธีรับ Amaya จริง ๆ

    • ถ้าได้ลองใช้ screen reader จริง จะพบว่าทุกลิงก์กลายเป็น "คลิกที่นี่" ซ้ำ ๆ ซึ่งไม่ช่วยอะไรเลย ในมุมของ search engine ก็เช่นกัน "คลิกที่นี่" ไม่ได้ให้ข้อมูลใด ๆ ตัวคำกริยาเองไม่ใช่ปัญหา แต่ควรหลีกเลี่ยงข้อความอย่าง "คลิกที่นี่" ที่ทำให้ลิงก์ทั้งหมดฟังเหมือนกัน วลีอย่าง "Click Here to download Amaya" ที่ระบุ object ชัดเจนยังพอใช้ได้ แต่ "คลิกที่นี่" ล้วน ๆ แยกไม่ออกในหลายบริบท
    • เกลียดลิงก์ "คลิกที่นี่" มาก เพราะเวลาจะหาลิงก์ที่ต้องการ มักกวาดตาดูเฉพาะข้อความลิงก์ในหน้า ถ้าเป็น "ดาวน์โหลด Amaya" หรือ "Amaya" สำหรับหน้าอ้างอิงก็ยังพอได้ แต่ "คลิกที่นี่" ไม่ช่วยอะไรเลย
    • ในตัวอย่างจริง ลิงก์ทั้งหมดพาไปที่หน้า homepage ของ Amaya ไม่ใช่หน้าดาวน์โหลด และยิ่งทำให้การสื่อสารอ่อนลง จึงวิจารณ์ว่าการถกเถียงนี้กำลังปะปนกันระหว่างประเด็นด้านการเข้าถึงของ "คลิกที่นี่" กับประเด็นที่ว่าข้อความลิงก์สะท้อนจุดหมายของลิงก์ได้ถูกต้องแค่ไหน
    • นอกจากเรื่อง screen reader แล้ว การกำหนดข้อความลิงก์ให้เป็นคำนามที่ชัดเจนอาจมีข้อดีด้านการบำรุงรักษาด้วย เช่น ถ้าลิงก์ถูกคัดลอกวางผิดที่หรือกลายเป็นลิงก์เสีย ตัวข้อความเองก็เป็นเบาะแสให้ตามแก้ได้ง่ายขึ้น แม้จะเป็นประเด็นเล็กน้อยก็ตาม
    • ในยุคแรกของเว็บ ลิงก์แบบ "คลิกที่นี่" มีอยู่มาก แต่เมื่อค่อย ๆ ถูกแทนด้วยปุ่มที่แสดงการกระทำชัดเจน รูปแบบอย่าง "หากต้องการยกเลิกการสั่งซื้อนี้ [คลิกที่นี่]" หรือ "หากต้องการดำเนินการสั่งซื้อนี้ให้เสร็จสิ้น [คลิกที่นี่]" ก็เริ่มหายไปเรื่อย ๆ

  • มีการแนะนำว่าฝั่ง Government Digital Services ของสหราชอาณาจักรก็แนะนำแนวทางด้านการเข้าถึงคล้ายกัน และสามารถดูข้อมูลทางการได้ที่นี่

    • มักใช้อ้างอิงแนวทางนี้เวลาออกแบบคอมโพเนนต์หรือเว็บดีไซน์ที่ต้องการมาตรฐานการเข้าถึงระดับสูงสุด แม้จะดูแข็งหรือทื่อไปบ้าง เช่น กรอบดำ/เหลืองหนา ๆ แต่ก็มองว่าการให้ความสำคัญกับการเข้าถึงมาก่อนความสวยงามเป็นเรื่องสำคัญ
    • วิธีที่ Home Office แนะนำต่างจาก W3C เล็กน้อย เช่น
      W3C:
      Get Amaya
      Read more about Amaya
      Home Office:
      Get Amaya
      Read more about Amaya
      แนวทางของ Home Office ดูสมเหตุสมผลกว่า แต่ในบางบริบทก็อาจก่อปัญหาอีกแบบได้ ทั้งสองแห่งเองในทางปฏิบัติก็ดูจะเหมาะกับการแก้ปัญหาด้วยปุ่มนอกบรรทัดมากกว่าการใส่ไฮเปอร์ลิงก์ไว้ในเนื้อเรื่อง เช่น [Download], [Documentation] จากประสบการณ์ ผู้แสดงความเห็นคิดว่าการปรับข้อความให้เป็นธรรมชาติอย่าง
      "PiPedal คือเอฟเฟกต์กีตาร์ที่ทำงานบน Raspberry Pi หน้าดาวน์โหลดของ PiPedal คือ [download page] และเอกสารคือ [Documentation]"
      นั้นดีกว่า และจึงเขียนเอกสารของตัวเองแบบนั้นจริง ๆ
      อีกทั้งยังพบว่าการทำให้ "คลิกที่นี่" กลายเป็นคำนามนั้นยากกว่าที่คิด บางครั้งประโยค inline ก็ให้บริบทเพียงพอ จนการใช้ "คลิกที่นี่" ไม่ได้ก่อปัญหาด้านการเข้าถึงจริงเสมอไป
      โดยเฉพาะเมื่อมีปุ่มอยู่ถัดขึ้นไปทันทีอย่าง "Download" หรือ "Documentation" ก็ไม่แน่ใจว่าจำเป็นต้องแก้หรือไม่
      ท้ายที่สุดแล้ว ตัวชี้วัดสำคัญคือผู้คนเข้าไปถึงหน้าดาวน์โหลดจริงมากน้อยแค่ไหน

  • โดยส่วนตัวกลับรู้สึกว่าตัวอย่างที่สองที่บทความบอกให้หลีกเลี่ยง ("หากต้องการดาวน์โหลด Amaya ให้ไปที่ เว็บไซต์ Amaya แล้วรับซอฟต์แวร์ที่ต้องการ") ดีกว่า
    เพราะถ้าใส่ลิงก์แค่คำว่า "Amaya" อย่างเดียว ก็ไม่ชัดว่าคือ internal link หรือ external link และไม่รู้ว่าจะพาไปยังไฟล์โดยตรงหรือไปยังหน้าดาวน์โหลด

    • ชอบวิธีเพิ่มไอคอนเพื่อบอกว่าปลายทางเป็นลิงก์ภายนอกหรือเป็นลิงก์ไฟล์ และถ้าเป็นไฟล์ก็อาจแสดงนามสกุลไฟล์ด้วย
    • ปัญหาการแยก internal/external link นั้น Wikipedia และเว็บอื่น ๆ ก็แก้ได้ดีอยู่แล้วด้วยไอคอนเล็ก ๆ

  • อาจเพราะอายุมากแล้ว เลยรู้สึกโดยสัญชาตญาณว่าลิงก์ควรทำหน้าที่ชี้ไปยังคำนาม เช่น สถานที่หรือสิ่งของ
    จึงโอเคกับลิงก์อย่าง "เว็บไซต์ของฉัน" แต่ไม่ชอบวลีที่มีคำกริยาอย่าง "ไปที่เว็บไซต์ของฉัน"
    โดยเฉพาะอย่างยิ่งไม่ชอบรูปคำสั่ง จึงไม่ใช้รูปแบบอย่าง "go to my website" หรือ "follow this link"

    • เห็นด้วยกับความรู้สึกนี้ แม้กรณีที่มี action อย่างการดาวน์โหลดอาจทำให้สับสน แต่คำว่า "ดาวน์โหลด" เองก็ถือเป็นคำนามได้ จึงน่าจะใช้ได้
    • สำหรับหน้าประเภท tutorial หรือ how-to ก็มองว่าข้อความแบบคำสั่งเหมาะสมดี

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

  • เวลามีลิงก์อย่าง "I forgot my password" ก็เคยลองคิดว่าจะเปลี่ยนให้เป็นแบบ "คลิกที่นี่" ดู แต่ก็รู้สึกโดยสัญชาตญาณว่ามันไม่ใช่
    เมื่อมาตรฐาน UI พังลง ผู้ใช้ก็สับสนมากขึ้นว่าอะไรคือสิ่งที่ต้องคลิก และข้อความไหนกำลังสื่อแทนตัวเองอยู่
    เห็นด้วยว่า "I forgot my password" ถ้าเป็นปุ่มจะมีประสิทธิภาพกว่าการเป็นลิงก์มาก
    อีกทั้งตอนที่ Microsoft เอาปุ่มส่วนใหญ่ออกแล้วแทนที่ด้วยลิงก์สีที่กำกวม ก็ยิ่งเกิดกรณีที่ผู้ใช้ไม่แน่ใจว่าควรกดตรงไหนมากขึ้น
    (โพสต์อ้างอิง: โพสต์ Mastodon ที่เกี่ยวข้อง)

  • มีการแนะนำบทความปี 2022 ของ Dragan Espenschied เรื่อง ประวัติการเปลี่ยนแปลงของข้อความลิงก์
    ซึ่งพูดถึงแนวโน้มล่าสุดที่ข้อความลิงก์เปลี่ยนจาก call-to-action ไปเป็นข้อความบนปุ่มที่อธิบายสถานะของผู้ใช้เอง เช่น "เข้าสู่ระบบ"

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

  • ถ้าในตัวอย่างนั้น ทุกลิงก์นำไปสู่การดาวน์โหลด Amaya จริง รูปแบบไฮเปอร์ลิงก์อย่าง Download Amaya จะเป็นตัวเลือกที่ชอบที่สุด
    และถ้าเป็นไปได้ก็ควรมีไอคอนที่ช่วยสื่อว่าเป็นการดาวน์โหลดด้วย อยากหลีกเลี่ยงการถูกพาไปยังหน้าดาวน์โหลดที่มีปุ่มโฆษณาปะปนเต็มไปหมด ทั้งที่จริงไม่ได้เป็นลิงก์ไฟล์โดยตรง