ফোকাস

ফর্ম কন্ট্রোল , লিঙ্ক এবং বাটন সহ ইন্টারেক্টিভ এলিমেন্টগুলো ডিফল্টভাবে ফোকাসযোগ্য এবং ট্যাবযোগ্য হয়। ট্যাবযোগ্য এলিমেন্টগুলো ডকুমেন্টের ক্রমিক ফোকাস নেভিগেশন অর্ডারের অংশ। অন্যান্য এলিমেন্টগুলো নিষ্ক্রিয়, অর্থাৎ সেগুলো ইন্টারেক্টিভ নয়। HTML অ্যাট্রিবিউটের সাহায্যে ইন্টারেক্টিভ এলিমেন্টগুলোকে নিষ্ক্রিয় এবং নিষ্ক্রিয় এলিমেন্টগুলোকে ইন্টারেক্টিভ করা সম্ভব।

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

CSS এবং HTML ব্যবহার করে ট্যাবিং-এর দৃশ্যমান ও প্রকৃত ক্রম পরিবর্তন করবেন না। নিচের দুটি উদাহরণে যেমনটা দেখানো হয়েছে, দৃশ্যত প্রত্যাশিত ক্রম থেকে ভিন্ন ট্যাব ক্রম ব্যবহারকারীদের জন্য বিভ্রান্তিকর এবং ব্যবহারকারীর অভিজ্ঞতার জন্য ক্ষতিকর।

নিচের উদাহরণে, tabindex অ্যাট্রিবিউটের মান ট্যাবের ক্রমকে এলোমেলো করে দিয়েছে:

এই উদাহরণে, CSS ট্যাবিং ক্রম এবং বিষয়বস্তুর দৃশ্যমান ক্রমের মধ্যে একটি বিচ্যুতি তৈরি করেছে:

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

CSS-এর কিছু ফিচার, যেমন flexbox , grid , positioning , transforms , এবং multi-column , কন্টেন্টের দৃশ্যমান ক্রম পরিবর্তন করতে পারে। কিবোর্ডের ট্যাব ব্যবহার করে আপনার কন্টেন্ট পরীক্ষা করুন: কন্টেন্টের মধ্যে পেছনে যাওয়ার জন্য shift + tab চাপুন। কোন এলিমেন্টে ফোকাস আছে তা বোঝাতে CSS ব্যবহার করুন। CSS দিয়ে ফোকাসযোগ্য এলিমেন্টগুলোর ক্রম পরিবর্তন করবেন না।

সকল ভিউপোর্ট সাইজে একটি যৌক্তিক ট্যাবিং ক্রম বজায় রাখা গুরুত্বপূর্ণ।

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

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

tabindex অ্যাট্রিবিউট

attributes- এ প্রবর্তিত গ্লোবাল tabindex অ্যাট্রিবিউটটি এমন সব এলিমেন্টকে ফোকাস পেতে সক্ষম করে, যেগুলো অন্যথায় ফোকাস পেত না; সাধারণত Tab- এর মাধ্যমে এটি ফোকাস পায়, আর একারণেই এর এমন নামকরণ।

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

এই পৃষ্ঠায়, শেয়ার বাটনটি <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 প্রপার্টিটি ব্যবহার করুন।

যেসব এলিমেন্টের tabindex 1 বা তার বেশি, সেগুলোকে একটি আলাদা ট্যাব সিকোয়েন্সে অন্তর্ভুক্ত করা হয়। নিচের কোডপেনটির মতো, সোর্স অর্ডার অনুযায়ী সাধারণ সিকোয়েন্সে (কোনো 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 অ্যাট্রিবিউট সেট করা থাকে।

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

এমন কিছু HTML অ্যাট্রিবিউটও রয়েছে যা ট্যাবিং সিকোয়েন্স থেকে ইন্টারেক্টিভ এলিমেন্টগুলোকে সরিয়ে দিতে পারে। ফোকাসযোগ্য এলিমেন্টে নেগেটিভ tabindex যোগ করা, সাপোর্টিং ফর্ম কন্ট্রোলে disabled অ্যাট্রিবিউট যোগ করা এবং কোনো কন্টেইনারে গ্লোবাল inert অ্যাট্রিবিউট যোগ করা—এই সবগুলোই এলিমেন্টগুলোকে ট্যাব করার অযোগ্য করে তোলে। এই তিনটি অ্যাট্রিবিউট সম্পূর্ণ আলাদা এবং একটির বদলে অন্যটি ব্যবহার করা যায় না।

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

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

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

প্রতিবন্ধী

বুলিয়ান '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) কিনা তা পরীক্ষা করা যায়। যেহেতু disabled একটি গ্লোবাল অ্যাট্রিবিউট নয়, তাই এটি HTMLElement থেকে উত্তরাধিকারসূত্রে পাওয়া যায় না, কিন্তু এর প্রতিটি সহায়ক এলিমেন্ট ইন্টারফেস, যেমন HTMLSelectElement , HTMLTextareaElement , এগুলোর একই রিড-অনলি (read-only) প্রপার্টি রয়েছে।

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

inert বৈশিষ্ট্য

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

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

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

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

আপনার বোধগম্যতা যাচাই করুন

মনোযোগ বিষয়ে আপনার জ্ঞান পরীক্ষা করুন।