অনেক ভিন্ন ব্যবহারকারী অ্যাপ্লিকেশন নেভিগেট করার জন্য কীবোর্ডের উপর নির্ভর করে—অস্থায়ী এবং স্থায়ী মোটর ত্রুটিযুক্ত ব্যবহারকারীদের থেকে যারা কীবোর্ড শর্টকাট ব্যবহার করে আরও দক্ষ এবং উৎপাদনশীল হতে। আপনার অ্যাপ্লিকেশনের জন্য একটি ভাল কীবোর্ড নেভিগেশন কৌশল থাকা প্রত্যেকের জন্য একটি ভাল অভিজ্ঞতা তৈরি করে।
ফোকাস এবং ট্যাব ক্রম
একটি নির্দিষ্ট মুহুর্তে, ফোকাস বলতে বোঝায় আপনার অ্যাপ্লিকেশনের কোন উপাদান (যেমন একটি ক্ষেত্র, চেকবক্স, বোতাম বা লিঙ্ক) বর্তমানে কীবোর্ড থেকে ইনপুট গ্রহণ করে। কীবোর্ড ইভেন্টগুলি পাওয়ার পাশাপাশি, ফোকাস করা উপাদানটি ক্লিপবোর্ড থেকে আটকানো সামগ্রীও পায়।
একটি পৃষ্ঠায় ফোকাস সরাতে, "ফরোয়ার্ড" নেভিগেট করতে TAB এবং "পিছন দিকে" নেভিগেট করতে SHIFT + TAB ব্যবহার করুন। বর্তমানে ফোকাস করা উপাদানটি প্রায়শই একটি ফোকাস রিং দ্বারা নির্দেশিত হয় এবং বিভিন্ন ব্রাউজার তাদের ফোকাস রিংকে ভিন্নভাবে স্টাইল করে। যে ক্রমানুসারে ফোকাস ইন্টারেক্টিভ উপাদানের মাধ্যমে সামনের দিকে এগিয়ে যায় তাকে ট্যাব অর্ডার বলে।
টেক্সট ফিল্ড, বোতাম এবং সিলেক্ট লিস্টের মত ইন্টারেক্টিভ এইচটিএমএল এলিমেন্টগুলি অস্পষ্টভাবে ফোকাসযোগ্য : এগুলি DOM- এ তাদের অবস্থানের উপর ভিত্তি করে স্বয়ংক্রিয়ভাবে ট্যাব অর্ডারে ঢোকানো হয়। এই ইন্টারেক্টিভ উপাদানগুলি বিল্ট-ইন কীবোর্ড ইভেন্ট হ্যান্ডলিং আছে। অনুচ্ছেদ এবং ডিভের মতো উপাদানগুলি অন্তর্নিহিতভাবে ফোকাসযোগ্য নয় কারণ ব্যবহারকারীদের সাধারণত তাদের সাথে যোগাযোগ করার প্রয়োজন হয় না।
একটি যৌক্তিক ট্যাব অর্ডার প্রয়োগ করা আপনার ব্যবহারকারীদের একটি মসৃণ কীবোর্ড নেভিগেশন অভিজ্ঞতা প্রদানের একটি গুরুত্বপূর্ণ অংশ। আপনার ট্যাব অর্ডার মূল্যায়ন এবং সামঞ্জস্য করার সময় দুটি প্রধান ধারণা মাথায় রাখতে হবে:
- DOM-এ উপাদানগুলিকে যৌক্তিক ক্রমে সাজান৷
- অফস্ক্রিন সামগ্রীর দৃশ্যমানতা সঠিকভাবে সেট করুন যা ফোকাস গ্রহণ করা উচিত নয়
DOM-এ উপাদানগুলিকে যৌক্তিক ক্রমে সাজান৷
আপনার অ্যাপ্লিকেশনের ট্যাব অর্ডার যৌক্তিক কিনা তা পরীক্ষা করতে, আপনার পৃষ্ঠার মাধ্যমে ট্যাব করার চেষ্টা করুন। সাধারণভাবে, ফোকাস পড়ার ক্রম অনুসরণ করা উচিত, বাম থেকে ডানে, আপনার পৃষ্ঠার উপরে থেকে নীচের দিকে সরানো।
যদি ফোকাস অর্ডারটি ভুল বলে মনে হয়, তাহলে ট্যাব অর্ডারটিকে আরও স্বাভাবিক করতে আপনার DOM-এর উপাদানগুলিকে পুনর্বিন্যাস করা উচিত৷ আপনি যদি স্ক্রিনে আগে দৃশ্যমানভাবে কিছু দেখাতে চান তবে এটিকে আগে DOM-এ সরান ।
একটি লজিক্যাল ট্যাব অর্ডার বনাম একটি অযৌক্তিক ট্যাব অর্ডারের অভিজ্ঞতা পেতে নীচের দুটি সেট বোতামের মাধ্যমে ট্যাব করার চেষ্টা করুন:
লজিক্যাল ট্যাব অর্ডার
অযৌক্তিক ট্যাব অর্ডার
এই দুটি উদাহরণের জন্য কোড নীচে তুলনা করা হয়:
লজিক্যাল ট্যাব অর্ডার
<button>Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
অযৌক্তিক ট্যাব অর্ডার
<button style="float: right">Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
একটি অযৌক্তিক ট্যাব অর্ডার তৈরি এড়াতে CSS ব্যবহার করে উপাদানগুলির ভিজ্যুয়াল অবস্থান পরিবর্তন করার সময় সতর্কতা অবলম্বন করুন৷ উপরের অযৌক্তিক ট্যাব ক্রমটি ঠিক করতে, ভাসমান "কিউই" বোতামটি সরান যাতে এটি DOM-এ "নারকেল" বোতামের পরে আসে এবং ইনলাইন শৈলীটি সরান৷
অফস্ক্রিন সামগ্রীর দৃশ্যমানতা সঠিকভাবে সেট করুন
কখনও কখনও অফস্ক্রিন ইন্টারেক্টিভ উপাদানগুলি DOM-এ থাকা প্রয়োজন কিন্তু আপনার ট্যাব ক্রমানুসারে থাকা উচিত নয়৷ উদাহরণস্বরূপ, যদি আপনার কাছে একটি প্রতিক্রিয়াশীল সাইড-নেভি থাকে যা আপনি একটি বোতামে ক্লিক করলে খোলে, ব্যবহারকারীর সাইড-নেভি বন্ধ হয়ে গেলে ফোকাস করতে সক্ষম হবে না।
একটি নির্দিষ্ট ইন্টারেক্টিভ উপাদানকে ফোকাস পেতে বাধা দিতে, আপনাকে নিম্নলিখিত CSS বৈশিষ্ট্যগুলির মধ্যে একটি উপাদান দিতে হবে:
-
display: none -
visibility: hidden
উপাদানটিকে ট্যাব অর্ডারে আবার যোগ করতে, উদাহরণস্বরূপ, যখন সাইড-নেভি খোলা হয়, উপরের CSS বৈশিষ্ট্যগুলি যথাক্রমে এর সাথে প্রতিস্থাপন করুন:
-
display: block -
visibility: visible
পরবর্তী পদক্ষেপ
যে ব্যবহারকারীরা তাদের কম্পিউটার প্রায় সম্পূর্ণভাবে কীবোর্ড বা অন্য কোনো ইনপুট ডিভাইস দিয়ে পরিচালনা করেন, তাদের জন্য একটি লজিক্যাল ট্যাব অর্ডার আপনার অ্যাপ্লিকেশানকে অ্যাক্সেসযোগ্য এবং ব্যবহারযোগ্য করার জন্য অপরিহার্য। আপনার ট্যাব অর্ডার চেক করার জন্য একটি ভাল অভ্যাস হিসাবে, প্রতিটি প্রকাশের আগে আপনার অ্যাপ্লিকেশনের মাধ্যমে ট্যাব করার চেষ্টা করুন।