শৈলী ফোকাস

Rob Dodson

ফোকাস ইন্ডিকেটর, যা প্রায়শই "ফোকাস রিং" দ্বারা বোঝানো হয়, আপনার পৃষ্ঠায় ফোকাসের উপাদানটিকে চিহ্নিত করে। যারা মাউস ব্যবহার করতে পারেন না বা করতে চান না, তাদের জন্য এই ইন্ডিকেটরটি অত্যন্ত গুরুত্বপূর্ণ , কারণ এটি মাউস-পয়েন্টারের জন্য একটি স্ট্যান্ড-ইন হিসেবে কাজ করে।

যদি ব্রাউজারের ডিফল্ট ফোকাস ইন্ডিকেটর আপনার ডিজাইনের সাথে সাংঘর্ষিক হয়, তাহলে আপনি CSS ব্যবহার করে এটিকে নতুন করে স্টাইল করতে পারেন। আপনার ব্যবহারকারীদের কথা মনে রাখতে ভুলবেন না।

সর্বদা একটি ফোকাস সূচক দেখানোর জন্য :focus ব্যবহার করুন

:focus সিউডো-ক্লাসটি ফোকাসের উপাদানগুলিতে প্রয়োগ করা হয়, ইনপুট পদ্ধতি বা ডিভাইস (যেমন মাউস, কীবোর্ড, বা স্টাইলাস) ব্যবহৃত হোক না কেন।

উদাহরণস্বরূপ, নিম্নলিখিত <div> একটি tabindex রয়েছে যা এটিকে ফোকাসযোগ্য করে তোলে, এর :focus অবস্থার জন্য একটি কাস্টম স্টাইল সহ:

div[tabindex="0"]:focus {
  outline: 4px dashed orange;
}

আপনি যে ডিভাইসই ব্যবহার করুন না কেন, <div> ফোকাসে একই রকম দেখায়।

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

উদাহরণস্বরূপ, নিম্নলিখিত <button> এর :focus অবস্থার জন্য কাস্টম CSS রয়েছে।

button:focus {
  outline: 4px dashed orange;
}

macOS-এ Chrome-এ মাউস দিয়ে <button> ক্লিক করলে আপনি এর কাস্টম ফোকাস স্টাইল দেখতে পাবেন। তবে, macOS-এ Safari-তে <button> ক্লিক করলে আপনি কাস্টম ফোকাস স্টাইল দেখতে পাবেন না। এর কারণ হল Safari-তে আপনি যখন ক্লিক করেন তখন এলিমেন্টটি ফোকাস পায় না।

ফোকাস আচরণ অসঙ্গত। আপনার ফোকাস স্টাইলগুলি আপনার ব্যবহারকারীদের কাছে গ্রহণযোগ্য কিনা তা নিশ্চিত করতে বিভিন্ন ডিভাইস এবং বিভিন্ন ইনপুট দিয়ে আপনার পৃষ্ঠাটি পরীক্ষা করুন।

ফোকাস ইন্ডিকেটর বেছে বেছে দেখানোর জন্য :focus-visible ব্যবহার করুন

:focus-visible ছদ্ম-শ্রেণী তখন প্রয়োগ করা হয় যখন কোনও উপাদান ফোকাস গ্রহণ করে এবং ব্রাউজার নির্ধারণ করে (হিউরিস্টিকস সহ) যে ফোকাস সূচক প্রদর্শন করা ব্যবহারকারীর জন্য উপকারী হবে। বিশেষ করে, যদি সাম্প্রতিকতম ব্যবহারকারীর মিথস্ক্রিয়া একটি কীবোর্ডের সাথে হয় এবং কী প্রেসে কোনও মেটা, ALT , OPTION , অথবা CONTROL কী অন্তর্ভুক্ত না থাকে, তাহলে :focus-visible মিলবে।

নিচের উদাহরণের বোতামটি বেছে বেছে একটি ফোকাস ইন্ডিকেটর দেখায়। যদি আপনি মাউস ব্যবহার করে ক্লিক করেন, তাহলে ফলাফল প্রথমে কীবোর্ড ব্যবহার করে ট্যাব করার ফলাফলের থেকে আলাদা হবে।

button:focus-visible {
  outline: 4px dashed orange;
}

একটি ফোকাসড এলিমেন্টের প্যারেন্ট স্টাইল করতে :focus-within ব্যবহার করুন

