নেভিগেশন

আপনি যেমন links এ শিখেছেন, href অ্যাট্রিবিউট সহ <a> উপাদানটি লিঙ্ক তৈরি করে যা ব্যবহারকারীরা ক্লিক বা ট্যাপ করে অনুসরণ করতে পারেন। lists এ, আপনি শিখেছেন কিভাবে কন্টেন্টের তালিকা তৈরি করতে হয়। এই মডিউলে, আপনি শিখবেন কিভাবে নেভিগেশন তৈরি করতে লিঙ্কের তালিকাগুলিকে একসাথে গ্রুপ করতে হয়।

বিভিন্ন ধরণের নেভিগেশন এবং সেগুলি প্রদর্শনের বিভিন্ন উপায় রয়েছে। একই ওয়েবসাইটের অন্যান্য পৃষ্ঠার সাথে লিঙ্ক করা টেক্সটের মধ্যে নামযুক্ত অ্যাঙ্করগুলিকে স্থানীয় নেভিগেশন হিসাবে বিবেচনা করা হয়। স্থানীয় নেভিগেশন যা একাধিক লিঙ্ক নিয়ে গঠিত, যা সাইটের কাঠামোর সাথে সম্পর্কিত বর্তমান পৃষ্ঠার শ্রেণিবিন্যাস প্রদর্শন করে, অথবা বর্তমান পৃষ্ঠায় পৌঁছানোর জন্য ব্যবহারকারী যে পৃষ্ঠাগুলি অনুসরণ করেছেন, তাকে ব্রেডক্রাম্ব বলা হয়।

একটি পৃষ্ঠার বিষয়বস্তুর তালিকা হল অন্য ধরণের স্থানীয় নেভিগেশন। একটি সাইটের প্রতিটি পৃষ্ঠার সাথে হায়ারার্কিকাল লিঙ্ক সম্বলিত একটি পৃষ্ঠাকে সাইট ম্যাপ বলা হয়। ওয়েবসাইটের শীর্ষ-স্তরের পৃষ্ঠাগুলিতে নিয়ে যাওয়া নেভিগেশন, যা সম্ভবত প্রতিটি পৃষ্ঠায় পাওয়া যায়, তাকে গ্লোবাল নেভিগেশন বলা হয়। গ্লোবাল নেভিগেশন বিভিন্ন উপায়ে প্রদর্শিত হতে পারে, যার মধ্যে নেভিগেশন বার, ড্রপ-ডাউন মেনু এবং ফ্লাইআউট মেনু অন্তর্ভুক্ত। ভিউপোর্টের আকারের উপর নির্ভর করে একই সাইট তার গ্লোবাল নেভিগেশন ভিন্নভাবে প্রদর্শন করতে পারে।

সর্বদা নিশ্চিত করুন যে ব্যবহারকারীরা আপনার সাইটের যেকোনো পৃষ্ঠায় সবচেয়ে কম সংখ্যক ক্লিকের মাধ্যমে নেভিগেট করতে পারেন, একই সাথে নিশ্চিত করুন যে নেভিগেশনটি স্বজ্ঞাত এবং অপ্রতিরোধ্য নয়। যাইহোক, নেভিগেশনাল উপাদানগুলির জন্য কোনও নির্দিষ্ট প্রয়োজনীয়তা নেই। MachineLearningWorkshop.com , একটি একক পৃষ্ঠার ওয়েবসাইট হওয়ায়, উপরের ডানদিকে একটি স্থানীয় নেভিগেশন বার রয়েছে; এখানেই বহু-পৃষ্ঠার সাইটগুলি প্রায়শই তাদের বিশ্বব্যাপী নেভিগেশন রাখে।

HTML শিখুন এর নেভিগেশন মডিউল।
আপনি যদি web.dev-এর এই পৃষ্ঠাটি দেখেন, তাহলে আপনি কিছু নেভিগেশনাল বৈশিষ্ট্য দেখতে পাবেন। শিরোনামের উপরে একটি ব্রেডক্রাম্ব, একটি Learn HTML বিষয়বস্তুর তালিকা এবং আপনার স্ক্রিনের প্রস্থের উপর নির্ভর করে, "এই পৃষ্ঠায়" বিষয়বস্তুর তালিকা রয়েছে।

