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

ফর্ম অ্যাক্সেসযোগ্যতা?

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

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

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

কিভাবে ফোকাস

অ্যাক্সেসিবিলিটি এবং ওয়েব এক্সপেরিয়েন্সের ক্ষেত্রে ফোকাস হল একটি ভিজ্যুয়াল সূচক যে পৃষ্ঠায়, UI-তে বা কোনও উপাদানের মধ্যে কিছুর সাথে ইন্টারঅ্যাক্ট করা হচ্ছে। CSS বলতে পারে যখন একটি ইন্টারেক্টিভ উপাদান ফোকাস করা হয়।

সর্বদা নিশ্চিত করুন যে ফোকাস নির্দেশক বা ফোকাসযোগ্য উপাদানগুলির চারপাশে রিং অভিজ্ঞতার মাধ্যমে সঠিক রঙের বৈসাদৃশ্য বজায় রাখে।

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

:focus {
  * / INSERT STYLES HERE /*
}

আপনি যাই করুন না কেন, কখনই আপনার রূপরেখা সেট করবেন না 0 or none. এটি করলে পুরো অভিজ্ঞতা জুড়ে প্রত্যেকের জন্য একটি দৃশ্যমান ফোকাস সূচক মুছে যাবে। আপনি যদি ফোকাস অপসারণ করতে চান, আপনি করতে পারেন, কিন্তু পরে এটি আবার যোগ করতে ভুলবেন না। যখন আপনি আপনার CSS থেকে ফোকাস সরিয়ে দেন বা আউটলাইন সেট করেন 0 or none, এটি আপনার সমস্ত ব্যবহারকারীদের জন্য ফোকাস রিং সরিয়ে দেয়। এটি একটি CSS রিসেট ব্যবহার করার সময় অনেক দেখা যায়। একটি CSS রিসেট শৈলীগুলিকে একটি ফাঁকা ক্যানভাসে রিসেট করবে। এইভাবে আপনি খালি ক্যানভাসের দায়িত্বে আপনার ইচ্ছামতো স্টাইল করুন। আপনি যদি একটি CSS রিসেট ব্যবহার করতে চান তবে চেক আউট করুন Josh Comeau এর রিসেট.

*নিচে যা আছে তা করবেন না!

:focus {
  outline: 0;
}

:focus {
  outline: none;
}

ভেতরে দেখো!

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

<header>
  <h1>Semantic Markup</h1>
  <nav>
    <ul>
      <li><a href="/bn/">Home</a></li>
      <li><a href="/bn/about">About</a></li>
    </ul>
  </nav>
</header>

<section><!-- Code goes here --></section>

<section><!-- Code goes here --></section>

<aside><!-- Code goes here --></aside>

<footer><!-- Code goes here --></footer>

সার্জারির header, nav, main, section, aside, এবং footer সব শব্দার্থিক উপাদান. দ্য h1 এবং ul এছাড়াও শব্দার্থিক এবং অ্যাক্সেসযোগ্য।

যদি এমন একটি কাস্টম উপাদান না থাকে যা তৈরি করা প্রয়োজন, তাহলে ক div ব্যবহার করা জরিমানা, সঙ্গে জোড়া ARIA (অ্যাক্সেসিবল রিচ ইন্টারনেট অ্যাপ্লিকেশন). আমরা পরবর্তী পোস্টে ARIA-তে গভীরভাবে ডুব দিতে পারি। আপাতত ফোকাস করা যাক...দেখুন আমি সেখানে কি করেছি...এই CSS সিউডো ক্লাসে।

সার্জারির :focus-within সিউডো ক্লাস আপনাকে একটি উপাদান নির্বাচন করতে দেয় যখন এটিতে থাকা যেকোনো ডিসেন্ডেন্ট এলিমেন্টে ফোকাস থাকে।

:focus-within কর্মে!

এইচটিএমএল

<form>
  <div>
    <label for="firstName">First Name</label><input id="firstName" type="text">
  </div>
  <div>
    <label for="lastName">Last Name</label><input id="lastName" type="text">
  </div>
  <div>
    <label for="phone">Phone Number</label><input id="phone" type="text">
  </div>
  <div>
    <label for="message">Message</label><textarea id="message"></textarea>
  </div>
</form>

সিএসএস

form:focus-within {
  background: #ff7300;
  color: black;
  padding: 10px;
}

উপরের উদাহরণ কোডটি কমলা রঙের একটি পটভূমির রঙ যোগ করবে, কিছু প্যাডিং যোগ করবে এবং লেবেলের রঙ কালোতে পরিবর্তন করবে।

চূড়ান্ত পণ্য নীচের মত কিছু দেখায়. অবশ্যই স্টাইল পরিবর্তন করার সম্ভাবনা সীমাহীন, তবে এটি আপনাকে একটি ভাল ট্র্যাকে নিয়ে যেতে হবে যাতে সবার জন্য ওয়েব আরও অ্যাক্সেসযোগ্য হয়!

ব্যবহারের জন্য আরেকটি ব্যবহারের ক্ষেত্রে :focus-within লেবেলগুলিকে গাঢ়, একটি ভিন্ন রঙে পরিণত করা হবে বা কম দৃষ্টিভঙ্গি সহ ব্যবহারকারীদের জন্য তাদের বড় করা হবে৷ যে জন্য উদাহরণ কোড নীচের মত কিছু দেখতে হবে.

এইচটিএমএল

<form>
  <h1>:focus-within part 2!</h1>
  <label for="firstName">First Name: <input name="firstName" type="text" /></label>
  <label for="lastName">Last Name: <input name="lastName" type="text" /></label>
  <label for="phone">Phone number: <input type="tel" id="phone" /></label>
  <label for="message">Message: <textarea name="message" id="message"/></textarea></label>
</form>

সিএসএস

label {
  display: block;
  margin-right: 10px;
  padding-bottom: 15px;
}

label:focus-within {
  font-weight: bold;
  color: red;
  font-size: 1.6em;
}

:focus-within এছাড়াও অনুযায়ী বোর্ড জুড়ে মহান ব্রাউজার সমর্থন আছে আমি ব্যবহার করতে পারেন.

উপসংহার

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

অন্তর্ভুক্তিমূলক স্পেস তৈরি করতে শব্দার্থিক মার্কআপ এবং CSS-এর মতো প্রযুক্তি ব্যবহার করা ওয়েবকে আরও ভাল জায়গা তৈরি করার একটি গুরুত্বপূর্ণ অংশ, আসুন এগিয়ে যাওয়া এবং জীবন পরিবর্তন করা চালিয়ে যাই।

CSS-Tricks on এখানে আরেকটি দুর্দান্ত সম্পদ দেখুন ব্যবহার করে :focus-within.

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