ওয়েবসাইটের জন্য প্রধান নেভিগেশন তৈরি করা

এই টিউটোরিয়ালে, কোনও ওয়েবসাইটের অ্যাক্সেসযোগ্য মূল নেভিগেশন কীভাবে তৈরি করতে হয় তা বর্ণনা করা হয়েছে। আপনি সিম্যান্টিক HTML, অ্যাক্সেসিবিলিটি এবং ARIA অ্যাট্রিবিউট ব্যবহার করলে কখনও কখনও ভালর চেয়ে খারাপ বেশি হতে পারে, সেই সম্পর্কে জানবেন।

Manuel Matuzović

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

অধিকাংশ ওয়েবসাইটের ক্ষেত্রে, আপনি এমন কিছু তৈরি করতে চান যা খুব সহজও নয়, আবার খুব জটিলও নয়।

একটার পর একটা লেয়ার তৈরি করা

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

প্রাথমিক স্ট্রাকচার

প্রাথমিক নেভিগেশনের জন্য আপনার দুটি জিনিস প্রয়োজন: <a> এলিমেন্ট এবং আপনার লিঙ্কের ডিফল্ট স্টাইলিং ও লেআউট উন্নত করার জন্য CSS-এর কয়েকটি লাইন।

• HTML

  <a href="/home">Home</a>
  <a href="/about-us">About us</a>
  <a href="/pricing">Pricing</a>
  <a href="/contact">Contact</a>
  

• CSS

  /* Define variables for your colors */
  :root {
    --color-shades-dark: rgb(25, 25, 25);
  }
  
  /* Use the alternative box model
  Details: <https://web.dev/learn/css/box-model/> */
  *{
    box-sizing: border-box;
  }
  
  /* Basic font styling */
  body {
    font-family: Segoe UI, system-ui, -apple-system, sans-serif;
    font-size: 1.6rem;
  }
  
  /* Link styling */
  a {
    --text-color: var(--color-shades-dark);
    border-block-end: 3px solid var(--border-color, transparent);
    color: var(--text-color);
    display: inline-block;
    margin-block-end: 0.5rem; /* See note at the bottom of this chapter */
    margin-inline-end: 0.5rem;
    padding: 0.1rem;
    text-decoration: none;
  }
  
  /* Change the border-color on :hover and :focus */
  a:where(:hover, :focus) {
    --border-color: var(--text-color);
  }
  

CodePen-এ ধাপ ১: বেসিক HTML এবং CSS" দেখুন।

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

আপনি যা করতে পারেন তা এখানে দেওয়া হল:

• অ্যাক্টিভ পৃষ্ঠা হাইলাইট করুন।
• স্ক্রিন রিডার ব্যবহারকারীদের আইটেমের সংখ্যা ঘোষণা করুন।
• ল্যান্ডমার্ক যোগ করুন এবং স্ক্রিন রিডার ব্যবহারকারীদের শর্টকাট ব্যবহার করে সরাসরি নেভিগেশন অ্যাক্সেস করার অনুমতি দিন।
• সংকীর্ণ ভিউপোর্টে নেভিগেশন লুকান।
• ফোকাস স্টাইলিং উন্নত করুন।

মনে রাখবেন: margin-inline-end এবং margin-block-end লজিক্যাল প্রপার্টি হিসেবে পরিচিত এবং margin-right ও margin-bottom লেখার বিকল্প। লজিক্যাল প্রপার্টি হল দিকনির্দেশ এবং ডাইমেনশন নিয়ে কাজ করার একটি নতুন উপায়, যা আপনাকে ফিজিক্যাল ম্যাপিংয়ের পরিবর্তে লজিক্যাল ম্যাপিংয়ের মাধ্যমে লেআউট নিয়ন্ত্রণ করতে দেয়। আপনি যদি এমন কোনও ওয়েবসাইট নিয়ে কাজ করেন যা বিভিন্ন ভাষা ও লেখার মোডে (যেমন, ডানদিক থেকে বাঁদিকে) দেখানো হয়, তাহলে এটি বিশেষভাবে উপযোগী। উদাহরণ হিসেবে CodePen-এ "ফিজিক্যাল বনাম লজিক্যাল প্রপার্টি" দেখুন।

অ্যাক্টিভ পৃষ্ঠা হাইলাইট করুন

অ্যাক্টিভ পৃষ্ঠা হাইলাইট করতে, আপনি সংশ্লিষ্ট লিঙ্কে একটি ক্লাস যোগ করতে পারেন।

<a href="/about-us" class="active-page">About us</a>

এই পদ্ধতির সমস্যা হল, কোন লিঙ্কটি অ্যাক্টিভ আছে তা শুধুমাত্র ভিজ্যুয়ালি বোঝানো হয়। দৃষ্টিশক্তিহীন স্ক্রিন রিডার ব্যবহারকারী অ্যাক্টিভ পৃষ্ঠা ও অন্যান্য পৃষ্ঠার মধ্যে পার্থক্য বুঝতে পারেননি। তবে, Accessible Rich Internet Applications (ARIA) স্ট্যান্ডার্ড এই তথ্যকে শব্দার্থগতভাবেও কমিউনিকেট করার উপায় প্রদান করে। ক্লাসের পরিবর্তে aria-current="page" অ্যাট্রিবিউট ও ভ্যালু ব্যবহার করুন।