কিছু সাইটে "কন্টেন্টে যান" লিঙ্ক থাকে, যা প্রায়শই ফোকাস অর্ডারের প্রথম উপাদান হিসেবে থাকে। এটি দেখতে এরকম কিছু হতে পারে:

<a href="#main" class="skip-link button">Skip to main</a>

যখন ক্লিক করা হয় অথবা যখন এতে ফোকাস থাকে এবং ব্যবহারকারী Enter চাপে, তখন এটি পৃষ্ঠাটি স্ক্রোল করে এবং একটি main আইডি সহ উপাদানটিতে ফোকাস দেয়, সম্ভবত মূল বিষয়বস্তু।

<main id="main">

উন্নত ব্যবহারযোগ্যতা এবং অ্যাক্সেসযোগ্যতার জন্য, ব্যবহারকারীদের প্রতিটি পৃষ্ঠায় পুনরাবৃত্তি হওয়া সামগ্রীর ব্লকগুলিকে বাইপাস করার অনুমতি দেওয়া গুরুত্বপূর্ণ, যেমন একটি ভাগ করা শিরোনাম এবং প্রধান নেভিগেশন আইটেম। একটি স্কিপ লিঙ্কের সাহায্যে, যখন কোনও কীবোর্ড ব্যবহারকারী tab টিপে, তারা দ্রুত পৃষ্ঠার নতুন সামগ্রীতে যেতে পারে। এটি তাদের একটি বিস্তৃত মেনুতে ট্যাব করার প্রয়োজন এড়াতে দেয়।

বেশিরভাগ ডিজাইনার পৃষ্ঠার শীর্ষে এই ধরণের লিঙ্ক থাকা পছন্দ করেন না। সেই লিঙ্কটি দৃশ্যমানতা থেকে আড়াল করা ঠিক আছে। তবে, মনে রাখবেন যে যখন লিঙ্কটি ফোকাস হয়ে যায়, যা তখন ঘটে যখন একজন কীবোর্ড ব্যবহারকারী পৃষ্ঠার লিঙ্কটি ট্যাব করে, তখন লিঙ্কটি ব্যবহারকারীর কাছে দৃশ্যমান হওয়া উচিত।

.visually-hidden:not(:focus):not(:active) এর মতো একটি নির্বাচক ব্যবহার করে শুধুমাত্র অ-ফোকাসড এবং অ-অ্যাক্টিভ অবস্থায় কন্টেন্ট লুকান।

সকল লিঙ্ক টেক্সটের মতো, নামটি স্পষ্টভাবে নির্দেশ করবে যে লিঙ্কটি ব্যবহারকারীকে কোথায় নিয়ে যাবে। লিঙ্ক টার্গেটটি পৃষ্ঠার মূল বিষয়বস্তুর শুরু হওয়া উচিত।

সুচিপত্র

আমাদের মূল কন্টেন্টের প্রথম উপাদান হল <h1> শিরোনাম যার শিরোনাম এই পৃষ্ঠার শিরোনাম: <h1>Navigation</h1> >। মূল শিরোনামের পরে এই টিউটোরিয়ালের বিষয়বস্তুর একটি সংক্ষিপ্ত বিবরণ দেওয়া হয়েছে।

এই পৃষ্ঠায় সূচিপত্র।
সূচিপত্র সর্বদা দৃশ্যমান।

ছোট স্ক্রিনে, শিরোনামের পরে সূচীপত্র প্রদর্শিত হয়। বড় স্ক্রিনে, এটি ডানদিকে সারিবদ্ধ সাইডবারে উপস্থাপিত হয়।

নেভিগেশন বিভাগের জন্য ব্যবহার করার জন্য সবচেয়ে ভালো উপাদান হল <nav> । এটি স্বয়ংক্রিয়ভাবে স্ক্রিন রিডার এবং সার্চ ইঞ্জিনকে জানায় যে একটি বিভাগের একটি navigation ভূমিকা রয়েছে, একটি ল্যান্ডমার্ক ভূমিকা।

