Отчет Lighthouse – проблема с контрастностью специальных возможностей – есть мысли о том, как ее решить?

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

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

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

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


colors lighthouse accessibility contrast
person Ian Lloyd    schedule 05.11.2018    source источник
comment
Я не могу изменить цвет - интересно, почему вы не можете изменить цвет? В то время как многие проблемы доступности могут быть решены исключительно с помощью кода без изменения внешнего вида, проблемы с самим дизайном могут потребовать изменения дизайна, чтобы сделать их доступными.   -  person BrendanMcK    schedule 06.11.2018
comment
Это брендинг. Желтые звезды — это желтые звезды. У них будет это и предупреждение о доступности, прежде чем они изменят цвет;)   -  person Ian Lloyd    schedule 06.11.2018
comment
Так что я считаю, что Маяк делает то, что Маяк должен делать здесь. Возможно, проблема здесь не в том, как это обойти (поскольку ясно, что реальное исправление здесь связано с изменением цвета — также хак может сломаться в следующем выпуске), а скорее в разрешении противоречивых требований: сделать Lighthouse проходным и сохранить дизайн как- является. Кто требует, чтобы Lighthouse проходил без ошибок? Им нужно собраться вместе с дизайнерами и решить, что важнее.   -  person BrendanMcK    schedule 06.11.2018

Ответы (2)


arrow_upward
1
arrow_downward

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

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

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

★ ★ ★ ★ 4/5

person J. Afarian    schedule 05.11.2018
comment
Ага, все понял. У меня есть скрытое текстовое значение для слепых пользователей, проблема здесь в плохом зрении. Самым простым решением было бы добавить видимое значение рейтинга (я могу настаивать на этом), но звезды все равно будут отображаться как провал, даже если у меня есть текстовое значение рядом с ним. - person Ian Lloyd; 06.11.2018
comment
Почти уверен, что это подпадает под соответствующие альтернативы: w3.org/TR/ПОНИМАНИЕ-WCAG20/ - person J. Afarian; 08.11.2018

arrow_upward
1
arrow_downward

У @j-afarian есть хорошая идея с текстовым рейтингом ("4/5") в дополнение к звездам, но если звезды все еще желтые, все равно не получается WCAG 1.4.3. Однако версия 1.4.3 только касается цветового контраста текста. Поскольку вы используете юникод, который по сути является текстом, это честная игра для 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>
person slugolicious    schedule 06.11.2018
comment
Невозможно установить контрастный фоновый цвет без изменения дизайна/фирменной символики. я знаю, каким будет ответ;) Что касается скучных причин SVG - это общая проблема с размером значков в настройках разработчика, которая еще не решена, из-за чего SVG не имеют предсказуемого размера. Честно говоря, это очень скучно. Я бы предпочел использовать PNG (что позволяет избежать проблем с SVG в среде разработки), и я вполне могу это сделать. Я пытался посмотреть, есть ли исправление, которое я мог бы применить сейчас с текущим подходом. - person Ian Lloyd; 06.11.2018
comment
если вы не можете изменить цвет переднего плана или фона, я не уверен, какое решение вы ищете. просто заставить отчет о маяке игнорировать звезды не делает его доступным. svg — лучший выбор, чем png, потому что пользователь с плохим зрением может увеличить шрифт (ctrl ++), и svg будет правильно масштабироваться, тогда как png станет пиксельным - person slugolicious; 07.11.2018