Опубликовано: 27 мая 2026 г.
Добро пожаловать в ежемесячный дайджест Baseline. В апреле 2026 года стали доступны некоторые возможности CSS и утилиты для точных математических вычислений, а также получили широкое распространение структурные семантические элементы и другие дополнения к Web API, наряду с событиями в сообществе разработчиков.
Исходные показатели и доступность в 2026 году
Разработка веб-сайтов подразумевает создание пользовательского интерфейса, доступного для всех, и в недавней статье от A11y Up утверждается, что учет потребностей в доступности более эффективен, когда разработчики опираются на веб-стандарты. Уже некоторое время инженеры разрабатывают собственные, зачастую ресурсоемкие решения на JavaScript для воссоздания доступных шаблонов, которые теперь являются частью веб-платформы. Эти индивидуальные решения иногда ненадежны, склонны к сбоям при использовании вспомогательных технологий и сложны в обслуживании.
В статье подчеркивается, что по мере того, как функции веб-платформы достигают кроссбраузерной совместимости, разработка с учетом доступности становится более эффективной задачей. Использование веб-функций для достижения общих целей и шаблонов пользовательского интерфейса берет на себя большую часть работы, плавно предоставляя необходимую семантику непосредственно программам чтения с экрана и средствам навигации с помощью клавиатуры. Базовый уровень здесь выступает в качестве ориентира, указывая на момент, когда веб-функция достаточно зрела для оценки и использования в ваших проектах.
Базовые новые доступные функции
Функции, описанные в этом разделе, поддерживаются в базовом наборе браузеров начиная с апреля 2026 года и теперь доступны в базовой версии.
Функция CSS contrast-color()
Динамические системы тем оформления и настраиваемые компоненты вынуждают разработчиков поддерживать несколько цветовых систем, чтобы учесть предпочтения пользователей в отношении высокой контрастности. Функция CSS contrast-color() полностью перекладывает эту нагрузку на браузер. Передав базовый цвет в функцию, система оценивает его и возвращает высококонтрастный дополнительный цвет, обычно соответствующий либо черному, либо белому цвету в зависимости от того, какой из них обеспечивает наивысший показатель читаемости.
.card-header {
background-color: var(--dynamic-bg-color);
/* Automatically resolves to the highest-contrast text color */
color: contrast-color(var(--dynamic-bg-color));
}
Это позволяет соответствовать стандартам доступности для читателей без необходимости создания собственных решений или сложного в поддержке CSS. Хотя вам всё ещё следует следить за выбором средних тонов, эта функция сокращает количество шаблонного CSS, необходимого для обеспечения удобства использования. Подробнее можно узнать на справочной странице MDN по contrast-color() .
Math.sumPrecise()
Суммирование последовательностей чисел с использованием стандартных циклов или методов, таких как Array.prototype.reduce() может привести к потере точности чисел с плавающей запятой. Это может повлиять на важные финансовые вычисления или итоговые данные телеметрии.
Метод Math.sumPrecise() решает эту проблему. Он принимает итерируемый объект чисел и выполняет процедуру, обеспечивающую точность, для получения точной суммы. Подробнее о механике метода Math.sumPrecise() можно узнать в документации MDN .
Базовые широкодоступные функции
Следующие функции стали широко доступны в базовой версии, а это значит, что теперь они в значительной степени совместимы и могут быть использованы в ваших проектах.
<search> элемент
HTML-элемент <search> выступает в качестве явной оболочки для элементов управления формами, механизмов фильтрации и инструментов отправки, которые в совокупности представляют собой поисковую систему в веб-приложении.
<search>
<form action="/site-search">
<label for="query">Search documentation</label>
<input type="search" id="query" name="q">
<button>Go</button>
</form>
</search>
Замена содержащего элемента на тег <search> обеспечивает пользователям дополнительные преимущества в плане доступности. Браузер автоматически присваивает элементу неявную роль ARIA-ориентира « search », устраняя необходимость указывать role="search" для элемента <form> . Это позволяет программам чтения с экрана идентифицировать элементы и помогать пользователям переходить к интерфейсам поиска. Подробности реализации можно найти на странице MDN для элемента <search> .
Доступ к веб-аутентификации с помощью открытого ключа
Теперь использование API веб-аутентификации (WebAuthn) для аутентификации без паролей стало проще благодаря широкой поддержке прямых методов извлечения свойств в интерфейсе AuthenticatorAttestationResponse . С помощью таких методов, как getPublicKey() и getPublicKeyAlgorithm() , браузер извлекает данные открытого ключа без необходимости работы с необработанными двоичными данными. Подробнее об этих свойствах и способах их использования можно узнать на странице MDN, посвященной AuthenticatorAttestationResponse .
String.prototype.isWellFormed() и String.prototype.toWellFormed()
Строки JavaScript кодируются в UTF-16, что позволяет сопоставлять сложные символы и эмодзи в парах Unicode. Если строка разрезается без учета этого, останутся изолированные половины суррогатной пары — так называемые «одиночные суррогаты», — что приведет к некорректному тексту.
isWellFormed() позволяет разработчикам проверить, содержит ли строка одиночные суррогаты, и возвращает логическое значение. Если строка не проходит проверку, можно вызвать toWellFormed() , чтобы заменить некорректные суррогаты стандартным символом замены Unicode ( U+FFFD ). Это полезно перед вызовом таких функций, как encodeURI() , которые вызовут URIError при обнаружении некорректных входных данных. Подробнее о работе этих методов можно узнать в документации MDN для String.prototype.isWellFormed() .
Отражение атрибутов ARIA
Для обновления состояний доступности интерактивных элементов требовались обращения к стандартным методам атрибутов DOM — например, element.setAttribute('aria-expanded', 'true') . Метод отражения атрибутов ARIA упрощает этот процесс, отображая свойства доступности в виде свойств объекта.
Интерфейс Element напрямую передаёт атрибуты ARIA в свойства экземпляра, такие как element.ariaExpanded , element.ariaChecked и element.ariaHidden . Это позволяет изменять состояния доступности с помощью синтаксиса точечной нотации:
// Clean and readable state updates
toggleButton.ariaExpanded = toggleButton.ariaExpanded === "true" ? "false" : "true";
Рассмотрение ARIA-объектов как свойств JavaScript позволяет фреймворкам пользовательского интерфейса и инструментам управления состоянием более надежно координировать контексты вспомогательных средств и помогает поддерживать соответствие контекстов программ чтения с экрана фактическому состоянию вашего приложения. Полный список отраженных свойств см. в руководстве MDN по свойствам экземпляра Element .
На этом всё.
Сообщите нам, если мы что-то упустили в отношении Baseline, и мы обязательно учтем это в будущей версии! Если у вас есть какие-либо вопросы или вы хотите оставить отзыв о Baseline, вы можете создать заявку в нашем трекере проблем .