ট্যাবিনডেক্স ব্যবহার করে

Dave Gash

Meggin Kearney

Rob Dodson

Alexandra Klepper

শব্দার্থিক HTML উপাদানগুলির DOM অবস্থান দ্বারা প্রদত্ত ডিফল্ট ট্যাব ক্রম সুবিধাজনক, তবে আপনাকে ট্যাব ক্রম পরিবর্তন করার প্রয়োজন হতে পারে। HTML এ উপাদানগুলি সরানো আদর্শ, কিন্তু সম্ভব নাও হতে পারে৷ এই ক্ষেত্রে, আপনি একটি উপাদানের ট্যাব অবস্থান স্পষ্টভাবে সেট করতে tabindex HTML বৈশিষ্ট্য ব্যবহার করতে পারেন।

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

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

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

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

এটি বিশেষ করে হেডার, ছবি বা নিবন্ধ শিরোনামের মতো নন-ইনপুট উপাদানগুলির জন্য সত্য। যখন সম্ভব, তখন আপনার সোর্স কোড সাজানো ভাল যাতে DOM সিকোয়েন্স একটি লজিক্যাল ট্যাব অর্ডার প্রদান করে। আপনি যদি tabindex ব্যবহার করেন তবে এটিকে বোতাম, ট্যাব, ড্রপডাউন এবং পাঠ্য ক্ষেত্রের মতো কাস্টম ইন্টারেক্টিভ নিয়ন্ত্রণে সীমাবদ্ধ করুন; অর্থাৎ, ব্যবহারকারী ইনপুট প্রদানের আশা করতে পারে এমন উপাদান।

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

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

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

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

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

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

উদাহরণস্বরূপ, select উপাদানটি মৌলিক ফোকাস পেতে পারে, কিন্তু একবার সেখানে গেলে, আপনি অতিরিক্ত নির্বাচনযোগ্য বিকল্পগুলি প্রকাশ করতে তীর কীগুলি ব্যবহার করতে পারেন। আপনি যদি একটি কাস্টম select উপাদান তৈরি করেন, তাহলে সেই আচরণের প্রতিলিপি করা গুরুত্বপূর্ণ, যাতে কীবোর্ড ব্যবহারকারীরা এখনও আপনার নিয়ন্ত্রণের সাথে যোগাযোগ করতে পারে।

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

সম্ভবত আপনি কাস্টম উপাদানগুলিতে কাজ করছেন যেগুলি রেডিও বোতামগুলির একটি সেটের সাথে সাদৃশ্যপূর্ণ, তবে আপনার চেহারা এবং আচরণের সাথে অনন্য।

<radio-group>
    <radio-button>Water</radio-button>
    <radio-button>Coffee</radio-button>
    <radio-button>Tea</radio-button>
    <radio-button>Cola</radio-button>
    <radio-button>Ginger Ale</radio-button>
</radio-group>

তাদের কী কীবোর্ড সমর্থন প্রয়োজন তা নির্ধারণ করতে, ARIA অথরিং প্র্যাকটিস গাইড দেখুন। বিভাগ 2 রেডিও গ্রুপের বৈশিষ্ট্য সারণী সহ ডিজাইন প্যাটার্নের একটি তালিকা রয়েছে, বিদ্যমান উপাদান যা আপনার নতুন উপাদানের সাথে সবচেয়ে ঘনিষ্ঠভাবে মেলে।

একটি সাধারণ কীবোর্ড আচরণ যা সমর্থিত হওয়া উচিত তা হল আপ/ডাউন/বাম/ডান তীর কী। এই আচরণটি নতুন উপাদানে যোগ করতে, আমরা রোভিং ট্যাবিনডেক্স নামে একটি কৌশল ব্যবহার করি।

রোভিং ট্যাবিনডেক্স বর্তমান-সক্রিয় শিশু ব্যতীত সকল শিশুর জন্য tabindex -1 সেট করে কাজ করে।

<radio-group>
  <radio-button tabindex="0">Water</radio-button>
  <radio-button tabindex="-1">Coffee</radio-button>
  <radio-button tabindex="-1">Tea</radio-button>
  <radio-button tabindex="-1">Cola</radio-button>
  <radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>

ব্যবহারকারী কোন কী টিপে তা নির্ধারণ করতে উপাদানটি একটি কীবোর্ড ইভেন্ট লিসেনার ব্যবহার করে; যখন এটি ঘটে, এটি পূর্বে ফোকাস করা শিশুর tabindex -1 এ সেট করে, ফোকাস করা শিশুর tabindex 0 এ সেট করে এবং এটিতে ফোকাস পদ্ধতিকে কল করে।

<radio-group>
    <!-- Assuming the user pressed the down arrow, we'll focus the next available child -->
    <radio-button tabindex="-1">Water</radio-button>
    <radio-button tabindex="0">Coffee</radio-button> // call .focus() on this element
    <radio-button tabindex="-1">Tea</radio-button>
    <radio-button tabindex="-1">Cola</radio-button>
    <radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>

ব্যবহারকারী যখন শেষ (বা প্রথম, তারা যে দিকে ফোকাস নিয়ে যাচ্ছেন তার উপর নির্ভর করে) শিশুর কাছে পৌঁছায়, ফোকাস লুপগুলি প্রথম (বা শেষ) শিশুর কাছে ফিরে আসে।

নিম্নলিখিত উদাহরণ চেষ্টা করুন. ট্যাবিনডেক্স এক রেডিও থেকে অন্য রেডিওতে সরানো পর্যবেক্ষণ করতে DevTools-এ উপাদানটি পরিদর্শন করুন।

মডেল এবং কীবোর্ড ফাঁদ

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

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

এই নিয়মের ব্যতিক্রম হল মডেল। যাইহোক, আপনি এখনও একটি মডেল তৈরি করার সময় tabindex ব্যবহার এড়াতে হবে। inert এর মাধ্যমে, আপনি নিশ্চিত করতে পারেন যে ব্যবহারকারীরা ভুলবশত কোনো উপাদানের (একটি ইচ্ছাকৃত কীবোর্ড ফাঁদ) সাথে যোগাযোগ করতে পারে না। <dialog> উপাদানটি ব্যবহার করুন, যা ডিফল্টরূপে নিষ্ক্রিয়, মডেলের বাইরে ক্লিক এবং ট্যাব ব্লক করার সময় ব্যবহারকারীদের জন্য একটি মডেল তৈরি করতে। এটি ব্যবহারকারীকে একটি প্রয়োজনীয় নির্বাচনের উপর ফোকাস করতে দেয়।