এটি একটি ছোট সিরিজের ২য় পোস্ট হতে যাচ্ছে যা আমরা ফর্ম অ্যাক্সেসিবিলিটি নিয়ে করছি। আপনি যদি প্রথম পোস্ট মিস করেন, চেক আউট সিউডো ক্লাস সহ অ্যাক্সেসযোগ্য ফর্ম. এই পোস্টে আমরা দেখতে যাচ্ছি :ফোকাস-দৃশ্যমান এবং কীভাবে এটি আপনার ওয়েব সাইটগুলিতে ব্যবহার করবেন!

ফোকাস টাচপয়েন্ট

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

মনে রাখবেন আপনার CSS এ এটি করবেন না!

:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}

আপনি ফোকাস অপসারণ, আপনি এটি জন্য মুছে ফেলুন সবাই! আমরা নিশ্চিত করতে চাই যে আমরা ফোকাস সংরক্ষণ করছি।

যদি কোনো কারণে আপনাকে ফোকাস অপসারণ করতে হয়, নিশ্চিত করুন যে সেখানেও ফলব্যাক আছে :focus আপনার ব্যবহারকারীদের জন্য শৈলী. সেই ফলব্যাকটি আপনার ব্র্যান্ডিং রঙের সাথে মেলে তবে নিশ্চিত করুন যে সেই রঙগুলিও অ্যাক্সেসযোগ্য। যদি বিপণন, ডিজাইন বা ব্র্যান্ডিং ডিফল্ট ফোকাস রিং শৈলী পছন্দ না করে, তাহলে এটি আবার যোগ করার সর্বোত্তম উপায়ে কথোপকথন শুরু করার এবং তাদের সাথে সহযোগিতা করার সময়।

focus-visible?

সিউডো ক্লাস, :focus-visible, ঠিক আমাদের ডিফল্ট মত :focus ছদ্ম ক্লাস। এটি ব্যবহারকারীকে একটি সূচক দেয় যে পৃষ্ঠায় কিছু ফোকাস করা হচ্ছে। আপনি যেভাবে লেখেন :focus-visible কাটা এবং শুকনো হয়:

:focus-visible {
  /* ... */
}

ব্যবহার করার সময় :focus-visible একটি নির্দিষ্ট উপাদানের সাথে, সিনট্যাক্সটি এরকম কিছু দেখায়:

.your-element:focus-visible {
  /*...*/
}

ব্যবহার সম্পর্কে মহান জিনিস :focus-visible আপনি কি আপনার উপাদানটিকে আলাদা করে তুলতে পারেন, উজ্জ্বল এবং সাহসী! উপাদানটি ক্লিক/ট্যাপ করা হয়েছে কিনা তা দেখানোর বিষয়ে চিন্তা করার দরকার নেই। আপনি যদি ক্লাসটি বাস্তবায়ন না করতে চান তবে ডিফল্ট হবে ব্যবহারকারী এজেন্ট ফোকাস রিং যা কারো কারো কাছে অবাঞ্ছিত।

এর পেছনের গল্প focus-visible

আমরা ছিল আগে :focus-visible, ব্যবহারকারী এজেন্ট স্টাইলিং প্রযোজ্য হবে :focus পৃষ্ঠার অধিকাংশ উপাদানে; বোতাম, লিঙ্ক, ইত্যাদি। এটি ফোকাসযোগ্য উপাদানটিতে একটি রূপরেখা বা "ফোকাস রিং" প্রয়োগ করবে। এটি কুৎসিত বলে মনে করা হয়েছিল, বেশিরভাগই ব্রাউজারে দেওয়া ডিফল্ট ফোকাস রিং পছন্দ করেনি। ফোকাস রিংটি দেখতে প্রতিকূল হওয়ার ফলে, বেশিরভাগ লেখকই এটিকে সরিয়ে দিয়েছেন... কোনো ফলব্যাক ছাড়াই। মনে রাখবেন, যখন আপনি অপসারণ :focus, এটি ব্যবহারযোগ্যতা হ্রাস করে এবং কীবোর্ড ব্যবহারকারীদের জন্য অভিজ্ঞতাকে দুর্গম করে তোলে।

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

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

প্রথম দিনের মধ্যে :focus-visible আমরা একটি ব্যবহার করছিলাম পলিফিল অ্যালিস বক্সহল এবং ব্রায়ান কার্ডেল দ্বারা তৈরি ফোকাস রিং পরিচালনা করতে, মজিলাও তাদের নিজস্ব ছদ্ম ক্লাস নিয়ে এসেছিল, :moz-focusring, অফিসিয়াল স্পেসিফিকেশন আগে. আপনি যদি ফোকাস-রিং এর প্রথম দিনগুলি সম্পর্কে আরও জানতে চান তবে চেক আউট করুন A11y কাস্ট রব ডডসনের সাথে।

ফোকাস গুরুত্ব

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

