ডিফল্ট 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 ব্যবহার করে স্ক্রিনে উপাদানগুলির ভিজ্যুয়াল অবস্থান পরিবর্তন করার সময় সতর্ক থাকুন। এটি কীবোর্ডের উপর নির্ভরশীল ব্যবহারকারীদের বিভ্রান্তিকর, আপাতদৃষ্টিতে এলোমেলোভাবে, ট্যাব অর্ডারকে লাফিয়ে দিতে পারে। এই কারণে, ওয়েব AIM চেকলিস্ট বিভাগ 1.3.2 এ বলে যে পঠন এবং নেভিগেশন ক্রম, কোড অর্ডার দ্বারা নির্ধারিত, যৌক্তিক এবং স্বজ্ঞাত হওয়া উচিত।
একটি নিয়ম হিসাবে, আপনি ভুলবশত ট্যাব ক্রম বিশৃঙ্খল না করেছেন তা নিশ্চিত করতে প্রতিবার আপনার পৃষ্ঠাগুলির মাধ্যমে ট্যাব করার চেষ্টা করুন৷ এটি অবলম্বন করা একটি ভাল অভ্যাস, এবং এটির জন্য খুব বেশি পরিশ্রমের প্রয়োজন নেই।
অফস্ক্রিন সামগ্রী
আপনার যদি এমন সামগ্রী থাকে যা বর্তমানে প্রদর্শিত হয় না, তবুও DOM-এ থাকা প্রয়োজন, যেমন একটি প্রতিক্রিয়াশীল পার্শ্ব-নেভি? যখন আপনার কাছে এই ধরনের উপাদান থাকে যেগুলি স্ক্রীন বন্ধ থাকা অবস্থায় ফোকাস গ্রহণ করে, তখন মনে হতে পারে যে ফোকাসটি অদৃশ্য হয়ে যাচ্ছে এবং পৃষ্ঠার মাধ্যমে ব্যবহারকারীর ট্যাব হিসাবে পুনরায় প্রদর্শিত হচ্ছে - স্পষ্টতই একটি অবাঞ্ছিত প্রভাব৷ আদর্শভাবে, আমাদের উচিত প্যানেলটিকে ফোকাস করা থেকে বিরত রাখা উচিত যখন এটি স্ক্রীনের বাইরে থাকে এবং শুধুমাত্র যখন ব্যবহারকারী এটির সাথে ইন্টারঅ্যাক্ট করতে পারে তখনই এটিকে ফোকাস করার অনুমতি দেওয়া হয়।
কখনও কখনও ফোকাস কোথায় চলে গেছে তা বের করার জন্য আপনাকে কিছুটা গোয়েন্দা কাজ করতে হবে। আপনি কনসোল থেকে document.activeElement ব্যবহার করতে পারেন কোন উপাদান বর্তমানে ফোকাস করা হয়েছে।
একবার আপনি জানেন যে কোন অফ স্ক্রীন উপাদানটি ফোকাস করা হচ্ছে, আপনি এটি display: none বা visibility: hidden , এবং তারপর এটিকে display: block বা visibility: visible ৷
সাধারণভাবে, আমরা প্রতিটি প্রকাশের আগে বিকাশকারীদের তাদের সাইটের মাধ্যমে ট্যাব করতে উত্সাহিত করি যাতে ট্যাব অর্ডারটি অদৃশ্য হয়ে না যায় বা একটি যৌক্তিক ক্রম থেকে বেরিয়ে না যায়। যদি এটি হয়ে থাকে, তাহলে আপনার নিশ্চিত হওয়া উচিত যে আপনি display: none বা visibility: hidden , অথবা আপনি DOM-এ উপাদানগুলির শারীরিক অবস্থানগুলিকে পুনরায় সাজান যাতে তারা একটি যৌক্তিক ক্রমে থাকে৷