April 2026 Baseline monthly digest | Blog

CSS contrast and precise math join the platform

April 2026 brought a fresh set of web platform features into the Baseline fold. On the newly available side, a CSS function for accessible color contrast and a precision-safe JavaScript math utility are now supported across the core browser set. Several features also graduated to widely available status, including the <search> element, direct WebAuthn public key access, and a pair of string validation methods.

Alongside the feature updates, a recent piece from A11y Up makes the case that accessibility work is more effective when built on web standards. Custom JavaScript solutions for accessible UI patterns often turn out fragile, prone to breaking under assistive tech, and costly to maintain. As platform features gain cross-browser interoperability, they handle much of the heavy lifting by exposing semantics directly to screen readers and keyboard navigation. Baseline is what signals when a feature is mature enough to evaluate for that kind of use in your projects.

Newly available in the core browser set

The contrast-color() CSS function

Supporting high-contrast preferences has traditionally meant maintaining multiple color systems in CSS. The contrast-color() function moves that burden into the browser engine. Given a base input color, the function evaluates and returns a companion color with high contrast—typically black or white, depending on which produces the better readability score. That reduces the boilerplate needed to meet readability standards without fragile custom logic, though mid-tone color choices still deserve attention.

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

Math.sumPrecise()

Standard approaches to summing sequences of numbers—like a loop or Array.prototype.reduce()—can lose precision with floating-point arithmetic. The Math.sumPrecise() method accepts an iterable of numbers and applies a precision-safe routine to return an accurate total. That is relevant for financial calculations and telemetry aggregation where small errors compound.

Now widely available

The <search> element

Sites commonly mark up search forms with plain containers and explicit ARIA roles. The HTML <search> element simplifies that by being an explicit wrapper for form controls, filtering mechanisms, and submission utilities that together form a search experience. Browsers automatically assign an implicit ARIA landmark role of search, so you can drop the explicit role="search" attribute and still let screen readers identify and navigate to the search interface.

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

Direct WebAuthn public key access

Passwordless flows via the Web Authentication API get simpler with broad support for property extractors on the AuthenticatorAttestationResponse interface. Methods like getPublicKey() and getPublicKeyAlgorithm() let the browser extract public key details directly, removing the need to work through raw binary data.

Well-formed string helpers

JavaScript strings are UTF-16, and complex characters and emoji map to pairs of code units. Slicing a string without accounting for that can leave lone surrogates—isolated halves of a pair that render as malformed text. String.prototype.isWellFormed() returns a boolean indicating whether a string contains such surrogates. If validation fails, String.prototype.toWellFormed() replaces the rogue surrogates with the Unicode replacement character (U+FFFD). That is useful before calling functions like encodeURI(), which throws a URIError on malformed input.

ARIA attribute reflection

Updating accessibility states used to require roundtrips through APIs like element.setAttribute('aria-expanded', 'true'). ARIA attribute reflection changes that by surfacing ARIA attributes as object properties on the Element interface. You can now write element.ariaExpanded, element.ariaChecked, or element.ariaHidden with dot notation, which lets UI frameworks and state management tools keep assistive contexts aligned with actual application state.

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

If there is a Baseline-related feature that was not covered here, the web-platform-dx team tracks these through its issue tracker.