নেভিগেশনের উদ্দেশ্য সম্পর্কে সংক্ষিপ্ত বিবরণের জন্য aria-label অ্যাট্রিবিউটটি অন্তর্ভুক্ত করুন। এই ক্ষেত্রে, যেহেতু "এই পৃষ্ঠায়" লেখার জন্য সেই অ্যাট্রিবিউটের মান অপ্রয়োজনীয় হবে। দৃশ্যমান টেক্সট উল্লেখ করতে, পরিবর্তে aria-labelledby ব্যবহার করুন।

একটি id ব্যবহার করে, এটি দেখতে এরকম হতে পারে:

<nav aria-labelledby="tocTitle">
  <p id="tocTitle">On this page</p>
...
</nav>

অপ্রয়োজনীয়তা হ্রাস করার পাশাপাশি, দৃশ্যমান পাঠ্য অনুবাদ পরিষেবাগুলি দ্বারা অনুবাদ করা হয়, যেখানে অ্যাট্রিবিউট মানগুলি নাও হতে পারে। যখন সম্ভব হয়, যদি এমন পাঠ্য উপস্থিত থাকে যা পর্যাপ্ত লেবেল প্রদান করে, তাহলে অ্যাট্রিবিউট পাঠ্য ব্যবহার না করে সেই পাঠ্যটি পড়ুন।

"এই পৃষ্ঠায়" নেভিগেশন হল বিষয়বস্তুর তালিকা। আপনি যদি aria-label ব্যবহার করতে চান, তাহলে দৃশ্যমান পাঠ্য পুনরাবৃত্তি না করে সেই প্রসঙ্গটি প্রদান করুন:

<nav aria-label="Table of Contents">
  <p>On this page</p>
...
</nav>

কোনও এলিমেন্টে অ্যাক্সেসযোগ্য নাম দেওয়ার জন্য, আপনার এলিমেন্টের নাম অন্তর্ভুক্ত করা উচিত নয় । স্ক্রিন রিডাররা ব্যবহারকারীকে এলিমেন্টের নাম প্রদান করে। উদাহরণস্বরূপ, <nav> এলিমেন্ট ব্যবহার করার সময়, "নেভিগেশন" শব্দটি অন্তর্ভুক্ত করবেন না, কারণ সেই তথ্য ইতিমধ্যেই সিমেন্টিক এলিমেন্টের সাথে অন্তর্ভুক্ত করা হয়েছে।

যদিও নেভিগেশন আইটেমগুলিকে তালিকায় নেস্ট করার প্রয়োজন নেই, একটি তালিকা ব্যবহার করলে স্ক্রিন রিডার ব্যবহারকারীরা জানতে পারবেন নেভিগেশনে কতগুলি তালিকা আইটেম এবং সেইজন্য লিঙ্ক রয়েছে।

<nav aria-labelledby="tocTitle">
  <p id="tocTitle">On this page</p>
  <ul role="list">
    <li>
      <a href="#skip">Skip to content link</a>
    </li>
    <li>
      <a href="#toc">Table of contents</a>
    </li>
    <li>
      <a href="#bc">Page breadcrumbs</a>
    </li>
    <li>
      <a href="#ln">Local navigation</a>
    </li>
    <li>
      <a href="#global">Global navigation</a>
    </li>
  </ul>
</nav>

ট্যাব ক্রম পরিবর্তন করা এড়িয়ে চলুন

শিরোনামের পরে, ছোট স্ক্রিনে, অথবা ডান-সারিবদ্ধ সাইডবারে সূচিপত্র প্রদর্শিত হতে পারে। দুটি অভিন্ন নেভিগেশন সেট অন্তর্ভুক্ত করা, শুধুমাত্র একটি দেখানোর জন্য, একটি অ্যান্টি-প্যাটার্ন হবে।

১২৫৪ পিক্সেলের চেয়ে চওড়া পৃষ্ঠাগুলিতে নেভিগেশনকে সাইডবার হিসেবে প্রদর্শনের জন্য আমরা সিএসএস ব্যবহার করেছি।

