Новый meta-тег для поддержки масштабирования текста на мобильных устройствах

Если открыть настройки доступности на смартфоне и увеличить размер шрифта, системный текст сразу станет крупнее. Но на веб-страницах это работает не всегда.

На Android браузер Firefox масштабирует сайты вместе с системным размером текста. Chrome же игнорирует эту настройку, поэтому текст на страницах остаётся прежним. На iOS ситуация похожая — Safari также не учитывает системное масштабирование текста для веб-контента.

Недавно появилась идея добавить новый meta-тег, который позволит браузерам учитывать системный размер текста на веб-страницах.

<meta name="text-scale" content="scale" />

Если добавить этот meta-тег, текст начинает масштабироваться вместе с системными настройками (пока это работает только в Chrome Canary). Однако это касается только текста, размер которого задан относительными единицами.

Например, если размер задан в пикселях (px), он останется прежним. А если используются относительные единицы — em или rem — текст будет увеличиваться вместе с системным размером шрифта.

<div style="font-size:16px">My pixel test</div>
 
<div style="font-size:1em">My em test</div>
 
<div style="font-size:1rem">My rem test</div>

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

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

body {
  border-top: 20px solid var(--color, black);
}
 
@media (min-width:200px) {
  body { --color:aqua; }
}
 
@media (min-width:300px) {
  body { --color:fuchsia; }
}
 
@media (min-width:400px) {
  body { --color:salmon; }
}

В Firefox верхняя граница остаётся aqua, потому что из-за полного масштабирования страница даже не достигает следующего брейкпоинта.

Попробовать пример

Вывод

Новый meta-тег сделали опциональным, потому что изменение поведения браузеров по умолчанию могло бы сломать множество существующих сайтов.

Перед использованием стоит протестировать его на своём сайте: например, из-за увеличения текста может появиться горизонтальная прокрутка.

Тем не менее, это полезный шаг: разработчики получают больше возможностей учитывать пользовательские настройки доступности. Остаётся дождаться поддержки этого meta-тега в других браузерах.

Теги: html, css, accessibility

Источник