স্কিপ লিংক ও ল্যান্ডমার্ক: ১৫ মিনিটে ওয়ার্ডপ্রেস থিমের নেভিগেশন ঠিক করুন
একটি স্কিপ লিংক আর সঠিক ল্যান্ডমার্ক যোগ করলে কিবোর্ড ও স্ক্রিন রিডার ব্যবহারকারীর শত শত ট্যাব চাপ বাঁচে। কীভাবে যোগ ও পরীক্ষা করবেন, জেনে নিন।
কল্পনা করুন, প্রতিটি পেজে মূল লেখায় পৌঁছানোর আগে আপনাকে বিশটি মেনু লিংকে ট্যাব চাপতে হচ্ছে। স্কিপ লিংক ছাড়া সাইটে কিবোর্ড ও সুইচ ব্যবহারকারীদের প্রতিদিন এটাই হয়। সমাধান করতে মোটামুটি পনেরো মিনিট লাগে, আর এটি WCAG 2.4.1 (Bypass Blocks) মানদণ্ডও পূরণ করে।
ধাপ ১: স্কিপ লিংক যোগ করুন
থিমের header.php-এ <body>-এর ঠিক ভেতরে সবার আগে এই লিংকটি বসান:
<a class="skip-link" href="#main">Skip to content</a>তারপর মূল কনটেন্ট অংশে মিলিয়ে আইডি দিন:
<main id="main" tabindex="-1"> ... </main>লিংকটি ফোকাস না পাওয়া পর্যন্ত চোখের আড়ালে রাখুন। display:none ব্যবহার করবেন না, কারণ তাতে লিংকটি কিবোর্ডের ক্রম থেকেই বাদ পড়ে।
.skip-link { position: absolute; left: 12px; top: -100px; z-index: 1000;
padding: 10px 16px; background: #fff; color: #000; border-radius: 8px; }
.skip-link:focus { top: 12px; }ধাপ ২: ল্যান্ডমার্ক ব্যবহার করুন
ল্যান্ডমার্ক হলো নামযুক্ত অংশ, যেগুলোর তালিকা স্ক্রিন রিডার দেখায়, ফলে ব্যবহারকারী সরাসরি সেখানে যেতে পারেন। HTML5-এর এলিমেন্ট দিয়েই এগুলো তৈরি হয়:
- header: সাইটের ওপরের অংশ
- nav: নেভিগেশন
- main: মূল কনটেন্ট, পেজে একবারই
- aside: সাইডবারের মতো সম্পর্কিত অংশ
- footer: সাইটের নিচের অংশ
একটি পেজে একাধিক nav থাকলে প্রতিটিতে aria-label দিন, যেমন aria-label="Primary" ও aria-label="Footer"।
ধাপ ৩: দুই মিনিটে পরীক্ষা করুন
- যেকোনো পেজ লোড করে একবার Tab চাপুন। স্কিপ লিংকটি পরিষ্কার দেখা যাওয়া উচিত।
- Enter চাপুন। ফোকাস মূল কনটেন্টে যাবে, পরের Tab-এ কনটেন্টের প্রথম লিংক বা ঘরে পৌঁছাবে।
- স্ক্রিন রিডার (Windows-এ NVDA, Mac-এ VoiceOver) চালিয়ে ল্যান্ডমার্কের তালিকা খুলুন। একটি main এবং স্পষ্ট নামযুক্ত নেভিগেশন থাকা উচিত।
সাধারণ ভুল
- লিংকটি
display:noneদিয়ে লুকানো, তাই কখনো ফোকাস পায় না। - টার্গেট আইডি নেই, তাই লিংকে ক্লিক করলে কিছু হয় না।
- স্টিকি হেডার ফোকাস করা অংশ ঢেকে দেয়। টার্গেটে
scroll-margin-topদিন। - সবকিছু
divদিয়ে লেখা, তাই কোনো ল্যান্ডমার্কই নেই।
আরও বিস্তারিত কিবোর্ড পরীক্ষার জন্য আমাদের ইংরেজি গাইড দেখুন: The 10-minute keyboard test every WordPress site should pass। AccessIQ-এর মতো স্ক্যানার ল্যান্ডমার্ক ও ফোকাস স্টাইলের সমস্যা ধরতে সাহায্য করে।
প্রায়শ জিজ্ঞাসিত প্রশ্ন
স্কিপ লিংক কী?
পেজের একদম ওপরের একটি লিংক, যা সাধারণত লুকানো থাকে এবং কিবোর্ড ফোকাস পেলে দেখা যায়। এটি ফোকাস মূল কনটেন্টে সরিয়ে দেয়।
ওয়ার্ডপ্রেস কি নিজে থেকে স্কিপ লিংক যোগ করে?
একটি পেজে কয়টি main ল্যান্ডমার্ক থাকা উচিত?
একটি। একাধিক nav থাকলে প্রতিটির আলাদা লেবেল দিন, যেমন Primary ও Footer।
