HTML Breadcrumb Navigation or ব্রেডক্রাম্ব নেভিগেশনের মার্কআপ: ক্রমবাচক তালিকা এবং অ্যাক্সেসিবিলিটি

আপনি একদম সঠিক পথে আছেন। অর্ডার্ড লিস্ট (ordered list) ব্যবহার করে ব্রেডক্রাম্ব নেভিগেশন তৈরি করা একটি শব্দার্থগতভাবে উপযুক্ত পন্থা। ক্রমের গুরুত্ব এবং হায়ারার্কিক্যাল ন্যাভিগেশন প্রকাশ করার জন্য <ol> ট্যাগ আনঅর্ডার্ড লিস্টের চেয়ে বেশি অর্থবহ।ralfvanveen+4

ব্রেডক্রাম্ব মার্কআপের সঠিক গঠন

মৌলিক HTML গঠন

xml
<nav aria-label="breadcrumb">
  <ol>
    <li><a href="/">হোম</a></li>
    <li><a href="/products">পণ্য</a></li>
    <li><a href="/products/electronics">ইলেকট্রনিক্স</a></li>
    <li aria-current="page">স্মার্টফোন</li>
  </ol>
</nav>

এই মার্কআপে তিনটি মূল উপাদান:

1. <nav> এলিমেন্ট: নেভিগেশনাল ল্যান্ডমার্ক তৈরি করেaccessibleweb+1

2. <ol> এলিমেন্ট: ক্রমবাচক তালিকা যা হায়ারার্কির ধারাবাহিকতা প্রকাশ করেaccessiblyapp+2

3. ARIA অ্যাট্রিবিউট: অ্যাক্সেসিবিলিটি বৃদ্ধির জন্যaditus+2

ARIA অ্যাট্রিবিউটের ভূমিকা

aria-label="breadcrumb" যোগ করার কারণ:

• স্ক্রিন রিডার ব্যবহারকারীদের বুঝতে সাহায্য করে যে এটি একটি ব্রেডক্রাম্ব নেভিগেশনaccessibleweb+2

• অন্যান্য নেভিগেশন উপাদান থেকে আলাদা করে চিহ্নিত করেaccessiblyapp+1

• role="navigation" যোগ করার প্রয়োজন নেই কারণ <nav> এলিমেন্ট ইতোমধ্যে ইমপ্লিসিট ভূমিকা প্রদান করেw3

বর্তমান পৃষ্ঠার জন্য বিশেষ চিহ্নিতকরণ

aria-current="page" অ্যাট্রিবিউট:

• শেষ আইটেমে যোগ করা হয় যা বর্তমান পৃষ্ঠা প্রতিনিধিত্ব করেaditus+2

• স্ক্রিন রিডার ব্যবহারকারীদের স্পষ্টভাবে জানায় এটি বর্তমান অবস্থানweb+1

• সাধারণত এই আইটেমটি লিংক নয়, বরং সাধারণ টেক্সট হিসেবে রাখা হয়designsystem+1

অন্যান্য বিকল্প পদ্ধতি

আনঅর্ডার্ড লিস্ট ব্যবহার

যদিও <ul> ব্যবহার করা যায়, তবে এটি শব্দার্থগত দিক থেকে কম উপযুক্ত:css-tricks

xml
<nav aria-label="breadcrumb">
  <ul>
    <li><a href="/">হোম</a></li>
    <li><a href="/products">পণ্য</a></li>
    <li aria-current="page">বর্তমান পৃষ্ঠা</li>
  </ul>
</nav>

প্যারাগ্রাফ ভিত্তিক মার্কআপ

আরো সরল পদ্ধতি হিসেবে প্যারাগ্রাফ ব্যবহার:theadminbar+1

xml
<nav aria-label="breadcrumb">
  <p>
    <a href="/">হোম</a> <span aria-hidden="true">></span>
    <a href="/products">পণ্য</a> <span aria-hidden="true">></span>
    বর্তমান পৃষ্ঠা
  </p>
</nav>

অ্যাক্সেসিবিলিটি বেস্ট প্র্যাকটিস

সেপারেটর হ্যান্ডলিং

CSS দিয়ে সেপারেটর যোগ করা সবচেয়ে ভাল পদ্ধতি:developer.mozilla+2

css
.breadcrumb li:not(:last-child)::after {
  content: " > ";
  margin: 0 0.25rem;
  color: #666;
}

এতে স্ক্রিন রিডার অপ্রয়োজনীয় সেপারেটর পড়ে না।accessibleweb+1

কীবোর্ড নেভিগেশন

ব্রেডক্রাম্বে বিশেষ কীবোর্ড ইন্টারঅ্যাকশনের প্রয়োজন নেই। ব্যবহারকারীরা ট্যাব কী দিয়ে স্বাভাবিকভাবে নেভিগেট করতে পারেন।vanillaframework+2

SEO এবং স্ট্রাকচার্ড ডেটা

Schema.org মার্কআপ যোগ করে সার্চ ইঞ্জিনে রিচ স্নিপেট পাওয়া যায়:seranking+2

json
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "item": {
        "@id": "https://example.com",
        "name": "হোম"
      }
    },
    {
      "@type": "ListItem", 
      "position": 2,
      "item": {
        "@id": "https://example.com/products",
        "name": "পণ্য"
      }
    }
  ]
}

আপনার উল্লিখিত পদ্ধতি - অর্ডার্ড লিস্ট সহ nav এলিমেন্ট এবং aria-label="breadcrumb" - এটি ওয়েব অ্যাক্সেসিবিলিটি গাইডলাইনস (WCAG) অনুসরণ করে এবং সর্বোত্তম অনুশীলনের সাথে সামঞ্জস্যপূর্ণ।accessiblyapp+2

1. https://ralfvanveen.com/en/technical-seo/implementing-a-breadcrumb-navigation-with-schema-markup/
2. https://accessibleweb.dev/breadcrumbs
3. https://accessiblyapp.com/blog/breadcrumbs-accessibility/
4. https://css-tricks.com/markup-for-breadcrumbs/
5. https://stackoverflow.com/questions/8060106/what-semantic-html-markup-should-be-used-to-create-breadcrumbs
6. https://www.aditus.io/patterns/breadcrumbs/
7. https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/
8. https://web.dev/articles/building/a-breadcrumbs-component
9. https://designsystem.gov.ae/docs/components/breadcrumbs
10. https://seranking.com/blog/breadcrumb-navigation/
11. https://theadminbar.com/accessibility-weekly/accessible-breadcrumbs/
12. https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation
13. https://getbootstrap.com/docs/5.0/components/breadcrumb/
14. https://vanillaframework.io/docs/patterns/breadcrumbs/accessibility
15. https://schema.org/BreadcrumbList
16. https://stackoverflow.com/questions/25326699/proper-aria-handling-of-breadcrumb-navigation
17. https://www.smashingmagazine.com/2009/03/breadcrumbs-in-web-design-examples-and-best-practices/
18. https://www.nngroup.com/articles/breadcrumbs/
19. https://uxpatterns.dev/en/patterns/navigation/breadcrumb
20. https://www.w3schools.com/howto/howto_css_breadcrumbs.asp
21. https://www.justinmind.com/ui-design/breadcrumb-website-examples