"यहाँ क्लिक करें" जैसे लिंक टेक्स्ट का उपयोग न करें (2001)

 (w3.org)
1 पॉइंट द्वारा GN⁺ 2025-07-03 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • "यहाँ क्लिक करें" जैसे सामान्य लिंक टेक्स्ट के उपयोग की समस्या पर ज़ोर
  • accessibility बेहतर करने के संदर्भ में, लिंक टेक्स्ट को कंटेंट का अर्थ स्पष्ट रूप से बताना चाहिए
  • search engine और screen reader उपयोगकर्ता अनुभव पर नकारात्मक प्रभाव पड़ता है
  • स्पष्ट और संदर्भ को दर्शाने वाले लिंक वाक्यांश उपयोगकर्ताओं और तकनीक, दोनों को लाभ देते हैं
  • 2001 से web standards और UX सिद्धांतों के स्तर पर सही लिंक टेक्स्ट को बढ़ावा देने की पहल जारी है

परिचय

  • "यहाँ क्लिक करें" या "click here" जैसे सामान्य लिंक टेक्स्ट का उपयोग लंबे समय से web developers के बीच एक आम प्रथा रहा है
  • लेकिन इस तरीके में accessibility, usability, SEO के लिहाज़ से महत्वपूर्ण कमियाँ हैं

लिंक टेक्स्ट का अर्थ और समस्याएँ

  • लिंक टेक्स्ट की भूमिका यह है कि वह उपयोगकर्ता को क्लिक करने से पहले यह अनुमान लगाने में मदद करे कि लिंक कहाँ ले जाएगा
  • अगर इसे सिर्फ़ "यहाँ क्लिक करें" की तरह लिखा जाए, तो बिना संदर्भ के लिंक मौजूद होने से उपयोगकर्ता भ्रम और accessibility में कमी पैदा होती है

accessibility और उपयोगकर्ता अनुभव पर प्रभाव

  • screen reader उपयोगकर्ता जब पेज के भीतर लिंक सूची देखते हैं, तो उन्हें हर जगह एक ही "यहाँ क्लिक करें" सुनाई देता है, जिससे जानकारी प्राप्त करना कठिन हो जाता है
  • जब लिंक अर्थपूर्ण और विशिष्ट वाक्यांशों के साथ लिखे जाते हैं, तो दृष्टिबाधित उपयोगकर्ताओं सहित विभिन्न परिस्थितियों के सभी उपयोगकर्ताओं के लिए अनुभव की दक्षता बढ़ती है

search engine optimization (SEO) से जुड़े विचार

  • search engines भी लिंक टेक्स्ट का विश्लेषण करके कंटेंट की प्रासंगिकता और गुणवत्ता का आकलन करते हैं
  • महत्वपूर्ण keywords और संदर्भ वाले लिंक टेक्स्ट search ranking और visibility बढ़ाने में सकारात्मक प्रभाव डालते हैं

सही लिंक टेक्स्ट लिखने की सिफारिश

  • ऐसे लिंक टेक्स्ट के उपयोग की सिफारिश की जाती है जो संदर्भ को स्पष्ट रूप से दर्शाएँ
    • उदाहरण: "नवीनतम accessibility guidelines देखें"
  • यह सिद्धांत 2001 से web standards के उदय और UX को मजबूत करने की प्रक्रिया में लगातार ज़ोर दिया जाता रहा है

