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

রব ডডসন

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

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

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

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

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

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

হেডিং লেভেল এড়িয়ে যাবেন না

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

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

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

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

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

আপনার পৃষ্ঠা কোনো শিরোনাম স্তর এড়িয়ে যায় কিনা তা পরীক্ষা করতে আপনি Lighthouse ব্যবহার করতে পারেন। অ্যাক্সেসিবিলিটি অডিট চালান ( বাতিঘর > বিকল্প > অ্যাক্সেসিবিলিটি ) এবং শিরোনামগুলির ফলাফলগুলি সন্ধান করুন স্তরের অডিট এড়িয়ে যাবেন না ৷

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

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

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

Lighthouse আপনার সাইটের ম্যানুয়ালি অডিট করার পরামর্শ দেয় যে "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;
}

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

আপনার পৃষ্ঠায় একটি স্কিপ লিঙ্ক রয়েছে কিনা তা পরীক্ষা করতে বাতিঘর আপনাকে সাহায্য করতে পারে। অ্যাক্সেসিবিলিটি অডিটটি আবার চালান এবং পৃষ্ঠার ফলাফলগুলি সন্ধান করুন যেটিতে একটি শিরোনাম, লিঙ্ক এড়িয়ে যাওয়া বা ল্যান্ডমার্ক অঞ্চলের অডিট রয়েছে ৷