ব্যবহারকারীরা যখন ডিভাইস পরিবর্তন করেন বা ফন্টের আকার বাড়ান তখন কন্টেন্টের প্রতিক্রিয়াশীলতা এবং অবস্থান পরিবর্তনে অভ্যস্ত হন, তারা যখন তা করেন তখন ট্যাব ক্রম পরিবর্তন হবে বলে আশা করেন না। পৃষ্ঠার লেআউটগুলি অ্যাক্সেসযোগ্য, অনুমানযোগ্য এবং একটি সাইট জুড়ে সামঞ্জস্যপূর্ণ হওয়া উচিত। এখানে, বিষয়বস্তুর সারণির অবস্থান অনুমানযোগ্য নয়।

ব্রেডক্রাম্বস ব্যবহারকারীদের ওয়েবসাইটের অবস্থান বুঝতে সাহায্য করার জন্য সেকেন্ডারি নেভিগেশন প্রদান করে। ব্রেডক্রাম্বস সাধারণত বর্তমান ডকুমেন্টের URL অনুক্রম এবং সাইটের কাঠামোর মধ্যে বর্তমান পৃষ্ঠার অবস্থান নির্দেশ করে।

ব্যবহারকারীর দৃষ্টিকোণ থেকে সাইটের কাঠামো সার্ভারের ফাইল কাঠামোর থেকে আলাদা হতে পারে, এবং এটা ঠিক আছে। ব্যবহারকারীর আপনার ফাইলগুলি কীভাবে সংগঠিত করবেন তা জানার প্রয়োজন নেই, তবে তাদের আপনার সামগ্রীর মাধ্যমে নেভিগেট করতে সক্ষম হওয়া প্রয়োজন।

ব্রেডক্রাম্বস ব্যবহারকারীদের আপনার সাইটের সংগঠন সম্পর্কে অন্তর্দৃষ্টি প্রদান করে। এটি ব্যবহারকারীদের back ফাংশন ব্যবহার করে পূর্বে পরিদর্শন করা প্রতিটি পৃষ্ঠায় ফিরে না গিয়ে যেকোনো পূর্বসূরী বিভাগে নেভিগেট করতে সাহায্য করে।

যদি সাইটের একটি শ্রেণিবদ্ধ ডিরেক্টরি কাঠামো থাকে, যেমনটি web.dev-এর ক্ষেত্রে হয়, তাহলে ব্রেডক্রাম্ব নেভিগেশনে প্রায়শই হোমপেজ বা হোস্টনেমের একটি লিঙ্ক এবং URL পাথে প্রতিটি ডিরেক্টরির ইনডেক্স ফাইলের একটি লিঙ্ক থাকে। বর্তমান পৃষ্ঠাটি অন্তর্ভুক্ত করা ঐচ্ছিক এবং এতে একটু অতিরিক্ত মনোযোগ প্রয়োজন।

const url = new URL("https://web.dev/learn/html/navigation");
const sections = url.hostname + url.pathname.split('/');
// "web.dev,learn,html,navigation"

ব্রেডক্রাম্বের অংশগুলি বর্তমান পৃষ্ঠা থেকে হোম পৃষ্ঠায় ফিরে যাওয়ার পথ দেখায়, এর মধ্যে প্রতিটি স্তর দেখায়।

নেভিগেশন পৃষ্ঠার পথ নির্দেশ করে ব্রেডক্রাম্বস।

প্রতিটি Learn HTML মডিউল পৃষ্ঠায় একই ব্রেডক্রাম্ব নেভিগেশন থাকে, যা web.dev এর Learn বিভাগের মধ্যে HTML পাঠের শ্রেণিবিন্যাস প্রদর্শন করে।

কোডটি নিম্নলিখিতগুলির মতো হওয়া উচিত:

<nav aria-label="breadcrumbs">
  <ol role="list">
    <li>
      <a href="/">web.dev</a>
    </li>
    <li>
      <a href="/learn">Learn</a>
    </li>
    <li>
      <a href="/learn/html">HTML</a>
    </li>
  </ol>
