HTML Breadcrumb Navigation or ब्रेडक्रंब नेविगेशन, मार्कअप के लिए एक व्यापक गाइड

नेविगेशन मार्कअप में विविधता और लचीलेपन की आवश्यकता

HTML में नेविगेशन को मार्कअप करने के लिए कोई एकमात्र सही तरीका नहीं है। विभिन्न संदर्भों में अलग-अलग दृष्टिकोण बेहतर काम करते हैं, और सिमेंटिक HTML का चुनाव आपकी विशिष्ट आवश्यकताओं पर निर्भर करता है।dhiwise+2

ब्रेडक्रंब नेविगेशन: एक विशेष केस स्टडी

ऑर्डर्ड लिस्ट (<ol>) का उपयोग क्यों सही है

ब्रेडक्रंब नेविगेशन के लिए ऑर्डर्ड लिस्ट (<ol>) का उपयोग अधिक उपयुक्त है क्योंकि:

• क्रम का महत्व: ब्रेडक्रंब में लिंक्स का एक निश्चित क्रमानुक्रम होता हैgeeksforgeeks+2

• हाइरार्की का प्रतिनिधित्व: यह साइट की संरचना में स्तरों को दर्शाता हैcss-tricks+1

• सिमेंटिक अर्थ: अनऑर्डर्ड लिस्ट (<ul>) सभी आइटम्स को समान स्तर पर दिखाती है, जबकि ब्रेडक्रंब में आइटम्स विभिन्न स्तरों का प्रतिनिधित्व करते हैंmeiert+1

सुझाया गया ब्रेडक्रंब मार्कअप पैटर्न

xml
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/category">Category</a></li>
    <li><a href="/sub-category">Sub Category</a></li>
    <li aria-current="page">Current Page</li>
  </ol>
</nav>

मुख्य तत्व

1. <nav> एलिमेंट: यह नेविगेशन लैंडमार्क बनाता हैcodeguage+1

2. aria-label="Breadcrumb": स्क्रीन रीडर्स को संदर्भ प्रदान करता हैdesignsystem+2

3. <ol> (ऑर्डर्ड लिस्ट): क्रमानुक्रम को दर्शाता हैdeveloper.mozilla+2

4. aria-current="page": वर्तमान पृष्ठ को चिह्नित करता हैaccede-web+2

<nav> एलिमेंट vs. role="navigation"

आधुनिक बेस्ट प्रैक्टिस

<nav> एलिमेंट का उपयोग करना बेहतर है क्योंकि:

• HTML5 में <nav> स्वचालित रूप से navigation role प्रदान करता हैrocketvalidator+2

• डुप्लिकेट ARIA का उपयोग अनावश्यक है: <nav role="navigation"> सही नहीं हैstackoverflow+2

• सिमेंटिक HTML को प्राथमिकता दी जाती है: ARIA से पहले उपयुक्त HTML एलिमेंट्स का उपयोग करना चाहिएlinkedin+1

कब role="navigation" का उपयोग करें

केवल तभी जब आप non-semantic elements जैसे <div> का उपयोग कर रहे हों:

xml
<!-- सही तरीका -->
<nav aria-label="Main navigation">
  <ul>...</ul>
</nav>

<!-- केवल <div> के साथ -->
<div role="navigation" aria-label="Main navigation">
  <ul>...</ul>
</div>

एक्सेसिबिलिटी के लिए आवश्यक तत्व

ARIA लेबल्स

• Multiple navigation landmarks के लिए अलग-अलग लेबल का उपयोग करेंdeveloper.mozilla+2

• ब्रेडक्रंब के लिए: aria-label="Breadcrumb"aditus+2

• मुख्य नेविगेशन के लिए: aria-label="Main navigation"developer.mozilla

aria-current का उपयोग

विभिन्न संदर्भों में अलग-अलग मान:developer.mozilla+2

• Breadcrumbs: aria-current="page" या aria-current="location"

• Main navigation: aria-current="page"

• Multi-step process: aria-current="step"

• Date pickers: aria-current="date"

स्ट्रक्चरल विकल्प

ब्रेडक्रंब के लिए तीन मुख्य दृष्टिकोण:css-tricks

1. ऑर्डर्ड लिस्ट (सुझाया गया):

   xml
   <nav aria-label="Breadcrumb">
     <ol>
       <li><a href="/">Home</a></li>
       <li aria-current="page">Current</li>
     </ol>
   </nav>
   

