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

Rob Dodson

Alexandra Klepper

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

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

ট্যাবইন্ডেক্স কী?

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

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

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

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

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

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

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

আপনার সাইটে নেভিগেট করার জন্য 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 polyfill ব্যবহার করার কথা বিবেচনা করুন। পলিফিলটি একটি প্রস্তাবিত inert বৈশিষ্ট্যের আচরণকে অনুকরণ করে, যা সহায়ক প্রযুক্তি দ্বারা উপাদানগুলিকে নির্বাচন বা পড়া থেকে বাধা দেয়।

tabindex > 0 এড়িয়ে চলুন

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

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

Lighthouse এর সাহায্যে, আপনি tabindex > 0 দিয়ে উপাদান সনাক্ত করতে পারেন। অ্যাক্সেসিবিলিটি অডিট (Lighthouse > Options > Accessibility) চালান এবং "No element has a [tabindex] value greater than 0" অডিটের ফলাফলগুলি সন্ধান করুন।

"রোভিং tabindex " ব্যবহার করুন

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

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

যখন এটি ঘটে, তখন কম্পোনেন্টটি পূর্বে ফোকাস করা শিশুর 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 Authoring Practices 1.1 দেখতে পারেন। এই নির্দেশিকাটি সাধারণ UI প্যাটার্নগুলি তালিকাভুক্ত করে এবং আপনার কম্পোনেন্টগুলির কোন কীগুলি সাপোর্ট করা উচিত তা চিহ্নিত করে।