पब्लिश होने की तारीख: 27 मई, 2026
बेसललाइन के बारे में हर महीने मिलने वाली जानकारी में आपका स्वागत है. अप्रैल 2026 में, सीएसएस की कुछ नई सुविधाएं और सटीक गणित के फ़ंक्शन उपलब्ध कराए गए. साथ ही, स्ट्रक्चरल सिमैंटिक एलिमेंट और अन्य वेब एपीआई के साथ-साथ डेवलपर कम्यूनिटी में होने वाली गतिविधियों के बारे में भी जानकारी दी गई.
2026 में बेसलाइन और ऐक्सेस करने की सुविधा
वेब के लिए ऐप्लिकेशन बनाने का मतलब है कि ऐसा ऐप्लिकेशन बनाना जिसे हर कोई इस्तेमाल कर सके. A11y Up के हाल ही के एक लेख में बताया गया है कि जब डेवलपर वेब स्टैंडर्ड का इस्तेमाल करते हैं, तो सुलभता से जुड़ी ज़रूरतों को पूरा करना ज़्यादा असरदार होता है. इंजीनियर, कुछ समय से कस्टम और अक्सर हैवी JavaScript के समाधान उपलब्ध करा रहे हैं. इनसे ऐक्सेस किए जा सकने वाले पैटर्न को फिर से बनाया जा सकता है. ये पैटर्न अब वेब प्लैटफ़ॉर्म का हिस्सा हैं. ये खास समाधान कभी-कभी कमज़ोर होते हैं. ये सहायक टेक्नोलॉजी के साथ काम नहीं करते और इन्हें बनाए रखना मुश्किल होता है.
इस लेख में बताया गया है कि वेब प्लैटफ़ॉर्म की सुविधाएं, अलग-अलग ब्राउज़र पर काम करती हैं. इसलिए, सुलभता को ध्यान में रखते हुए डेवलपमेंट करना ज़्यादा असरदार होता है. वेब सुविधाओं का इस्तेमाल करके, सामान्य लक्ष्यों को हासिल किया जा सकता है. साथ ही, यूज़र इंटरफ़ेस पैटर्न से ज़्यादातर काम आसानी से हो जाता है. इससे सही सिमैंटिक सीधे तौर पर स्क्रीन रीडर और कीबोर्ड नेविगेशन की सुविधाओं के लिए उपलब्ध हो जाते हैं. यहां बेसलाइन, एक गाइड के तौर पर काम करती है. इससे पता चलता है कि कोई वेब सुविधा कब इतनी बेहतर हो जाती है कि उसका आकलन किया जा सके और उसे आपके प्रोजेक्ट में इस्तेमाल किया जा सके.
हाल ही में उपलब्ध कराई गई Baseline की सुविधाएं
इस सेक्शन में दी गई सुविधाएं, अप्रैल 2026 से कोर ब्राउज़र सेट में काम करती हैं. अब ये सुविधाएं, नए वर्शन में उपलब्ध हैं.
सीएसएस contrast-color() फ़ंक्शन
डाइनैमिक थीम इंजन और पसंद के मुताबिक बनाए जा सकने वाले कॉम्पोनेंट की वजह से, डेवलपर को कई कलर सिस्टम बनाए रखने पड़े हैं. ऐसा इसलिए, ताकि वे ज़्यादा कंट्रास्ट के लिए उपयोगकर्ता की पसंद को पूरा कर सकें. सीएसएस 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));
}
इससे, पढ़ने में आसान बनाने के लिए तय किए गए स्टैंडर्ड को पूरा किया जा सकता है. इसके लिए, आपको किसी कस्टम समाधान या ऐसी सीएसएस की ज़रूरत नहीं होती जिसे मैनेज करना मुश्किल हो. आपको अब भी अपने मिड-टोन कलर चुनने पर ध्यान देना चाहिए. हालांकि, इस फ़ंक्शन से, उपयोगकर्ता की ज़रूरत के हिसाब से सीएसएस को मैनेज करने के लिए ज़रूरी बॉयलरप्लेट सीएसएस कम हो जाती है. ज़्यादा जानकारी के लिए, MDN का contrast-color() रेफ़रंस पेज देखें.
Math.sumPrecise()
स्टैंडर्ड लूप या Array.prototype.reduce() जैसी तरीकों का इस्तेमाल करके संख्याओं के क्रम को जोड़ने पर, फ़्लोटिंग-पॉइंट की सटीक वैल्यू में अंतर आ सकता है. इससे अहम वित्तीय हिसाब-किताब या टेलीमेट्री की कुल संख्या पर असर पड़ सकता है.
Math.sumPrecise() तरीके से इस समस्या को हल किया जा सकता है. यह संख्याओं के एक से ज़्यादा ग्रुप को स्वीकार करता है और सटीक योग देने के लिए, सटीक रूटीन को लागू करता है. Math.sumPrecise() के लिए MDN के दस्तावेज़ में, इसके काम करने के तरीके के बारे में जानें.
व्यापक रूप से उपलब्ध Baseline की सुविधाएं
नीचे दी गई सुविधाएं, Baseline के साथ बड़े पैमाने पर उपलब्ध हो गई हैं. इसका मतलब है कि अब ये सुविधाएं, आपके प्रोजेक्ट में बड़े पैमाने पर इस्तेमाल की जा सकती हैं और इनके साथ काम कर सकती हैं.
<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 पेज पर, लागू करने से जुड़ी जानकारी पढ़ें.
वेब ऑथेंटिकेशन की सार्वजनिक कुंजी का ऐक्सेस
Web Authentication (WebAuthn) API की मदद से, बिना पासवर्ड के लॉगिन करने की सुविधा अब कम जटिल हो गई है. ऐसा इसलिए, क्योंकि AuthenticatorAttestationResponse इंटरफ़ेस पर डायरेक्ट प्रॉपर्टी एक्सट्रैक्टर के लिए ज़्यादा सहायता उपलब्ध है. getPublicKey() और getPublicKeyAlgorithm() जैसे तरीकों की मदद से, ब्राउज़र आपके लिए सार्वजनिक कुंजी की जानकारी निकालता है. इसके लिए, आपको रॉ बाइनरी डेटा के साथ काम करने की ज़रूरत नहीं होती. इन प्रॉपर्टी और उन्हें इस्तेमाल करने के तरीके के बारे में ज़्यादा जानने के लिए, AuthenticatorAttestationResponse के लिए MDN पेज पर जाएं.
String.prototype.isWellFormed() और String.prototype.toWellFormed()
JavaScript स्ट्रिंग, UTF-16 में एन्कोड की जाती हैं. यह यूनिकोड पेयर में जटिल वर्णों और इमोजी को मैप करता है. अगर इस बात का ध्यान रखे बिना किसी स्ट्रिंग को स्लाइस किया जाता है, तो सरोगेट पेयर के अलग-अलग हिस्से (जिन्हें लोन सरोगेट कहा जाता है) बने रहेंगे. इससे टेक्स्ट गलत फ़ॉर्मैट में दिखेगा.
isWellFormed() की मदद से डेवलपर यह देख सकते हैं कि किसी स्ट्रिंग में अकेले सरोगेट हैं या नहीं. यह फ़ंक्शन, बूलियन वैल्यू दिखाता है. अगर कोई स्ट्रिंग पुष्टि करने में पास नहीं होती है, तो toWellFormed() को कॉल करके, गलत सरोगेट को स्टैंडर्ड यूनिकोड रिप्लेसमेंट वर्ण (U+FFFD) से बदला जा सकता है. यह encodeURI() जैसे फ़ंक्शन को कॉल करने से पहले मददगार होता है. ऐसा इसलिए, क्योंकि गलत तरीके से बनाए गए इनपुट मिलने पर, encodeURI() एक URIError थ्रो करेगा. String.prototype.isWellFormed() के लिए MDN दस्तावेज़ में, इन तरीकों के काम करने के तरीके के बारे में जानें.
ARIA एट्रिब्यूट रिफ़्लेक्शन
इंटरैक्टिव एलिमेंट पर सुलभता की स्थितियां अपडेट करने के लिए, स्टैंडर्ड डीओएम एट्रिब्यूट के तरीकों का इस्तेमाल करके राउंडट्रिप करना ज़रूरी होता है. उदाहरण के लिए, 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 टारगेट को JavaScript प्रॉपर्टी के तौर पर इस्तेमाल करने से, यूज़र इंटरफ़ेस (यूआई) फ़्रेमवर्क और स्टेट मैनेजमेंट टूल, सुलभता से जुड़े कॉन्टेक्स्ट को ज़्यादा भरोसेमंद तरीके से मैनेज कर पाते हैं. साथ ही, इससे स्क्रीन रीडर के कॉन्टेक्स्ट को आपके ऐप्लिकेशन की मौजूदा स्थिति के साथ अलाइन रखने में मदद मिलती है. दिखाई गई प्रॉपर्टी की पूरी सूची देखने के लिए, MDN की Element इंस्टेंस प्रॉपर्टी के बारे में गाइड देखें.
अभी के लिए बस इतना ही
अगर हमने Baseline से जुड़ी कोई जानकारी नहीं दी है, तो हमें बताएं. हम आने वाले समय में उसे शामिल करना न भूलें! अगर आपका कोई सवाल है या आपको Baseline के बारे में सुझाव/राय देनी है या शिकायत करनी है, तो हमारे समस्या ट्रैकर में जाकर समस्या की जानकारी दें.