منتشر شده: ۲۷ مه ۲۰۲۶
به خلاصه ماهانه Baseline خوش آمدید. در آوریل ۲۰۲۶، برخی از قابلیتهای CSS و ابزارهای ریاضی دقیق به تازگی در دسترس قرار گرفتند، در حالی که عناصر معنایی ساختاری و سایر افزونههای Web API به طور گسترده در دسترس قرار گرفتند، همراه با اتفاقاتی در جامعه توسعهدهندگان.
خط مبنا و دسترسی در سال ۲۰۲۶
ساختن برای وب به معنای ساختن تجربهای است که همه بتوانند از آن استفاده کنند، و مطلبی که اخیراً از A11y Up منتشر شده است ، این موضوع را مطرح میکند که در نظر گرفتن نیازهای دسترسیپذیری زمانی که توسعهدهندگان به استانداردهای وب تکیه میکنند، مؤثرتر است. مدتی است که مهندسان راهحلهای جاوا اسکریپت سفارشی و اغلب سنگین را برای بازآفرینی الگوهای قابل دسترسی که اکنون بخشی از پلتفرم وب هستند، ارائه دادهاند. این راهحلهای سفارشی گاهی اوقات شکننده هستند، مستعد شکستن در برابر فناوری کمکی هستند و نگهداری آنها چالش برانگیز است.
این مقاله تأکید میکند که با دستیابی ویژگیهای پلتفرم وب به قابلیت همکاری بین مرورگرها، توسعه با در نظر گرفتن دسترسیپذیری، کاری مؤثرتر میشود. استفاده از ویژگیهای وب برای دستیابی به اهداف مشترک و الگوهای رابط کاربری، بخش زیادی از بار سنگین را بر عهده میگیرد و معانی صحیح را مستقیماً در اختیار خوانندگان صفحه نمایش و ابزارهای ناوبری صفحه کلید قرار میدهد. خط پایه در اینجا به عنوان یک راهنما عمل میکند و لحظهای را که یک ویژگی وب به اندازه کافی بالغ شده است تا بتوان آن را ارزیابی و در پروژههای خود استفاده کرد، نشان میدهد.
ویژگیهای جدید پایه
ویژگیهای این بخش از آوریل ۲۰۲۶ در مجموعه مرورگر اصلی پشتیبانی میشوند و اکنون به صورت پایهای (Baseline) در دسترس هستند.
تابع contrast-color() در CSS
موتورهای قالب پویا و اجزای قابل تنظیم، توسعهدهندگان را مجبور کردهاند که سیستمهای رنگی متعددی را برای تطبیق با ترجیح کاربر برای کنتراست بالا حفظ کنند. تابع contrast-color() در CSS این بار نگهداری را کاملاً به مرورگر منتقل میکند. با ارسال یک رنگ ورودی پایه به این تابع، موتور یک رنگ همراه با کنتراست بالا را ارزیابی و برمیگرداند، که معمولاً بسته به اینکه کدام یک بالاترین امتیاز خوانایی را ارائه میدهد، به سیاه یا سفید نگاشت میشود.
.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 تکراری مورد نیاز برای مدیریت این تطبیق کاربر را کاهش میدهد. میتوانید اطلاعات بیشتر را در صفحه مرجع MDN برای contrast-color() بیابید.
Math.sumPrecise()
جمع کردن دنبالههای اعداد با استفاده از حلقههای استاندارد یا متدهایی مانند Array.prototype.reduce() میتواند منجر به از دست رفتن دقت اعشاری شود. این میتواند بر محاسبات مالی مهم یا مجموعهای تلهمتری تأثیر بگذارد.
متد Math.sumPrecise() این مشکل را حل میکند. این متد مجموعهای از اعداد را به عنوان ورودی میگیرد و یک روال دقیق و ایمن را برای ارائه یک مجموع دقیق اجرا میکند. نگاهی به سازوکار Math.sumPrecise() در مستندات MDN بیندازید.
ویژگیهای پایه که به طور گسترده در دسترس هستند
ویژگیهای زیر به صورت گسترده در Baseline در دسترس قرار گرفتند، به این معنی که اکنون به طور گسترده سازگار و قابل استفاده در پروژههای شما هستند.
عنصر <search>
عنصر <search> در HTML به عنوان یک پوشش صریح برای کنترلهای فرم، مکانیسمهای فیلترینگ و ابزارهای ارسال عمل میکند که در مجموع نشاندهنده یک تجربه جستجو در یک برنامه وب هستند.
<search>
<form action="/site-search">
<label for="query">Search documentation</label>
<input type="search" id="query" name="q">
<button>Go</button>
</form>
</search>
با تغییر یک عنصر حاوی تگ <search> ، شما یک مزیت دسترسیپذیری برای کاربران فراهم میکنید. مرورگر به طور خودکار یک نقش ضمنی ARIA برای search به عنصر اختصاص میدهد و نیاز به تعیین role="search" در عنصر <form> را از بین میبرد. این به صفحهخوانها اجازه میدهد تا رابطهای جستجو را شناسایی کرده و به کاربران در پیمایش آنها کمک کنند. جزئیات پیادهسازی عنصر <search> را در صفحه MDN بخوانید.
دسترسی به کلید عمومی احراز هویت وب
به لطف پشتیبانی گسترده از استخراجکنندههای مستقیم ویژگی در رابط AuthenticatorAttestationResponse ، اکنون بدون نیاز به کار با دادههای باینری خام، بدون نیاز به رمز عبور، استفاده از API احراز هویت وب (WebAuthn) آسانتر شده است. با روشهایی مانند getPublicKey() و getPublicKeyAlgorithm() ، مرورگر جزئیات کلید عمومی را برای شما استخراج میکند. برای کسب اطلاعات بیشتر در مورد این ویژگیها و نحوه استفاده از آنها، به صفحه MDN مربوط به AuthenticatorAttestationResponse مراجعه کنید .
String.prototype.isWellFormed() و String.prototype.toWellFormed()
رشتههای جاوا اسکریپت با کد UTF-16 کدگذاری شدهاند که کاراکترهای پیچیده و ایموجیها را در جفتهای یونیکد نگاشت میکند. اگر یک رشته بدون در نظر گرفتن این موضوع برش داده شود، نیمههای جدا شده از یک جفت جایگزین - که به عنوان جایگزینهای تنها شناخته میشوند - باقی میمانند و منجر به متن ناقص میشوند.
isWellFormed() به توسعهدهندگان اجازه میدهد بررسی کنند که آیا یک رشته شامل جایگزینهای تنها است یا خیر و یک مقدار بولی برمیگرداند. اگر اعتبارسنجی یک رشته با شکست مواجه شود، میتوانید toWellFormed() را برای جایگزینی جایگزینهای جعلی با کاراکتر جایگزینی استاندارد یونیکد ( U+FFFD ) فراخوانی کنید. این کار قبل از فراخوانی توابعی مانند encodeURI() مفید است، که هنگام مواجهه با ورودیهای ناقص، URIError ایجاد میکنند. برای یادگیری نحوه کار این روشها به مستندات MDN برای String.prototype.isWellFormed() مراجعه کنید.
بازتاب ویژگی 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 به عنوان ویژگیهای جاوا اسکریپت به چارچوبهای رابط کاربری و ابزارهای مدیریت وضعیت اجازه میدهد تا زمینههای کمکی را با اطمینان بیشتری هماهنگ کنند و به همسو نگه داشتن زمینههای خواننده صفحه با وضعیت واقعی برنامه شما کمک میکند. برای لیست کاملی از ویژگیهای منعکس شده، راهنمای MDN در مورد ویژگیهای نمونه Element را بررسی کنید.
این یک بسته بندی است
اگر موردی مربوط به Baseline را از قلم انداختهایم، به ما اطلاع دهید تا مطمئن شویم در نسخههای بعدی به آن پرداخته میشود! اگر سؤالی دارید یا میخواهید در مورد Baseline بازخوردی ارائه دهید، میتوانید در بخش پیگیری مشکلات ما، مشکل خود را ثبت کنید.