html - এইচটিএমএল tabindex বৈশিষ্ট্য কি?




(9)

এইচটিএমএল জন্য tabindex বৈশিষ্ট্য ব্যবহার করা হয় কি?


Answers

যখন ব্যবহারকারী ট্যাব বোতামটি টিপবেন তখন ব্যবহারকারীর ফর্মটি 1, 2, এবং 3 অনুসারে ফর্মের মাধ্যমে নেওয়া হবে, যেমন নীচের উদাহরণটিতে নির্দেশ করা হয়েছে।

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

Name: <input name="name" tabindex="1"  />
Age: <input name="age" tabindex="3"  />
Email: <input name="email" tabindex="2"  />

tabindex একটি বিশ্বব্যাপী বৈশিষ্ট্য যা দুটি জিনিসের জন্য দায়ী:

  1. এটি "ফোকাসযোগ্য" উপাদান এবং সেট করে
  2. এটা উপাদান "ফোকাসযোগ্য" করে তোলে

আমার মন দ্বিতীয় জিনিস এমনকি প্রথম গুরুত্বপূর্ণ। ডিফল্টরূপে ফোকাসযোগ্য এমন কয়েকটি উপাদান রয়েছে (উদাহরণস্বরূপ <a> এবং ফর্ম নিয়ন্ত্রণগুলি)। বিকাশকারীরা প্রায়শই ফোকাসযোগ্য উপাদানের (<div>, <span> ইত্যাদি) কিছু জাভাস্ক্রিপ্ট ইভেন্ট হ্যান্ডলার ('অনকেক্লিক') যুক্ত করে না। এবং আপনার ইন্টারফেসটিকে কেবল মাউস ইভেন্টগুলির জন্যই নয় তবে কীবোর্ড ইভেন্টগুলিতে (যেমন 'অনকিপ্রেস') প্রতিক্রিয়াশীল হওয়ার পাশাপাশি এমন উপাদানগুলি ফোকাসযোগ্য করে তুলছে। এবং শেষ ক্ষেত্রে যদি আপনি অর্ডারটি সেট করতে চান না তবে আপনার উপাদানটিকে এই সমস্ত উপাদানের উপর কেবল tabindex="0" ফোকাসযোগ্য ব্যবহার করুন:

<div tabindex="0"></div>

এছাড়াও যদি আপনি ট্যাব কীের মাধ্যমে এটি ফোকাসযোগ্য না চান তবে tabindex="-1" । উদাহরণস্বরূপ নিচের লিঙ্কটিতে ট্যাব কীগুলি ব্যবহার করার সময় ফোকাস করা হবে না।

<a href="#" tabindex="-1">Tab key cannot reach here!</a>

এটি ডিফল্ট ফর্ম উপাদান ফোকাস ন্যাভিগেশন ক্রম পরিবর্তন করতে ব্যবহার করা যেতে পারে।

তাই যদি আপনি পেয়েছেন:

text input A

text input B

submit button C

ট্যাব কী ব্যবহার করে আপনি A-> B-> C তে নেভিগেট করেন। Tabindex আপনি যে প্রবাহ পরিবর্তন করতে পারবেন।


এইচটিএমএল tabindex অ্যাট্রিবিউট কীবোর্ডের ন্যাভিগেশন দ্বারা tabindex কিনা তা নির্দেশ করার জন্য দায়ী। যখন ব্যবহারকারী ট্যাব কী চাপায় তখন ফোকাসটি এক উপাদান থেকে অন্য দিকে স্থানান্তরিত হয়। ট্যাবন্ডেক্স অ্যাট্রিবিউট ব্যবহার করে, ট্যাব অর্ডার প্রবাহটি স্থানান্তর করা হয়।


কন্ট্রোলের মাধ্যমে ট্যাবিং সাধারণত এইচটিএমএল কোড প্রদর্শিত হিসাবে sequentially ঘটবে।

ট্যাবিনডেক্স ব্যবহার করে, ট্যাবিনক্সটি ট্যাবিনডেক্স ক্রমবর্ধমান ক্রম অনুসারে সর্বোচ্চ ট্যাবিনডেক্সের সাথে নিয়ন্ত্রণে সর্বনিম্ন ট্যাবিনডেক্সের নিয়ন্ত্রণে প্রবাহিত হবে।


tabindex একটি ক্রম সংজ্ঞায়িত করার জন্য ব্যবহৃত হয় যা ব্যবহারকারীরা যখন পৃষ্ঠাটি নেভিগেট করতে ট্যাব কী ব্যবহার করে তখন অনুসরণ করে। ডিফল্টরূপে, প্রাকৃতিক ট্যাবিং ক্রম মার্কআপের উত্সের সাথে মিলবে।

