কীবোর্ড অ্যাক্সেস মৌলিক

Rob Dodson

অনেক ব্যবহারকারী অ্যাপ্লিকেশন নেভিগেট করার জন্য কীবোর্ডের উপর নির্ভর করেন—অস্থায়ী এবং স্থায়ী মোটর প্রতিবন্ধকতাযুক্ত ব্যবহারকারী থেকে শুরু করে আরও দক্ষ এবং উৎপাদনশীল হওয়ার জন্য কীবোর্ড শর্টকাট ব্যবহার করেন এমন ব্যবহারকারী পর্যন্ত। আপনার অ্যাপ্লিকেশনের জন্য একটি ভাল কীবোর্ড নেভিগেশন কৌশল থাকা সকলের জন্য একটি উন্নত অভিজ্ঞতা তৈরি করে।

ফোকাস এবং ট্যাব ক্রম

একটি নির্দিষ্ট মুহূর্তে, ফোকাস বলতে বোঝায় যে আপনার অ্যাপ্লিকেশনের কোন উপাদানটি সক্রিয়ভাবে কীবোর্ড থেকে ইনপুট গ্রহণ করছে, যেমন একটি ক্ষেত্র, চেকবক্স, বোতাম বা লিঙ্ক। কীবোর্ড ইভেন্ট ছাড়াও, ফোকাস করা উপাদানটি ক্লিপবোর্ড থেকে আটকানো সামগ্রীও পায়।

কোনও পৃষ্ঠায় ফোকাস সরাতে, "ফরওয়ার্ড" নেভিগেট করতে TAB এবং "ব্যাকওয়ার্ড" নেভিগেট করতে SHIFT + TAB ব্যবহার করুন। ফোকাসড এলিমেন্টটি প্রায়শই একটি ফোকাস রিং দ্বারা নির্দেশিত হয় এবং বিভিন্ন ব্রাউজার তাদের ফোকাস রিংগুলিকে আলাদাভাবে স্টাইল করে। ইন্টারেক্টিভ এলিমেন্টগুলির মাধ্যমে ফোকাস যে ক্রমে এগিয়ে এবং পিছনে যায় তাকে ট্যাব অর্ডার বলা হয়।

টেক্সট ফিল্ড, বোতাম এবং সিলেক্ট লিস্টের মতো ইন্টারেক্টিভ HTML উপাদানগুলি পরোক্ষভাবে ফোকাসযোগ্য : DOM- এ তাদের অবস্থানের উপর ভিত্তি করে এগুলি স্বয়ংক্রিয়ভাবে ট্যাব অর্ডারে সন্নিবেশিত হয়। এই ইন্টারেক্টিভ উপাদানগুলিতে অন্তর্নির্মিত কীবোর্ড ইভেন্ট হ্যান্ডলিংও রয়েছে। অনুচ্ছেদ এবং divs-এর মতো উপাদানগুলি পরোক্ষভাবে ফোকাসযোগ্য নয় কারণ ব্যবহারকারীদের সাধারণত তাদের সাথে ইন্টারঅ্যাক্ট করার প্রয়োজন হয় না।

আপনার ব্যবহারকারীদের একটি মসৃণ কীবোর্ড নেভিগেশন অভিজ্ঞতা প্রদানের জন্য একটি লজিক্যাল ট্যাব অর্ডার বাস্তবায়ন একটি গুরুত্বপূর্ণ অংশ। আপনার ট্যাব অর্ডার মূল্যায়ন এবং সামঞ্জস্য করার সময় দুটি প্রধান ধারণা মনে রাখা উচিত:

1. DOM-এর উপাদানগুলিকে যৌক্তিক ক্রমে সাজান
2. যে অফস্ক্রিন কন্টেন্ট ফোকাস পাবে না তার দৃশ্যমানতা সঠিকভাবে সেট করুন

DOM-এর উপাদানগুলিকে যৌক্তিক ক্রমে সাজান

আপনার অ্যাপ্লিকেশনের ট্যাব ক্রমটি যুক্তিসঙ্গত কিনা তা পরীক্ষা করার জন্য, আপনার পৃষ্ঠাটি ট্যাব করার চেষ্টা করুন। সাধারণভাবে, ফোকাসটি পড়ার ক্রম অনুসরণ করা উচিত, বাম থেকে ডানে, আপনার পৃষ্ঠার উপর থেকে নীচে সরানো।

যদি ফোকাস অর্ডারটি ভুল বলে মনে হয়, তাহলে ট্যাব অর্ডারটিকে আরও স্বাভাবিক করার জন্য DOM-এর উপাদানগুলিকে পুনর্বিন্যাস করা উচিত। আপনার সাইটের ভিজ্যুয়াল বিন্যাস পরিবর্তন করতে, CSS ব্যবহার করে এটিকে আগে দেখানোর জন্য স্টাইল করার পরিবর্তে DOM-এ এটিকে আগে সরান।

উদাহরণস্বরূপ:

<button style="float: right">Kiwi</button>
<button>Peach</button>
<button>Coconut</button>

<button>Peach</button>
<button>Coconut</button>
<button>Kiwi</button>

অযৌক্তিক ট্যাব অর্ডার তৈরি এড়াতে CSS ব্যবহার করে এলিমেন্টের ভিজ্যুয়াল অবস্থান পরিবর্তন করার সময় সতর্ক থাকুন। অযৌক্তিক ট্যাব অর্ডার ঠিক করার জন্য, আমরা Coconut-এর পরে ভাসমান "Kiwi" বোতামটি সরিয়েছি এবং ইনলাইন স্টাইলটি সরিয়েছি।

অফস্ক্রিন কন্টেন্টের দৃশ্যমানতা সঠিকভাবে সেট করুন

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

একটি নির্দিষ্ট ইন্টারেক্টিভ এলিমেন্ট যাতে ফোকাস না পায়, তার জন্য আপনাকে নিচের CSS প্রোপার্টিগুলির যেকোনো একটি দিতে হবে:

• display: none
• visibility: hidden

ট্যাব অর্ডারে এলিমেন্টটি আবার যোগ করতে, উদাহরণস্বরূপ, যখন নেভিগেশন খোলা থাকে, তখন এই CSS বৈশিষ্ট্যগুলি যথাক্রমে নিম্নলিখিত দিয়ে প্রতিস্থাপন করুন:

• display: block
• visibility: visible

পরবর্তী পদক্ষেপ

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