Veröffentlicht: 27. Mai 2026
Willkommen beim monatlichen Baseline-Newsletter. Im April 2026 wurden einige CSS-Funktionen und Präzisionsmathematik-Dienstprogramme neu eingeführt. Außerdem wurden strukturelle semantische Elemente und andere Web-API-Ergänzungen allgemein verfügbar.
Baseline und Barrierefreiheit im Jahr 2026
Wenn Sie für das Web entwickeln, erstellen Sie eine Anwendung, die jeder nutzen kann. In einem aktuellen Artikel von A11y Up wird argumentiert, dass die Berücksichtigung von Barrierefreiheitsanforderungen effektiver ist, wenn Entwickler auf Webstandards setzen. Seit einiger Zeit stellen Entwickler benutzerdefinierte und oft umfangreiche JavaScript-Lösungen bereit, um barrierefreie Muster nachzubilden, die jetzt Teil der Webplattform sind. Diese maßgeschneiderten Lösungen sind manchmal anfällig, können durch Hilfstechnologien beschädigt werden und sind schwer zu warten.
Im Artikel wird darauf hingewiesen, dass die Entwicklung mit Blick auf Barrierefreiheit effektiver wird, wenn Webplattformfunktionen browserübergreifend interoperabel sind. Durch die Verwendung von Webfunktionen zur Erreichung gemeinsamer Ziele und Benutzeroberflächenmustern wird ein Großteil der Arbeit erledigt und die richtige Semantik wird direkt für Screenreader und Tastaturnavigationstools bereitgestellt. Die Baseline dient hier als Orientierungshilfe und signalisiert, wann eine Webfunktion ausgereift genug ist, um in Ihren Projekten evaluiert und verwendet zu werden.
Neue grundlegende Funktionen
Die Funktionen in diesem Abschnitt werden ab April 2026 im Kernbrowsersatz unterstützt und sind jetzt als Baseline verfügbar.
CSS-contrast-color()-Funktion
Dynamische Theme-Engines und anpassbare Komponenten haben Entwickler dazu gezwungen, mehrere Farbsysteme zu pflegen, um den Wunsch der Nutzer nach hohem Kontrast zu berücksichtigen. Die CSS-Funktion contrast-color() verlagert diesen Wartungsaufwand vollständig auf den Browser. Wenn Sie der Funktion eine primäre Eingabefarbe übergeben, wird eine kontrastreiche Begleitfarbe ausgewertet und zurückgegeben, die in der Regel entweder Schwarz oder Weiß entspricht, je nachdem, welche Farbe die höchste Lesbarkeitsbewertung liefert.
.card-header {
background-color: var(--dynamic-bg-color);
/* Automatically resolves to the highest-contrast text color */
color: contrast-color(var(--dynamic-bg-color));
}
So können Sie die Barrierefreiheitsstandards für die Lesbarkeit ohne eine benutzerdefinierte Lösung oder schwer zu wartendes CSS erfüllen. Sie sollten Ihre Entscheidungen für Mitteltöne weiterhin im Blick behalten. Diese Funktion reduziert jedoch den Boilerplate-CSS-Code, der für die Anpassung an Nutzer mit Sehbeeinträchtigungen erforderlich ist. Weitere Informationen finden Sie auf der MDN-Referenzseite für contrast-color().
Math.sumPrecise()
Wenn Sie Zahlenfolgen mit Standardschleifen oder Methoden wie Array.prototype.reduce() summieren, kann es zu einem Verlust der Gleitkommazahlgenauigkeit kommen. Dies kann sich auf wichtige finanzielle Berechnungen oder Telemetriesummen auswirken.
Mit der Methode Math.sumPrecise() wird dieses Problem behoben. Die Funktion akzeptiert eine iterable Liste von Zahlen und führt eine Routine aus, die die Genauigkeit berücksichtigt, um eine genaue Summe zu liefern. Weitere Informationen finden Sie in der MDN-Dokumentation zu Math.sumPrecise().
Grundlegende, allgemein verfügbare Funktionen
Die folgenden Funktionen sind jetzt allgemein verfügbar. Das bedeutet, dass sie weitgehend kompatibel sind und in Ihren Projekten verwendet werden können.
Element <search>
Das HTML-Element <search> dient als expliziter Wrapper für Formularsteuerelemente, Filtermechanismen und Übermittlungstools, die zusammen eine Suchfunktion in einer Webanwendung darstellen.
<search>
<form action="/site-search">
<label for="query">Search documentation</label>
<input type="search" id="query" name="q">
<button>Go</button>
</form>
</search>
Wenn Sie ein enthaltendes Element auf das <search>-Tag umstellen, bieten Sie Nutzern einen Vorteil in Bezug auf die Barrierefreiheit. Der Browser weist dem Element automatisch die implizite ARIA-Landmark-Rolle search zu. Daher ist es nicht erforderlich, role="search" für das <form>-Element anzugeben. So können Screenreader Suchoberflächen erkennen und Nutzern helfen, zu ihnen zu navigieren. Weitere Informationen zur Implementierung finden Sie auf der MDN-Seite zum <search>-Element.
Zugriff auf öffentliche Web Authentication-Schlüssel
Die passwortlose Anmeldung mit der Web Authentication (WebAuthn) API ist jetzt weniger komplex, da die AuthenticatorAttestationResponse-Schnittstelle eine breite Unterstützung für direkte Property-Extraktoren bietet. Mit Methoden wie getPublicKey() und getPublicKeyAlgorithm() extrahiert der Browser Details zum öffentlichen Schlüssel für Sie, ohne dass Sie mit binären Rohdaten arbeiten müssen. Weitere Informationen zu diesen Attributen und ihrer Verwendung finden Sie auf der MDN-Seite für AuthenticatorAttestationResponse.
String.prototype.isWellFormed() und String.prototype.toWellFormed()
JavaScript-Strings sind UTF-16-codiert, wodurch komplexe Zeichen und Emojis in Unicode-Paaren abgebildet werden. Wenn ein String ohne Berücksichtigung dieser Surrogate zerlegt wird, bleiben isolierte Hälften eines Ersatzpaars zurück, die als einzelne Surrogate bezeichnet werden und zu fehlerhaftem Text führen.
Mit isWellFormed() können Entwickler prüfen, ob ein String einzelne Ersatzzeichen enthält, und einen booleschen Wert zurückgeben. Wenn ein String die Validierung nicht besteht, können Sie toWellFormed() aufrufen, um die fehlerhaften Ersatzzeichen durch das standardmäßige Unicode-Ersatzzeichen (U+FFFD) zu ersetzen. Das ist hilfreich, bevor Sie Funktionen wie encodeURI() aufrufen, die bei fehlerhaften Eingaben einen URIError auslösen. Weitere Informationen zur Funktionsweise dieser Methoden finden Sie in der MDN-Dokumentation zu String.prototype.isWellFormed().
ARIA-Attributspiegelung
Für die Aktualisierung von Barrierefreiheitsstatus für interaktive Elemente waren Roundtrips über Standard-DOM-Attributmethoden wie element.setAttribute('aria-expanded', 'true') erforderlich. Die ARIA-Attributspiegelung vereinfacht dies, indem sie Barrierefreiheitseigenschaften als Objekteigenschaften spiegelt.
Die Element-Schnittstelle spiegelt ARIA-Attribute direkt in Instanzeigenschaften wie element.ariaExpanded, element.ariaChecked und element.ariaHidden wider. So können Sie Barrierefreiheitsstatus mit der Punktnotation ändern:
// Clean and readable state updates
toggleButton.ariaExpanded = toggleButton.ariaExpanded === "true" ? "false" : "true";
Wenn ARIA-Ziele als JavaScript-Eigenschaften behandelt werden, können UI-Frameworks und Tools zur Statusverwaltung unterstützende Kontexte zuverlässiger koordinieren. Außerdem wird so dafür gesorgt, dass die Screenreader-Kontexte mit dem tatsächlichen Anwendungsstatus übereinstimmen. Eine vollständige Liste der reflektierten Attribute finden Sie im MDN-Leitfaden zu Element-Instanzattributen.
Das war’s
Lass uns wissen, wenn wir etwas im Zusammenhang mit Baseline übersehen haben. Wir werden es dann in einer zukünftigen Ausgabe berücksichtigen. Wenn Sie Fragen haben oder Feedback zu Baseline geben möchten, können Sie ein Problem in unserem Issue Tracker melden.