🔍 Убрал повтор в скринридере и сломал кнопку

Джейк Арчибальд делал кнопку-иконку «жирный» с подсказкой «Bold (⌘B)» на popover="hint". На кнопке стояли aria-label="Bold" и aria-describedby со ссылкой на подсказку.

VoiceOver читал «Bold. Bold. Command B». Чтобы убрать повтор, Джейк удалил aria-label. И кнопка осталась без доступного имени, то есть без названия для скринридера. aria-describedby добавляет только описание, имя он не заменяет.

JAWS в итоге собрал текст из соседних элементов и объявил кнопку сразу жирной и курсивной.

Чинится заменой одного атрибута: aria-labelledby вместо aria-describedby. Он тоже ссылается на подсказку по id, но берёт из неё именно имя. Теперь VoiceOver говорит «Bold. Command B. Button».

Сам Джейк советует проверять в нескольких скринридерах: один, как и один браузер, полной картины не даёт.

В статье есть и вариант, где имя и сочетание клавиш разведены по разным span.

👉 @seniorFront

🎨 Текст, который сам подбирает цвет под фон

Если фон карточки задаётся фирменным цветом и может быть любым, подбирать к нему цвет текста вручную неудобно.

CSS-функция contrast-color() берёт цвет и возвращает black или white, смотря что контрастнее:

.card {
  --bg: var(--brand-color);
  background: var(--bg);
  color: contrast-color(var(--bg));
}

Можно пойти дальше. Сохраняем результат в кастомное свойство, зарегистрированное через @property, и проверяем его запросом @container style(). Вышло white, значит фон тёмный, и текст красим в светлый оттенок цвета карточки. Вышло black, берём глубокий тон того же оттенка.

Если цвета палитры задать вручную, а не выводить из фона, на результат contrast-color() уже не опереться: такие пары автор советует тщательно тестировать.

В статье этот приём вместе с light-dark() собран в целую систему светлой и тёмной темы.

👉 @seniorFront

🧮 Поле ввода, в которое можно вписать формулу

Часто число для формы сначала надо посчитать. С обычным <input> приходится бегать в калькулятор и обратно. А позже в поле виден только итог, и непонятно, откуда он взялся.

Bramus сделал для этого веб-компонент <calc-input>. Пишешь (2 + 3) * 4, уходишь из поля, и там появляется 20. Возвращаешь фокус, и снова видна формула, её можно проверить или поправить.

Считает компонент своим парсером, без eval(). Он понимает обычные операторы, скобки и функции вроде sqrt, round, min, max. Внутри лежат обычные <input>, поэтому отправка формы и валидация работают как есть. С недописанной формулой вроде 2 + форма не отправится.

Учтите, что по умолчанию в поле с вашим name уходит сама формула «2 + 3», а не 5. Чтобы сервер получил число, нужен атрибут submit="result".

Как устроены три поля внутри и почему стили на самом теге сразу применяются к ним, Bramus показывает в статье.

👉 @seniorFront

✨ CSS может заметить, что элементы вот-вот столкнутся

Сбоку от секции с карточками висит декоративный элемент, и его размер и положение меняются вместе с экраном. Медиазапросом момент наезда не поймать, а спрятать декор нужно, как только зазор станет меньше 20px.

Между декором и секцией через anchor positioning растягивается невидимый элемент .measure. Внутри у него псевдоэлемент шириной 20px и overflow-x: auto. Когда зазор меньше 20px, .measure переполняется.

Само переполнение запускает scroll-driven анимацию, прокручивать ничего не нужно. Анимация лишь ставит --touching: 1, а style container query прячет декор:

.decor {
  @container style(--touching: 1) {
    opacity: 0;
  }
}

Работает только в браузерах, где есть и scroll-driven анимации, и anchor positioning, так что это улучшение поверх обычной вёрстки.

В статье есть интерактивные демо, где можно потянуть границу и поймать момент срабатывания.

👉 @seniorFront