2026 年 4 月基准每月摘要

发布时间:2026 年 5 月 27 日

欢迎订阅 Baseline 月度摘要。2026 年 4 月,一些 CSS 功能和精确数学实用程序新近推出,而结构化语义元素和其他 Web API 新增功能也已广泛推出,同时开发者社区也发生了一些大事。

2026 年的基准和无障碍功能

为 Web 构建应用意味着构建一种人人都能使用的体验,而 A11y Up 最近的一篇文章指出,如果开发者依赖于 Web 标准,那么考虑无障碍功能需求会更有效。在一段时间内,工程师们一直采用自定义的 JavaScript 解决方案(通常比较复杂)来重新创建无障碍模式,而这些模式现在已成为 Web 平台的一部分。这些定制解决方案有时很脆弱,容易在辅助技术的支持下出现故障,而且难以维护。

该文章强调,随着 Web 平台功能实现跨浏览器互操作性,在开发时考虑到无障碍功能会变得更加高效。使用 Web 功能来实现常见目标和用户界面模式可以处理大部分繁重的工作,从而顺畅地将正确的语义直接公开给屏幕阅读器和键盘导航实用程序。Baseline 在这里充当指南,指示 Web 功能何时成熟到足以在您的项目中进行评估和使用。

新近可用的基准功能

本部分中的功能自 2026 年 4 月起在核心浏览器集中受支持,现在已进入“Baseline 新近可用”阶段。

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。如需了解详情,请参阅 MDN 上有关 contrast-color() 的参考页面。

Math.sumPrecise()

使用标准循环或 Array.prototype.reduce() 等方法对数字序列求和可能会导致浮点精度损失。这可能会影响重要的财务计算或遥测总数。

Math.sumPrecise() 方法可解决此问题。它接受数字的可迭代对象,并执行精度安全的例程以提供准确的总和。如需了解 Math.sumPrecise() 的机制,请参阅 MDN 文档

Baseline 广泛可用功能

以下功能已进入“Baseline 广泛可用”阶段,这意味着它们现在具有广泛的兼容性,可在您的项目中使用。

<search> 元素

HTML <search> 元素充当表单控件、过滤机制和提交实用程序的显式封装容器,这些元素共同构成了 Web 应用中的搜索体验。

<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"。这样,屏幕阅读器便可以识别搜索界面,并帮助用户前往这些界面。如需了解实现详情,请参阅 MDN 上关于 <search> 元素的页面

Web 身份验证公钥访问权限

由于 AuthenticatorAttestationResponse 接口广泛支持直接属性提取器,因此现在使用 Web Authentication (WebAuthn) API 实现无密码身份验证变得更加简单。借助 getPublicKey()getPublicKeyAlgorithm() 等方法,浏览器可以为您提取公钥详细信息,而无需处理原始二进制数据。如需详细了解这些属性以及如何使用它们,请访问 MDN 上有关 AuthenticatorAttestationResponse 的页面

String.prototype.isWellFormed()String.prototype.toWellFormed()

JavaScript 字符串采用 UTF-16 编码,可将 Unicode 中的复杂字符和表情符号映射为一对字符。如果对字符串进行切片时不考虑这一点,则会留下代理对的孤立一半(称为孤立代理),从而导致文本格式错误。

isWellFormed() 可让开发者检查字符串是否包含孤立的代理项,并返回一个布尔值。如果字符串未能通过验证,您可以调用 toWellFormed() 将恶意代理对替换为标准 Unicode 替换字符 (U+FFFD)。这在调用 encodeURI() 等函数之前非常有用,因为这些函数在遇到格式错误的输入时会抛出 URIError。如需了解这些方法的工作原理,请参阅 MDN 文档中的 String.prototype.isWellFormed()

ARIA 属性反射

更新互动元素的无障碍状态需要通过标准 DOM 属性方法(例如 element.setAttribute('aria-expanded', 'true'))进行往返。ARIA 属性反射通过将无障碍功能属性镜像为对象属性来简化此过程。

Element 接口直接将 ARIA 属性反映到实例属性(如 element.ariaExpandedelement.ariaCheckedelement.ariaHidden)中。这样,您就可以使用点表示法语法修改无障碍状态:

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

将 ARIA 目标视为 JavaScript 属性,可让界面框架和状态管理工具更可靠地协调辅助上下文,并有助于使屏幕阅读器上下文与实际应用状态保持一致。如需查看反射属性的完整列表,请参阅 MDN 上关于 Element 实例属性的指南

内容到此结束

如果您认为我们遗漏了任何与 Baseline 相关的内容,请告诉我们,我们会确保在未来的版本中添加相应内容!如果您有任何疑问或想就 Baseline 提供反馈,可以在我们的问题跟踪器中提交问题。