Opublikowano: 27 maja 2026 r.
Witamy w comiesięcznym podsumowaniu Baseline. W kwietniu 2026 r. udostępniliśmy niektóre funkcje CSS i narzędzia do precyzyjnych obliczeń matematycznych, a elementy strukturalne semantyczne i inne dodatki do interfejsu Web API stały się powszechnie dostępne. W tym miesiącu miały też miejsce ważne wydarzenia w społeczności deweloperów.
Baseline i ułatwienia dostępu w 2026 r.
Tworzenie stron internetowych oznacza tworzenie usług, z których każdy może korzystać. Niedawny artykuł z A11y Up dowodzi, że uwzględnianie potrzeb związanych z ułatwieniami dostępu jest bardziej skuteczne, gdy deweloperzy korzystają ze standardów internetowych. Od pewnego czasu inżynierowie tworzą niestandardowe i często złożone rozwiązania JavaScript, aby odtworzyć wzorce ułatwień dostępu, które są teraz częścią platformy internetowej. Te niestandardowe rozwiązania są czasami niestabilne, podatne na awarie w przypadku technologii wspomagających i trudne w utrzymaniu.
Artykuł podkreśla, że gdy funkcje platformy internetowej osiągają interoperacyjność między przeglądarkami, tworzenie z myślą o ułatwieniach dostępu staje się bardziej efektywne. Używanie funkcji internetowych do osiągania typowych celów i wzorców interfejsu użytkownika pozwala na automatyczne wykonywanie wielu złożonych zadań, płynnie udostępniając odpowiednią semantykę bezpośrednio czytnikom ekranu i narzędziom do nawigacji za pomocą klawiatury. Baseline pełni tu rolę przewodnika, sygnalizując moment, w którym funkcja internetowa jest wystarczająco dojrzała, aby można ją było ocenić i użyć w projektach.
Nowo dostępne funkcje Baseline
Funkcje opisane w tej sekcji są obsługiwane od kwietnia 2026 r. w podstawowym zestawie przeglądarek i są teraz nowo dostępne w Baseline.
Funkcja CSS contrast-color()
Dynamiczne silniki motywów i konfigurowalne komponenty zmusiły deweloperów do utrzymywania wielu systemów kolorów, aby uwzględnić preferencje użytkowników dotyczące wysokiego kontrastu. Funkcja CSS contrast-color() przenosi ten obowiązek w całości na przeglądarkę. Przekazując do funkcji podstawowy kolor wejściowy, silnik ocenia i zwraca kolor towarzyszący o wysokim kontraście, zwykle mapując go na czarny lub biały w zależności od tego, który z nich zapewnia najwyższy wynik czytelności.
.card-header {
background-color: var(--dynamic-bg-color);
/* Automatically resolves to the highest-contrast text color */
color: contrast-color(var(--dynamic-bg-color));
}
Dzięki temu możesz spełnić standardy ułatwień dostępu dotyczące czytelności bez niestandardowego rozwiązania ani trudnego w utrzymaniu kodu CSS. Chociaż nadal warto zwracać uwagę na wybór kolorów średnich tonów, ta funkcja zmniejsza ilość kodu CSS wymaganego do obsługi tego ustawienia użytkownika. Więcej informacji znajdziesz na stronie referencyjnej MDN dotyczącej contrast-color().
Math.sumPrecise()
Sumowanie sekwencji liczb za pomocą standardowych pętli lub metod takich jak Array.prototype.reduce() może spowodować utratę precyzji reprezentacji zmiennoprzecinkowej. Może to mieć wpływ na ważne obliczenia finansowe lub sumy telemetryczne.
Metoda Math.sumPrecise() rozwiązuje ten problem. Przyjmuje ona iterowalną sekwencję liczb i wykonuje bezpieczną dla precyzji procedurę, aby uzyskać dokładną sumę. Więcej informacji o mechanizmach znajdziesz w dokumentacji MDN dotyczącej metody Math.sumPrecise().
Powszechnie dostępne funkcje Baseline
Te funkcje stały się powszechnie dostępne w Baseline, co oznacza, że są teraz szeroko kompatybilne i można ich używać w projektach.
Element <search>
Element HTML <search> pełni rolę jawnego kontenera elementów sterujących formularza, mechanizmów filtrowania i narzędzi do przesyłania, które razem tworzą wyszukiwarkę w aplikacji internetowej.
<search>
<form action="/site-search">
<label for="query">Search documentation</label>
<input type="search" id="query" name="q">
<button>Go</button>
</form>
</search>
Przełączając element zawierający na tag <search>, zapewniasz użytkownikom ułatwienia dostępu. Przeglądarka automatycznie przypisuje do elementu niejawną rolę punktu orientacyjnego ARIA search, co eliminuje konieczność określania role="search" w elemencie <form>. Dzięki temu czytniki ekranu mogą identyfikować interfejsy wyszukiwania i pomagać użytkownikom w nawigacji po nich. Szczegóły implementacji znajdziesz na stronie MDN dotyczącej elementu <search>.
Dostęp do klucza publicznego uwierzytelniania w internecie
Dzięki szerokiemu wsparciu dla bezpośrednich ekstraktorów właściwości w interfejsie AuthenticatorAttestationResponse korzystanie z interfejsu Web Authentication (WebAuthn) API bez hasła jest teraz mniej skomplikowane. Dzięki metodom takim jak getPublicKey() i getPublicKeyAlgorithm() przeglądarka wyodrębnia szczegóły klucza publicznego bez konieczności pracy z surowymi danymi binarnymi. Więcej informacji o tych właściwościach i sposobach ich używania znajdziesz na stronie MDN dotyczącej AuthenticatorAttestationResponse.
String.prototype.isWellFormed() i String.prototype.toWellFormed()
Ciągi znaków JavaScript są kodowane w UTF-16, co mapuje złożone znaki i emoji w parach Unicode. Jeśli ciąg znaków zostanie podzielony bez uwzględnienia tego faktu, pozostaną izolowane połówki pary zastępczej, zwane samotnymi zastępnikami, co spowoduje powstanie nieprawidłowego tekstu.
Metoda isWellFormed() umożliwia deweloperom sprawdzenie, czy ciąg znaków zawiera samotne zastępniki, i zwraca wartość logiczną. Jeśli ciąg znaków nie przejdzie weryfikacji, możesz wywołać metodę toWellFormed(), aby zastąpić nieprawidłowe zastępniki standardowym znakiem zastępczym Unicode (U+FFFD). Jest to przydatne przed wywołaniem funkcji takich jak encodeURI(), które w przypadku napotkania nieprawidłowych danych wejściowych zgłoszą błąd URIError. Dowiedz się, jak działają te metody, z dokumentacji MDN dotyczącej String.prototype.isWellFormed().
Odzwierciedlanie atrybutów ARIA
Aktualizowanie stanów ułatwień dostępu w elementach interaktywnych wymagało wykonywania operacji w obie strony za pomocą standardowych metod atrybutów DOM, np. element.setAttribute('aria-expanded', 'true'). Odzwierciedlanie atrybutów ARIA upraszcza ten proces, odzwierciedlając właściwości ułatwień dostępu jako właściwości obiektu.
Interfejs Element odzwierciedla atrybuty ARIA bezpośrednio we właściwościach instancji, takich jak element.ariaExpanded, element.ariaChecked i element.ariaHidden. Dzięki temu możesz modyfikować stany ułatwień dostępu za pomocą notacji kropkowej:
// Clean and readable state updates
toggleButton.ariaExpanded = toggleButton.ariaExpanded === "true" ? "false" : "true";
Traktowanie elementów docelowych ARIA jako właściwości JavaScript umożliwia frameworkom interfejsu i narzędziom do zarządzania stanem bardziej niezawodne koordynowanie kontekstów wspomagających oraz pomaga w utrzymaniu kontekstów czytnika ekranu w zgodzie z rzeczywistym stanem aplikacji. Pełną listę odzwierciedlonych właściwości znajdziesz w przewodniku MDN dotyczącym właściwości instancji Element.
To wszystko
Jeśli pominęliśmy coś związanego z Baseline, daj nam znać, a uwzględnimy to w przyszłym wydaniu. Jeśli masz pytania lub chcesz przesłać opinię na temat Baseline, możesz zgłosić problem w naszym narzędziu do śledzenia problemów.