</nav>

<nav> উপাদান, একটি ল্যান্ডমার্ক ভূমিকা, সহায়ক প্রযুক্তিকে পৃষ্ঠায় ব্রেডক্রাম্বগুলিকে একটি নেভিগেশনাল উপাদান হিসাবে উপস্থাপন করতে বলে। aria-label এর সাথে প্রদত্ত "breadcrumbs" এর অ্যাক্সেসযোগ্য নাম, একই নথিতে অন্যান্য নেভিগেশন ল্যান্ডমার্ক থেকে এই নেভিগেশনকে আলাদা করে।

প্রতিটি লিঙ্কের মাঝখানে একটি কন্টেন্ট সেপারেটর থাকে। এই সেপারেটরগুলি CSS দিয়ে তৈরি করা যেতে পারে, যা প্রতিটি তালিকার আইটেমের আগে প্রদর্শিত হবে, দ্বিতীয়টি দিয়ে শুরু করে।

[aria-label^="breadcrumbs" i] li + li::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  rotate: 45deg;
  opacity: .8
}

স্ক্রিন রিডাররা এই আইকনগুলি "দেখতে" পারে না, যা সর্বোত্তম অনুশীলন। ব্রেডক্রাম্ব লিঙ্কগুলির মধ্যে বিভাজকগুলি স্ক্রিন রিডারদের থেকে লুকানো উচিত। তাদের পটভূমির বিপরীতে পর্যাপ্ত বৈসাদৃশ্য থাকতে হবে, পৃষ্ঠার অন্য যেকোনো টেক্সট এবং ভিজ্যুয়াল উপাদানের মতো।

আমাদের নমুনা কোডে একটি ক্রমানুসারী তালিকা ব্যবহার করা হয়েছে, যা আইটেমগুলি তালিকাভুক্ত করা হয় বলে একটি অক্রমিক তালিকার চেয়ে বেশি পছন্দনীয়। role="list" যোগ করা হয়েছে কারণ কিছু CSS ডিসপ্লে প্রোপার্টি মান কিছু উপাদান থেকে শব্দার্থবিদ্যা সরিয়ে দেয়।

সাধারণত, ব্রেডক্রাম্বের হোম পেজের লিঙ্কে সাইটের নাম বা সাইটের লোগোর পরিবর্তে "হোম" লেখা উচিত। যেহেতু ব্রেডক্রাম্বটি ডকুমেন্টের শীর্ষে থাকে, তাই এই অ্যান্টি-প্যাটার্নটি কেন ব্যবহার করা হয়েছিল তা বোধগম্য।

বর্তমান পৃষ্ঠা, নেভিগেশন , ব্রেডক্রাম্বে অন্তর্ভুক্ত নয়।

বর্তমান পৃষ্ঠা

যখন বর্তমান পৃষ্ঠাটি একটি ব্রেডক্রাম্বে অন্তর্ভুক্ত করা হয়, তখন লেখাটি কোনও লিঙ্ক না হওয়াই ভালো, এবং aria-current="page" বর্তমান পৃষ্ঠার তালিকার আইটেমে অন্তর্ভুক্ত করা উচিত। যদি এটি অন্তর্ভুক্ত না থাকে, তাহলে এটি নির্দেশ করা সহায়ক যে পরবর্তী শিরোনামটি একটি আইকন বা অন্য প্রতীক সহ বর্তমান পৃষ্ঠা।

এই পদ্ধতির সাথে ব্রেডক্রাম্বের একটি বিকল্প সংস্করণ দেখে নিন:

<nav aria-label="breadcrumbs">
  <ol role="list">
    <li>
      <a href="/">Home</a>
    </li>
    <li>
      <a href="/learn">Learn</a>
    </li>
    <li>
      <a href="/learn/html">Learn HTML!</a>
    </li>
    <li aria-current="page">
      Navigation
    </li>
  </ol>
</nav>

