শিরোনাম এবং ল্যান্ডমার্ক

Rob Dodson

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

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

পৃষ্ঠার রূপরেখা তৈরি করতে শিরোনাম ব্যবহার করুন

আপনার পৃষ্ঠার জন্য একটি কাঠামোগত রূপরেখা তৈরি করতে h1 - h6 উপাদান ব্যবহার করুন। লক্ষ্য হল পৃষ্ঠার একটি কঙ্কাল বা ভারা তৈরি করা যাতে শিরোনাম দ্বারা নেভিগেট করা যে কেউ একটি মানসিক চিত্র তৈরি করতে পারে।

একটি সাধারণ অভ্যাস হল একটি পৃষ্ঠার প্রাথমিক শিরোনাম বা লোগোর জন্য একটি একক h1 , প্রধান বিভাগগুলি নির্ধারণের জন্য h2 উপাদান এবং সহায়ক উপবিভাগগুলিতে h3 উপাদান ব্যবহার করা:

<h1>Company name</h1>
<section>
  <h2>Section Heading</h2>
  …
  <h3>Sub-section Heading</h3>
</section>

শিরোনামের স্তরগুলি এড়িয়ে যাবেন না

ডেভেলপাররা প্রায়শই হেডিং লেভেল এড়িয়ে ব্রাউজারের ডিফল্ট স্টাইল ব্যবহার করে যা তাদের ডিজাইনের সাথে ঘনিষ্ঠভাবে মেলে। এটি একটি অ্যান্টি-প্যাটার্ন হিসাবে বিবেচিত হয় কারণ এটি আউটলাইন মডেলকে ভেঙে দেয়।

শিরোনামের জন্য ব্রাউজারের ডিফল্ট ফন্ট-সাইজিংয়ের উপর নির্ভর না করে, আপনার নিজস্ব CSS ব্যবহার করুন এবং স্তরগুলি এড়িয়ে যাবেন না।

উদাহরণস্বরূপ, এই সাইটে "IN THE NEWS" নামে একটি বিভাগ রয়েছে, যার পরে দুটি শিরোনাম রয়েছে:

"ইন দ্য নিউজ" বিভাগের শিরোনামটি h2 হতে পারে, এবং সহায়ক শিরোনামগুলি উভয়ই h3 উপাদান হতে পারে।

"IN THE NEWS" এর font-size শিরোনামের চেয়ে ছোট হওয়ায়, প্রথম গল্পের শিরোনামটিকে h2 এবং "IN THE NEWS" কে h3 করার জন্য এটি প্রলুব্ধকর হতে পারে। যদিও এটি ব্রাউজারের ডিফল্ট স্টাইলিংয়ের সাথে মেলে, এটি স্ক্রিন রিডার ব্যবহারকারীর কাছে প্রদত্ত রূপরেখাটি ভেঙে ফেলবে!

যদিও এটি বিপরীতমুখী বলে মনে হতে পারে, দৃশ্যত h3 এবং h4 উপাদানগুলি তাদের h2 বা h1 প্রতিরূপের চেয়ে বড় কিনা তা বিবেচ্য নয়। গুরুত্বপূর্ণ বিষয় হল উপাদানগুলি এবং উপাদানগুলির ক্রম দ্বারা প্রদত্ত রূপরেখা।

আপনার পৃষ্ঠাটি কোনও শিরোনাম স্তর এড়িয়ে যায় কিনা তা পরীক্ষা করার জন্য আপনি Lighthouse ব্যবহার করতে পারেন। অ্যাক্সেসিবিলিটি অডিট ( Lighthouse > Options > Accessibility ) চালান এবং Headings don't skip levels অডিটের ফলাফলগুলি সন্ধান করুন।

নেভিগেশনে সহায়তা করার জন্য ল্যান্ডমার্ক ব্যবহার করুন

HTML5 উপাদান যেমন main , nav , এবং aside পৃষ্ঠার ল্যান্ডমার্ক বা বিশেষ অঞ্চল হিসেবে কাজ করে যেখানে একজন স্ক্রিন রিডার যেতে পারে।

div এর উপর নির্ভর না করে আপনার পৃষ্ঠার প্রধান অংশগুলিকে সংজ্ঞায়িত করতে ল্যান্ডমার্ক ট্যাগ ব্যবহার করুন। অতিরিক্ত কিছু না করার বিষয়ে সতর্ক থাকুন কারণ অনেকগুলি ল্যান্ডমার্ক থাকা অত্যধিক কঠিন হতে পারে। উদাহরণস্বরূপ, 3 বা 4 এর পরিবর্তে কেবল একটি main উপাদান ব্যবহার করুন।

"নেভিগেশন উন্নত করার জন্য HTML5 ল্যান্ডমার্ক উপাদান ব্যবহার করা হচ্ছে কিনা" তা পরীক্ষা করার জন্য লাইটহাউস আপনার সাইটটি ম্যানুয়ালি অডিট করার পরামর্শ দেয়। আপনি আপনার পৃষ্ঠাটি পরীক্ষা করার জন্য ল্যান্ডমার্ক উপাদানগুলির এই তালিকাটি ব্যবহার করতে পারেন।

লিঙ্ক বাদ দিয়ে পুনরাবৃত্তিমূলক কন্টেন্ট এড়িয়ে যান

অনেক সাইটের হেডারে বারবার নেভিগেশন থাকে, যা সহায়ক প্রযুক্তি ব্যবহার করে নেভিগেট করা বিরক্তিকর হতে পারে। ব্যবহারকারীদের এই কন্টেন্টটি এড়িয়ে যেতে একটি স্কিপ লিঙ্ক ব্যবহার করুন।

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

<!-- index.html -->
<a class="skip-link" href="#main">Skip to main</a>
…
<main id="main">
  [Main content]
</main>

/* style.css */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000000;
  color: white;
  padding: 8px;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

GitHub , The NY Times , এবং Wikipedia এর মতো অনেক জনপ্রিয় সাইটে স্কিপ লিঙ্ক থাকে। সেগুলোতে গিয়ে আপনার কীবোর্ডের TAB কী কয়েকবার টিপে দেখুন।

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