Tabindex এর সাথে DOM অর্ডার পরিবর্তন করা হচ্ছে
স্থানীয় উপাদানগুলির DOM অবস্থান দ্বারা প্রদত্ত ডিফল্ট ট্যাব অর্ডার সুবিধাজনক, কিন্তু এমন সময় আছে যখন আপনি ট্যাব ক্রম সংশোধন করতে চাইবেন, এবং HTML এ শারীরিকভাবে চলমান উপাদানগুলি সর্বদা একটি সর্বোত্তম, বা এমনকি একটি সম্ভাব্য সমাধানও নয় . এই ক্ষেত্রে আপনি একটি উপাদানের ট্যাব অবস্থান স্পষ্টভাবে সেট করতে tabindex HTML বৈশিষ্ট্য ব্যবহার করতে পারেন।
tabindex যেকোনো উপাদানে প্রয়োগ করা যেতে পারে - যদিও এটি অগত্যা প্রতিটি উপাদানের জন্য দরকারী নয় - এবং পূর্ণসংখ্যার মানগুলির একটি পরিসীমা নেয়। tabindex ব্যবহার করে, আপনি ফোকাসযোগ্য পৃষ্ঠা উপাদানগুলির জন্য একটি সুস্পষ্ট ক্রম নির্দিষ্ট করতে পারেন, ট্যাব অর্ডারে একটি অন্যথায় ফোকাসযোগ্য উপাদান সন্নিবেশ করতে পারেন এবং ট্যাব ক্রম থেকে উপাদানগুলি সরাতে পারেন৷ উদাহরণ স্বরূপ:
tabindex="0" : প্রাকৃতিক ট্যাব অর্ডারে একটি উপাদান সন্নিবেশ করায়। Tab কী টিপে উপাদানটিকে ফোকাস করা যেতে পারে, এবং উপাদানটিকে focus() পদ্ধতিতে কল করে ফোকাস করা যেতে পারে
<custom-button tabindex="0">Press Tab to Focus Me!</custom-button>
tabindex="-1" : প্রাকৃতিক ট্যাব ক্রম থেকে একটি উপাদানকে সরিয়ে দেয়, কিন্তু উপাদানটিকে এখনও focus() পদ্ধতিতে কল করে ফোকাস করা যেতে পারে
// TODO: DevSite - Code sample removed as it used inline event handlers
// TODO: DevSite - কোড নমুনা সরানো হয়েছে কারণ এটি ইনলাইন ইভেন্ট হ্যান্ডলার ব্যবহার করেছে
tabindex="5" : 0-এর বেশি যেকোনো ট্যাবিনডেক্স উপাদানটিকে প্রাকৃতিক ট্যাব অর্ডারের সামনে নিয়ে যায়। যদি 0-এর বেশি ট্যাবিনডেক্স সহ একাধিক উপাদান থাকে, তাহলে ট্যাব অর্ডারটি সর্বনিম্ন মান থেকে শুরু হয় যা শূন্যের চেয়ে বেশি হয় এবং তার উপরে চলে যায়। 0-এর বেশি ট্যাবিন্ডেক্স ব্যবহার করা একটি অ্যান্টি-প্যাটার্ন হিসাবে বিবেচিত হয়।
<button>I should be first</button>
<button>And I should be second</button>
<button tabindex="5">But I jumped to the front!</button>
এটি বিশেষ করে হেডার, ছবি বা নিবন্ধ শিরোনামের মতো নন-ইনপুট উপাদানগুলির ক্ষেত্রে সত্য। এই ধরণের উপাদানগুলিতে tabindex যুক্ত করা পাল্টা-উৎপাদনশীল। যদি সম্ভব হয়, তাহলে আপনার সোর্স কোড সাজানো ভালো যাতে DOM সিকোয়েন্স একটি লজিক্যাল ট্যাব অর্ডার প্রদান করে। আপনি যদি tabindex ব্যবহার করেন তবে এটিকে বোতাম, ট্যাব, ড্রপডাউন এবং পাঠ্য ক্ষেত্রের মতো কাস্টম ইন্টারেক্টিভ নিয়ন্ত্রণে সীমাবদ্ধ করুন; অর্থাৎ, ব্যবহারকারী ইনপুট প্রদানের আশা করতে পারে এমন উপাদান।
স্ক্রিন রিডার ব্যবহারকারীরা গুরুত্বপূর্ণ বিষয়বস্তু হারিয়েছেন তা নিয়ে চিন্তা করবেন না কারণ এতে tabindex নেই৷ এমনকি যদি বিষয়বস্তুটি খুব গুরুত্বপূর্ণ হয়, একটি চিত্রের মতো, যদি এটি এমন কিছু না হয় যার সাথে ব্যবহারকারী ইন্টারঅ্যাক্ট করতে পারে, তবে এটিকে ফোকাসযোগ্য করার কোন কারণ নেই। স্ক্রীন রিডার ব্যবহারকারীরা এখনও ছবির বিষয়বস্তু বুঝতে পারবেন যতক্ষণ না আপনি যথাযথ alt অ্যাট্রিবিউট সমর্থন প্রদান করেন, যা আমরা শীঘ্রই কভার করব।
পৃষ্ঠা স্তরে ফোকাস পরিচালনা করা
এখানে একটি দৃশ্যকল্প যেখানে tabindex শুধুমাত্র দরকারী নয়, কিন্তু প্রয়োজনীয়। আপনি বিভিন্ন বিষয়বস্তু বিভাগ সহ একটি শক্তিশালী একক পৃষ্ঠা তৈরি করতে পারেন, যার সবকটি একই সাথে দৃশ্যমান নয়। এই ধরনের পৃষ্ঠায়, নেভিগেশন লিঙ্কে ক্লিক করলে পৃষ্ঠা রিফ্রেশ না করে দৃশ্যমান বিষয়বস্তু পরিবর্তন হতে পারে।
যখন এটি ঘটবে, আপনি সম্ভবত নির্বাচিত বিষয়বস্তু এলাকা চিহ্নিত করবেন, এটিকে -1 এর একটি tabindex দেবেন যাতে এটি প্রাকৃতিক ট্যাব ক্রমানুসারে প্রদর্শিত না হয় এবং এর focus পদ্ধতিতে কল করুন। এই কৌশল, যাকে ম্যানেজিং ফোকাস বলা হয়, ব্যবহারকারীর অনুভূত প্রসঙ্গটিকে সাইটের ভিজ্যুয়াল কন্টেন্টের সাথে সিঙ্ক করে রাখে।
উপাদানগুলিতে ফোকাস পরিচালনা করা
আপনি যখন পৃষ্ঠায় কিছু পরিবর্তন করেন তখন ফোকাস পরিচালনা করা গুরুত্বপূর্ণ, তবে কখনও কখনও আপনাকে নিয়ন্ত্রণ স্তরে ফোকাস পরিচালনা করতে হবে — উদাহরণস্বরূপ, যদি আপনি একটি কাস্টম উপাদান তৈরি করছেন।
নেটিভ select এলিমেন্ট বিবেচনা করুন। এটি মৌলিক ফোকাস পেতে পারে কিন্তু, একবার সেখানে, আপনি অতিরিক্ত কার্যকারিতা (নির্বাচনযোগ্য বিকল্প) প্রকাশ করতে তীর কী ব্যবহার করতে পারেন। আপনি যদি একটি কাস্টম select এলিমেন্ট তৈরি করে থাকেন, তাহলে আপনি এই ধরনের আচরণগুলি প্রকাশ করতে চান যাতে ব্যবহারকারীরা প্রাথমিকভাবে কীবোর্ডের উপর নির্ভর করে এখনও আপনার নিয়ন্ত্রণের সাথে ইন্টারঅ্যাক্ট করতে পারে।
<!-- Focus the element using Tab and use the up/down arrow keys to navigate -->
<select>
<option>Aisle seat</option>
<option>Window seat</option>
<option>No preference</option>
</select>
কোন কীবোর্ড আচরণগুলি বাস্তবায়ন করতে হবে তা জানা কঠিন হতে পারে, তবে একটি সহায়ক নথি রয়েছে যা আপনি উল্লেখ করতে পারেন। অ্যাক্সেসিবল রিচ ইন্টারনেট অ্যাপ্লিকেশান (ARIA) অথরিং প্র্যাকটিস গাইডে উপাদানের প্রকার এবং তারা কী ধরনের কীবোর্ড অ্যাকশন সমর্থন করে তা তালিকাভুক্ত করে। আমরা পরে আরও বিস্তারিতভাবে 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-এ উপাদানটি পরিদর্শন করুন।
// TODO: DevSite - কোড নমুনা সরানো হয়েছে কারণ এটি ইনলাইন ইভেন্ট হ্যান্ডলার ব্যবহার করেছে
আপনি GitHub এ এই উপাদানটির সম্পূর্ণ উৎস দেখতে পারেন।
মডেল এবং কীবোর্ড ফাঁদ
কখনও কখনও আপনি যখন ফোকাস পরিচালনা করছেন তখন আপনি এমন পরিস্থিতির মধ্যে পড়তে পারেন যা থেকে আপনি বেরিয়ে আসতে পারবেন না। একটি স্বয়ংসম্পূর্ণ উইজেট বিবেচনা করুন যা ফোকাস পরিচালনা করার চেষ্টা করে এবং ট্যাব আচরণ ক্যাপচার করে, তবে এটি সম্পূর্ণ না হওয়া পর্যন্ত ব্যবহারকারীকে এটি ছেড়ে যেতে বাধা দেয়। একে কীবোর্ড ফাঁদ বলা হয়, এবং এটি ব্যবহারকারীর জন্য খুবই হতাশাজনক হতে পারে। ওয়েব AIM চেকলিস্টের অধ্যায় 2.1.2 এই সমস্যাটির সমাধান করে, উল্লেখ করে যে কীবোর্ড ফোকাস কখনই একটি নির্দিষ্ট পৃষ্ঠা উপাদানে লক করা বা আটকে রাখা উচিত নয় । ব্যবহারকারী শুধুমাত্র কীবোর্ড ব্যবহার করে সমস্ত পৃষ্ঠা উপাদানগুলিতে এবং সেখান থেকে নেভিগেট করতে সক্ষম হওয়া উচিত।
অদ্ভুতভাবে, এমন সময় আছে যখন এই আচরণটি আসলেই কাম্য, যেমন একটি মডেল উইন্ডোতে। সাধারণত, যখন মডেলটি প্রদর্শিত হয়, আপনি চান না যে ব্যবহারকারী এটির পিছনের সামগ্রীটি অ্যাক্সেস করুক। আপনি দৃশ্যত পৃষ্ঠাটি কভার করার জন্য একটি ওভারলে যুক্ত করতে পারেন, তবে এটি কীবোর্ড ফোকাসকে দুর্ঘটনাক্রমে মডেলের বাইরে ভ্রমণ করা থেকে বিরত করে না।
এই ধরনের দৃষ্টান্তে আপনি একটি অস্থায়ী কীবোর্ড ট্র্যাপ প্রয়োগ করতে পারেন যাতে আপনি শুধুমাত্র মডেলটি প্রদর্শিত হওয়ার সময় ফোকাস আটকে রাখেন এবং তারপরে মোডালটি বন্ধ হয়ে গেলে পূর্বে-ফোকাস করা আইটেমে ফোকাস পুনরুদ্ধার করতে পারেন।
<dialog>এলিমেন্ট সহ ডেভেলপারদের জন্য কীভাবে এটি সহজ করা যায় সে বিষয়ে কিছু প্রস্তাব রয়েছে, কিন্তু তাদের এখনও ব্যাপক ব্রাউজার সমর্থন নেই।
<dialog>সম্পর্কে আরও তথ্যের জন্য এই MDN নিবন্ধটি দেখুন, এবং মডেল উইন্ডোজ সম্পর্কে আরও তথ্যের জন্য এই মডেল উদাহরণটি দেখুন।
একটি div দ্বারা উপস্থাপিত একটি মডেল ডায়ালগ বিবেচনা করুন যাতে কয়েকটি উপাদান রয়েছে এবং আরেকটি div যা একটি পটভূমি ওভারলে প্রতিনিধিত্ব করে। আসুন এই পরিস্থিতিতে একটি অস্থায়ী কীবোর্ড ফাঁদ বাস্তবায়নের জন্য প্রয়োজনীয় প্রাথমিক পদক্ষেপগুলি নিয়ে চলুন।
-
document.querySelectorব্যবহার করে, মডেল এবং ওভারলে ডিভ নির্বাচন করুন এবং তাদের রেফারেন্স সংরক্ষণ করুন। - মোডাল খোলার সাথে সাথে, সেই উপাদানটির একটি রেফারেন্স সংরক্ষণ করুন যেটি মোডেল খোলার সময় ফোকাস করা হয়েছিল যাতে আপনি সেই উপাদানটিতে ফোকাস ফিরিয়ে আনতে পারেন।
- মোডাল খোলা থাকাকালীন কীগুলি টিপলে কীগুলি ধরতে একটি কীডাউন লিসেনার ব্যবহার করুন৷ আপনি ব্যাকগ্রাউন্ড ওভারলেতে একটি ক্লিকের জন্যও শুনতে পারেন এবং ব্যবহারকারী এটি ক্লিক করলে মডেলটি বন্ধ করে দিতে পারেন।
- এর পরে, মডেলের মধ্যে ফোকাসযোগ্য উপাদানগুলির সংগ্রহ পান। প্রথম এবং শেষ ফোকাসযোগ্য উপাদানগুলি "সেন্টিনেল" হিসাবে কাজ করবে যাতে আপনি কখন ফোকাসকে সামনের দিকে বা পিছনে লুপ করতে হবে তা জানাতে মডেলের ভিতরে থাকতে হবে।
- মডেল উইন্ডো প্রদর্শন করুন এবং প্রথম ফোকাসযোগ্য উপাদান ফোকাস করুন।
- ব্যবহারকারী যখন
TabবাShift+Tabটিপে, তখন যথাযথভাবে শেষ বা প্রথম উপাদানে লুপ করে ফোকাসকে সামনে বা পিছনে সরান। - ব্যবহারকারী
Escচাপলে, মোডালটি বন্ধ করুন। এটি খুবই সহায়ক কারণ এটি ব্যবহারকারীকে একটি নির্দিষ্ট ক্লোজ বোতাম অনুসন্ধান না করেই মডেলটি বন্ধ করার অনুমতি দেয় এবং এটি এমন ব্যবহারকারীদেরও উপকৃত করে যারা একটি মাউস ব্যবহার করছেন। - মোডালটি বন্ধ হয়ে গেলে, এটি এবং ব্যাকগ্রাউন্ড ওভারলে লুকান, এবং পূর্বে সংরক্ষিত পূর্বে ফোকাস করা উপাদানে ফোকাস পুনরুদ্ধার করুন।
এই পদ্ধতিটি আপনাকে একটি ব্যবহারযোগ্য, অ-হতাশাজনক মডেল উইন্ডো দেয় যা প্রত্যেকে কার্যকরভাবে ব্যবহার করতে পারে।
আরও বিশদ বিবরণের জন্য, আপনি এই নমুনা কোডটি পরীক্ষা করতে পারেন এবং একটি সম্পূর্ণ পৃষ্ঠা থেকে একটি লাইভ উদাহরণ দেখতে পারেন।