ট্যাবিনেক্স সামগ্রী বৈশিষ্ট্যটি লেখকগুলিকে নিয়ন্ত্রণ করার অনুমতি দেয় কিনা একটি উপাদানটিকে ফোকাসযোগ্য বলে মনে করা হয় কিনা, এটি ক্রমিক ফোকাস নেভিগেশান ব্যবহার করে অ্যাক্সেসযোগ্য হওয়া উচিত কিনা এবং ক্রমিক ফোকাস নেভিগেশনের উদ্দেশ্যে উপাদানটির আপেক্ষিক ক্রম কী হওয়া উচিত। "ট্যাব ইন্ডেক্স" নামটি ফোকাসযোগ্য উপাদানের মাধ্যমে নেভিগেট করার জন্য "ট্যাব" কীটির সাধারণ ব্যবহার থেকে আসে। "ট্যাববিং" শব্দটি ফোকাসযোগ্য উপাদানের মাধ্যমে অগ্রসর হওয়ার নির্দেশ দেয় যা ক্রমশীয় ফোকাস নেভিগেশনের মাধ্যমে পৌঁছে যেতে পারে।
W3C সুপারিশ: HTML5
অনুচ্ছেদ 7.4.1 ক্রমিক ফোকাস নেভিগেশান এবং ট্যাবিনডেক্স বৈশিষ্ট্য

tabindex 0 বা কোনও ইতিবাচক সম্পূর্ণ সংখ্যা এবং ঊর্ধ্বগতি বৃদ্ধি করে শুরু হয়। মজিলা এবং IE এর পুরোনো সংস্করণগুলিতে এটি বন্ধ হওয়া মানটিকে সাধারণ বলে মনে করা সাধারণ, কারণ ট্যাবিনডেক্স 1 এ শুরু হবে, 2 এ চলে যাবে এবং কেবলমাত্র 2 পরে এটি 0 এবং তারপরে 3 হবে। tabindex জন্য সর্বাধিক পূর্ণসংখ্যা মান 32767 । যদি উপাদানগুলি একই tabindex তবে ট্যাবন্ডেক্স মার্কআপের উৎসের সাথে মিলবে। একটি নেতিবাচক মান ট্যাব সূচী থেকে উপাদানটি মুছে ফেলবে তাই এটি কখনই ফোকাস করা হবে না।

যদি কোনও উপাদানকে tabindex -1 বরাদ্দ করা হয় tabindex এটি উপাদানটি সরিয়ে দেবে এবং এটি ফোকাসযোগ্য হবে না তবে element.focus() ব্যবহার করে প্রোগ্রামটিতে উপাদানটিকে ফোকাস দেওয়া যেতে পারে।

যদি আপনি কোনও মান বা খালি মান সহ tabindex বৈশিষ্ট্যটি নির্দিষ্ট করেন tabindex এটি উপেক্ষা করা হবে।

যদি disabled বৈশিষ্ট্যটি এমন একটি উপাদানতে সেট থাকে যা tabindex তবে উপাদানটি উপেক্ষা করা হবে।

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

এইচটিএমএল 4 স্পিকে শুধুমাত্র নিচের উপাদানগুলি ট্যাবন্ডেক্স বৈশিষ্ট্যকে সমর্থন করে: anchor , area , button , input , object , select , এবং textarea । কিন্তু HTML5 অ্যাক্সেসটি অ্যাক্সেসযোগ্যতার সাথে, সমস্ত উপাদান tabindex বরাদ্দ করার অনুমতি দেয়।

-

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

<ul tabindex="-1">
  <li tabindex="1"></li>
  <li tabindex="2"></li>
  <li tabindex="3"></li>
</ul>

হিসাবে একই

<ul tabindex="-1">
  <li tabindex="1"></li>
  <li tabindex="1"></li>
  <li tabindex="1"></li>
</ul>

কারণ তারা সকলেই tabindex="1" বরাদ্দ tabindex="1" , তবুও তারা একই ক্রম অনুসরণ করবে, প্রথমটি প্রথম হবে এবং শেষটি শেষ হবে। এই একই ..

<div>
  <a></a>
  <a></a>
  <a></a>
</div>

কারণ ট্যাব ইন্ডেন্ডটিকে ডিফল্ট আচরণের ক্ষেত্রে স্পষ্টভাবে সংজ্ঞায়িত করার প্রয়োজন নেই। ডিফল্টরূপে একটি div ফোকাসযোগ্য হবে না, anchor ট্যাগ হবে।


সাধারণত, যখন কোনও ক্ষেত্রে ক্ষেত্র থেকে ক্ষেত্রের ট্যাবটি ব্যবহার করা হয় (ব্রাউজার যা ট্যাবিংয়ের অনুমতি দেয়, সমস্ত ব্রাউজারগুলি না করে) ট্যাবগুলি হ'ল ক্ষেত্রগুলি HTML কোডে প্রদর্শিত হয়।

তবে, কখনও কখনও আপনি ট্যাব ক্রম একটু ভিন্ন প্রবাহ চান। যে ক্ষেত্রে, আপনি TABINDEX ব্যবহার করে ক্ষেত্র সংখ্যা করতে পারেন। ট্যাবগুলি সর্বনিম্ন TABINDEX থেকে সর্বোচ্চ পর্যন্ত প্রবাহিত হয়।

এই সম্পর্কে আরো তথ্য এখানে পাওয়া যাবে w3

আরেকটি ভাল চিত্রণ here পাওয়া here









html tabindex