এপ্রিল ২০২৬ বেসলাইন মাসিক সারসংক্ষেপ

Jeremy Wagner

প্রকাশিত: ২৭ মে, ২০২৬

বেসলাইন মাসিক সারসংক্ষেপে আপনাকে স্বাগতম। এপ্রিল ২০২৬-এ, কিছু CSS সক্ষমতা এবং নির্ভুল গাণিতিক ইউটিলিটি নতুনভাবে উপলব্ধ হয়েছে, পাশাপাশি কাঠামোগত শব্দার্থিক উপাদান এবং অন্যান্য ওয়েব এপিআই সংযোজন ব্যাপকভাবে উপলব্ধ হয়েছে, এবং এর সাথে ডেভেলপার কমিউনিটিতে ঘটে চলা ঘটনাবলীও তুলে ধরা হয়েছে।

২০২৬ সালে ভিত্তিস্তর এবং প্রবেশগম্যতা

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

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

বেসলাইন নতুন উপলব্ধ বৈশিষ্ট্য

এই বিভাগের বৈশিষ্ট্যগুলি এপ্রিল ২০২৬ থেকে মূল ব্রাউজার সেটে সমর্থিত এবং এখন বেসলাইন হিসেবে নতুনভাবে উপলব্ধ।

CSS contrast-color() ফাংশন

ডাইনামিক থিম ইঞ্জিন এবং কাস্টমাইজযোগ্য কম্পোনেন্টগুলো উচ্চ কনট্রাস্টের প্রতি ব্যবহারকারীর পছন্দ মেটাতে ডেভেলপারদের একাধিক কালার সিস্টেম রক্ষণাবেক্ষণ করতে বাধ্য করেছে। CSS-এর contrast-color() ফাংশনটি এই রক্ষণাবেক্ষণের ভার সম্পূর্ণরূপে ব্রাউজারের উপর স্থানান্তর করে। ফাংশনটিতে একটি বেস ইনপুট কালার পাস করলে, ইঞ্জিনটি সেটিকে মূল্যায়ন করে একটি অত্যন্ত কনট্রাস্টযুক্ত সহযোগী কালার রিটার্ন করে, যা সাধারণত কালো বা সাদার মধ্যে যেকোনো একটিতে ম্যাপ হয়, এবং এই ম্যাপিংয়ের উপর নির্ভর করে যে কোনটি সর্বোচ্চ পঠনযোগ্যতার স্কোর প্রদান করে।

.card-header {
  background-color: var(--dynamic-bg-color);
  /* Automatically resolves to the highest-contrast text color */
  color: contrast-color(var(--dynamic-bg-color));
}

এটি আপনাকে কোনো কাস্টম সমাধান বা রক্ষণাবেক্ষণে কঠিন CSS ছাড়াই, পাঠযোগ্যতার জন্য অ্যাক্সেসিবল মান পূরণ করতে দেয়। যদিও আপনার মিড-টোন রঙের পছন্দের দিকে নজর রাখা উচিত, এই ফাংশনটি ব্যবহারকারীর সুবিধার জন্য প্রয়োজনীয় বয়লারপ্লেট CSS কমিয়ে দেয়। আপনি contrast-color() এর জন্য MDN রেফারেন্স পৃষ্ঠায় আরও জানতে পারবেন।

Math.sumPrecise()

সাধারণ লুপ বা Array.prototype.reduce() এর মতো পদ্ধতি ব্যবহার করে সংখ্যার ক্রম যোগ করলে ফ্লোটিং-পয়েন্ট নির্ভুলতা হ্রাস পেতে পারে। এটি গুরুত্বপূর্ণ আর্থিক হিসাব বা টেলিমেট্রির মোট যোগফলকে প্রভাবিত করতে পারে।

Math.sumPrecise() মেথডটি এই সমস্যার সমাধান করে। এটি সংখ্যার একটি ইটারেবল গ্রহণ করে এবং একটি নির্ভুল যোগফল প্রদানের জন্য একটি প্রিসিশন-সেফ রুটিন সম্পাদন করে। Math.sumPrecise() এর কার্যপ্রণালী সম্পর্কে জানতে MDN ডকুমেন্টেশনটি দেখুন।

বেসলাইন ব্যাপকভাবে উপলব্ধ বৈশিষ্ট্য

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

<search> উপাদান

এইচটিএমএল <search> এলিমেন্টটি ফর্ম কন্ট্রোল, ফিল্টারিং মেকানিজম এবং সাবমিশন ইউটিলিটিগুলোর জন্য একটি সুস্পষ্ট র‍্যাপার হিসেবে কাজ করে, যা সম্মিলিতভাবে একটি ওয়েব অ্যাপ্লিকেশনে সার্চ অভিজ্ঞতা উপস্থাপন করে।

<search>
  <form action="/site-search">
    <label for="query">Search documentation</label>
    <input type="search" id="query" name="q">
    <button>Go</button>
  </form>
</search>

কোনো ধারণকারী এলিমেন্টকে <search> ট্যাগে পরিবর্তন করার মাধ্যমে, আপনি ব্যবহারকারীদের একটি অ্যাক্সেসিবিলিটি সুবিধা প্রদান করেন। ব্রাউজার স্বয়ংক্রিয়ভাবে এলিমেন্টটিকে search এর একটি অন্তর্নিহিত ARIA ল্যান্ডমার্ক রোল প্রদান করে, ফলে <form> এলিমেন্টে role="search" উল্লেখ করার প্রয়োজন হয় না। এটি স্ক্রিন রিডারদের সার্চ ইন্টারফেস শনাক্ত করতে এবং ব্যবহারকারীদের সেখানে যেতে সাহায্য করে। <search> এলিমেন্টের জন্য MDN পৃষ্ঠায় এর বাস্তবায়নের বিস্তারিত বিবরণ পড়ুন।

