শৈলী ফোকাস

রব ডডসন

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

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

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

ইনপুট ডিভাইস (মাউস, কীবোর্ড, স্টাইলাস, ইত্যাদি) বা এটিকে ফোকাস করার জন্য ব্যবহৃত পদ্ধতি নির্বিশেষে :focus সিউডো-ক্লাস যে কোনো সময় কোনো উপাদান ফোকাস করা হয়। উদাহরণস্বরূপ, নীচের <div> একটি tabindex রয়েছে যা এটিকে ফোকাসযোগ্য করে তোলে। এটির :focus অবস্থার জন্য একটি কাস্টম শৈলীও রয়েছে:

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

আপনি এটিতে ক্লিক করার জন্য একটি মাউস বা এটিতে ট্যাব করার জন্য একটি কীবোর্ড ব্যবহার করুন না কেন, <div> সর্বদা একই দেখাবে।

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

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

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

আপনি যদি macOS-এ Chrome-এ একটি মাউস দিয়ে <button> -এ ক্লিক করেন তাহলে আপনার কাস্টম ফোকাস শৈলী দেখতে হবে। যাইহোক, আপনি ম্যাকওএস-এ সাফারিতে <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 will hide the focus indicator if the element receives focus via the
  mouse, but it will still show 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 {
  …
}