發布日期：2026 年 5 月 27 日
歡迎閱讀 Baseline 月刊。2026 年 4 月，我們推出了部分 CSS 功能和精確數學公用程式，並廣泛提供結構語意元素和其他 Web API 擴充功能，以及開發人員社群的最新動態。
2026 年的基準和無障礙功能
為網頁建構內容，代表要打造人人都能使用的體驗，而 A11y Up 最近發布的文章指出，開發人員採用網頁標準時，考量無障礙需求會更有效。一段時間以來，工程師已推出自訂的 JavaScript 解決方案 (通常很龐大)，以重新建立現在屬於網頁平台的無障礙模式。這些專屬解決方案有時很脆弱，容易在輔助技術下中斷，而且難以維護。
這篇文章指出，隨著網頁平台功能實現跨瀏覽器互通性，以無障礙功能為考量進行開發，將成為更有效率的工作。使用網頁功能達成常見目標和使用者介面模式，可處理許多繁重的工作，直接將正確的語意順暢地提供給螢幕閱讀器和鍵盤導覽公用程式。Baseline 在這裡扮演指南的角色，指出網頁功能何時成熟到足以評估，並在專案中使用。
新推出的 Baseline 功能
本節中的功能自 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() 方法可解決這個問題。這個函式會接受可疊代數字，並執行精確度安全的常式，提供準確的總和。如要瞭解機制，請參閱 MDN 說明文件中的 Math.sumPrecise()。
普遍可用的 Baseline 功能
下列功能已廣泛支援 Baseline，也就是說，這些功能現在已普遍相容，可在專案中使用。
<search> 元素
HTML <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"。螢幕閱讀器可藉此識別搜尋介面，並協助使用者前往該介面。如要瞭解實作詳細資料，請參閱 MDN 頁面上的 <search> 元素。
網路驗證公開金鑰存取權
由於 AuthenticatorAttestationResponse 介面廣泛支援直接屬性擷取器，現在使用 Web Authentication (WebAuthn) API 進行無密碼驗證的程序變得更簡單。透過 getPublicKey() 和 getPublicKeyAlgorithm() 等方法，瀏覽器會為您擷取公開金鑰詳細資料，不必處理原始二進位資料。如要進一步瞭解這些屬性及使用方式，請參閱 MDN 頁面AuthenticatorAttestationResponse。
String.prototype.isWellFormed()和String.prototype.toWellFormed()
JavaScript 字串採用 UTF-16 編碼，可將萬國碼中的複雜字元和表情符號對應至萬國碼配對。如果切片字串時未考量這點，就會留下代理配對中孤立的一半 (稱為單一代理)，導致文字格式錯誤。
isWellFormed() 可讓開發人員檢查字串是否包含單一替代字元，並傳回布林值。如果字串驗證失敗，您可以呼叫 toWellFormed()，將不當的替代字元替換為標準的 Unicode 替代字元 (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 目標視為 JavaScript 屬性，可讓 UI 架構和狀態管理工具更可靠地協調輔助環境，並確保螢幕閱讀器環境與實際應用程式狀態一致。如需反映屬性的完整清單，請參閱 MDN 關於 Element 執行個體屬性的指南。
本場活動到此結束
如果我們遺漏了任何與 Baseline 相關的內容，請告訴我們，我們會確保在日後版本中補上！如有任何問題或想提供有關 Baseline 的意見回饋，請在 Issue Tracker 中提出問題。