ইন্টার‍্যাক্টিভ কন্ট্রোল কীবোর্ড ফোকাস করা যায়

প্রকাশিত: ২ মে, ২০১৯

সব কাস্টম কন্ট্রোল কীবোর্ড ফোকাসযোগ্য কিনা তা ম্যানুয়ালি চেক করুন এবং ফোকাস ইন্ডিকেটর দেখান। যে ক্রমে এলিমেন্ট ফোকাস করা হয়, তা DOM ক্রম মেনে চলার উদ্দেশ্যে করা উচিত। কোন এলিমেন্টে ফোকাস দেওয়া উচিত সেই ব্যাপারে নিশ্চিত না হলে, web.dev-এ অ্যাক্সেসিবিলিটি কোর্স জানুন-এ ফোকাস মডিউল দেখুন।

ম্যানুয়ালি কীভাবে পরীক্ষা করতে হয়

কাস্টম কন্ট্রোল ফোকাস করা যায় কিনা এবং ফোকাস ইন্ডিকেটর দেখা যায় কিনা তা পরীক্ষা করতে, আপনার সাইটে ট্যাব করে শুরু করুন। কন্ট্রোলগুলির মধ্যে যেতে TAB (বা SHIFT + TAB) ব্যবহার করুন এবং তীরচিহ্নযুক্ত কী ও ENTER এবং SPACE ব্যবহার করে সেগুলির ভ্যালু পরিবর্তন করুন (কীবোর্ড অ্যাক্সেস সংক্রান্ত প্রাথমিক বিষয়ও দেখুন):

আপনি কি পৃষ্ঠার সব ইন্টার‍্যাক্টিভ কন্ট্রোলে পৌঁছাতে পারছেন? প্রতিটি ইন্টার‍্যাক্টিভ কন্ট্রোলে কি ফোকাস ইন্ডিকেটর আছে?

কীভাবে সমাধান করবেন

আপনি যদি কোনও পৃষ্ঠার সমস্ত এলিমেন্ট ট্যাব করে যেতে না পারেন, তাহলে সেইসব কন্ট্রোলের ফোকাস করার ক্ষমতা উন্নত করতে আপনাকে tabindex ব্যবহার করতে হতে পারে।

কাস্টম কন্ট্রোলকে ফোকাস করার উপযুক্ত করে তুলতে, tabindex="0" ব্যবহার করে কাস্টম কন্ট্রোল এলিমেন্টকে স্বাভাবিক ট্যাব অর্ডারে ইনসার্ট করুন (ট্যাবইনডেক্স সহ কন্ট্রোল ফোকাস বিকল্পও দেখুন)। যেমন:

<div tabindex="0">Focus me with the TAB key</div>

এছাড়াও, কাস্টম কন্ট্রোল এলিমেন্টে আপনাকে উপযুক্ত ARIA ভূমিকা যোগ করতে হতে পারে। কাস্টম কন্ট্রোলে ARIA ভূমিকা আছে দেখুন।

আপনি ফোকাস ইন্ডিকেটর দেখতে না পেলে, সবসময় ফোকাস ইন্ডিকেটর দেখাতে :focus ব্যবহার করার কথা বিবেচনা করুন। আপনি ট্যাব করার জন্য মাউস বা কীবোর্ড যাই ব্যবহার করুন না কেন, বোতামের ফোকাস ইন্ডিকেটর সবসময় একই রকম দেখতে হয় (স্টাইল ফোকাসও দেখুন)।

এটি কেন গুরুত্বপূর্ণ

যেসব ব্যবহারকারী মাউস ব্যবহার করতে পারেন না বা করতে চান না, তাদের জন্য স্ক্রিনের সব কন্টেন্ট অ্যাক্সেস করার প্রধান উপায় হল কীবোর্ড নেভিগেশন। ভাল কীবোর্ড অভিজ্ঞতা যৌক্তিক ট্যাব অর্ডার এবং আলাদা করে শনাক্ত করা যায় এমন ফোকাস স্টাইলের উপর নির্ভর করে। কিবোর্ড ব্যবহারকারী যদি ফোকাসে থাকা আইটেম দেখতে বা সেটির ব্যাপারে জানতে না পারেন, তাহলে তিনি পৃষ্ঠার সাথে ইন্টার‍্যাক্ট করতে পারবেন না।

অ্যাক্সেসিবিলিটি সম্পর্কে জানুন থেকে অ্যাক্সেসিবিলিটি সম্পর্কে আরও জানুন।

রিসোর্স