ফোকাস

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

ডিফল্টরূপে, নেভিগেশন ফোকাস অর্ডার ভিজ্যুয়াল অর্ডারের মতোই, যা সোর্স কোড অর্ডার। এমন HTML বৈশিষ্ট্য রয়েছে যা এই ক্রম পরিবর্তন করতে পারে এবং CSS বৈশিষ্ট্যগুলি যা সামগ্রীর ভিজ্যুয়াল ক্রম পরিবর্তন করতে পারে। HTML এর সাথে ট্যাবিং অর্ডার বা CSS এর সাথে ভিজ্যুয়াল রেন্ডারিং অর্ডার পরিবর্তন করা ব্যবহারকারীর অভিজ্ঞতার ক্ষতি করতে পারে।

CSS এবং HTML এর সাথে অনুভূত এবং প্রকৃত ট্যাবিং ক্রম পরিবর্তন করবেন না। নিম্নলিখিত দুটি উদাহরণ দেখায় যে, ট্যাব অর্ডার যা দৃশ্যত প্রত্যাশিত ক্রম থেকে ভিন্ন তা ব্যবহারকারীদের কাছে বিভ্রান্তিকর এবং ব্যবহারকারীর অভিজ্ঞতার জন্য খারাপ।

এই উদাহরণে, tabindex অ্যাট্রিবিউটের মান ট্যাব অর্ডারকে বিশৃঙ্খল করে তুলেছে:

এই উদাহরণে, CSS ট্যাবিং অর্ডার এবং বিষয়বস্তুর ভিজ্যুয়াল অর্ডারের মধ্যে পার্থক্য তৈরি করেছে:

flex-flow: row-reverse; ঘোষণা ভিজ্যুয়াল অর্ডার বিপরীত করেছে. এছাড়াও, সিএসএস অর্ডার প্রপার্টি ষষ্ঠ শব্দ "এই"-তে প্রয়োগ করা হয়েছিল, যা দৃশ্যত সেই একটি শব্দটিকে সরিয়ে দিয়েছে। ট্যাবিং সিকোয়েন্স হল কোডের ক্রম, যা আর ভিজ্যুয়াল অর্ডারের সাথে মেলে না, কীবোর্ড ব্যবহারকারীদের জন্য সংযোগ বিচ্ছিন্ন করে।

জড় উপাদান ইন্টারেক্টিভ করা

contenteditable এবং tabindex বৈশিষ্ট্যগুলি, বৈশ্বিক বৈশিষ্ট্যগুলি, যে কোনও উপাদানের সাথে যুক্ত করা যেতে পারে, সেগুলিকে প্রক্রিয়ায় ফোকাসযোগ্য করে তোলে। ফোকাসযোগ্য উপাদানগুলিকে একটি মাউস বা পয়েন্টার দিয়েও ফোকাস করা যেতে পারে, autofocus অ্যাট্রিবিউট সেট বা স্ক্রিপ্ট দ্বারা, যেমন element.focus() দিয়ে।

tabindex বৈশিষ্ট্য

গ্লোবাল tabindex অ্যাট্রিবিউট, অ্যাট্রিবিউটে প্রবর্তিত, এমন উপাদানগুলিকে সক্ষম করে যা অন্যথায় ফোকাস পেতে ফোকাস পেতে সক্ষম হবে না, সাধারণত ট্যাব কী দিয়ে, তাই নাম।

tabindex অ্যাট্রিবিউট এর মান একটি পূর্ণসংখ্যা হিসাবে নেয়। একটি নেতিবাচক মান একটি উপাদানকে ফোকাসযোগ্য করে তোলে কিন্তু ট্যাবযোগ্য নয়। 0 এর একটি tabindex মান উপাদানটিকে ফোকাসযোগ্য এবং ট্যাবযোগ্য করে তোলে, যে উপাদানটির উপর এটি সোর্স কোডের ক্রমানুসারে ফোকাস নেভিগেশন ক্রমতে প্রয়োগ করা হয় তা যোগ করে। 1 বা তার বেশি মান উপাদানটিকে ফোকাসযোগ্য এবং ট্যাব করার যোগ্য করে তোলে, কিন্তু এটিকে একটি অগ্রাধিকারযুক্ত ট্যাবিং ক্রমতে যুক্ত করে, এবং আমরা উপরে যেমন দেখেছি, এড়িয়ে যাওয়া উচিত।

এই পৃষ্ঠায়, শেয়ার বোতাম, <share-action> , একটি কাস্টম উপাদান । tabindex="0" কীবোর্ড ডিফল্ট ট্যাবিং অর্ডারে এই-সাধারণভাবে ফোকাসযোগ্য নয় এমন উপাদান যোগ করে:

