Как увеличить размер шрифта wesite при использовании с модулем vw для WCAG (доступность)?

Question

Я пишу некоторые стили CSS для моего сайта и массово использую единицы «vw» и «vh» css. Я заметил, что когда я пытаюсь увеличить размер (размер?) Размера шрифта с помощью лупы браузера или используя Ctrl + прокрутку с помощью мыши, размер шрифта не включается и остается статичным. Я должен сделать этот сайт доступен (уровень АА) и одно из основных требований являются

Убедитесь, что ваш сайт Реагирует Ну Повышен Text-Size (1.4)

получил его от here.

Использование «rem» или «em» позволяет изменять размер, но они не имеют эффекта «растянуты», когда я изменяю размер окна, которое является самым большим приключением при использовании единиц «vw».

Как я могу это решить? Как я могу получить обе вещи? Изменение размера текста и сохранение соотношения сторон текста для экрана?

Спасибо.

Answer 1

vh и vw единиц не предполагается использовать для font-size, если вы хотите быть совместимыми с WCAG.

Единственное возможное решение, если вы хотите, чтобы ожидаемое поведение состояло в использовании javascript.

Answer 2

Весьма просто сделать масштаб единиц измерения в соответствии с пользовательскими настройками размера шрифта. Просто объедините единицы просмотра с относительными единицами, используя calc(). Например:

.example { 
    font-size: calc(1rem + 1.5vw); 
} 

Это также имеет дополнительный бонус установить минимальный размер шрифта в 1rem (16px), который, как правило, полезно не только доступности.

Существуют также другие способы контроля скорости масштабирования, но это выходит за рамки этого вопроса. Просто Google «Fluid Typography», и вы должны найти методы, о которых я говорю.