Publié le : 27 mai 2026
Bienvenue dans le récapitulatif mensuel Baseline. En avril 2026, de nouvelles fonctionnalités CSS et des utilitaires mathématiques de précision sont devenus disponibles, tandis que des éléments sémantiques structurels et d'autres ajouts à l'API Web sont devenus largement disponibles, ainsi que des événements dans la communauté des développeurs.
Référence et accessibilité en 2026
Développer pour le Web, c'est créer une expérience que tout le monde peut utiliser. Un article récent d'A11y Up explique qu'il est plus efficace de tenir compte des besoins d'accessibilité lorsque les développeurs s'appuient sur les normes Web. Depuis un certain temps, les ingénieurs ont déployé des solutions JavaScript personnalisées et souvent lourdes pour recréer des modèles accessibles qui font désormais partie de la plate-forme Web. Ces solutions personnalisées sont parfois fragiles, sujettes à des dysfonctionnements avec les technologies d'assistance et difficiles à entretenir.
L'article souligne que, à mesure que les fonctionnalités de la plate-forme Web atteignent l'interopérabilité entre navigateurs, elles rendent le développement dans un souci d'accessibilité plus efficace. L'utilisation de fonctionnalités Web pour atteindre des objectifs courants et des modèles d'interface utilisateur permet de réaliser une grande partie du travail, en exposant facilement la sémantique appropriée directement aux lecteurs d'écran et aux utilitaires de navigation au clavier. La référence sert de guide ici, en indiquant le moment où une fonctionnalité Web est suffisamment mature pour être évaluée et utilisée dans vos projets.
Nouvelles fonctionnalités de référence
Les fonctionnalités de cette section sont prises en charge depuis avril 2026 dans l'ensemble de navigateurs de base et sont désormais disponibles dans Baseline Newly Available.
Fonction CSS contrast-color()
Les moteurs de thème dynamique et les composants personnalisables ont contraint les développeurs à gérer plusieurs systèmes de couleurs pour répondre à la préférence des utilisateurs pour le contraste élevé. La fonction CSS contrast-color() transfère entièrement cette charge de maintenance au navigateur. En transmettant une couleur d'entrée de base à la fonction, le moteur évalue et renvoie une couleur complémentaire à fort contraste, qui correspond généralement au noir ou au blanc en fonction de celle qui offre le meilleur score de lisibilité.
.card-header {
background-color: var(--dynamic-bg-color);
/* Automatically resolves to the highest-contrast text color */
color: contrast-color(var(--dynamic-bg-color));
}
Cela vous permet de respecter les normes d'accessibilité en termes de lisibilité, sans avoir recours à une solution personnalisée ni à un CSS difficile à gérer. Bien que vous deviez toujours surveiller vos choix de couleurs de demi-teintes, cette fonction réduit le CSS standard requis pour gérer cette adaptation à l'utilisateur. Pour en savoir plus, consultez la page de référence MDN pour contrast-color().
Math.sumPrecise()
L'addition de séquences de nombres à l'aide de boucles standards ou de méthodes telles que Array.prototype.reduce() peut entraîner une perte de précision à virgule flottante. Cela peut affecter les calculs financiers importants ou les totaux de télémétrie.
La méthode Math.sumPrecise() résout ce problème. Il accepte un itérable de nombres et exécute une routine de précision pour fournir une somme exacte. Pour en savoir plus sur le fonctionnement de Math.sumPrecise(), consultez la documentation MDN.
Fonctionnalités standards largement disponibles
Les fonctionnalités suivantes sont désormais disponibles dans Baseline, ce qui signifie qu'elles sont largement compatibles et utilisables dans vos projets.
Élément <search>
L'élément HTML <search> sert de wrapper explicite pour les contrôles de formulaire, les mécanismes de filtrage et les utilitaires d'envoi qui représentent collectivement une expérience de recherche sur une application Web.
<search>
<form action="/site-search">
<label for="query">Search documentation</label>
<input type="search" id="query" name="q">
<button>Go</button>
</form>
</search>
En remplaçant un élément conteneur par la balise <search>, vous améliorez l'accessibilité pour les utilisateurs. Le navigateur attribue automatiquement le rôle de repère ARIA implicite search à l'élément, ce qui évite de spécifier role="search" sur l'élément <form>. Cela permet aux lecteurs d'écran d'identifier les interfaces de recherche et d'aider les utilisateurs à y accéder. Consultez les détails de l'implémentation sur la page MDN de l'élément <search>.
Accès à la clé publique Web Authentication
L'authentification sans mot de passe avec l'API Web Authentication (WebAuthn) est désormais moins complexe grâce à la large compatibilité avec les extracteurs de propriétés directes sur l'interface AuthenticatorAttestationResponse. Avec des méthodes telles que getPublicKey() et getPublicKeyAlgorithm(), le navigateur extrait les détails de la clé publique pour vous sans que vous ayez à travailler avec des données binaires brutes. Pour en savoir plus sur ces propriétés et sur la façon de les utiliser, consultez la page MDN pour AuthenticatorAttestationResponse.
String.prototype.isWellFormed() et String.prototype.toWellFormed()
Les chaînes JavaScript sont encodées en UTF-16, ce qui mappe les caractères complexes et les emoji en paires Unicode. Si une chaîne est segmentée sans tenir compte de ce fait, des moitiés isolées d'une paire de substituts (appelées substituts isolés) resteront, ce qui entraînera un texte mal formé.
isWellFormed() permet aux développeurs de vérifier si une chaîne contient des substituts isolés et renvoie une valeur booléenne. Si une chaîne ne valide pas la validation, vous pouvez appeler toWellFormed() pour remplacer les substituts incorrects par le caractère de remplacement Unicode standard (U+FFFD). Cela est utile avant d'appeler des fonctions telles que encodeURI(), qui génèrent une erreur URIError lorsqu'elles rencontrent des entrées mal formées. Découvrez comment ces méthodes fonctionnent dans la documentation MDN pour String.prototype.isWellFormed().
Réflexion des attributs ARIA
La mise à jour des états d'accessibilité sur les éléments interactifs nécessitait des allers-retours via des méthodes d'attribut DOM standards, par exemple element.setAttribute('aria-expanded', 'true'). La réflexion des attributs ARIA simplifie ce processus en reflétant les propriétés d'accessibilité en tant que propriétés d'objet.
L'interface Element reflète les attributs ARIA directement dans les propriétés d'instance telles que element.ariaExpanded, element.ariaChecked et element.ariaHidden. Cela vous permet de modifier les états d'accessibilité à l'aide de la syntaxe de notation à points :
// Clean and readable state updates
toggleButton.ariaExpanded = toggleButton.ariaExpanded === "true" ? "false" : "true";
Le traitement des cibles ARIA en tant que propriétés JavaScript permet aux frameworks d'UI et aux outils de gestion de l'état de coordonner les contextes d'assistance de manière plus fiable, et permet de maintenir les contextes de lecteur d'écran alignés sur l'état réel de votre application. Pour obtenir la liste complète des propriétés reflétées, consultez le guide MDN sur les propriétés d'instance Element.
C'est terminé
Dites-nous si nous avons oublié quelque chose concernant Baseline. Nous veillerons à l'inclure dans une prochaine édition. Si vous avez des questions ou souhaitez nous faire part de vos commentaires sur Baseline, vous pouvez signaler un problème dans notre Issue Tracker.