<share-action authors="@front-end.social/@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, mastodon" role="button" tabindex="0">
  <svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
    <use href="#shareIcon" />
  </svg>
  <span>Share</span>
</share-action>

এই পৃষ্ঠায় আরেকটি কাস্টম উপাদান রয়েছে: স্থানীয় নেভিগেশনে নেতিবাচক tabindex মান সহ একটি কাস্টম উপাদান রয়েছে:

<web-navigation-drawer type="standard" tabindex="-1">

একটি নেতিবাচক মান সহ একটি tabindex বৈশিষ্ট্য উপাদানটিকে ফোকাসযোগ্য করে তোলে তবে ট্যাবযোগ্য নয়। উপাদানটি ফোকাস গ্রহণ করতে সক্ষম, যেমন HTMLElement.focus() এর মাধ্যমে, কিন্তু এটি অনুক্রমিক ফোকাস নেভিগেশন অর্ডারের অংশ নয়৷ অ-ট্যাবেবল, ফোকাসযোগ্য উপাদানগুলির জন্য নিয়ম হল tabindex="-1" ব্যবহার করা। মনে রাখবেন যে আপনি যদি একটি ইন্টারেক্টিভ উপাদানে tabindex="-1" যোগ করেন তবে এটি আর ট্যাবযোগ্য হবে না।

element.focus() পদ্ধতিটি ফোকাসযোগ্য উপাদানগুলিতে ফোকাস সেট করতে ব্যবহার করা যেতে পারে। লক্ষ্য করুন যে ব্রাউজারগুলি দৃষ্টি নিবদ্ধ উপাদানগুলিকে স্ক্রোল করে। এই কারণে, element.focus({preventScroll:true}) ব্যবহার এড়িয়ে চলুন, কারণ একটি অদৃশ্যমান উপাদানের উপর ফোকাস করলে ব্যবহারকারীর অভিজ্ঞতা খারাপ হবে।

আপনি যদি বর্তমানে কোন উপাদানটিতে ফোকাস আছে তা খুঁজে বের করতে নথিটি জিজ্ঞাসা করতে চান, শুধুমাত্র-পঠনযোগ্য Document.activeElement বৈশিষ্ট্যটি ব্যবহার করুন৷

1 বা তার বেশি tabindex সহ উপাদানগুলি একটি পৃথক ট্যাব অনুক্রমে অন্তর্ভুক্ত করা হয়। আপনি যেমন কোডপেনে লক্ষ্য করবেন, ট্যাবিং একটি পৃথক ক্রমানুসারে শুরু হয়, সর্বনিম্ন মানের থেকে সর্বোচ্চ মানের ক্রমানুসারে, নিয়মিত ক্রমানুসারে (কোনও tabindex সেট নয়, বা tabindex="0" ) উৎস ক্রমে যাওয়ার আগে:

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

contenteditable বৈশিষ্ট্য

contenteditable বৈশিষ্ট্যটি আগে আলোচনা করা হয়েছিল। যেকোনো উপাদানে contenteditable="true" সেট করা এটিকে সম্পাদনাযোগ্য, ফোকাসযোগ্য এবং ট্যাব অর্ডারের অংশ করে তোলে। ফোকাস আচরণ tabindex="0" সেট করার অনুরূপ, কিন্তু একই নয়। নেস্টেড contenteditable উপাদান ফোকাসযোগ্য কিন্তু ট্যাবযোগ্য নয়। একটি নেস্টেড contenteditable উপাদান ট্যাবেবল করতে, tabindex="0" যোগ করুন, যা এটিকে অনুক্রমিক ফোকাস নেভিগেশন অর্ডারে যুক্ত করবে।

ইন্টারেক্টিভ উপাদানগুলিতে ফোকাস দেওয়া

autofocus বৈশিষ্ট্য

যদিও বুলিয়ান autofocus একটি গ্লোবাল অ্যাট্রিবিউট যা যেকোনো উপাদানে সেট করা যেতে পারে, এটি একটি জড় উপাদানকে ইন্টারেক্টিভ করে না। যখন পৃষ্ঠা লোড হয়, autofocus অ্যাট্রিবিউট সেট সহ প্রথম ফোকাসযোগ্য উপাদানটি ফোকাস গ্রহণ করবে, যতক্ষণ না সেই উপাদানটি প্রদর্শিত হয় এবং <dialog> এ নেস্ট করা হয় না।

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

