নেভিগেশন

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

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

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

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

"সামগ্রী এড়িয়ে যান" লিঙ্ক

পৃষ্ঠার প্রথম উপাদানটি একটি অভ্যন্তরীণ লিঙ্ক:

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

যা, যখন ক্লিক করা হয়, বা যখন এটিতে ফোকাস থাকে এবং ব্যবহারকারী Enter চাপেন, পৃষ্ঠাটি স্ক্রোল করে এবং মূল বিষয়বস্তুতে ফোকাস দেয়: একটি ল্যান্ডমার্ক <main> main এর একটি id সহ :

<main id="main">

আপনি এই সাইটের লিঙ্কটি কখনও দেখেননি, এমনকি যদি আপনি আগের সমস্ত বিভাগগুলি পড়ে থাকেন। এটি শুধুমাত্র তখনই প্রদর্শিত হয় যখন এতে ফোকাস থাকে:

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

বেশিরভাগ ডিজাইনার পৃষ্ঠার শীর্ষে একটি লিঙ্ক থাকার চেহারা পছন্দ করেন না। লিঙ্কটি দৃশ্য থেকে লুকিয়ে রাখা ভাল, যখন মনে রাখবেন যে লিঙ্কটি যখন ফোকাস পায়, যা ঘটবে যখন কোনও কীবোর্ড ব্যবহারকারী পৃষ্ঠার লিঙ্কের মাধ্যমে ট্যাব করে, লিঙ্কটি অবশ্যই সমস্ত ব্যবহারকারীর কাছে দৃশ্যমান হবে। শুধুমাত্র .visually-hidden:not(:focus):not(:active) এর মত নির্বাচক ব্যবহার করে অ-ফোকাসড এবং অ-সক্রিয় অবস্থায় বিষয়বস্তু লুকান।

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

সুচিপত্র

স্কিপ-টু-কন্টেন্ট লিঙ্কটি মূল বিষয়বস্তুকে ভিউতে স্ক্রোল করে। প্রথম উপাদানটি হল এই বিভাগের শিরোনাম সহ <h1> শিরোনাম। এই ক্ষেত্রে, <h1>Marking up navigation</h1> । মূল শিরোনামটি ট্যাগলাইন দ্বারা অনুসরণ করা হয়েছে, এই টিউটোরিয়ালের বিষয়বস্তুর একটি সংক্ষিপ্ত বিবরণ। কোডবেসে শিরোনামের আগে বা পরে বিষয়বস্তুর নেভিগেশন টেবিলটি আপনার ব্রাউজারের প্রস্থের উপর নির্ভর করে।

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

প্রশস্ত স্ক্রিনে, বিষয়বস্তুর সারণী সর্বদা দৃশ্যমান, বর্তমান বিভাগের লিঙ্কটি নীল রঙে হাইলাইট করা হয়েছে।

যদি আপনার ব্রাউজারটি 80em-এর চেয়ে বড় হয়, তাহলে বিষয়বস্তুর সারণীটি মার্কআপের শিরোনামের আগে আসে এবং এটি নিম্নলিখিতগুলির মতো (মার্কআপটিকে সহজ করার জন্য ক্লাসের নামগুলি সরানো হয়েছে):

<nav aria-label="On this page">
  <div>On this page</div>
  <div>
    <ul>
      <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>
  </div>
</nav>

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

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

আমরা নন-সিমেন্টিক <div> একটি অনুচ্ছেদে <p> পরিবর্তন করতে পারি, তারপর একটি id যোগ করতে পারি যাতে এটি উল্লেখ করা যায়। আমরা তারপর aria-labelledby ব্যবহার করি:

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

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

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

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

একটি উপাদানে একটি অ্যাক্সেসযোগ্য নাম প্রদান করার সময়, উপাদানটির নাম অন্তর্ভুক্ত করবেন না। স্ক্রিন রিডার ব্যবহারকারীদের সেই তথ্য প্রদান করে। উদাহরণস্বরূপ, <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>

যদি আপনার ব্রাউজারটি 80em এর কম প্রশস্ত হয়, তাহলে "এই পৃষ্ঠায়" উইজেটটি শিরোনাম এবং ট্যাগলাইনের নীচে থাকে৷ এটি দুটি টেবিল-অফ-কন্টেন্ট নেভিগেশন উপাদান অন্তর্ভুক্ত করে এবং CSS display: none; একটি মিডিয়া প্রশ্নের উপর ভিত্তি করে।

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

