CSS পডকাস্ট - 018: ফোকাস
আপনার ওয়েবপৃষ্ঠায়, আপনি একটি লিঙ্কে ক্লিক করেন যা ব্যবহারকারীকে ওয়েবসাইটের মূল বিষয়বস্তুতে নিয়ে যায়। এগুলিকে প্রায়শই স্কিপ লিঙ্ক বা অ্যাঙ্কর লিঙ্ক হিসাবে উল্লেখ করা হয়। যখন সেই লিঙ্কটি একটি কীবোর্ড দ্বারা সক্রিয় করা হয়, ট্যাব এবং এন্টার কী ব্যবহার করে, তখন মূল বিষয়বস্তুর ধারকটির চারপাশে একটি ফোকাস রিং থাকে। কেন এমন হল?
এর কারণ হল <main> একটি tabindex="-1" অ্যাট্রিবিউট মান রয়েছে, যার মানে এটি প্রোগ্রাম্যাটিকভাবে ফোকাস করা যেতে পারে। যখন <main> টার্গেট করা হয়—কারণ ব্রাউজার URL বারে #main-content id সাথে মেলে—এটি প্রোগ্রামেটিক ফোকাস পায়। এই পরিস্থিতিতে ফোকাস শৈলীগুলি অপসারণ করা লোভনীয়, তবে যথাযথভাবে এবং যত্ন সহকারে ফোকাস পরিচালনা করা একটি ভাল, অ্যাক্সেসযোগ্য, ব্যবহারকারীর অভিজ্ঞতা তৈরি করতে সহায়তা করে। মিথস্ক্রিয়াগুলিতে কিছু আগ্রহ যোগ করার জন্য এটি একটি দুর্দান্ত জায়গাও হতে পারে।
কেন ফোকাস গুরুত্বপূর্ণ?
একজন ওয়েব ডেভেলপার হিসেবে, একটি ওয়েবসাইটকে সবার জন্য অ্যাক্সেসযোগ্য এবং অন্তর্ভুক্ত করা আপনার কাজ। CSS এর মাধ্যমে অ্যাক্সেসযোগ্য ফোকাস স্টেট তৈরি করা এই দায়িত্বের একটি অংশ।
ফোকাস শৈলীগুলি এমন লোকেদের সাহায্য করে যারা একটি ওয়েবসাইট নেভিগেট করতে এবং ইন্টারঅ্যাক্ট করতে কীবোর্ড বা সুইচ নিয়ন্ত্রণের মতো একটি ডিভাইস ব্যবহার করে। যদি একটি উপাদান ফোকাস পায় এবং কোন ভিজ্যুয়াল ইঙ্গিত না থাকে, তাহলে একজন ব্যবহারকারী কী ফোকাসে আছে তার ট্র্যাক হারাতে পারেন। এটি নেভিগেশন সমস্যা তৈরি করতে পারে এবং এর ফলে অবাঞ্ছিত আচরণ হতে পারে যদি, বলুন, ভুল লিঙ্ক অনুসরণ করা হয়।
কিভাবে উপাদান ফোকাস পেতে
কিছু উপাদান স্বয়ংক্রিয়ভাবে ফোকাসযোগ্য; এগুলি এমন উপাদান যা মিথস্ক্রিয়া এবং ইনপুট গ্রহণ করে, যেমন <a> , <button> , <input> এবং <select> । সংক্ষেপে, সমস্ত ফর্ম উপাদান, বোতাম এবং লিঙ্ক। আপনি সাধারণত পৃষ্ঠায় এগিয়ে যাওয়ার জন্য ট্যাব কী ব্যবহার করে একটি ওয়েবসাইটের ফোকাসযোগ্য উপাদানগুলিতে নেভিগেট করতে পারেন এবং পিছনে যেতে shift + ট্যাব ব্যবহার করতে পারেন।
tabindex নামে একটি এইচটিএমএল অ্যাট্রিবিউটও রয়েছে যা আপনাকে ট্যাবিং ইনডেক্স পরিবর্তন করতে দেয়—এটি হল সেই ক্রম যাতে উপাদানগুলি ফোকাস করা হয়—প্রতিবার যখন কেউ তাদের ট্যাব কী টিপে, বা URL-এ হ্যাশ পরিবর্তনের মাধ্যমে বা জাভাস্ক্রিপ্ট দ্বারা ফোকাস স্থানান্তরিত হয় ঘটনা যদি একটি HTML এলিমেন্টের tabindex 0 এ সেট করা থাকে, তাহলে এটি ট্যাব কী-এর মাধ্যমে ফোকাস পেতে পারে এবং এটি গ্লোবাল ট্যাব ইনডেক্সকে সম্মান করবে, যা ডকুমেন্ট সোর্স অর্ডার দ্বারা সংজ্ঞায়িত করা হয়।
আপনি যদি tabindex -1 তে সেট করেন, এটি শুধুমাত্র প্রোগ্রাম্যাটিকভাবে ফোকাস গ্রহণ করতে পারে, যার মানে শুধুমাত্র যখন একটি জাভাস্ক্রিপ্ট ইভেন্ট ঘটে বা হ্যাশ পরিবর্তন (ইউআরএল-এ উপাদানের id সাথে মিলে যায়) ঘটে। আপনি যদি ট্যাবিনডেক্সকে 0 এর চেয়ে বেশি tabindex সেট করেন, তাহলে এটি নথির উৎস ক্রম দ্বারা সংজ্ঞায়িত গ্লোবাল ট্যাব সূচক থেকে সরানো হবে। ট্যাবিং অর্ডার এখন tabindex এর মান দ্বারা সংজ্ঞায়িত করা হবে, তাই tabindex="1" সহ একটি উপাদান tabindex="2" সহ একটি উপাদানের আগে ফোকাস পাবে, উদাহরণস্বরূপ।
স্টাইলিং ফোকাস
ডিফল্ট ব্রাউজার আচরণ যখন একটি উপাদান ফোকাস গ্রহণ করে একটি ফোকাস রিং উপস্থাপন করা হয়। এই ফোকাস রিং ব্রাউজার এবং অপারেটিং সিস্টেম উভয়ের মধ্যে পরিবর্তিত হয়।
এই আচরণটি CSS এর সাথে পরিবর্তন করা যেতে পারে, :focus , :focus-within এবং :focus-visible pseudo-classগুলি ব্যবহার করে যা আপনি pseudo-classes পাঠে শিখেছেন। একটি উপাদানের ডিফল্ট শৈলীর সাথে বৈসাদৃশ্য রয়েছে এমন একটি ফোকাস শৈলী সেট করা গুরুত্বপূর্ণ। উদাহরণস্বরূপ, একটি সাধারণ পদ্ধতি হল outline সম্পত্তি ব্যবহার করা।
a:focus {
outline: 2px solid slateblue;
}
outline প্রপার্টি একটি লিঙ্কের টেক্সটের খুব কাছাকাছি প্রদর্শিত হতে পারে, কিন্তু outline-offset প্রপার্টি এতে সাহায্য করতে পারে, কারণ এটি জ্যামিতিক আকারকে প্রভাবিত না করে অতিরিক্ত ভিজ্যুয়াল padding যোগ করে যা উপাদানটি পূরণ করে। outline-offset জন্য একটি ধনাত্মক সংখ্যা মান রূপরেখাটিকে বাইরের দিকে ঠেলে দেবে, একটি নেতিবাচক মান রূপরেখাটিকে ভিতরের দিকে টেনে আনবে।
বর্তমানে কিছু ব্রাউজারে, আপনি যদি আপনার উপাদানে একটি border-radius সেট করে থাকেন এবং outline ব্যবহার করেন, তাহলে তা মিলবে না—আউটলাইনে তীক্ষ্ণ কোণ থাকবে। এই কারণে, এটি একটি ছোট অস্পষ্ট ব্যাসার্ধ সহ একটি box-shadow ব্যবহার করতে প্রলুব্ধ হয় কারণ box-shadow আকারে ক্লিপ করে, border-radius সম্মান করে, তবে এই শৈলীটি উইন্ডোজ হাই কনট্রাস্ট মোডে দেখাবে না । এর কারণ হল উইন্ডোজ হাই কনট্রাস্ট মোড ছায়া প্রয়োগ করে না, এবং বেশিরভাগ ক্ষেত্রে ব্যবহারকারীর পছন্দের সেটিংসের জন্য পটভূমির ছবিগুলিকে উপেক্ষা করে।
সংক্ষেপে
একটি উপাদানের ডিফল্ট অবস্থার সাথে বৈসাদৃশ্য রয়েছে এমন একটি ফোকাস অবস্থা তৈরি করা অবিশ্বাস্যভাবে গুরুত্বপূর্ণ। ডিফল্ট ব্রাউজার শৈলীগুলি ইতিমধ্যেই আপনার জন্য এটি করে, তবে আপনি যদি এই আচরণটি পরিবর্তন করতে চান তবে নিম্নলিখিতগুলি মনে রাখবেন:
-
outline: none। -
box-shadowদিয়েoutlineশৈলী প্রতিস্থাপন এড়িয়ে চলুন। যেহেতু তারা উইন্ডোজ হাই কনট্রাস্ট মোডে দেখায় না। - শুধুমাত্র একটি HTML উপাদানে
tabindexজন্য একটি ইতিবাচক মান সেট করুন যদি আপনি একেবারেই করতে চান। - নিশ্চিত করুন যে ফোকাস স্টেট ডিফল্ট স্টেট বনাম খুব পরিষ্কার।
আপনার উপলব্ধি পরীক্ষা করুন
ফোকাস আপনার জ্ঞান পরীক্ষা
নিচের কোনটি স্বয়ংক্রিয়ভাবে ফোকাসযোগ্য উপাদান?
<a><p><button><input><output><select>নিচের কোন ইনপুট ডিভাইস ফোকাস সেট করতে পারে?