" autofocus ব্যবহার করবেন না" সুপারিশের ব্যতিক্রম হল <dialog> উপাদানের মধ্যে autofocus বৈশিষ্ট্য অন্তর্ভুক্ত। যখন একটি ডায়ালগ খোলা হয়, তখন ব্রাউজার স্বয়ংক্রিয়ভাবে <dialog> এর মধ্যে প্রথম ফোকাসযোগ্য ইন্টারেক্টিভ উপাদানটির উপর ফোকাস করবে, যার অর্থ একটি উপাদানে autofocus আবশ্যক নয়। ডায়ালগ খোলার সময় ডায়ালগের মধ্যে একটি নির্দিষ্ট ইন্টারেক্টিভ উপাদান ফোকাস গ্রহণ করে তা নিশ্চিত করতে চাইলে, সেই উপাদানটিতে autofocus অ্যাট্রিবিউট যোগ করুন।

<dialog open>
  <form method="dialog">
    <button type="submit" autofocus>close</button>
  </form>
</dialog>

ক্লোজ <button> -এ autofocus অ্যাট্রিবিউট সেট করা নিশ্চিত করে যে ডায়ালগ খোলা হলে এটি ফোকাস পায়। ডায়ালগের প্রথম উপাদান হিসাবে, এটি যে কোনও ক্ষেত্রে ফোকাস পেয়েছে। ডিফল্টরূপে, যখন একটি ডায়ালগ খোলা হয়, ডায়ালগের মধ্যে প্রথম ফোকাসযোগ্য উপাদানটি ফোকাস পাবে যদি না ডায়ালগের মধ্যে একটি ভিন্ন উপাদানের autofocus বৈশিষ্ট্য সেট থাকে।

ইন্টারেক্টিভ উপাদান নিষ্ক্রিয় করা

এছাড়াও এইচটিএমএল অ্যাট্রিবিউট রয়েছে যা ট্যাবিং সিকোয়েন্স থেকে ইন্টারেক্টিভ উপাদানগুলিকে সরিয়ে দিতে পারে। ফোকাসযোগ্য উপাদানগুলিতে একটি নেতিবাচক tabindex সহ, ফর্ম নিয়ন্ত্রণ সমর্থনকারী disabled বৈশিষ্ট্য যুক্ত করা এবং একটি ধারকটিতে বিশ্বব্যাপী inert বৈশিষ্ট্য যুক্ত করা সমস্ত উপাদানকে ট্যাবযোগ্য করে তোলে। এই তিনটি বৈশিষ্ট্য বিনিময়যোগ্য নয়।

নেতিবাচক tabindex মান

আমরা উপরে যেমন শিখেছি, নেতিবাচক মান সহ একটি tabindex বৈশিষ্ট্য একটি উপাদানকে ফোকাসযোগ্য করে তোলে কিন্তু ট্যাবযোগ্য নয়। একটি ফোকাসযোগ্য-বাই-ডিফল্ট উপাদানে tabindex="0" যোগ করার সময়, লিঙ্ক, বোতাম, ফর্ম কন্ট্রোল এবং contenteditable উপাদান সহ প্রয়োজনীয় নয়; একটি নেতিবাচক মান সহ একটি tabindex সহ অনুক্রমিক ফোকাস নেভিগেশন অর্ডার থেকে সাধারণত ট্যাবযোগ্য উপাদানগুলি সরিয়ে দেয়।

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

অক্ষম

বুলিয়ান অক্ষম অ্যাট্রিবিউট ফর্ম কন্ট্রোলগুলিকে তৈরি করে যার উপর এটি প্রয়োগ করা হয় এবং তাদের বংশধরদের, যদি থাকে, ফোকাসযোগ্য নয়। অক্ষম ফর্ম নিয়ন্ত্রণ ফোকাস করা যাবে না, ক্লিক ইভেন্ট পাবেন না, এবং ফর্ম জমা দেওয়ার পরে জমা দেওয়া হয় না। নোট disabled একটি বিশ্বব্যাপী বৈশিষ্ট্য নয়. এটি <button> , <input> , <optgroup> , <option> , <select> , <textarea> , ফর্ম-সম্পর্কিত কাস্টম উপাদান এবং <fieldset> এর ক্ষেত্রে প্রযোজ্য। <optgroup> বা <fieldset> এ সেট করা হলে, <fieldset> -এর প্রথম <legend> এর বিষয়বস্তু ব্যতীত সমস্ত চাইল্ড ফর্ম নিয়ন্ত্রণ নিষ্ক্রিয় করা হয়।

একই উপাদান যা disabled সমর্থন করে তাও :disabled এবং :enabled সিউডোক্লাসের সাথে লক্ষ্যযোগ্য। যে উপাদানগুলি disabled বৈশিষ্ট্যের সাথে নিষ্ক্রিয় করা হয় সেগুলি সাধারণত ব্যবহারকারী-এজেন্ট স্টাইলশীটের মাধ্যমে হালকা ধূসর হিসাবে স্টাইল করা হয়, এমনকি যদি একটি accent-color সেট করা থাকে।