ব্রেডক্রাম্ব এবং ব্যবহারকারীর বর্তমান পৃষ্ঠায় পৌঁছানোর জন্য অনুসরণ করা রৈখিক ধাপগুলি একই রকম নাও হতে পারে। এই বিন্দু পর্যন্ত অনুসরণ করা ধাপগুলির তালিকা <nav> এর মধ্যে নেস্ট করা যেতে পারে, তবে ব্রেডক্রাম্ব হিসাবে লেবেল করা উচিত নয়।

স্থানীয় নেভিগেশন

HTML অধ্যায় নেভিগেশন শিখুন।

পরবর্তী নেভিগেশনাল উপাদানটি বেশিরভাগ মাঝারি এবং বৃহত্তর আকারের ডিভাইসে বাম সাইডবারে প্রদর্শিত হয়, যেখানে একটি ফিল্টার বার এবং Learn HTML-এর প্রতিটি বিভাগের লিঙ্ক থাকে। এই লিঙ্কগুলি এবং ফিল্টার বার হল লোকেশন নেভিগেশন।

আপনি যদি এই সাইটটি মোবাইল ডিভাইসে দেখেন অথবা অন্যথায় এর স্ক্রিনটি সরু হয়, তাহলে এই পৃষ্ঠাটি লোড করার সময়, সাইডবারটি লুকানো থাকে। উপরের নেভিগেশনে থাকা দিয়ে আপনি এটি অ্যাক্সেস করতে পারেন।

প্রশস্ত স্ক্রিনে স্থায়ী স্থানীয় নেভিগেশন এবং সংকীর্ণ স্ক্রিনে স্থানীয় নেভিগেশনের মধ্যে প্রাথমিক পার্থক্য হল তীরচিহ্ন যা প্রাথমিক শীর্ষ নেভিগেশনে ফিরে যায়, তারপর নেভিগেশনটি বন্ধ করে দেয়।

এই ডকুমেন্টের লিঙ্কটি স্থানীয় নেভিগেশনের অন্যান্য লিঙ্কের মতোই দেখতে। তবে, অন্যান্য লিঙ্ক থেকে এটির চেহারা কিছুটা আলাদা হতে পারে, যাতে দেখা যায় যে এটি বর্তমান পৃষ্ঠা। এই দৃশ্যমান পার্থক্যটি CSS ব্যবহার করে তৈরি করা উচিত।

বর্তমান পৃষ্ঠাটি aria-current="page" বৈশিষ্ট্যের সাহায্যেও চিহ্নিত করা যেতে পারে। এটি সহায়ক প্রযুক্তিগুলিকে জানায় যে লিঙ্কগুলি বর্তমান পৃষ্ঠার সাথে সম্পর্কিত।

আদর্শভাবে, স্থানীয় নেভিগেশনের মধ্যে এই তালিকা আইটেমের HTML দেখতে নিম্নলিখিতগুলির মতো হবে:

<li>
  <a aria-current="page" aria-selected="true" href="/learn/html/navigation">
    Navigation
  </a>
</li>

গ্লোবাল নেভিগেশন ওয়েবসাইটের শীর্ষ-স্তরের পৃষ্ঠাগুলিতে নিয়ে যায় এবং একটি সাইটের প্রতিটি পৃষ্ঠায় একই রকম থাকে। একটি সাইটের গ্লোবাল নেভিগেশনে এমন ট্যাবও থাকতে পারে যা একটি সাইটের সমস্ত উপ-বিভাগ বা অন্যান্য মেনুর সাথে লিঙ্ক করা লিঙ্কগুলির নেস্টেড তালিকা খুলে দেয়। এতে শিরোনামযুক্ত বিভাগ, বোতাম এবং অনুসন্ধান উইজেট অন্তর্ভুক্ত থাকতে পারে। এই অতিরিক্ত বৈশিষ্ট্যগুলি কোনও প্রয়োজনীয়তা নয়। যা প্রয়োজন তা হল প্রতিটি পৃষ্ঠায় নেভিগেশন প্রদর্শিত হবে এবং প্রতিটি পৃষ্ঠায় একই রকম হবে, অবশ্যই বর্তমান পৃষ্ঠার যেকোনো লিঙ্কে aria-current="page" থাকবে।