ওয়েব প্রমাণীকরণ পাবলিক কী অ্যাক্সেস

AuthenticatorAttestationResponse ইন্টারফেসে সরাসরি প্রপার্টি এক্সট্র্যাক্টরের ব্যাপক সমর্থনের ফলে ওয়েব অথেন্টিকেশন (WebAuthn) API ব্যবহার করে পাসওয়ার্ড ছাড়া কাজ করা এখন আরও সহজ হয়েছে। getPublicKey() এবং getPublicKeyAlgorithm() এর মতো মেথডগুলোর মাধ্যমে ব্রাউজার সরাসরি বাইনারি ডেটা নিয়ে কাজ না করেই আপনার জন্য পাবলিক কী-এর বিবরণ বের করে নেয়। এই প্রপার্টিগুলো এবং কীভাবে সেগুলো ব্যবহার করতে হয় সে সম্পর্কে আরও জানতে AuthenticatorAttestationResponse এর MDN পেজটি দেখুন।

String.prototype.isWellFormed() এবং String.prototype.toWellFormed()

জাভাস্ক্রিপ্ট স্ট্রিংগুলো UTF-16 দ্বারা এনকোড করা থাকে, যা জটিল ক্যারেক্টার এবং ইমোজিগুলোকে ইউনিকোড জোড়ায় ম্যাপ করে। এই বিষয়টি বিবেচনা না করে যদি কোনো স্ট্রিংকে স্লাইস করা হয়, তাহলে সারোগেট জোড়ার বিচ্ছিন্ন অর্ধেক অংশ—যা লোন সারোগেট নামে পরিচিত—থেকে যাবে, যার ফলে টেক্সটটি বিকৃত হয়ে যাবে।

isWellFormed() ফাংশনটি ডেভেলপারদেরকে কোনো স্ট্রিং-এ একক সারোগেট আছে কিনা তা পরীক্ষা করতে দেয় এবং একটি বুলিয়ান মান রিটার্ন করে। যদি কোনো স্ট্রিং ভ্যালিডেশনে ব্যর্থ হয়, তবে আপনি toWellFormed() কল করে সেই অবাঞ্ছিত সারোগেটগুলোকে স্ট্যান্ডার্ড ইউনিকোড রিপ্লেসমেন্ট ক্যারেক্টার ( U+FFFD ) দিয়ে প্রতিস্থাপন করতে পারেন। encodeURI() এর মতো ফাংশন কল করার আগে এটি সহায়ক, কারণ এই ফাংশনগুলো ত্রুটিপূর্ণ ইনপুট পেলে একটি URIError থ্রো করে। এই মেথডগুলো কীভাবে কাজ করে তা জানতে String.prototype.isWellFormed() এর MDN ডকুমেন্টেশন দেখুন।

ARIA বৈশিষ্ট্যের প্রতিফলন

ইন্টারেক্টিভ এলিমেন্টগুলির অ্যাক্সেসিবিলিটি স্টেট আপডেট করার জন্য স্ট্যান্ডার্ড DOM অ্যাট্রিবিউট মেথড ব্যবহার করতে হতো—উদাহরণস্বরূপ, element.setAttribute('aria-expanded', 'true') । ARIA অ্যাট্রিবিউট রিফ্লেকশন অ্যাক্সেসিবিলিটি প্রপার্টিগুলিকে অবজেক্ট প্রপার্টি হিসাবে প্রতিফলিত করে এই প্রক্রিয়াটিকে সহজ করে তোলে।

Element ইন্টারফেসটি ARIA অ্যাট্রিবিউটগুলোকে সরাসরি ইনস্ট্যান্স প্রপার্টিতে প্রতিফলিত করে, যেমন element.ariaExpanded , element.ariaChecked , এবং element.ariaHidden । এর ফলে আপনি ডট-নোটেশন সিনট্যাক্স ব্যবহার করে অ্যাক্সেসিবিলিটি স্টেটগুলো পরিবর্তন করতে পারেন:

// Clean and readable state updates
toggleButton.ariaExpanded = toggleButton.ariaExpanded === "true" ? "false" : "true";

ARIA টার্গেটগুলোকে জাভাস্ক্রিপ্ট প্রপার্টি হিসেবে বিবেচনা করলে UI ফ্রেমওয়ার্ক এবং স্টেট ম্যানেজমেন্ট টুলগুলো সহায়ক কনটেক্সটগুলোকে আরও নির্ভরযোগ্যভাবে সমন্বয় করতে পারে, এবং এটি স্ক্রিন রিডার কনটেক্সটগুলোকে আপনার অ্যাপ্লিকেশনের প্রকৃত স্টেটের সাথে সামঞ্জস্যপূর্ণ রাখতে সাহায্য করে। রিফ্লেক্টেড প্রপার্টিগুলোর একটি সম্পূর্ণ তালিকার জন্য, Element instance properties বিষয়ক MDN গাইডটি দেখুন।

এখানেই শেষ।

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