পাতা ব্রেডক্রাম্বস

ব্রেডক্রাম্বগুলি ব্যবহারকারীদের একটি ওয়েবসাইটে কোথায় আছে তা বুঝতে সাহায্য করার জন্য সেকেন্ডারি নেভিগেশন প্রদান করে। তারা সাধারণত বর্তমান নথির 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"

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

প্রতিটি শিখুন এইচটিএমএল মডিউল পৃষ্ঠায় একই ব্রেডক্রাম্ব নেভিগেশন রয়েছে, যা web.dev এর learn বিভাগে HTML পাঠের শ্রেণিবিন্যাস প্রদর্শন করে। কোডটি নিম্নলিখিতগুলির মতো, ক্লাস এবং SVG বিশদ বিবরণ সহ স্পষ্টতার জন্য সরানো হয়েছে:

<nav aria-label="breadcrumbs">
  <ul role="list">
    <li>
      <a href="/">
        <svg aria-label="web.dev" role="img">
          <use href="#webDevLogo" />
        </svg>
      </a>
    </li>
    <li>
      <a href="/learn">Learn</a>
    </li>
    <li>
      <a href="/learn/html">Learn HTML!</a>
    </li>
  </ul>
  <share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
    <svg aria-label="share" role="img">
      <use href="#shareIcon" />
    </svg>
    <span>Share</span>
  </share-action>
</nav>

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

লিঙ্কগুলির মধ্যে CSS-উত্পন্ন সামগ্রী বিভাজক রয়েছে। বিভাজকগুলি প্রতিটি তালিকা আইটেমের আগে আসে যা দ্বিতীয় <li> দিয়ে শুরু হয়।