যখন কোনও উপাদান নিজেই ফোকাস গ্রহণ করে অথবা যখন কোনও শিশু উপাদান ফোকাস গ্রহণ করে, তখন :focus-within pseudo-class প্রয়োগ করা হয়। এটি পৃষ্ঠার একটি অঞ্চল হাইলাইট করে সেই অঞ্চলের দিকে ব্যবহারকারীর দৃষ্টি আকর্ষণ করতে ব্যবহার করা যেতে পারে।

উদাহরণস্বরূপ, একটি ফর্ম যখন ফর্মটি নির্বাচন করা হয় এবং যখন এর যেকোনো রেডিও বোতাম নির্বাচন করা হয়, উভয় ক্ষেত্রেই ফোকাস পায়।

form:focus-within {
  background: #ffecb3;
}

কখন ফোকাস সূচক প্রদর্শন করতে হবে

একটি ভালো প্রশ্ন হল নিজেকে জিজ্ঞাসা করা, "আপনি যদি মোবাইল ডিভাইস ব্যবহার করার সময় এই নিয়ন্ত্রণে ক্লিক করেন, তাহলে কি আপনি আশা করবেন যে এটি একটি কীবোর্ড প্রদর্শন করবে?"

• যদি হ্যাঁ হয় : ইনপুট ডিভাইস নির্বিশেষে, নিয়ন্ত্রণটি সর্বদা একটি ফোকাস সূচক প্রদর্শন করা উচিত। উদাহরণস্বরূপ, <input type="text"> উপাদানের ক্ষেত্রে এটি প্রায় সর্বদা সত্য। ইনপুট উপাদানটি কীভাবে ফোকাসে পরিণত হয় তা নির্বিশেষে ব্যবহারকারীকে কীবোর্ডের মাধ্যমে উপাদানটিতে ইনপুট পাঠাতে হবে।
• যদি না হয় : নিয়ন্ত্রণটি বেছে বেছে একটি ফোকাস সূচক প্রদর্শন করতে পারে। উদাহরণস্বরূপ, যখন একজন ব্যবহারকারী মাউস দিয়ে বা টাচস্ক্রিনে <button> ক্লিক করেন, তখন ক্রিয়াটি সম্পন্ন হয়। একটি ফোকাস সূচক অপ্রয়োজনীয় হতে পারে। তবে, যদি ব্যবহারকারী একটি কীবোর্ড দিয়ে নেভিগেট করেন, তাহলে একটি ফোকাস সূচক প্রদর্শন করা কার্যকর যাতে ব্যবহারকারী সিদ্ধান্ত নিতে পারেন যে তারা ENTER বা SPACE দিয়ে নিয়ন্ত্রণ সক্রিয় করতে চান কিনা।

outline: none

ব্রাউজাররা কখন ফোকাস ইন্ডিকেটর আঁকবে তা নির্ধারণ করার পদ্ধতিটি, সত্যি বলতে, খুবই বিভ্রান্তিকর। CSS ব্যবহার করে <button> এলিমেন্টের চেহারা পরিবর্তন করা বা একটি এলিমেন্টকে tabindex দেওয়া ব্রাউজারের ডিফল্ট ফোকাস রিং আচরণকে শুরু করে।

কখনও কখনও, ডেভেলপাররা CSS ব্যবহার করে ফোকাস ইন্ডিকেটরটি সরিয়ে ফেলেন:

/* Don't do this!!! */
:focus {
  outline: none;
}

এই সমস্যা সমাধানের একটি ভালো উপায় হল :focus এবং :focus-visible polyfill একত্রিত করা। কোডের প্রথম ব্লকটি পলিফিল কীভাবে কাজ করে তা প্রদর্শন করে এবং এর নীচের নমুনা অ্যাপটি একটি বোতামে ফোকাস সূচক পরিবর্তন করার জন্য পলিফিল ব্যবহারের একটি উদাহরণ প্রদান করে।

/*
  This hides the focus indicator if the element receives focus with a
  mouse, but it still shows up on keyboard focus.
*/
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

/*
  Optionally: Define a strong focus indicator for keyboard focus.
  If you choose to skip this step, then the browser's default focus
  indicator will be displayed instead.
*/
.js-focus-visible .focus-visible {
  ...
}