Fecha de publicación: 27 de mayo de 2026
Te damos la bienvenida al resumen mensual de Baseline. En abril de 2026, se lanzaron algunas funciones de CSS y utilidades matemáticas de precisión, mientras que los elementos semánticos estructurales y otras incorporaciones a la API de Web estuvieron disponibles de forma generalizada, junto con eventos en la comunidad de desarrolladores.
Modelo de referencia y accesibilidad en 2026
Crear para la Web significa crear una experiencia que todos puedan usar, y un artículo reciente de A11y Up argumenta que tener en cuenta las necesidades de accesibilidad es más eficaz cuando los desarrolladores se basan en los estándares web. Durante un tiempo, los ingenieros lanzaron soluciones de JavaScript personalizadas y, a menudo, pesadas para recrear patrones accesibles que ahora forman parte de la plataforma web. A veces, estas soluciones personalizadas son frágiles, propensas a fallar con la tecnología de asistencia y difíciles de mantener.
En el artículo, se destaca que, a medida que las funciones de la plataforma web logran interoperabilidad entre navegadores, el desarrollo con la accesibilidad en mente se convierte en una tarea más eficaz. Usar funciones web para lograr objetivos comunes y patrones de interfaz de usuario se encarga de gran parte del trabajo pesado, ya que expone sin problemas la semántica correcta directamente a los lectores de pantalla y a las utilidades de navegación con el teclado. La versión de referencia actúa como guía y señala el momento en que una función web es lo suficientemente madura como para evaluarse y usarse en tus proyectos.
Funciones de referencia recién disponibles
Las funciones de esta sección se admiten desde abril de 2026 en el conjunto principal de navegadores y ahora están disponibles en Baseline.
Función contrast-color() de CSS
Los motores de temas dinámicos y los componentes personalizables obligaron a los desarrolladores a mantener varios sistemas de color para satisfacer la preferencia de los usuarios por el alto contraste. La función contrast-color() de CSS traslada esa carga de mantenimiento por completo al navegador. Cuando se pasa un color de entrada base a la función, el motor evalúa y devuelve un color complementario de alto contraste, que suele asignarse a blanco o negro según el que proporcione la puntuación de legibilidad más alta.
.card-header {
background-color: var(--dynamic-bg-color);
/* Automatically resolves to the highest-contrast text color */
color: contrast-color(var(--dynamic-bg-color));
}
Esto te permite cumplir con los estándares de accesibilidad para la legibilidad, sin una solución personalizada ni CSS difíciles de mantener. Si bien debes seguir prestando atención a tus elecciones de color de tono medio, esta función reduce el CSS estándar requerido para controlar este ajuste para el usuario. Puedes obtener más información en la página de referencia de MDN para contrast-color().
Math.sumPrecise()
Sumar secuencias de números con bucles estándar o métodos como Array.prototype.reduce() puede generar una pérdida de precisión de punto flotante. Esto puede afectar los cálculos financieros importantes o los totales de telemetría.
El método Math.sumPrecise() aborda este problema. Acepta un iterable de números y ejecuta una rutina segura para la precisión para proporcionar una suma exacta. Consulta los mecanismos en la documentación de MDN para Math.sumPrecise().
Funciones de referencia con gran disponibilidad
Las siguientes funciones ahora están disponibles de forma general en Baseline, lo que significa que son ampliamente compatibles y se pueden usar en tus proyectos.
Elemento <search>
El elemento <search> de HTML actúa como un wrapper explícito para los controles de formularios, los mecanismos de filtrado y las utilidades de envío que, en conjunto, representan una experiencia de búsqueda en una aplicación web.
<search>
<form action="/site-search">
<label for="query">Search documentation</label>
<input type="search" id="query" name="q">
<button>Go</button>
</form>
</search>
Si cambias un elemento contenedor a la etiqueta <search>, proporcionas un beneficio de accesibilidad a los usuarios. El navegador asigna automáticamente un rol de referencia ARIA implícito de search al elemento, lo que elimina la necesidad de especificar role="search" en el elemento <form>. Esto permite que los lectores de pantalla identifiquen las interfaces de búsqueda y ayuden a los usuarios a navegar por ellas. Lee los detalles de implementación en la página de MDN para el elemento <search>.
Acceso a la clave pública de la autenticación web
Ahora, la API de Web Authentication (WebAuthn) permite prescindir de las contraseñas de forma más sencilla gracias a la amplia compatibilidad con los extractores de propiedades directos en la interfaz de AuthenticatorAttestationResponse. Con métodos como getPublicKey() y getPublicKeyAlgorithm(), el navegador extrae los detalles de la clave pública por ti sin tener que trabajar con datos binarios sin procesar. Obtén más información sobre estas propiedades y cómo usarlas en la página de MDN para AuthenticatorAttestationResponse.
String.prototype.isWellFormed() y String.prototype.toWellFormed()
Las cadenas de JavaScript están codificadas en UTF-16, que asigna caracteres complejos y emojis en pares Unicode. Si una cadena se segmenta sin tener en cuenta esto, quedarán mitades aisladas de un par sustituto (conocidas como sustitutos aislados), lo que generará texto con formato incorrecto.
isWellFormed() permite que los desarrolladores verifiquen si una cadena contiene suplentes aislados y devuelve un valor booleano. Si una cadena no pasa la validación, puedes llamar a toWellFormed() para reemplazar los suplentes no válidos por el carácter de reemplazo estándar de Unicode (U+FFFD). Esto es útil antes de llamar a funciones como encodeURI(), que arrojará un URIError cuando encuentre entradas con formato incorrecto. Obtén más información sobre cómo funcionan estos métodos en la documentación de MDN para String.prototype.isWellFormed().
Reflexión de atributos ARIA
La actualización de los estados de accesibilidad en elementos interactivos requería viajes de ida y vuelta a través de métodos de atributos DOM estándar, por ejemplo, element.setAttribute('aria-expanded', 'true'). La reflexión de atributos de ARIA simplifica esto, ya que refleja las propiedades de accesibilidad como propiedades de objetos.
La interfaz Element refleja los atributos ARIA directamente en las propiedades de instancia, como element.ariaExpanded, element.ariaChecked y element.ariaHidden. Esto te permite modificar los estados de accesibilidad con la sintaxis de notación de puntos:
// Clean and readable state updates
toggleButton.ariaExpanded = toggleButton.ariaExpanded === "true" ? "false" : "true";
Tratar los destinos de ARIA como propiedades de JavaScript permite que los frameworks de IU y las herramientas de administración de estados coordinen los contextos de asistencia de manera más confiable, y ayuda a mantener los contextos del lector de pantalla alineados con el estado real de tu aplicación. Para obtener una lista completa de las propiedades reflejadas, consulta la guía de MDN sobre las propiedades de instancia de Element.
Eso es todo
Dinos si nos olvidamos de algo relacionado con Baseline y nos aseguraremos de incluirlo en una edición futura. Si tienes alguna pregunta o quieres proporcionar comentarios sobre Baseline, puedes informar un problema en nuestra herramienta de seguimiento de errores.