[aria-label^="breadcrumb" 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 ডিসপ্লে প্রপার্টি মান কিছু উপাদান থেকে শব্দার্থকে সরিয়ে দেয়।

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

শেষ উপাদানটি একটি কাস্টম <share-action> উপাদান। অনুচ্ছেদ 15-এ কাস্টম উপাদানগুলি নিয়ে আলোচনা করা হয়েছে৷ যদিও এই কাস্টম উপাদানটি ব্রেডক্রাম্বের অংশ নয়, একটি <nav> এ একটি সম্পর্কহীন উপাদান সহ ঠিক আছে, যতক্ষণ পর্যন্ত অন্তর্ভুক্তি সমস্ত পৃষ্ঠায় সামঞ্জস্যপূর্ণ হয়৷

এই পৃষ্ঠা

এই পৃষ্ঠায়, বর্তমান পৃষ্ঠা, "নেভিগেশন", ব্রেডক্রাম্বের অন্তর্ভুক্ত নয়। যখন বর্তমান পৃষ্ঠাটি একটি ব্রেডক্রাম্বে অন্তর্ভুক্ত করা হয়, তখন পাঠ্যটি একটি লিঙ্ক হওয়া উচিত নয় এবং 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-এর 20টি বিভাগের প্রতিটির লিঙ্ক রয়েছে৷ প্রতিটি লিঙ্কে অধ্যায় নম্বর, বিভাগের শিরোনাম, এবং আপনি ইতিমধ্যেই পরিদর্শন করেছেন এমন বিভাগগুলিতে ডানদিকে একটি চেকমার্ক রয়েছে—সম্ভবত আপনি যদি দূরে নেভিগেট করে থাকেন এবং ফিরে আসেন। অনুসন্ধান এবং স্থানীয় শিরোনাম সহ শিখুন HTML-এর সমস্ত বিভাগের লিঙ্কগুলি হল অবস্থান নেভিগেশন।

আপনি যদি একটি ট্যাবলেট বা মোবাইল ডিভাইসে এই সাইটটি পরিদর্শন করেন বা অন্যথায় একটি সংকীর্ণ স্ক্রীন থাকে, আপনি যখন এই পৃষ্ঠাটি লোড করেন, তখন সাইডবারটি লুকানো থাকে৷ আপনি উপরের নেভিগেশন বারে হ্যামবার্গার মেনুর মাধ্যমে এটি দৃশ্যমান করতে পারেন (হ্যাঁ, শিরোনামটি হল একটি কাস্টম <web-header> উপাদান যা role="navigation" সেট সহ)।

প্রশস্ত স্ক্রিনে স্থায়ী স্থানীয় নেভিগেশন এবং সংকীর্ণ স্ক্রিনে স্থানীয় নেভিগেশনের মধ্যে প্রধান পার্থক্য যা প্রদর্শিত এবং অদৃশ্য হয়ে যেতে পারে, সেটি হল লুকানো যেতে পারে এমন সংস্করণে বন্ধ বোতামের প্রদর্শন। এই আইকনটি display: none; .

এই নথির লিঙ্ক, বিভাগ 010, স্থানীয় নেভিগেশনের অন্যান্য লিঙ্কগুলির থেকে কিছুটা আলাদা চেহারা রয়েছে যা দেখা ব্যবহারকারীদের নির্দেশ করে যে এটি বর্তমান পৃষ্ঠা। এই চাক্ষুষ পার্থক্য CSS দিয়ে তৈরি করা হয়। বর্তমান পৃষ্ঠাটি aria-current="page" অ্যাট্রিবিউট দিয়েও চিহ্নিত করা হয়েছে। এটি সহায়ক প্রযুক্তিগুলিকে জানায় যে এটি বর্তমান পৃষ্ঠার একটি লিঙ্ক৷ এই স্থানীয় নেভিগেশনের মধ্যে এই তালিকা আইটেমের জন্য HTML অনুরূপ:

<li>
  <a aria-current="page" href="/learn/html/navigation" data-complete="true">
    <span>010</span>
    <span>Navigation</span>
    <svg aria-label="Check" role="img">
      <use href="#checkmark" />
    </svg>
  </a>
</li>

যদি আপনি এই পৃষ্ঠায় প্রথমবার না যান তবে চেকমার্কটি দৃশ্যমান হবে না। আপনি যদি অতীতে এই পৃষ্ঠাটি দেখে থাকেন, data-complete কাস্টম অ্যাট্রিবিউট true সেট করা হয়েছে এবং চেকমার্কটি প্রদর্শিত হবে। চেকমার্কটি প্রতিটি লিঙ্কে অন্তর্ভুক্ত করা হয়েছে, কিন্তু CSS সেই ব্যবহারকারীদের থেকে চেকবক্সটি লুকিয়ে রাখে যারা আগে এই পৃষ্ঠায় যাননি display: none data-complete="true" অ্যাট্রিবিউট এবং মানের অনুপস্থিতির উপর ভিত্তি করে কোনটিই নয়:

.course .stack-nav a:not([data-complete="true"]) svg {
  display: none;
}

যখন display none ছাড়া অন্য কিছুতে সেট করা হয়, role সহায়ক প্রযুক্তিকে জানায় যে ইনলাইন SVG একটি চিত্র, এবং aria-label একটি <img> ইচ্ছার alt বৈশিষ্ট্য হিসাবে কাজ করে।

গ্লোবাল নেভিগেশন

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

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

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

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

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

<footer> -এ এই তিনটি নেভিগেশন হল <nav> উপাদানগুলির সাথে একটি aria-label যা এই ল্যান্ডমার্ক ভূমিকাগুলির জন্য একটি অ্যাক্সেসযোগ্য নাম প্রদান করে। আমরা যে সমস্ত নেভিগেশন দেখেছি সেগুলি একটি নেভিগেশনের মধ্যে তালিকাগুলিতে নেস্ট করা লিঙ্ক । আপনার নিজের নেভিগেশন তৈরি করতে আপনার যা জানা দরকার আমরা তা কভার করেছি। পরবর্তীতে, আমরা ডাটা টেবিল চিহ্নিত করার দিকে নজর দেব।

আপনার উপলব্ধি পরীক্ষা করুন

ন্যাভিগেশন আপনার জ্ঞান পরীক্ষা করুন.

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

<navigation>

আবার চেষ্টা কর.

<breadcrumb>

আবার চেষ্টা কর.

<nav>

সঠিক!

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

মিথ্যা।

আবার চেষ্টা কর.

সত্য।

সঠিক!