একটি বুলিয়ান অ্যাট্রিবিউট হওয়ায়, অ্যাট্রিবিউটের উপস্থিতি অন্যথায় সক্রিয় উপাদানটিকে নিষ্ক্রিয় করে; আপনি এটি false সেট করতে পারবেন না। একটি অক্ষম উপাদান পুনরায় সক্ষম করতে, বৈশিষ্ট্যটি সরাতে হবে, সাধারণত Element.removeAttribute('disabled') এর মাধ্যমে।

HTMLInputElement.disabled প্রপার্টি আপনাকে একটি ইনপুট নিষ্ক্রিয় কিনা তা পরীক্ষা করতে দেয়। যেহেতু disabled একটি বৈশ্বিক বৈশিষ্ট্য নয়, এটি HTMLElement থেকে উত্তরাধিকারসূত্রে প্রাপ্ত নয়, তবে HTMLSelectElement , HTMLTextareaElement এর মতো প্রতিটি সমর্থনকারী উপাদান ইন্টারফেসে একই পঠনযোগ্য বৈশিষ্ট্য রয়েছে৷

disabled বৈশিষ্ট্যটি সাধারণত inert উপাদানগুলির ক্ষেত্রে প্রযোজ্য নয় যা tabindex বা contenteditable মাধ্যমে ফোকাসযোগ্য করা হয়। এটি <form> উপাদানের ক্ষেত্রেও প্রযোজ্য নয়। এইগুলি নিষ্ক্রিয় করতে, বিশ্বব্যাপী inert বৈশিষ্ট্য ব্যবহার করা যেতে পারে।

inert বৈশিষ্ট্য

যখন inert গ্লোবাল বুলিয়ান অ্যাট্রিবিউট কোনো এলিমেন্টে যোগ করা হয়, তখন সেই উপাদান এবং সমস্ত নেস্টেড কন্টেন্ট নিষ্ক্রিয় হয়ে যায়—ক্লিক করা যায় না ট্যাব করা যায় না—এবং অ্যাক্সেসিবিলিটি ট্রি থেকে সরিয়ে দেওয়া হয়। যদিও inert কোনো উপাদান প্রয়োগ করা যেতে পারে, এটি সাধারণত বিষয়বস্তুর বিভাগের জন্য ব্যবহৃত হয়, যেমন অফস্ক্রিন বা অন্যথায় লুকানো সামগ্রী।

নিয়ন্ত্রণ গঠনে disabled প্রয়োগ করার সময়, ব্রাউজার ডিফল্ট স্টাইলিং প্রদান করে এবং :disabled ছদ্ম ক্লাস ব্যবহার করে স্টাইল করা যেতে পারে। inert বৈশিষ্ট্য কোন চাক্ষুষ সূচক প্রদান করে না এবং কোন মিলিত সিউডোক্লাস নেই (যদিও [inert] বৈশিষ্ট্য নির্বাচক মেলে)।

জড়তা নির্দেশ করে এমন স্টাইল ছাড়া দৃশ্যমান সামগ্রীতে inert ব্যবহার করলে ব্যবহারকারীর অভিজ্ঞতা খারাপ হতে পারে। যেহেতু নিষ্ক্রিয় বিষয়বস্তু স্ক্রিন রিডার ব্যবহারকারীদের কাছে উপলব্ধ নয়, তাই এটি বিভ্রান্তির দিকে নিয়ে যেতে পারে যখন স্ক্রীন রিডার ব্যবহারকারীরা এমন সামগ্রী দেখেন যা অ্যাক্সেসিবিলিটি সরঞ্জামগুলিতে উপলব্ধ নয়৷ CSS এর মাধ্যমে জড়তা খুব স্পষ্ট করুন।

নিশ্চিত করুন যে ফোকাস কখনই অ-দৃশ্যমান বিষয়বস্তুর দিকে চলে যায়। অফ-স্ক্রিনে রেন্ডার করা যেকোন কিছু যা ফোকাস করার সময় স্বয়ংক্রিয়ভাবে দেখা যায় না তাকে জড় করা উচিত। যদি বিষয়বস্তু লুকানো থাকে, কিন্তু ফোকাস করার সময় দেখা যায়, যেমন এই পৃষ্ঠায় বিষয়বস্তু লিঙ্ক এড়িয়ে যান , এটি নিষ্ক্রিয় করার প্রয়োজন নেই।

আপনার উপলব্ধি পরীক্ষা করুন

আপনার উপলব্ধি পরীক্ষা করুন

ফোকাস আপনার জ্ঞান পরীক্ষা.