Можно ли как-то избежать этого предупреждения (слишком маленький текст) в инструменте доступности WAVE, но оставить размер шрифта без изменений? - PullRequest
0 голосов
/ 25 октября 2019

Мой HTML:

<p id="text">test</p>

Мой CSS:

#test {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 0.7em;
  text-align: center;
}

Как мне избежать этого предупреждения в средстве доступности WAVE? Это одно из требований, чтобы этот текст был маленьким.

Ответы [ 2 ]

5 голосов
/ 25 октября 2019

Краткий ответ

Нет.

Средний ответ

Нет, и при этом вы не должны пытаться избегать предупреждений, вы должны их исправить.

Длинный ответ

Нет.

Это предупреждение действует, потому что люди со слабым зрением изо всех сил пытаются прочитать крошечные шрифты. (и даже те, у кого идеальное зрение, не хотят прищуриваться, чтобы читать что-либо - это плохой пользовательский опыт!)

Не пытайтесь исправлять предупреждения, вы должны решить проблему.

Если требуется, чтобы текст был маленьким, это требование необходимо изменить.

Либо откорректируйте дизайн, чтобы включить большой текст, если макет недостаточно велик, чтобы вместить текст большего размера (минимальный размер 1 бэр), либо измените краткое изложение и объясните, почему текст должен быть больше, еслиэто требование к спецификации.

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

2 голосов
/ 29 октября 2019

Wave сообщает об ошибках для текста размером менее 10 пикселей. Для стандартных браузеров 0.7em эквивалентен 11px, если вы не вкладываете теги. Вы можете основывать свой шрифт на rem единице вместо em или использовать px единице (которая полностью применима для доступности, так как представляет пиксели CSS, а не физические пиксели). При этом ответ Грэма Ричи дает вам хороший способ справиться с ситуацией: не пытайтесь решить проблему, скрывая предупреждение.

...