Lighthouse Report - проблема контраста доступности - есть мысли о том, как решить? - PullRequest
Новая
       50

Lighthouse Report - проблема контраста доступности - есть мысли о том, как решить?

0 голосов
/ 06 ноября 2018

Я пытаюсь улучшить показатель доступности Маяка и знаю, как справиться со всем, что он мне бросает, кроме одного.

У меня проблема с цветовым контрастом, из-за которой я использовал символ Unicode ★ для некоторых оценок. Он окрашен в желтый цвет (# FFD500), но контраст на белом фоне не срабатывает АА. Я не могу изменить цвет, но я предоставил текстовую альтернативу (с использованием позиционирования вне экрана) для программ чтения с экрана. Таким образом, полностью слепые люди, использующие вспомогательные технологии, покрыты, но я действительно не могу думать, как решить проблему низкой контрастности для зрячих пользователей. Я думал использовать aria-hidden = "true", чтобы остановить Lighthouse от оценки, не сработало.

Я не могу изменить цвет, я не могу изменить размер, я не могу замаскировать его в отчете. Я думаю, я ничего не могу сделать?

Обратите внимание, что я могу изменить звездочку Юникода для изображения / SVG. Это решит проблему, но по разным скучным причинам, в которые я не буду вдаваться, этот подход вызвал другие проблемы (и именно поэтому я выбрал символы юникода).

Ответы [ 2 ]

0 голосов
/ 06 ноября 2018

@ j-afarian имеет хорошую идею с текстовым рейтингом ("4/5") в дополнение к звездам, но если звезды все еще желтые, он все равно не срабатывает WCAG 1.4.3 . Однако, 1.4.3 only имеет дело с text цветовой контраст. Так как вы используете Unicode, который по сути является текстовым, это хорошая игра для 1.4.3.

Но если вы поменяете Юникод для SVG или изображения, как вы упомянули, не произойдет сбой цветового контраста, потому что это больше не текст. Это все еще будет проблемой для пользователей со слабым зрением, но это не сбой WCAG. Это своего рода игровая система, которая побеждает цель WCAG, но технически это не ошибка WCAG.

Я бы хотел знать "различные скучные причины" , которые вызвали проблему с svg / img. Мы тоже можем их решить.

Если вы не можете изменить цвет (переднего плана) звезд Юникода, можете ли вы изменить цвет фона? 

<span style="color:yellow">&#x2605; &#x2605;
  <!-- 4.55 color ratio with gray background -->
  <span style="background-color:#717171">&#x2605; &#x2605;</span>
  <!-- 8.00 color ratio with blue background -->
  <span style="background-color:#0000FF">&#x2605; &#x2605;</span>
  <!-- 4.51 color ratio with red background -->
  <span style="background-color:#E50000">&#x2605; &#x2605;</span>
</span>
0 голосов
/ 06 ноября 2018

Отказ Lighthouse от оценки чего-либо не делает его совместимым, а aria-hidden="true" скрывает контент от программ чтения с экрана, но цветовой контраст - это проблема для пользователей со слабым зрением, а не для слепых.

Технически, коэффициент цветовой контрастности (1,42: 1) слишком мал для любого размера.

Если вы абсолютно не можете отрегулировать этот цвет, то я рекомендую включить рядом текстовую альтернативу, например:

★ ★ ★ ★ 4/5

...