একটি উদাহরণ যা সর্বদা মনে আসে তা হল টু ব্লাইন্ড ব্রাদার্স ওয়েবসাইট. আপনি যদি ওয়েবসাইটে যান এবং ক্লিক/ট্যাপ করেন (এটি মোবাইলে কাজ করে), নীচের বাম কোণে বন্ধ চোখ, আপনি চোখ খোলা দেখতে পাবেন এবং একটি সিমুলেশন শুরু হবে। ব্র্যাডফোর্ড এবং ব্রায়ান ম্যানিং দুই ভাইই অল্প বয়সে স্টারগার্ড রোগে আক্রান্ত হন। স্টারগার্ড রোগ হল চোখের ম্যাকুলার অবক্ষয়ের একটি রূপ। সময়ের সাথে সাথে দুই ভাইই সম্পূর্ণ অন্ধ হয়ে যাবে। সাইটটি দেখুন এবং তারা কীভাবে দেখে তা দেখতে চোখ ক্লিক করুন।

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

ডেমো

নীচের ডেমো দেখায় কিভাবে :focus-visible আপনার CSS এ যোগ করা হলে কাজ করে। ভিডিওর প্রথম অংশটি মাউস দিয়ে নেভিগেট করার অভিজ্ঞতা দেখায় দ্বিতীয়টি শুধু আমার কীবোর্ড দিয়ে নেভিগেট করার অভিজ্ঞতা দেখায়। আমি নিজেও রেকর্ড করেছি এটা দেখানোর জন্য যে আমি আমার মাউস ব্যবহার করা থেকে আমার কীবোর্ডে স্যুইচ করেছি।

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

নীচের কোড প্রয়োগ করা হয় :focus-visible ফোকাসযোগ্য উপাদানগুলিতে।

:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

আপনি যদি নির্দিষ্ট করতে চান label বা প্রাপ্ত করার বোতাম :focus-visible শুধু দিয়ে ক্লাস শুরু করুন input or button যথাক্রমে.

button:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

/*** OR ***/

input:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

সহায়তা

যদি ব্রাউজার সাপোর্ট না করে :focus-visible মিথস্ক্রিয়া পরিচালনা করার জন্য আপনি জায়গায় ফিরে আসতে পারেন। নীচের কোড থেকে MDN খেলার মাঠ। আপনি ব্যবহার করতে পারেন @সমর্থন করে at-rule বা "বৈশিষ্ট্যের প্রশ্ন" সমর্থন চেক করতে। একটা জিনিস মনে রাখতে হবে, নিয়মটি কোডের উপরের দিকে রাখতে হবে বা অন্য গ্রুপের at-রুলের ভিতরে নেস্ট করতে হবে।

<button class="button with-fallback" type="button">Button with fallback</button>
<button class="button without-fallback" type="button">Button without fallback</button>

.button {
  margin: 10px;
  border: 2px solid darkgray;
  border-radius: 4px;
}

.button:focus-visible {
  /* Draw the focus when :focus-visible is supported */
  outline: 3px solid deepskyblue;
  outline-offset: 3px;
}

@supports not selector(:focus-visible) {
  .button.with-fallback:focus {
    /* Fallback for browsers without :focus-visible support */
    outline: 3px solid deepskyblue;
    outline-offset: 3px;
  }
}

আরও অ্যাক্সেসযোগ্যতা উদ্বেগ

আপনার অভিজ্ঞতা তৈরি করার সময় অ্যাক্সেসযোগ্যতার উদ্বেগগুলি মাথায় রাখতে হবে:

• নিশ্চিত করুন যে আপনি আপনার ফোকাস সূচকের জন্য যে রঙগুলি বেছে নিয়েছেন, যদি তা না হয়, তবে তা নথিভুক্ত তথ্য অনুসারে অ্যাক্সেসযোগ্য। WCAG 2.2 নন-টেক্সট কনট্রাস্ট (লেভেল AA)
• জ্ঞানীয় ওভারলোড ব্যবহারকারীর কষ্টের কারণ হতে পারে। বিভিন্ন ইন্টারেক্টিভ উপাদানের স্টাইল সামঞ্জস্যপূর্ণ রাখা নিশ্চিত করুন

ব্রাউজার সমর্থন

লিংক

• এসইও চালিত বিষয়বস্তু এবং পিআর বিতরণ। আজই পরিবর্ধিত পান।
• PlatoData.Network উল্লম্ব জেনারেটিভ Ai. নিজেকে ক্ষমতায়িত করুন। এখানে প্রবেশ করুন.
• প্লেটোএআইস্ট্রিম। Web3 ইন্টেলিজেন্স। জ্ঞান প্রসারিত. এখানে প্রবেশ করুন.
• প্লেটোইএসজি। কার্বন, ক্লিনটেক, শক্তি, পরিবেশ সৌর, বর্জ্য ব্যবস্থাপনা. এখানে প্রবেশ করুন.
• প্লেটো হেলথ। বায়োটেক এবং ক্লিনিক্যাল ট্রায়াল ইন্টেলিজেন্স। এখানে প্রবেশ করুন.
• উত্স: https://css-tricks.com/managing-user-focus-with-focus-visible/