Переполненный текст на jQuery кнопки на мобильном Safari

Question

У меня есть jquery веб-приложение, которое отлично смотрится на моем iPhone. Я просто посмотрел на него на чужом iPhone, и у них есть жирный текст включен в доступность. Проблема в том, что большая часть текста на кнопках переполняется. Например, вместо того, чтобы «Подтвердить» на кнопке, их телефон показывает «Co ...», что немного бесполезно. Это внутреннее веб-приложение компании, поэтому его нужно запускать только на iPhone.

Любые идеи, как решить эту проблему?

Answer 1

Использование относительных единиц (em, rem) в вашем размере элемента css может помочь предотвратить это. Также избегайте использования ширины набора для ваших элементов, поскольку переполненный текст может быть отключен.

В критериях WCAG AA указано, что пользователь должен иметь возможность изменять размер текста до 200 процентов без потери содержимого или функциональности, поэтому важно, чтобы все кнопки увеличивались по мере увеличения текста. Вы можете исключить любую ширину набора, которая может быть на кнопках, в противном случае они должны расширяться относительно текста внутри них.

источник по критериям WCAG: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html