Новинки веб-платформы в апреле 2026: контрастные цвета, поиск и ARIA
- 5 мая 2026
В апреле браузеры договорились о контрастном цвете текста, а привычные поиск и ARIA получили статус широкой доступности. Начните с этих изменений: их можно проверить на одной кнопке и форме, прежде чем трогать весь проект.
Продолжаем мартовский обзор по апрельской подборке Web Features Explorer. Хронологию и поддержку сверили 9 октября 2026 года. Выбрали возможности для вёрстки и браузерного JavaScript.
Даты говорят о доступности. Newly Available означает, что возможность заработала в актуальных основных браузерах, поэтому учебный пример можно проверить в каждом из них и сравнить результат, который пользователь увидит на странице. Widely Available появляется через 30 месяцев после этого. Знакомый тег тоже может оказаться новостью. Для старых браузеров и встроенных браузеров приложений поддержка требует отдельной проверки.
Что получили актуальные браузеры
contrast-color(): подберите текст к фону кнопки
У кнопки меняется фон в зависимости от темы или настройки пользователя. Вместо отдельной таблицы пар «фон — текст» можно передать цвет фона в contrast-color(). На выходе всегда чёрный или белый. С 10 апреля она Newly Available.
<button class="action" type="button">Продолжить обучение</button>.action {
--background: #5926c9;
background-color: var(--background);
color: white;
padding: 0.75rem 1.25rem;
border: 0;
border-radius: 0.5rem;
}
@supports (color: contrast-color(red)) {
.action {
color: contrast-color(var(--background));
}
}В старом браузере останется заданная пара: белый текст и фиолетовый фон. Это запасной вариант. В поддерживающем браузере цвет текста вычислится из --background, поэтому цвет фона можно изменить, не добавляя отдельное правило для надписи. Попробуйте заменить фон на #f3dc57: текст станет чёрным. Для старого браузера такую новую пару нужно подобрать вручную.
Фотографию функция не анализирует. Она считает контраст с одним заданным цветом. Если под текстом фотография, градиент или полупрозрачный слой, итог зависит от того, что действительно окажется позади букв. Проверьте это отдельно. Размер шрифта, состояния кнопки и видимый фокус тоже остаются вашей задачей. В MDN о contrast-color() есть пояснение алгоритма и ограничений.
Math.sumPrecise(): сохраните маленькое слагаемое
Откройте консоль. Эту новинку легче понять по результату. При обычном сложении большое число может «поглотить» маленькое слагаемое из-за округления промежуточного результата. Math.sumPrecise() складывает числа с меньшей потерей точности и с 10 апреля имеет статус Newly Available.
const measurements = [1e16, 2, 1, -1e16];
const regular = measurements.reduce((sum, value) => sum + value, 0);
console.log(regular); // 4
if (typeof Math.sumPrecise === 'function') {
console.log(Math.sumPrecise(measurements)); // 3
}В первом случае промежуточное значение 1e16 + 2 + 1 округлится. Во втором метод сохранит вклад всех слагаемых и округлит итог. Результат различается. Для графика с измерениями очень разного масштаба потеря маленького слагаемого может оказаться важной, даже когда большая часть вычислений выглядит верной.
Для цен в корзине мы по-прежнему рекомендуем целые копейки и согласованные правила округления. Десятичная погрешность остаётся. Метод работает с обычными числами JavaScript и не превращает их в десятичную арифметику: Math.sumPrecise([0.1, 0.2]) всё ещё даёт 0.30000000000000004. Если API отсутствует, обычный reduce() годится только там, где его погрешность допустима; иначе нужен проверенный полифил. Подробности — в справочнике Math.sumPrecise().
Что стало широко доступным
search: обозначьте область поиска в HTML
С 13 апреля элемент <search> широко доступен. Он обозначает область с поиском или фильтрами. В дереве доступности такая область помогает найти поисковые элементы страницы, чтобы перейти к ним, не проходя по всем ссылкам в шапке.
<search aria-label="Поиск по учебным материалам">
<form action="/search" method="get">
<label for="query">Что хотите найти?</label>
<input id="query" name="q" type="search">
<button type="submit">Найти</button>
</form>
</search>Здесь форму отправляет <form>, а <search> сообщает назначение области. Обработчик по адресу /search должен существовать в вашем проекте: тег сам не ищет материалы. Если на странице несколько поисков, задайте им разные доступные названия, например «Поиск по урокам» и «Поиск по блогу». Различить их станет легче.
Полный список найденных материалов лучше размещать в основном содержимом страницы. Внутри поиска уместны подсказки для выбора запроса. Для проекта со старыми браузерами можно оставить привычную форму с role="search". Семантику и примеры разбирает MDN о search.
ARIA-свойства: обновите раскрытие и его описание вместе
К 24 апреля отражение атрибутов ARIA в свойствах стало широко доступным. Для состояния раскрытия можно написать button.ariaExpanded = 'true' вместо вызова setAttribute().
Сам интерфейс всё равно нужно изменить. Например, кнопка раскрывает дополнительную информацию:
<button id="show-details" type="button"
aria-expanded="false" aria-controls="details">
Условия проверки проекта
</button>
<p id="details" hidden>Наставник проверит вёрстку и поведение формы.</p>const button = document.querySelector('#show-details');
const details = document.querySelector('#details');
button.addEventListener('click', () => {
const expanded = button.getAttribute('aria-expanded') === 'true';
const nextValue = String(!expanded);
details.hidden = expanded;
if ('ariaExpanded' in button) {
button.ariaExpanded = nextValue;
} else {
button.setAttribute('aria-expanded', nextValue);
}
});Нажатие снимает hidden и записывает строку 'true'; повторное нажатие возвращает оба значения назад. Две операции связаны. ARIA отражает реальное состояние блока, а hidden отвечает за видимость содержимого; если обновить только одно значение, описание и интерфейс разойдутся. Свойства вроде ariaExpanded содержат строки, поэтому 'false' нельзя проверять как логическое значение: непустая строка истинна. У свойства есть отдельная страница MDN.
Что пробовать с запасным вариантом
sizes=auto: размер изображения из готовой вёрстки
Firefox 150, выпущенный 21 апреля, добавил sizes="auto" для отложенно загружаемых изображений. Chrome и Edge уже поддерживают этот вариант. На 9 октября Safari и Safari на iOS поддержки не имеют, поэтому статус остаётся ограниченным.
<img class="preview"
src="lesson-800.jpg"
srcset="lesson-400.jpg 400w, lesson-800.jpg 800w"
sizes="auto, (max-width: 400px) 100vw, 400px"
loading="lazy" width="800" height="600"
alt="Окно учебного проекта с карточками товаров">.preview {
display: block;
width: 100%;
max-width: 400px;
height: auto;
}Подготовьте в проекте файлы шириной 400 и 800 пикселей с одинаковыми пропорциями. Сначала нужна раскладка. Поддерживающий браузер возьмёт её результат для выбора файла, потому что фактическая ширина картинки уже определена размером контейнера и правилами CSS. Браузерам без этой возможности нужны значения после auto.
Пример предназначен для картинки ниже первого экрана. auto применим вместе с loading="lazy"; главную иллюстрацию, от которой зависит первое впечатление от страницы, откладывать не стоит. Атрибуты размеров резервируют место ещё до загрузки. Условия auto описаны в MDN о sizes.
Что попробовать в своём проекте
Начните с одной кнопки и пары «фон — текст»: результат contrast-color() сразу виден. Затем проверьте поисковую форму и раскрывающийся блок. В этих примерах новый синтаксис полезен только вместе с правильным поведением.
- Откройте страницу в браузерах проекта и проверьте поддержку выбранной возможности.
- Проверьте кнопку с клавиатуры и при видимом фокусе.
- Сверьте раскрытие и
aria-expanded. - Для изображения проверьте выбранный файл, место до его загрузки и то, совпадает ли оно с пропорциями подготовленных вариантов.
Что произойдёт с цветом текста, если пользователь сменит фон в браузере без contrast-color()? Сможет ли пользователь найти и отправить поисковую форму с клавиатуры?
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.