Tabindex সঙ্গে ফোকাস নিয়ন্ত্রণ

রব ডডসন

স্ট্যান্ডার্ড এইচটিএমএল উপাদান যেমন <button> বা <input> বিনামূল্যের জন্য বিল্ট ইন কীবোর্ড অ্যাক্সেসযোগ্যতা রয়েছে। আপনি যদি কাস্টম ইন্টারেক্টিভ উপাদান তৈরি করছেন, তবে, tabindex অ্যাট্রিবিউট ব্যবহার করে নিশ্চিত করুন যে সেগুলি কীবোর্ড অ্যাক্সেসযোগ্য।

আপনার নিয়ন্ত্রণগুলি কীবোর্ড অ্যাক্সেসযোগ্য কিনা তা পরীক্ষা করুন

লাইটহাউসের মতো একটি সরঞ্জাম নির্দিষ্ট অ্যাক্সেসিবিলিটি সমস্যা সনাক্ত করতে দুর্দান্ত, তবে কিছু জিনিস শুধুমাত্র একজন মানুষ দ্বারা পরীক্ষা করা যেতে পারে।

আপনার সাইটে নেভিগেট করতে Tab কী টিপে চেষ্টা করুন৷ আপনি কি পৃষ্ঠার সমস্ত ইন্টারেক্টিভ নিয়ন্ত্রণে পৌঁছাতে সক্ষম? যদি তা না হয়, তাহলে সেই নিয়ন্ত্রণগুলির ফোকাসযোগ্যতা উন্নত করতে আপনাকে tabindex ব্যবহার করতে হতে পারে।

ট্যাব অর্ডারে একটি উপাদান সন্নিবেশ করান

tabindex="0" ব্যবহার করে প্রাকৃতিক ট্যাব অর্ডারে একটি উপাদান সন্নিবেশ করান। উদাহরণ স্বরূপ:

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

একটি উপাদান ফোকাস করতে, Tab কী টিপুন বা উপাদানটির focus() পদ্ধতিতে কল করুন।

ট্যাব অর্ডার থেকে একটি উপাদান সরান

tabindex="-1" ব্যবহার করে একটি উপাদান সরান। উদাহরণ স্বরূপ:

<button tabindex="-1">Can't reach me with the TAB key!</button>

এটি প্রাকৃতিক ট্যাব ক্রম থেকে একটি উপাদানকে সরিয়ে দেয়, তবে উপাদানটিকে এখনও focus() পদ্ধতিতে কল করে ফোকাস করা যেতে পারে।

মনে রাখবেন যে একটি উপাদানে tabindex="-1" প্রয়োগ করা তার শিশুদের প্রভাবিত করে না; যদি তারা স্বাভাবিকভাবে ট্যাব অর্ডারে থাকে বা tabindex মানের কারণে, তারা ট্যাব ক্রমেই থাকবে। ট্যাব ক্রম থেকে একটি উপাদান এবং তার সমস্ত বাচ্চাদের অপসারণ করতে, WICG এর inert পলিফিল ব্যবহার করার কথা বিবেচনা করুন। পলিফিল একটি প্রস্তাবিত inert বৈশিষ্ট্যের আচরণকে অনুকরণ করে, যা উপাদানগুলিকে সহায়ক প্রযুক্তি দ্বারা নির্বাচিত বা পড়তে বাধা দেয়।

tabindex > 0

0-এর বেশি যেকোনো tabindex উপাদানটিকে প্রাকৃতিক ট্যাব অর্ডারের সামনে নিয়ে যায়। যদি 0-এর বেশি tabindex সহ একাধিক উপাদান থাকে, তাহলে ট্যাব অর্ডারটি শূন্যের চেয়ে সর্বনিম্ন মান থেকে শুরু হয় এবং তার উপরে চলে যায়।

0-এর বেশি tabindex ব্যবহার করা একটি অ্যান্টি-প্যাটার্ন হিসাবে বিবেচিত হয় কারণ স্ক্রিন রিডাররা পৃষ্ঠাটি DOM ক্রমে নেভিগেট করে, ট্যাব ক্রম নয়। আপনার যদি ট্যাব অর্ডারে শীঘ্রই আসার জন্য একটি উপাদানের প্রয়োজন হয়, তাহলে এটিকে DOM-এর একটি আগের জায়গায় সরানো উচিত।

লাইটহাউস একটি tabindex > 0 দিয়ে উপাদানগুলি সনাক্ত করা সহজ করে তোলে। অ্যাক্সেসিবিলিটি অডিট চালান (বাতিঘর > বিকল্প > অ্যাক্সেসিবিলিটি) এবং "কোনও উপাদানের [ট্যাবিনডেক্স] মান 0-এর বেশি নেই" অডিটের ফলাফল দেখুন।

"রোভিং tabindex " দিয়ে অ্যাক্সেসযোগ্য উপাদান তৈরি করুন

আপনি যদি একটি জটিল উপাদান তৈরি করছেন, তাহলে আপনাকে ফোকাসের বাইরে অতিরিক্ত কীবোর্ড সমর্থন যোগ করতে হতে পারে। অন্তর্নির্মিত select উপাদান বিবেচনা করুন. এটি ফোকাসযোগ্য এবং আপনি অতিরিক্ত কার্যকারিতা (নির্বাচনযোগ্য বিকল্প) প্রকাশ করতে তীর কী ব্যবহার করতে পারেন।

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

যখন এটি ঘটে, কম্পোনেন্টটি পূর্বে ফোকাস করা শিশুর tabindex -1 এ সেট করে, ফোকাস করা শিশুর tabindex 0 এ সেট করে এবং এতে focus() পদ্ধতিতে কল করে।

আগে

<div role="toolbar">
  <button tabindex="-1">Undo</button>
  <button tabindex="0">Redo</button>
  <button tabindex="-1">Cut</button>
</div>

পরে

<div role="toolbar">
  <button tabindex="-1">Undo</button>
  <button tabindex="-1">Redo</button>
  <button tabindex="0">Cut</button>
</div>

TODO: DevSite - চিন্তা করুন এবং মূল্যায়ন পরীক্ষা করুন

কীবোর্ড অ্যাক্সেস রেসিপি

আপনার কাস্টম উপাদানগুলির কীবোর্ড সমর্থনের কোন স্তরের প্রয়োজন হতে পারে তা আপনি যদি নিশ্চিত না হন তবে আপনি ARIA অথরিং প্র্যাকটিস 1.1 উল্লেখ করতে পারেন। এই সহজ নির্দেশিকাটি সাধারণ UI প্যাটার্নগুলি তালিকাভুক্ত করে এবং আপনার উপাদানগুলির কোন কীগুলি সমর্থন করা উচিত তা সনাক্ত করে৷