ডিফল্ট DOM অর্ডারের গুরুত্ব
নেটিভ এলিমেন্ট নিয়ে কাজ করা হল ফোকাস বিহেভিয়ার সম্পর্কে জানার একটি দারুণ উপায় কারণ DOM-এ তাদের পজিশনের উপর ভিত্তি করে সেগুলি অটোমেটিক ট্যাব অর্ডারে যোগ করা হয়।
যেমন, DOM-এ আপনার কাছে তিনটি বোতাম এলিমেন্ট থাকতে পারে, একটির পর আরেকটি। Tab প্রেস করলে প্রতিটি বোতাম ক্রমানুসারে ফোকাস করা হয়। ফোকাস নেভিগেশন শুরুর পয়েন্ট সরাতে নিচের কোড ব্লক ক্লিক করে দেখুন, তারপর বোতামের মাধ্যমে ফোকাস সরাতে Tab প্রেস করুন।
<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>
তবে, এটি মনে রাখা গুরুত্বপূর্ণ যে, CSS ব্যবহার করে, DOM-এ একটি ক্রমে জিনিসগুলি
থাকা সম্ভব কিন্তু স্ক্রিনে অন্য ক্রমে দেখা যায়। যেমন, আপনি যদি একটি বোতাম ডানদিকে সরানোর জন্য float-এর মতো CSS প্রপার্টি ব্যবহার করেন,
তাহলে বোতামগুলি স্ক্রিনে অন্য ক্রমে দেখা যাবে। কিন্তু, DOM-এ তাদের ক্রম একই থাকে, তাই তাদের ট্যাব ক্রমও একই থাকে। ব্যবহারকারী পৃষ্ঠার মধ্যে ট্যাব ব্যবহার করে
নেভিগেট করলে, বোতামগুলি একটি নন-ইনটিউটিভ ক্রমে ফোকাস পায়। ফোকাস নেভিগেশন শুরুর পয়েন্ট সরাতে নিচের
কোড ব্লকে ক্লিক করে দেখুন, তারপর বোতামের মাধ্যমে ফোকাস সরাতে Tab
প্রেস করুন।
<button style="float: right">I Should</button>
<button>Be Focused</button>
<button>Last!</button>
CSS ব্যবহার করে স্ক্রিনে এলিমেন্টের ভিজ্যুয়াল পজিশন পরিবর্তন করার সময় সতর্ক থাকুন। এর ফলে ট্যাব অর্ডার এলোমেলোভাবে জাম্প করতে পারে, যা কীবোর্ড ব্যবহারকারীদের বিভ্রান্ত করতে পারে। এই কারণে, Web AIM চেকলিস্টে ১.৩.২ বিভাগে বলা হয়েছে যে কোডের ক্রম অনুযায়ী নির্ধারিত রিডিং ও নেভিগেশনের ক্রম যৌক্তিক ও স্বজ্ঞাত হতে হবে।
নিয়ম হিসেবে, আপনার পৃষ্ঠাগুলি প্রায়শই ট্যাব করে দেখার চেষ্টা করুন যাতে আপনি নিশ্চিত হতে পারেন যে আপনি ভুলবশত ট্যাবের ক্রম এলোমেলো করে ফেলেননি। এটি একটি ভালো অভ্যাস এবং এটি করতে খুব বেশি পরিশ্রম করতে হয় না।
অফস্ক্রিন কন্টেন্ট
আপনার কাছে এমন কন্টেন্ট থাকলে কী হবে যা বর্তমানে দেখানো হচ্ছে না, তবুও DOM-এ থাকা প্রয়োজন, যেমন একটি রেসপন্সিভ সাইড-ন্যাভ? আপনার কাছে এই ধরনের এলিমেন্ট থাকলে, সেগুলি স্ক্রিনে না থাকলেও ফোকাস পায়, এর ফলে মনে হতে পারে যে ব্যবহারকারী পৃষ্ঠার মধ্যে ট্যাব করার সময় ফোকাস উধাও হয়ে যাচ্ছে এবং আবার ফিরে আসছে — এটি স্পষ্টতই একটি অবাঞ্ছিত প্রভাব। সাধারণত, প্যানেল অফ-স্ক্রিন থাকলে, আমরা সেটির উপর ফোকাস করা আটকাই এবং ব্যবহারকারী সেটির সাথে ইন্টার্যাক্ট করতে পারলে তবেই সেটির উপর ফোকাস করার অনুমতি দিই।
কখনও কখনও আপনাকে একটু গোয়েন্দাগিরি করতে হবে যাতে আপনি বুঝতে পারেন যে ফোকাস কোথায়
গেছে। বর্তমানে কোন এলিমেন্ট ফোকাস করা আছে তা জানতে আপনি কনসোল থেকে document.activeElement ব্যবহার করতে পারেন।
কোন অফ-স্ক্রিন এলিমেন্ট ফোকাস করা হচ্ছে তা আপনি জানতে পারলে, এটি display: none বা visibility: hidden-এ সেট করতে পারবেন এবং তারপরে ব্যবহারকারীকে দেখানোর আগে এটি আবার display:
block বা visibility: visible-এ সেট করতে পারবেন।
সাধারণত, আমরা ডেভেলপারদের প্রতিবার প্রকাশ করার আগে তাদের সাইটের মাধ্যমে ট্যাব করতে উৎসাহিত করি যাতে দেখা যায় যে ট্যাব অর্ডারটি অদৃশ্য হয়ে যায় না বা যৌক্তিক ক্রম থেকে বেরিয়ে যায় না। যদি তা হয়, তাহলে আপনাকে নিশ্চিত করতে হবে যে আপনি display: none বা visibility: hidden ব্যবহার করে
অফস্ক্রিন কন্টেন্ট যথাযথভাবে লুকাচ্ছেন অথবা
DOM-এ এলিমেন্টের ফিজিক্যাল পজিশন এমনভাবে সাজাচ্ছেন যাতে সেগুলি লজিক্যাল
ক্রমে থাকে।