निष्कर्ष

  • "यहाँ क्लिक करें" के बजाय अर्थपूर्ण टेक्स्ट को लिंक के रूप में उपयोग करना आज के web और भविष्य के web, दोनों के लिए एक आवश्यक मानक है

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2025-07-03
Hacker News राय

  • accessibility के नज़रिए से देखें तो यह ज़ोर देना ज़रूरी है कि दृष्टिबाधित उपयोगकर्ताओं के लिए screen reader पेज को रेखीय ढंग से पढ़ता है। इस रेखीय संरचना से बाहर निकलने के लिए उपयोगकर्ता headers या links की सूची अलग से देख सकते हैं, लेकिन अगर सभी links "यहाँ क्लिक करें" जैसे दिखें, तो व्यवहार में गैर-रेखीय access रुक जाता है

    • यह भी ध्यान दिलाया गया कि अगर सभी links सिर्फ "Amaya" जैसे बिना क्रिया वाले noun के रूप में हों, तब भी हर link का मतलब समझना कठिन हो सकता है। इसलिए "get Amaya" या "go to the Amaya website" जैसे वाक्यांश भी पर्याप्त रूप से ठीक माने गए। साथ ही wxMaxima का उदाहरण दिया गया कि download button github.io पर हो, लेकिन असल executable sourceforge जैसी malware-जोखिम वाली साइट से आए, तो यह अच्छा नहीं है
    • विडंबना यह है कि जिन लोगों को accessibility tools की वास्तविक ज़रूरत नहीं होती, उन्हें भी इन tools के काम करने के तरीके को आसानी से दृश्य रूप में समझने देने वाली किसी चीज़ की ज़रूरत है। tools को बदलने की बात नहीं, बल्कि ज़्यादा लोगों को screen reader environment का प्रत्यक्ष अनुभव कैसे कराया जाए, इस पर सोचना चाहिए
    • इस समस्या के लिए पहले से कई समाधान मौजूद हैं। उदाहरण के तौर पर WCAG 2.2 HTML H33 guide, WCAG 2.2 CSS C7 guide को संदर्भ के रूप में दिया गया। हालांकि पहला तरीका वास्तविक screen readers में कितना अच्छी तरह supported है, यह निश्चित नहीं है
    • यह बात वाजिब लगती है। फिर भी यह रुख है कि link text में "Amaya" की तुलना में "Get Amaya" जैसा अधिक स्पष्ट action होना बेहतर है
    • screen reader पेज के भीतर नेविगेशन के कई तरीके देता है। रेखीय navigation सिर्फ सबसे अलाभकारी तरीका है। उपयोगकर्ता landmarks, headings या outline navigation mode के ज़रिए तेज़ी से इच्छित जगह पर जा सकते हैं। महत्वपूर्ण बात यह है कि screen reader navigation और keyboard navigation एक जैसे नहीं होते

  • मुझे लेख में दिया गया यह "समस्याग्रस्त" उदाहरण

    W3C के editor/browser Amaya को download करने के लिए, यहाँ क्लिक करें.
    वास्तव में काफ़ी सहज लगता है। link पर क्लिक करने से या तो फ़ाइल तुरंत download होगी या download page पर ले जाया जाएगा, यह सहज रूप से समझ आता है।
    इसके विपरीत,
    Amaya प्राप्त करें!
    ऐसा वाक्यांश ऐसा एहसास देता है मानो यह website के main page पर ले जाएगा, इसलिए अगर इसे वास्तविक download link के रूप में इस्तेमाल किया जाए तो इसका असर कमज़ोर पड़ता है।
    और
    Amaya के बारे में और जानें
    इसका download से कोई संबंध नहीं है, और यहाँ क्रिया "जानें" link नहीं है, इसलिए ऐसे में यह उलझन होती है कि "Amaya" link landing page पर जाएगा या जानकारी वाले page पर।
    वेब पर प्रचलन आम तौर पर पहले उदाहरण जैसा रहा है:
    W3C के editor/browser Amaya को download करने के लिए यहाँ क्लिक करें
    Amaya download, W3C का editor/browser
    इस तरह।
    मैं इस दावे से सहमत नहीं हूँ कि link text में क्रिया नहीं होनी चाहिए। उल्टा, मेरा मानना है कि जिन links में कोई action शामिल हो, जैसे download या जानकारी देखना, उनमें क्रिया स्पष्ट रूप से होनी चाहिए।
    खास तौर पर "यहाँ क्लिक करें" यह संकेत देता है कि यह सिर्फ संदर्भ link नहीं बल्कि action link है, इसलिए यह बहुत सहज है।
    Amaya प्राप्त करें!
    ऐसा वाक्यांश इस बात पर ज़ोर देता है कि यह असली Amaya पाने का मार्गदर्शन देने वाला link नहीं, बल्कि बस एक संदर्भ link जैसा महसूस होता है

    • अगर आप screen reader के साथ सीधे इस्तेमाल करें, तो पता चलता है कि हर link बार-बार सिर्फ "यहाँ क्लिक करें" ही बोलता है। यह बिल्कुल भी मददगार नहीं है। search engine के नज़रिए से भी "यहाँ क्लिक करें" कोई जानकारी नहीं देता। क्रिया अपने-आप में ठीक है, लेकिन "यहाँ क्लिक करें" जैसे एक-जैसे सुनाई देने वाले links से बचना चाहिए। "Click Here to download Amaya" जैसा वाक्य, जिसमें object भी स्पष्ट हो, ठीक है, लेकिन सिर्फ "यहाँ क्लिक करें" कई परिस्थितियों में अलग नहीं पहचाना जा सकता
    • मुझे "यहाँ क्लिक करें" links सच में नापसंद हैं। जब मैं अपनी मनचाही link ढूँढता हूँ, तो अक्सर पेज के सारे link texts को सिर्फ नज़र से स्कैन करता हूँ। ऐसे में "Amaya download" या "Amaya" अगर reference page हो तो ठीक हो सकता है, लेकिन "यहाँ क्लिक करें" बिल्कुल भी उपयोगी नहीं लगता
    • वास्तविक उदाहरण में सभी links Amaya homepage पर ही जाते हैं। वे download page पर नहीं जाते, इसलिए संदेश की स्पष्टता और कम हो जाती है। यह आलोचना भी की गई कि "यहाँ क्लिक करें" वाले accessibility मुद्दे और link text अपने लक्ष्य को कितनी सटीकता से बताता है, इन दो अलग बातों को मिलाकर चर्चा की जा रही है
    • screen reader की बात से अलग भी, link text को स्पष्ट noun के रूप में रखने से maintenance के नज़रिए से फ़ायदा हो सकता है। उदाहरण के लिए, अगर कोई link गलती से copy-paste हो गया हो या dead link हो, तो उसका text खुद एक सुराग बन जाता है, जिससे उसका पता लगाना और उसे ठीक करना आसान हो जाता है। यह थोड़ा मामूली बिंदु हो सकता है
    • वेब के शुरुआती दौर में ऐसे "यहाँ क्लिक करें" links बहुत थे। धीरे-धीरे उन्हें अधिक स्पष्ट action वाले button रूपों ने बदल दिया, इसलिए "इस purchase को cancel करने के लिए [यहाँ क्लिक करें]", "इस purchase को पूरा करने के लिए [यहाँ क्लिक करें]" जैसे पैटर्न कम होते गए

  • यह भी बताया गया कि UK Government Digital Services भी इसी तरह की accessibility guidelines सुझाती है; आधिकारिक सामग्री यहाँ देखी जा सकती है

    • मैं इस guideline को संदर्भ के रूप में लेकर उच्च-स्तरीय accessibility components/web design लागू करने में अक्सर उपयोग करता हूँ। यह कुछ लोगों को भद्दा लग सकता है (जैसे मोटी काली/पीली borders), लेकिन मेरा मानना है कि design से ऊपर accessibility को प्राथमिकता देना महत्वपूर्ण है
    • Home Office का सुझाया तरीका W3C से थोड़ा अलग है। उदाहरण के लिए
      W3C:
      Get Amaya
      Read more about Amaya
      Home Office:
      Get Amaya
      Read more about Amaya
      Home Office का तरीका अधिक तर्कसंगत लगता है, लेकिन संदर्भ के अनुसार इसमें भी दूसरी समस्याएँ आ सकती हैं। दोनों ही जगह व्यवहार में narrative के भीतर hyperlink लगाने के बजाय out-of-line buttons से हल करना ज़्यादा स्वाभाविक लगता है (जैसे: [Download], [Documentation])। मेरे अनुभव में, text को स्वाभाविक रूप से बदलकर
      "PiPedal Raspberry Pi पर चलने वाला guitar effects processor है। PiPedal download के लिए [डाउनलोड पेज], और docs पढ़ने के लिए [Documentation]."
      इस तरह लिखना बेहतर लगा, इसलिए मैंने अपने documentation में भी ऐसा ही लिखा
      यह एहसास हुआ कि "यहाँ क्लिक करें" को noun-जैसे रूप में बदलना सोचे से अधिक कठिन है। कभी-कभी inline वाक्य के भीतर पर्याप्त संदर्भ मौजूद होता है, इसलिए "यहाँ क्लिक करें" का उपयोग वास्तव में accessibility समस्या पैदा नहीं करता
      खासकर जब button ठीक ऊपर रखा हो ("Download", "Documentation"), तब यह ज़रूरी है या नहीं कि उसे बदला जाए, इस पर पूरी निश्चितता नहीं होती आख़िरकार असली performance metric यह है कि लोग वास्तव में download page पर कितनी बार जाते हैं

  • व्यक्तिगत रूप से, लेख में जिस दूसरे उदाहरण से बचने को कहा गया है (“Amaya को download करने के लिए Amaya website पर जाएँ और आवश्यक software लें”) वह मुझे बेहतर लगता है।
    अगर सिर्फ "Amaya" को link बनाया जाए, तो यह स्पष्ट नहीं होता कि वह internal link है या external, और यह भी नहीं कि वह सीधे फ़ाइल पर ले जाएगा या download page पर

    • मैं ऐसा तरीका पसंद करता हूँ जिसमें यह बताने के लिए icon जोड़ा जाए कि गंतव्य external है या file link है। file होने पर file extension दिखाना भी अच्छा विचार हो सकता है
    • internal और external links के भेद की समस्या Wikipedia जैसी साइटों पर छोटे icon से पहले ही अच्छी तरह हल की जा चुकी है

  • शायद उम्र की वजह से, मुझे सहज रूप से लगता है कि links का काम nouns (स्थान/वस्तु) की ओर इशारा करना है।
    इसलिए "मेरी website" जैसे link ठीक लगते हैं, लेकिन "मेरी website पर जाएँ" जैसे क्रिया-युक्त वाक्यांशों से झिझक होती है
    खासकर imperative रूप पसंद नहीं, इसलिए "go to my website", "follow this link" जैसे रूपों का उपयोग नहीं करता

    • यह बात समझ में आती है। download जैसी action वाली चीज़ों में भ्रम हो सकता है, लेकिन "download" खुद भी noun है, इसलिए शायद ठीक है
    • tutorial या how-to pages में imperative phrasing उपयुक्त मानी जा सकती है

  • कुछ लोगों का मानना है कि ऑनलाइन सिर्फ "यहाँ" को link बनाना hypertext document लिखने की बुनियादी समझ में विफलता है। "यहाँ क्लिक करें" मानो किसी script की stage direction जैसा लगता है। यह समस्या इसलिए आती है क्योंकि बहुत से लेखक hypertext संदर्भ में लिखना सीखते ही नहीं

  • जब "I forgot my password" जैसे वाक्य को link बनाना हो, तो उसे "यहाँ क्लिक करें" जैसा करने का विचार आया, लेकिन सहज रूप से वह गलत लगा।
    UI standards टूटने के साथ यह भ्रम बढ़ा है कि उपयोगकर्ता को पेज पर क्या क्लिक करना चाहिए, और कौन-सा text उसकी मंशा का प्रतिनिधित्व करता है
    इस बात से सहमति है कि अगर "I forgot my password" button हो, तो वह link की तुलना में कहीं अधिक प्रभावी होता है
    साथ ही, जब Microsoft ने अधिकांश buttons हटा कर उनकी जगह अस्पष्ट रंगों वाले links रख दिए, तब यह समझना और कठिन हो गया कि कहाँ क्लिक करना है
    (संदर्भ पोस्ट: संबंधित Mastodon पोस्ट)

  • Dragan Espenschied के 2022 के essay लिंक टेक्स्ट का बदलता इतिहास का परिचय दिया गया।
    इसमें हाल के उस रुझान का उल्लेख है जिसमें link text call-to-action से बदलकर ऐसे button text में बदल रहा है जो उपयोगकर्ता की स्थिति बताता है, यानी वह कैसा व्यक्ति है, उदाहरण के लिए “लॉग इन करें”

  • अधिकांश लोग लेख में बताए गए सिद्धांतों से सहमत हैं, लेकिन उनका मानना है कि "download" जैसी क्रिया या verb phrase कुछ स्थितियों में उचित अपवाद हो सकती है, बशर्ते वह सचमुच सीधे download शुरू करे और हर बार संदर्भ के अनुरूप हो

  • अगर उदाहरण की तरह हर link वास्तव में Amaya download ही शुरू करता हो, तो Download Amaya फ़ॉर्म का hyperlink सबसे पसंदीदा होगा।
    संभव हो तो download होने का संकेत देने वाला icon भी साथ में होना अच्छा रहेगा। असली file link की जगह ads से भरे download page पर भेजा जाना टालना चाहिए