aria-current (স্টেট) সেই এলিমেন্টকে নির্দেশ করে যা কোনও কন্টেনার বা সম্পর্কিত এলিমেন্টের সেটের মধ্যে বর্তমান আইটেমকে দেখায়। পৃষ্ঠার টোকেন ব্যবহার করে পেজিনেশন লিঙ্কের সেটের মধ্যে কোনও লিঙ্ককে চিহ্নিত করা হয়, যেখানে লিঙ্কটি বর্তমানে দেখানো পৃষ্ঠাকে উপস্থাপন করার জন্য ভিজ্যুয়ালি স্টাইল করা হয়। [Accessible Rich Internet Applications (WAI-ARIA) 1.1](https://www.w3.org/TR/wai-aria/#aria-current)

অতিরিক্ত অ্যাট্রিবিউটের সাহায্যে, স্ক্রিন রিডার এখন শুধু "লিঙ্ক, আমাদের সম্পর্কে" বলার পরিবর্তে "বর্তমান পৃষ্ঠা, লিঙ্ক, আমাদের সম্পর্কে" বলে।

<a href="/about-us" aria-current="page" class="active-page">About us</a>

একটি সুবিধাজনক সাইড এফেক্ট হল যে আপনি CSS-এ অ্যাক্টিভ লিঙ্ক বেছে নিতে অ্যাট্রিবিউট ব্যবহার করতে পারবেন, যার ফলে active-page ক্লাস অপ্রচলিত হয়ে যাবে।

<a href="/home">Home</a>
<a href="/about-us" aria-current="page">About us</a>
<a href="/pricing">Pricing</a>
<a href="/contact">Contact</a>

/* Change border-color and color for the active page */
[aria-current="page"] {
  --border-color: var(--color-highlight);
  --text-color: var(--color-highlight);
}

ধাপ ২: CodePen-এ অ্যাক্টিভ পৃষ্ঠা হাইলাইট করুন দেখুন।

আইটেমের সংখ্যা ঘোষণা করুন

নেভিগেশন দেখে, দৃষ্টিশক্তি সম্পন্ন ব্যবহারকারীরা বলতে পারেন যে এতে শুধুমাত্র চারটি লিঙ্ক রয়েছে। দৃষ্টিশক্তিহীন স্ক্রিন রিডার ব্যবহারকারী এই তথ্য এত দ্রুত পেতে পারেন না। তাদের হয়ত লিঙ্কের পুরো তালিকাটি চেক করে দেখতে হবে। এই উদাহরণের মতো তালিকাটি ছোট হলে এটি কোনও সমস্যা নাও হতে পারে, তবে এতে ৪০টি লিঙ্ক থাকলে এই কাজটি কষ্টকর হতে পারে। স্ক্রিন রিডার ব্যবহারকারী যদি আগে থেকেই জানেন যে নেভিগেশনে অনেক লিঙ্ক আছে, তাহলে তিনি নেভিগেশনের অন্য কোনও আরও দক্ষ উপায় ব্যবহার করার সিদ্ধান্ত নিতে পারেন, যেমন সাইট সার্চ।
আইটেমের সংখ্যা জানানোর একটি ভালো উপায় হল, প্রতিটি লিঙ্ককে একটি তালিকা আইটেমে (<li>) র‍্যাপ করা, যা একটি ক্রমহীন তালিকায় (<ul>) নেস্ট করা থাকে।

<ul>
  <li>
     <a href="/home">Home</a>
  </li>
  <li>
    <a href="/about-us" aria-current="page">About us</a>
  </li>
  <li>
    <a href="/pricing">Pricing</a>
  </li>
  <li>
    <a href="/contact">Contact</a>
  </li>
</ul>

স্ক্রিন রিডার ব্যবহারকারী তালিকাটি খুঁজে পেলে, তার সফ্টওয়্যার "তালিকা, ৪টি আইটেম" এর মতো কিছু ঘোষণা করবে।

Windows-এ NVDA স্ক্রিন রিডারের সাথে নেভিগেশন ব্যবহারের একটি ডেমো এখানে দেওয়া হল।

এখন আপনাকে স্টাইলিং অ্যাডাপ্ট করতে হবে যাতে এটি আগের মতো দেখায়।

/* Remove the default list styling and create a flexible layout for the list */
ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Basic link styling */
a {
  --text-color: var(--color-shades-dark);

  border-block-end: 3px solid var(--border-color, transparent);
  color: var(--text-color);
  padding: 0.1rem;
  text-decoration: none;
}

স্ক্রিন রিডার ব্যবহারকারীদের জন্য তালিকা ব্যবহার করার অনেক সুবিধা থাকতে পারে:

• আইটেমের সাথে ইন্টার‍্যাক্ট করার আগে তারা আইটেমের মোট সংখ্যা জানতে পারবেন।
• তারা তালিকার এক আইটেম থেকে অন্য আইটেমে যেতে শর্টকাট ব্যবহার করতে পারেন।
• তারা এক তালিকা থেকে অন্য তালিকায় যাওয়ার জন্য শর্টকাট ব্যবহার করতে পারেন।
• স্ক্রিন রিডার বর্তমান আইটেমের ইন্ডেক্স ঘোষণা করতে পারে (যেমন, "তালিকার আইটেম, চারটির মধ্যে দুটি")।

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

Safari-তে VoiceOver সম্পর্কে একটি উল্লেখযোগ্য বিবরণ হল যে আপনি list-style: none সেট করলে, এইসব সুবিধা আর পাবেন না। এটি ডিজাইন অনুযায়ী করা হয়েছে। WebKit টিম তালিকার শব্দার্থবিদ্যা সরিয়ে দেওয়ার সিদ্ধান্ত নিয়েছে, যখন কোনও তালিকা তালিকার মতো দেখায় না। আপনার নেভিগেশনের জটিলতার উপর নির্ভর করে, এটি কোনও সমস্যা হতে পারে বা নাও হতে পারে। একদিকে, নেভিগেশন এখনও ব্যবহারযোগ্য এবং এটি শুধুমাত্র Safari-তে VoiceOver-কে প্রভাবিত করে। Chrome বা Firefox-এর সাথে VoiceOver এখনও আইটেমের সংখ্যা ঘোষণা করে, পাশাপাশি NVDA-এর মতো অন্যান্য স্ক্রিন রিডারও করে। অন্যদিকে, কিছু পরিস্থিতিতে শব্দার্থিক তথ্য সত্যিই উপযোগী হতে পারে। এই সিদ্ধান্ত নিতে, আপনাকে স্ক্রিন রিডার ব্যবহারকারীদের সাথে নেভিগেশন পরীক্ষা করতে হবে এবং তাদের মতামত নিতে হবে। আপনি যদি সিদ্ধান্ত নেন যে Safari-তে VoiceOver-কে অন্যান্য সব স্ক্রিন রিডারের মতো কাজ করতে হবে, তাহলে আপনি <ul>-এ স্পষ্টভাবে ARIA তালিকার ভূমিকা সেট করে সমস্যার সমাধান করতে পারেন। এটি তালিকার স্টাইলিং সরানোর আগের অবস্থায় ফিরিয়ে নিয়ে যায়। ভিজ্যুয়ালি, তালিকাটি এখনও একই রকম দেখায়।

<ul role="list">
  <li>
     <a href="/home">Home</a>
  </li>
  ...
</ul>

মনে রাখবেন: আপনি HTML যাচাই করার সময় যাচাইকরণ পরিষেবা যদি "ul এলিমেন্টের জন্য তালিকার ভূমিকা অপ্রয়োজনীয়" এই ধরনের কোনও সতর্কবার্তা দেখায়, তাহলে আপনি সেটি উপেক্ষা করতে পারেন।

ধাপ ৩: CodePen-এ আইটেমের সংখ্যা ঘোষণা করা দেখুন।

ল্যান্ডমার্ক যোগ করুন

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

<nav> এলিমেন্ট ব্যবহার করার অনেক সুবিধা আছে। বিশেষ করে, ব্যবহারকারী যখন স্ক্রিন রিডারের সাথে ইন্টার‍্যাক্ট করেন, তখন এটি "নেভিগেশন" জাতীয় কিছু ঘোষণা করে এবং পৃষ্ঠায় একটি ল্যান্ডমার্ক যোগ করে। ল্যান্ডমার্ক হল পৃষ্ঠার বিশেষ অঞ্চল, যেমন <header>, <footer> বা <main>, যেখানে স্ক্রিন রিডার সরাসরি যেতে পারে। কোনও পৃষ্ঠায় ল্যান্ডমার্ক থাকলে তা সহায়ক হতে পারে, কারণ এটি স্ক্রিন রিডার ব্যবহারকারীদের পৃষ্ঠার বাকি অংশের সাথে ইন্টার‍্যাক্ট না করেই সরাসরি পৃষ্ঠার গুরুত্বপূর্ণ অংশে অ্যাক্সেস করার অনুমতি দেয়। যেমন, NVDA-তে D কী প্রেস করে আপনি এক ল্যান্ডমার্ক থেকে অন্য ল্যান্ডমার্কে যেতে পারবেন। Voice Over-এ আপনি VO + U প্রেস করে পৃষ্ঠার সব ল্যান্ডমার্কের তালিকা তৈরি করতে রোটর ব্যবহার করতে পারবেন।

VoiceOver-এ রোটর কোনও পৃষ্ঠার সব ল্যান্ডমার্কের তালিকা তৈরি করে।

এই তালিকায় আপনি ৪টি ল্যান্ডমার্ক দেখতে পাবেন: ব্যানার যা হল <header> এলিমেন্ট, নেভিগেশন হল <nav>, প্রধান হল <main> এলিমেন্ট এবং কন্টেন্ট সংক্রান্ত তথ্য হল <footer>। এই তালিকাটি খুব দীর্ঘ হওয়া উচিত নয়, আপনি সত্যিই আপনার UI-এর গুরুত্বপূর্ণ অংশগুলিকে ল্যান্ডমার্ক হিসেবে চিহ্নিত করতে চান, যেমন সাইট সার্চ, স্থানীয় নেভিগেশন বা পৃষ্ঠা সংখ্যা।

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

VoiceOver-এ রোটর তিনটি লেবেল না করা নেভিগেশন ল্যান্ডমার্কের তালিকা দেখাচ্ছে।

সেগুলিকে আলাদা করে শনাক্ত করার জন্য, আপনাকে aria-labelledby বা aria-label ব্যবহার করে লেবেল করতে হবে।

<nav aria-label="Main">
    <ul>
      <li>
         <a href="/home">Home</a>
      </li>
      ...
  </ul>
</nav>
...
<nav aria-label="Select page">
    <ul>
      <li>
         <a href="/page-1">1</a>
      </li>
      ...
    </ul>
</nav>

আপনার বেছে নেওয়া লেবেলটি পৃষ্ঠার কোথাও আগে থেকেই থাকলে, আপনি এর পরিবর্তে aria-labelledby ব্যবহার করতে পারেন এবং id অ্যাট্রিবিউট ব্যবহার করে আগে থেকে থাকা লেবেলটি রেফারেন্স হিসেবে ব্যবহার করতে পারেন।

<nav aria-labelledby="pagination_heading">
  <h2 id="pagination_heading">Select a page</h2>
  <ul>
    <li>
       <a href="/page-1">1</a>
    </li>
    ...
  </ul>
</nav>

সংক্ষিপ্ত লেবেলই যথেষ্ট, খুব বেশি শব্দ ব্যবহার করবেন না। "নেভিগেশন" বা "মেনু"-এর মতো এক্সপ্রেশন বাদ দিন, কারণ স্ক্রিন রিডার ব্যবহারকারীদের এই তথ্য আগেই প্রদান করে।

VoiceOver "ব্যানার", "প্রধান নেভিগেশন", "প্রধান", "পৃষ্ঠা নেভিগেশন", "পৃষ্ঠা নেভিগেশন বেছে নিন" এবং "কন্টেন্ট সংক্রান্ত তথ্য" ল্যান্ডমার্কের তালিকা তৈরি করছে।

ধাপ ৪: CodePen-এ ল্যান্ডমার্ক যোগ করা দেখুন।

সংকীর্ণ ভিউপোর্টে নেভিগেশন লুকান

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

• আপনাকে অ্যাক্সেসযোগ্য উপায়ে তালিকা লুকাতে হবে।
• নেভিগেশন অবশ্যই কীবোর্ড অ্যাক্সেসযোগ্য হতে হবে।
• নেভিগেশনটি দৃশ্যমান কিনা তা জানাতে হবে।

বার্গার বোতাম যোগ করা হচ্ছে

আপনি প্রোগ্রেসিভ এনহ্যান্সমেন্ট নীতি অনুসরণ করছেন, তাই জাভাস্ক্রিপ্ট বন্ধ থাকলেও আপনার নেভিগেশন কাজ করছে এবং অর্থপূর্ণ হচ্ছে কিনা তা নিশ্চিত করতে চান।
আপনার নেভিগেশনের জন্য প্রথমে একটি বার্গার বোতাম প্রয়োজন। আপনি এটি HTML-এ একটি টেমপ্লেট এলিমেন্টে তৈরি করেন, JavaScript-এ ক্লোন করেন এবং নেভিগেশনে যোগ করেন।

ফলাফল: লিঙ্কের পরিবর্তে, নেভিগেশন সরু ভিউপোর্টে একটি বার্গার বোতাম দেখায়।

<nav id="mainnav">
  ...
</nav>

<template id="burger-template">
  <button type="button" aria-expanded="false" aria-label="Menu" aria-controls="mainnav">
    <svg width="24" height="24" aria-hidden="true">
      <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
    </svg>
  </button>
</template>

1. aria-expanded অ্যাট্রিবিউট স্ক্রিন রিডার সফ্টওয়্যারকে জানায় যে বোতামটি যে এলিমেন্ট নিয়ন্ত্রণ করে সেটি বড় করা হয়েছে কিনা।
2. aria-label বোতামটিকে একটি তথাকথিত অ্যাক্সেসযোগ্য নাম দেয়, যা বার্গার আইকনের জন্য একটি টেক্সট বিকল্প।
3. আপনি aria-hidden ব্যবহার করে সহায়ক প্রযুক্তি থেকে <svg> লুকান কারণ এতে আগে থেকেই aria-label দ্বারা প্রদত্ত একটি টেক্সট লেবেল রয়েছে।
4. aria-controls অ্যাট্রিবিউটকে (যেমন, JAWS) সাপোর্ট করে এমন সহায়ক প্রযুক্তিকে বলে যে কোন এলিমেন্ট বোতামটি কন্ট্রোল করে।

const nav = document.querySelector('#mainnav')
const list = nav.querySelector('ul');
const burgerClone = document.querySelector('#burger-template').content.cloneNode(true);
const button = burgerClone.querySelector('button');

// Toggle aria-expanded attribute
button.addEventListener('click', e => {
  // aria-expanded="true" signals that the menu is currently open
  const isOpen = button.getAttribute('aria-expanded') === "true"
  button.setAttribute('aria-expanded', !isOpen);
});

// Hide list on keydown Escape
nav.addEventListener('keyup', e => {
  if (e.code === 'Escape') {
    button.setAttribute('aria-expanded', false);
  }
});

// Add the button to the page
nav.insertBefore(burgerClone, list);

1. ব্যবহারকারীরা যাতে যেকোনও সময় নেভিগেশন বন্ধ করতে পারেন, যেমন Escape কী প্রেস করে, সেই সুবিধা থাকলে ভালো হয়।
2. appendChild-এর পরিবর্তে insertBefore ব্যবহার করা গুরুত্বপূর্ণ কারণ আপনার নেভিগেশনে বোতামটি প্রথম এলিমেন্ট হওয়া উচিত। কীবোর্ড বা স্ক্রিন রিডার ব্যবহারকারী বোতামে ক্লিক করার পরে Tab প্রেস করলে, তিনি তালিকার প্রথম আইটেমে ফোকাস করতে চান। বোতামটি তালিকার পরে থাকলে, সেটি হবে না।

এরপর, আপনি বোতামের ডিফল্ট স্টাইলিং রিসেট করুন এবং নিশ্চিত করুন যে এটি শুধুমাত্র সংকীর্ণ ভিউপোর্টে দেখা যাচ্ছে।

@media (min-width: 48em) {
  nav {
    --nav-button-display: none;
  }
}

/* Reset button styling */
button {
  all: unset;
  display: var(--nav-button-display, flex);
}

৫ম ধাপ: CodePen-এ বার্গার বোতাম যোগ করা দেখুন।

তালিকা লুকানো হচ্ছে

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

@media (min-width: 48em) {
  nav {
    --nav-button-display: none;
    --nav-position: static;
  }
}

nav {
  position: var(--nav-position, fixed);
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
}

এরপর, নতুন কাস্টম প্রপার্টি (—-nav-list-layout) যোগ করে সংকীর্ণ ভিউপোর্টে লেআউট পরিবর্তন করুন। লেআউটটি ডিফল্টভাবে কলামে থাকে এবং বড় স্ক্রিনে সারিতে পাল্টে যায়।

@media (min-width: 48em) {
  nav {
    --nav-button-display: none;
    --nav-position: static;
  }

  ul {
    --nav-list-layout: row;
  }
}

ul {
  display: flex;
  flex-direction: var(--nav-list-layout, column);
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

ছোট ভিউপোর্টে আপনার নেভিগেশন দেখতে অনেকটা এইরকম হওয়া উচিত।

বার্গার বোতাম এবং তালিকা দুটিই ভিউপোর্টের উপরের কোণে রাখা হয়েছে।

তালিকাটিতে স্পষ্টতই কিছু CSS প্রয়োজন। আমরা এটিকে উপরের কোণে নিয়ে যাব, উল্লম্বভাবে পুরো স্ক্রিন জুড়ে দেখাব, background-color এবং box-shadow প্রয়োগ করব।

@media (min-width: 48em) {
  nav {
    --nav-button-display: none;
    --nav-position: static;
  }
  
  ul {
    --nav-list-layout: row;
    --nav-list-position: static;
    --nav-list-padding: 0;
    --nav-list-height: auto;
    --nav-list-width: 100%;
    --nav-list-shadow: none;
  }
}

ul {
  background: rgb(255, 255, 255);
  box-shadow: var(--nav-list-shadow, -5px 0 11px 0 rgb(0 0 0 / 0.2));
  display: flex;
  flex-direction: var(--nav-list-layout, column);
  flex-wrap: wrap;
  gap: 1rem;
  height: var(--nav-list-height, 100vh);
  list-style: none;
  margin: 0;
  padding: var(--nav-list-padding, 2rem);
  position: var(--nav-list-position, fixed);
  inset-block-start: 0; /* Logical property. Equivalent to top: 0; */
  inset-inline-end: 0; /* Logical property. Equivalent to right: 0; */
  width: var(--nav-list-width, min(22rem, 100vw));
}

button {
  all: unset;
  display: var(--nav-button-display, flex);
  position: relative;
  z-index: 1;
}

সংকীর্ণ ভিউপোর্টে তালিকাটি এরকম দেখতে হওয়া উচিত, সাধারণ তালিকার চেয়ে সাইডবারের মতো।

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

আগে, আপনি aria-expanded অ্যাট্রিবিউটের মান টগল করার জন্য বোতামে একটি ক্লিক ইভেন্ট যোগ করেছিলেন। CSS-এ তালিকা দেখানো এবং লুকানোর শর্ত হিসেবে আপনি সেই তথ্য ব্যবহার করতে পারবেন।

@media (min-width: 48em) {
  ul {
    --nav-list-visibility: visible;
  }
}

ul {
  visibility: var(--nav-list-visibility, visible);
}

/* Hide the list on narrow viewports, if it comes after an element with
   aria-expanded set to "false". */
[aria-expanded="false"] + ul {
  visibility: var(--nav-list-visibility, hidden);
}

তালিকা লুকানোর জন্য opacity: 0 বা translateX(100%)-এর পরিবর্তে visibility: hidden বা display: none-এর মতো প্রপার্টি ডিক্লারেশন ব্যবহার করা গুরুত্বপূর্ণ। এইসব প্রপার্টি নিশ্চিত করে যে নেভিগেশন লুকানো থাকলে লিঙ্কগুলি ফোকাস করা যাবে না। opacity বা translate ব্যবহার করলে কন্টেন্ট ভিজ্যুয়ালি সরিয়ে দেওয়া হবে, তাই লিঙ্কগুলি অদৃশ্য হয়ে যাবে, তবে কীবোর্ড ব্যবহার করে অ্যাক্সেস করা যাবে, যা বিভ্রান্তিকর এবং হতাশাজনক হতে পারে। visibility বা display ব্যবহার করলে এটি দৃশ্যত লুকানো থাকে এবং অ্যাক্সেস করা যায় না, তাই এটি সব ব্যবহারকারীর জন্য লুকানো থাকে।

ধাপ ৬: তালিকা লুকানো দেখুন।

তালিকা অ্যানিমেট করা হচ্ছে

আপনি যদি ভাবেন যে display: none;-এর পরিবর্তে কেন visibility: hidden; ব্যবহার করবেন, তাহলে জেনে রাখুন যে আপনি দৃশ্যমানতা অ্যানিমেট করতে পারবেন। এটির শুধু দুটি স্টেট আছে, hidden এবং visible, তবে আপনি স্লাইড- বা ফেড-ইন এফেক্ট তৈরি করতে, এটিকে transform বা opacity-এর মতো অন্য প্রপার্টির সাথে একত্রিত করতে পারবেন। এটি display: none-এর সাথে কাজ করবে না কারণ ডিসপ্লে প্রপার্টি অ্যানিমেট করা যায় না।

ফেড-ইন ও ফেড-আউট এফেক্ট তৈরি করতে নিম্নলিখিত CSS ট্রানজিশন opacity।

ul {
  transition: opacity 0.6s linear, visibility 0.3s linear;
  visibility: var(--nav-list-visibility, visible);
}

[aria-expanded="false"] + ul {
  opacity: 0;
  visibility: var(--nav-list-visibility, hidden);
}

আপনি যদি এর পরিবর্তে মোশন অ্যানিমেট করতে চান, তাহলে transition প্রপার্টিকে prefers-reduced-motion মিডিয়া কোয়েরিতে র‍্যাপ করার কথা বিবেচনা করা উচিত, কারণ অ্যানিমেশন কিছু ব্যবহারকারীর ক্ষেত্রে বমি বমি ভাব, মাথা ঘোরা এবং মাথাব্যথা ট্রিগার করতে পারে।

ul {
  visibility: var(--nav-list-visibility, visible);
}

@media (prefers-reduced-motion: no-preference) {
  ul {
    transition: transform 0.6s cubic-bezier(.68,-0.55,.27,1.55), visibility 0.3s linear;
  }
}

[aria-expanded="false"] + ul {
  transform: var(--nav-list-transform, translateX(100%));
  visibility: var(--nav-list-visibility, hidden);
}

এর ফলে, যাদের 'কমানো হয়েছে এমন অ্যানিমেশন' বিকল্পের প্রতি কোনও পছন্দ নেই, শুধু তারাই অ্যানিমেশন দেখতে পাবেন।

ধাপ ৭: CodePen-এ তালিকা অ্যানিমেট করা দেখুন।

ফোকাস স্টাইলিং উন্নত করুন

কীবোর্ড ব্যবহারকারীরা কোনও পৃষ্ঠায় ওরিয়েন্টেশন ও নেভিগেশনের জন্য এলিমেন্টের ফোকাস স্টাইলের উপর নির্ভর করেন। কোনও ফোকাস স্টাইল না থাকার (যা outline: none সেট করলে হয়) চেয়ে ডিফল্ট ফোকাস স্টাইল থাকা ভালো, তবে আরও স্পষ্টভাবে দৃশ্যমান কাস্টম ফোকাস স্টাইল থাকলে ব্যবহারকারীর অভিজ্ঞতা উন্নত হয়।

Chrome 103-এ লিঙ্কের ডিফল্ট ফোকাস স্টাইল কেমন দেখায় তা এখানে দেওয়া হল।

আপনি নিজের পছন্দমতো রঙে নিজের স্টাইল প্রদান করে এটি উন্নত করতে পারবেন। :focus-এর পরিবর্তে :focus-visible ব্যবহার করে আপনি ব্রাউজারকে সিদ্ধান্ত নিতে দেন যে কখন ফোকাস স্টাইল দেখানো উপযুক্ত। :focus স্টাইল মাউস, কীবোর্ড ও টাচ ব্যবহারকারী সহ সবাই দেখতে পাবেন, তাদের প্রয়োজন হোক বা না হোক। :focus-visible-এর মাধ্যমে ব্রাউজার ইন্টার্নাল হিউরিস্টিক ব্যবহার করে সিদ্ধান্ত নেয় যে সেগুলি শুধু কীবোর্ড ব্যবহারকারীদের দেখানো হবে নাকি সবাইকে।

/* Remove the default :focus outline */
*:focus {
  outline: none;
}

/* Show a custom outline on :focus-visible */
*:focus-visible {
  outline: 2px solid var(--color-shades-dark);
  outline-offset: 4px;
}

:focus-visible-এর জন্য ব্রাউজার সাপোর্ট

Browser Support

• 86
• 86
• 85
• 15.4

Source

আইটেম ফোকাস করা হলে, সেগুলি হাইলাইট করার বিভিন্ন উপায় আছে। outline প্রপার্টি ব্যবহার করার সাজেশন দেওয়া হয় কারণ এটি লেআউট ব্রেক করে না, যা border-এর ক্ষেত্রে হতে পারে এবং এটি Windows-এ হাই কনট্রাস্ট মোড-এর সাথে ভালভাবে কাজ করে। যেসব প্রপার্টি ভালভাবে কাজ করে না সেগুলি হল background-color বা box-shadow, কারণ কাস্টম কন্ট্রাস্ট সেটিংসের সাথে সেগুলি হয়ত একেবারেই দেখানো যাবে না।

ধাপ ৮: CodePen-এ ফোকাস স্টাইল উন্নত করুন দেখুন।

অভিনন্দন! আপনি প্রোগ্রেসিভ এনহ্যান্সমেন্ট, শব্দার্থগতভাবে সমৃদ্ধ, অ্যাক্সেসযোগ্য এবং মোবাইল-ফ্রেন্ডলি প্রধান নেভিগেশন তৈরি করেছেন।

সবসময়ই কিছু না কিছু উন্নত করা যায়, যেমন:

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

এই নিবন্ধটি কীভাবে শুরু হয়েছিল তা যদি আপনার মনে থাকে, তাহলে সমাধানটি "খুব সহজও নয়, খুব জটিলও নয়" হওয়ার লক্ষ্য নিয়ে আমরা এখন সেই জায়গায় পৌঁছেছি। তবে, নেভিগেশন ওভার-ইঞ্জিনিয়ার করা সম্ভব।

নেভিগেশন বনাম মেনু

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

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

নেভিগেশন ভূমিকা

ডকুমেন্ট বা সম্পর্কিত ডকুমেন্টে নেভিগেট করার জন্য নেভিগেশনাল এলিমেন্টের (সাধারণত লিঙ্ক) একটি সংগ্রহ।

নেভিগেশন (ভূমিকা) WAI-ARIA 1.1

মেনু রোল

মেনু হল সাধারণ অ্যাকশন বা ফাংশনের তালিকা যা ব্যবহারকারী চালু করতে পারেন। মেনু ভূমিকা তখনই উপযুক্ত হয় যখন মেনু আইটেমের তালিকা ডেস্কটপ অ্যাপ্লিকেশনের মেনুর মতো করে দেখানো হয়।

মেনু (ভূমিকা) WAI-ARIA 1.1

মেনুবারের ভূমিকা

মেনুর একটি প্রেজেন্টেশন যা সাধারণত দৃশ্যমান থাকে এবং সাধারণত অনুভূমিকভাবে উপস্থাপন করা হয়। মেনুবার রোল ব্যবহার করে Windows, Mac ও Gnome ডেস্কটপ অ্যাপ্লিকেশনের মতো মেনুবার তৈরি করা হয়। প্রায়শই ব্যবহার করা হয় এমন কমান্ডের একটি সামঞ্জস্যপূর্ণ সেট তৈরি করতে মেনু বার ব্যবহার করা হয়। লেখককে নিশ্চিত করতে হবে যে মেনুবারের ইন্টার‍্যাকশন যেন ডেস্কটপ গ্রাফিকাল ইউজার ইন্টারফেসের সাধারণ মেনুবার ইন্টার‍্যাকশনের মতোই হয়।

মেনুবার (ভূমিকা) WAI-ARIA 1.1

মেনুআইটেম ভূমিকা

মেনু বা মেনুবার-এ থাকা বিকল্পের সেটের মধ্যে একটি বিকল্প।

menuitem (role) WAI-ARIA 1.1

এখানে স্পেসিফিকেশন খুব স্পষ্ট, ডকুমেন্ট বা সম্পর্কিত ডকুমেন্ট নেভিগেট করার জন্য নেভিগেশন ব্যবহার করুন এবং ডেস্কটপ অ্যাপ্লিকেশনের মেনুর মতো অ্যাকশন বা ফাংশনের তালিকার জন্য শুধুমাত্র মেনু ব্যবহার করুন। আপনি যদি পরবর্তী Google Docs তৈরি না করেন, তাহলে সম্ভবত প্রধান নেভিগেশনের জন্য আপনার কোনও মেনু রোলের প্রয়োজন নেই।

মেনু কখন উপযুক্ত হয়?

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

<ul>
  <li>
    Product 1

    <button aria-expanded="false" aria-controls="options1">Edit</button>

    <div role="menu" id="options1">
      <button role="menuitem">
        Duplicate
      </button>
      <button role="menuitem">
        Delete
      </button>
      <button role="menuitem">
        Disable
      </button>
    </div>
  </li>
  <li>
    Product 2
    ...
  </li>
</ul>

মেনু রোল ব্যবহারের প্রভাব

এই মেনু রোলগুলি বুদ্ধিমানের মতো ব্যবহার করা খুবই গুরুত্বপূর্ণ কারণ অনেক কিছু ভুল হতে পারে।

মেনুর জন্য নির্দিষ্ট DOM স্ট্রাকচার প্রয়োজন। menuitem অবশ্যই menu-এর সরাসরি চাইল্ড আইটেম হতে হবে। নিম্নলিখিত কোডটি শব্দার্থগত আচরণকে ভেঙে দিতে পারে:

 <!-- Wrong, don't do this -->
<ul role="menu">
  <li>
    <a href="#" role="menuitem">Item 1</a>
  </li>
</ul>

দক্ষ ব্যবহারকারীরা আশা করেন যে নির্দিষ্ট কীবোর্ড শর্টকাট মেনু এবং মেনুবারের সাথে কাজ করবে। ARIA অথরিং প্র্যাক্টিস গাইড (APG) অনুযায়ী, এর মধ্যে এগুলি অন্তর্ভুক্ত:

• মেনু আইটেম বেছে নিতে Enter ও Space।
• আইটেমের মধ্যে নেভিগেট করতে সব দিকে তীরচিহ্নযুক্ত কী।
• Home ও End 'কী' ব্যবহার করে যথাক্রমে প্রথম ও শেষ আইটেমে ফোকাস সরানো যায়।
• টাইপ করা অক্ষর দিয়ে শুরু হওয়া লেবেল সহ পরবর্তী মেনু আইটেমে ফোকাস সরাতে a-z।
• মেনু বন্ধ করতে Esc প্রেস করুন।

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

কীবোর্ড ব্যবহারকারীদের ক্ষেত্রেও একই কথা প্রযোজ্য, যারা Shift এবং Shift + Tab ব্যবহার করতে পারবেন বলে আশা করেন।

মেনু ও মেনু বার তৈরি করার সময় অনেক কিছু বিবেচনা করতে হয়, যার মধ্যে সবচেয়ে গুরুত্বপূর্ণ হল, আদৌ সেগুলি ব্যবহার করা উচিত কিনা। আপনি যখন একটি সাধারণ ওয়েবসাইট তৈরি করছেন, তখন তালিকা এবং লিঙ্ক সহ নেভিগেশন এলিমেন্টই আপনার প্রয়োজন। এর মধ্যে সিঙ্গেল পেজ অ্যাপ্লিকেশন (SPA) বা ওয়েব অ্যাপও অন্তর্ভুক্ত। অন্তর্নিহিত স্ট্যাকের কোনও গুরুত্ব নেই। আপনি যদি ডেস্কটপ অ্যাপ্লিকেশনের খুব কাছাকাছি কিছু তৈরি না করেন, তাহলে মেনু রোল এড়িয়ে চলুন।

অতিরিক্ত রিসোর্স

• স্কট ও'হারা-র লেখা Fixing Lists।
• Adrian Roselli-এর লেখা সাইট নেভিগেশনের জন্য ARIA মেনু রোল ব্যবহার করবেন না।
• হেডন পিকারিংয়ের লেখা মেনু ও মেনু বোতাম।
• মার্কো জেহের লেখা WAI-ARIA মেনু এবং কেন আপনার সেগুলি অত্যন্ত যত্ন সহকারে পরিচালনা করা উচিত।
• কিটি গিরাউডেলের লেখা দায়িত্ব সহকারে কন্টেন্ট লুকানো।
• :focus-visible Is Here by Matthias Ott.