গ্লোবাল নেভিগেশন অ্যাপ্লিকেশন বা ওয়েবসাইটের যেকোনো জায়গায় ভ্রমণের একটি সুসংগত মাধ্যম প্রদান করে। গুগলের ওয়েবসাইটের পৃষ্ঠার শীর্ষে গ্লোবাল নেভিগেশন নেই। Yahoo! আছে। যদিও সমস্ত প্রধান Yahoo! প্রপার্টির স্টাইল ভিন্ন, বেশিরভাগ বিভাগের বিষয়বস্তু একই।

একটি খারাপভাবে বৈপরীত্যযুক্ত নেভিগেশন হেডার।
Yahoo! নেভিগেশন, যার মধ্যে ধূসর পটভূমিতে একটি কালো পিকার রয়েছে।

সংবাদ এবং স্পোর্টস গ্লোবাল নেভিগেশন হেডারের বিষয়বস্তু একই। তবে, যে আইকনটি দেখায় যে ব্যবহারকারী স্পোর্টস পৃষ্ঠায় আছেন, তাতে পর্যাপ্ত কন্ট্রাস্ট নেই যা অ্যাক্সেসযোগ্য, এমনকি যাদের দৃষ্টিশক্তি নিখুঁত তাদের জন্যও। উভয় বিভাগেই একটি গ্লোবাল নেভিগেশন রয়েছে যার নীচে একটি বিভাগ-নির্দিষ্ট স্থানীয় নেভিগেশন রয়েছে।

কালো পটভূমিতে সাদা পিকার সহ একটি ভাল-বিপরীত নেভিগেশন হেডার।
এখানে নেভিগেশনের আরও ভালো সংস্করণ, উচ্চতর কন্ট্রাস্ট সহ।

গ্লোবাল নেভিগেশনের মতো, সমস্ত পৃষ্ঠায় ফুটার একই রকম হওয়া উচিত। কিন্তু এটাই একমাত্র মিল। গ্লোবাল নেভিগেশন পণ্যের দৃষ্টিকোণ থেকে সাইটের সমস্ত অংশে নেভিগেশনের অনুমতি দেয়। ফুটারের মধ্যে নেভিগেশন উপাদানগুলির নির্দিষ্ট প্রয়োজনীয়তা নেই।

সাধারণত, ফুটারে কর্পোরেট লিঙ্ক, যেমন আইনি বিবৃতি, কোম্পানি সম্পর্কে, একটি ক্যারিয়ার পৃষ্ঠা এবং প্রাসঙ্গিক বহিরাগত উৎসের লিঙ্ক, যেমন সোশ্যাল মিডিয়া অন্তর্ভুক্ত থাকে।

এই পৃষ্ঠার ফুটারে দুটি নেভিগেশন উপাদান রয়েছে: সম্পর্কিত web.dev নেভিগেশনের একটি তিন কলামের সেট এবং একটি পৃথক Google শর্তাবলী এবং গোপনীয়তা নেভিগেশন। ফুটার নেভিগেশনে web.dev-এ কীভাবে অবদান রাখবেন, web.dev টিম দ্বারা প্রদত্ত সম্পর্কিত সামগ্রী এবং বহিরাগত সোশ্যাল মিডিয়া লিঙ্কগুলি অন্তর্ভুক্ত রয়েছে।

পরবর্তীতে, আমরা ডেটা টেবিল চিহ্নিত করার দিকে নজর দেব।

তোমার বোধগম্যতা পরীক্ষা করো।

নেভিগেশন সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন।

কোন সাইটের মূল নেভিগেশন চিহ্নিত করতে কোন উপাদান ব্যবহার করা হয়?

<navigation>
আবার চেষ্টা করুন.
<breadcrumb>
আবার চেষ্টা করুন.
<nav>
সঠিক!

এক পৃষ্ঠায় একাধিক নেভিগেশন উপাদান থাকতে পারে?

মিথ্যা।
আবার চেষ্টা করুন.
সত্য।
সঠিক!