inert বৈশিষ্ট্য হল একটি গ্লোবাল HTML অ্যাট্রিবিউট যা সাহায্যকারী প্রযুক্তি থেকে ফোকাস ইভেন্ট এবং ইভেন্টগুলি সহ একটি উপাদানের জন্য ব্যবহারকারীর ইনপুট ইভেন্টগুলিকে কীভাবে সরানো এবং পুনরুদ্ধার করা যায় তা সহজ করে।
জড় হল ডায়ালগ উপাদানগুলির একটি ডিফল্ট আচরণ, যেমন আপনি যখন ব্যবহারকারীদের একটি নির্বাচন করার জন্য একটি ডায়ালগ খুলতে showModal ব্যবহার করেন এবং তারপর এটি স্ক্রীন থেকে খারিজ করেন৷ একটি <dialog> খোলার পরে বাকি পৃষ্ঠা নিষ্ক্রিয় হয়ে যায়, উদাহরণস্বরূপ আপনি আর লিঙ্কগুলিতে ক্লিক বা ট্যাব করতে পারবেন না।
আপনি অন্যান্য উপাদানে একই আচরণ অর্জন করতে inert বৈশিষ্ট্য ব্যবহার করতে পারেন।
জড় মানে নড়াচড়া করার ক্ষমতার অভাব, তাই আপনি যখন জড় কিছু চিহ্নিত করেন, তখন আপনি সেই DOM উপাদানগুলি থেকে আন্দোলন বা মিথস্ক্রিয়া সরিয়ে দেন।
<div>
<label for="button1">Button 1</label>
<button id="button1">I am not inert</button>
</div>
<div inert>
<label for="button2">Button 2</label>
<button id="button2">I am inert</button>
</div>
এখানে, button2 ধারণকারী দ্বিতীয় <div> উপাদানে inert ঘোষণা করা হয়েছে, তাই এই <div> এর মধ্যে থাকা সমস্ত বিষয়বস্তু, বোতাম এবং লেবেল সহ, ফোকাস পেতে বা ক্লিক করা যাবে না।
inert বৈশিষ্ট্যটি অ্যাক্সেসযোগ্যতার জন্য বিশেষভাবে উপযোগী, বিশেষ করে ফোকাস আটকে যাওয়া রোধ করতে।
আরও ভাল অ্যাক্সেসযোগ্যতা
ওয়েব কন্টেন্ট অ্যাক্সেসিবিলিটি নির্দেশিকাগুলির জন্য ফোকাস ব্যবস্থাপনা এবং একটি বুদ্ধিমান, ব্যবহারযোগ্য ফোকাস অর্ডার প্রয়োজন। এটি আবিষ্কারযোগ্যতা এবং ইন্টারঅ্যাক্টিভিটি উভয়ই অন্তর্ভুক্ত করে। পূর্বে, aria-hidden="true" দিয়ে আবিষ্কারযোগ্যতা দমন করা যেত, কিন্তু ইন্টারঅ্যাক্টিভিটি আরও কঠিন।
inert ডেভেলপারদের ট্যাব অর্ডার এবং অ্যাক্সেসিবিলিটি ট্রি থেকে একটি উপাদান সরানোর ক্ষমতা দেয়। এটি আপনাকে আবিষ্কারযোগ্যতা এবং ইন্টারঅ্যাক্টিভিটি উভয়ই নিয়ন্ত্রণ করতে দেয় এবং আরও ব্যবহারযোগ্য এবং অ্যাক্সেসযোগ্য নিদর্শন তৈরি করার ক্ষমতা সক্ষম করে।
আরও ভাল অ্যাক্সেসযোগ্যতা সক্ষম করার জন্য একটি উপাদানে inert প্রয়োগ করার জন্য দুটি প্রধান ব্যবহারের ক্ষেত্রে রয়েছে:
- যখন একটি উপাদান DOM গাছের একটি অংশ, কিন্তু অফস্ক্রিন বা লুকানো।
- যখন একটি উপাদান DOM গাছের একটি অংশ, কিন্তু অ-ইন্টারেক্টিভ হওয়া উচিত।
অফস্ক্রিন বা লুকানো DOM উপাদান
একটি সাধারণ অ্যাক্সেসিবিলিটি উদ্বেগ একটি ড্রয়ারের মতো উপাদানগুলির সাথে, যা DOM-এ এমন উপাদান যুক্ত করে যা ব্যবহারকারীর কাছে সর্বদা দৃশ্যমান হয় না। inert সাহায্যে আপনি নিশ্চিত করতে পারেন যে ড্রয়ারের সাব উপাদানগুলি অফস্ক্রিন থাকাকালীন, একজন কীবোর্ড ব্যবহারকারী ঘটনাক্রমে এটির সাথে যোগাযোগ করতে পারে না।
অ-ইন্টারেক্টিভ DOM উপাদান
আরেকটি সাধারণ অ্যাক্সেসিবিলিটি উদ্বেগ হল যখন একটি UI ডিজাইন দৃশ্যমান বা আংশিকভাবে দৃশ্যমান, কিন্তু স্পষ্টভাবে অ-ইন্টারেক্টিভ। এটি পৃষ্ঠা লোডের সময় হতে পারে, একটি ফর্ম জমা দেওয়ার সময়, বা যদি একটি ডায়ালগ ওভারলে খোলা থাকে, উদাহরণস্বরূপ।
ব্যবহারকারীদের জন্য সর্বোত্তম অভিজ্ঞতা প্রদান করতে, UI এর অবস্থা নির্দেশ করুন এবং পৃষ্ঠার যে অংশটি ইন্টারেক্টিভ তা ফোকাসকে "ট্র্যাপ" করুন৷
ফোকাস ফাঁদ
ফোকাস ট্র্যাপিং হল ভাল UI অ্যাক্সেসযোগ্যতার একটি কেন্দ্রীয় ধারণা। আপনার নিশ্চিত হওয়া উচিত যে স্ক্রিন রিডার ফোকাস ইন্টারেক্টিভ UI উপাদানগুলির উপর এবং সচেতন হওয়া উচিত যখন একটি উপাদান ইন্টারঅ্যাক্টিভিটি ব্লক করে। এটি দুর্বৃত্ত স্ক্রিন পাঠকদের একটি পৃষ্ঠা ওভারলের পিছনে পৌঁছাতে বা প্রথম জমা দেওয়ার প্রক্রিয়া চলাকালীন ভুলবশত একটি ফর্ম জমা দিতেও সাহায্য করে৷
inert ব্যবহার করে, আপনি নিশ্চিত করতে পারেন যে একমাত্র আবিষ্কারযোগ্য বিষয়বস্তুই পৌঁছানো যায়। এটি এর জন্য সহায়ক:
- ব্লকিং উপাদান যেমন একটি মডেল ডায়ালগ, ফোকাস-ট্র্যাপিং মেনু, বা সাইড নেভি।
- অ-সক্রিয় আইটেম সহ একটি ক্যারোসেল।
- অ-প্রযোজ্য ফর্ম বিষয়বস্তু (উদাহরণস্বরূপ, "বিলিং ঠিকানার মতো একই" চেকবক্সটি চেক করা হলে "শিপিং ঠিকানা" ক্ষেত্রগুলি বিবর্ণ এবং নিষ্ক্রিয় করা)।
- একটি অসামঞ্জস্যপূর্ণ অবস্থায় থাকাকালীন সমগ্র UI নিষ্ক্রিয় করা।
দৃশ্যত inert উপাদান নির্দেশ করে
ডিফল্টরূপে, একটি সাবট্রি নিষ্ক্রিয় হওয়ার কোন চাক্ষুষ ইঙ্গিত নেই। এটি সুপারিশ করা হয় যে আপনি DOM এর কোন অংশগুলি সক্রিয় এবং কোনটি নিষ্ক্রিয় তা স্পষ্টভাবে চিহ্নিত করুন৷
[inert], [inert] * {
opacity: 0.5;
pointer-events: none;
cursor: default;
user-select: none;
}
সমস্ত ব্যবহারকারী একবারে একটি পৃষ্ঠার সমস্ত অংশ দেখতে পারেন না৷ উদাহরণ স্বরূপ, স্ক্রীন রিডার, ছোট ডিভাইস বা ম্যাগনিফায়ার সহ ব্যবহারকারীরা এবং এমনকি বিশেষ করে ছোট উইন্ডো ব্যবহারকারী ব্যবহারকারীরা একটি পৃষ্ঠার সক্রিয় অংশ দেখতে সক্ষম নাও হতে পারে এবং নিষ্ক্রিয় বিভাগগুলি স্পষ্টতই নিষ্ক্রিয় না হলে হতাশ হতে পারে। স্বতন্ত্র নিয়ন্ত্রণের জন্য, অক্ষম বৈশিষ্ট্য সম্ভবত আরও উপযুক্ত।
কি মিথস্ক্রিয়া এবং আন্দোলন অবরুদ্ধ করা হয়?
ডিফল্টরূপে, inert ব্লক ফোকাস এবং ক্লিক ইভেন্ট. সহায়ক প্রযুক্তির জন্য, এটি ট্যাবিং এবং আবিষ্কারযোগ্যতাকেও ব্লক করে। ব্রাউজার উপাদানটিতে পৃষ্ঠা অনুসন্ধান এবং পাঠ্য নির্বাচন উপেক্ষাও করতে পারে।
inert ডিফল্ট মান false ।