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

Rob Dodson

Alexandra Klepper

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

শুধুমাত্র ইন্টারেক্টিভ বিষয়বস্তু tabindex যোগ করুন. এমনকি যদি বিষয়বস্তু গুরুত্বপূর্ণ হয়, যেমন একটি মূল চিত্র, স্ক্রিন রিডার ব্যবহারকারীরা ফোকাস যোগ না করেই তা বুঝতে পারে।

ট্যাবিনডেক্স কি?

বিল্ট-ইন এলিমেন্টের দ্বারা প্রদত্ত ডিফল্ট ট্যাব ক্রম পরিবর্তন করার প্রয়োজন হলে, আপনি একটি উপাদানের ট্যাব অবস্থান স্পষ্টভাবে সেট করতে tabindex HTML অ্যাট্রিবিউট ব্যবহার করতে পারেন।

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

tabindex="0" : প্রাকৃতিক ট্যাব অর্ডারে একটি উপাদান সন্নিবেশ করায়। Tab টিপে উপাদানটিকে ফোকাস করা যায়, এবং উপাদানটিকে focus() পদ্ধতিতে কল করে ফোকাস করা যায়।

tabindex="-1" : প্রাকৃতিক ট্যাব ক্রম থেকে একটি উপাদানকে সরিয়ে দেয়, কিন্তু উপাদানটিকে এখনও focus() পদ্ধতিতে কল করে ফোকাস করা যেতে পারে

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

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

লাইটহাউসের মতো একটি টুল স্বয়ংক্রিয়ভাবে কিছু অ্যাক্সেসিবিলিটি সমস্যা সনাক্ত করতে দুর্দান্ত, তবে কিছু পরীক্ষা এখনও একজন মানুষের দ্বারা ম্যানুয়ালি করা উচিত।

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

পৃষ্ঠা স্তরে ফোকাস পরিচালনা করুন

কখনও কখনও, tabindex নির্বিঘ্ন ব্যবহারকারীর অভিজ্ঞতা তৈরি করতে সাহায্য করে। উদাহরণস্বরূপ, আপনি যদি বিভিন্ন বিষয়বস্তু বিভাগ সহ একটি শক্তিশালী একক পৃষ্ঠা তৈরি করেন, যেখানে পৃষ্ঠা লোডের বিভিন্ন পয়েন্টে কিছু বিষয়বস্তু লুকানো থাকে। এর অর্থ হতে পারে নেভিগেশন লিঙ্কগুলি একটি পৃষ্ঠা রিফ্রেশ ছাড়াই দৃশ্যমান সামগ্রী পরিবর্তন করে৷

এই ক্ষেত্রে, নির্বাচিত বিষয়বস্তু এলাকা চিহ্নিত করুন এবং এটিকে -1 এর একটি tabindex দিন এবং এর focus পদ্ধতিতে কল করুন। এটি নিশ্চিত করে যে বিষয়বস্তু প্রাকৃতিক ট্যাব ক্রমে প্রদর্শিত হবে না। এই কৌশল, যাকে ম্যানেজিং ফোকাস বলা হয়, ব্যবহারকারীর অনুভূত প্রসঙ্গটিকে সাইটের ভিজ্যুয়াল কন্টেন্টের সাথে সিঙ্ক করে রাখে।

উপাদানগুলিতে ফোকাস পরিচালনা করুন

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

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

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

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 সহ উপাদানগুলি সনাক্ত করতে পারেন৷ অ্যাক্সেসিবিলিটি অডিট চালান (বাতিঘর > বিকল্পগুলি > অ্যাক্সেসিবিলিটি) এবং "কোন উপাদানের [tabindex] মান 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>

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

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