2. पैराग्राफ के साथ लिंक्स:

   xml
   <nav aria-label="Breadcrumb">
     <p>
       <a href="/">Home</a> >
       <span aria-current="page">Current</span>
     </p>
   </nav>
   

3. सीधे लिंक्स (न्यूनतम):

   xml
   <nav aria-label="Breadcrumb">
     <a href="/">Home</a>
     <span aria-current="page">Current</span>
   </nav>
   

WCAG अनुपालन और बेस्ट प्रैक्टिसेज

आवश्यक एक्सेसिबिलिटी फीचर्स

• Keyboard navigation support: सभी लिंक्स tab-accessible होनी चाहिएaccessiblyapp+1

• Color contrast: न्यूनतम 4.5:1 ratioaccessiblyapp

• Clear focus indicators: कीबोर्ड navigation के लिएaccessiblyapp

• Meaningful link text: स्क्रीन रीडर्स के लिएtheadminbar+1

सामान्य गलतियां

1. <nav> के बिना ब्रेडक्रंब: बहुत से WordPress plugins में यह समस्या हैtheadminbar

2. Unlabeled nav elements: aria-label का न होनाtheadminbar

3. गलत ARIA usage: <nav role="navigation"> का अनावश्यक उपयोगstackoverflow+1

निष्कर्ष

HTML नेविगेशन मार्कअप में लचीलापन और संदर्भ-आधारित चुनाव महत्वपूर्ण है। ब्रेडक्रंब के लिए ऑर्डर्ड लिस्ट (<ol>) का उपयोग करना, उसे <nav> एलिमेंट में wrap करना, और उपयुक्त ARIA attributes जोड़ना एक मजबूत, accessible solution प्रदान करता है। सिमेंटिक HTML को प्राथमिकता देना और modern accessibility standards का पालन करना सभी उपयोगकर्ताओं के लिए बेहतर अनुभव सुनिश्चित करता है।

1. https://www.dhiwise.com/post/maximizing-usability-best-practices-for-html-navigation-lists
2. https://www.codeguage.com/blog/why-use-nav-for-navigation-sections
3. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/nav
4. https://www.geeksforgeeks.org/html/how-to-create-a-breadcrumb-navigation/
5. https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation
6. https://www.aditus.io/patterns/breadcrumbs/
7. https://css-tricks.com/markup-for-breadcrumbs/
8. https://meiert.com/blog/breadcrumbs-in-html/
9. http://html5doctor.com/nav-element/
10. https://designsystem.gov.ae/docs/components/breadcrumbs
11. https://theadminbar.com/accessibility-weekly/accessible-breadcrumbs/
12. https://accessiblyapp.com/blog/breadcrumbs-accessibility/
13. https://www.accede-web.com/en/guidelines/html-css/complementary-guidelines/identify-navigation-current-position-with-aria-current/
14. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-current
15. https://getbootstrap.com/docs/4.0/components/breadcrumb/
16. https://rocketvalidator.com/html-validation/the-navigation-role-is-unnecessary-for-element-nav
17. https://www.linkedin.com/pulse/common-wcag-mistake-nav-element-rolenavigation-yanislav-pavlov-dkgsf
18. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/navigation_role
19. https://stackoverflow.com/questions/14911038/nav-role-navigation
20. https://www.aditus.io/aria/aria-current/
21. https://designsystem.digital.gov/components/breadcrumb/accessibility-tests/
22. https://css-tricks.com/navigation-markup-after-content/
23. https://stackoverflow.com/questions/34588679/html5-multi-nav-tag-best-practices
24. https://www.w3schools.com/howto/howto_css_breadcrumbs.asp
25. https://blog.hubspot.com/marketing/navigation-breadcrumbs
26. https://stackoverflow.com/questions/8060106/what-semantic-html-markup-should-be-used-to-create-breadcrumbs
27. https://www.sitepoint.com/community/t/nav-vs-div-role-navigation/7738
28. https://stackoverflow.com/questions/25326699/proper-aria-handling-of-breadcrumb-navigation
29. https://www.reddit.com/r/web_design/comments/34epqi/nav_vs_li_for_navigation_bar/
30. https://www.sitepoint.com/community/t/the-html5-nav-element/8505
31. https://stackoverflow.com/questions/70197325/how-to-correctly-set-aria-current-for-the-active-breadcrumb-item
32. https://www.w3.org/TR/WCAG20-TECHS/G65.html
33. https://www.reddit.com/r/accessibility/comments/tawuhk/should_we_only_use_ariacurrent_page_in_a/
34.