Question

我正在尝试提高Lighthouse的可访问性得分，并且知道如何解决它扔给我的所有事情，除了一件事。

我有一个颜色对比问题，因此我对某些等级使用了Unicode★字符。它的颜色为黄色（＃FFD500），但与白色背景的对比无法通过AA。我无法更改颜色，但是为屏幕阅读器提供了基于文本的替代方法（使用屏幕外定位）。因此，涵盖了使用辅助技术的完全盲人，但是我真的无法考虑如何为有视力的用户解决低对比度问题。我以为使用aria-hidden =“ true”可以阻止Lighthouse对其进行评估，但是没有用。

我不能更改颜色，我不能更改大小，我不能在报告中屏蔽它。我想我无能为力了？

请注意，我可以更改图像/ svg的unicode星号。这样就可以解决问题，但是由于各种令人厌烦的原因，我不再赘述，这种方法还导致了其他问题（这就是让我选择unicode字符的原因。）

Answer 1

停止Lighthouse评估不符合要求的内容，aria-hidden="true"隐藏了屏幕阅读器的内容，但是对于低视力用户而不是盲人用户来说，颜色对比度是一个问题。

从技术上讲，您获得的颜色对比度（1.42：1）对于任何尺寸都太低。

如果您绝对不能调整此颜色，那么我的建议是在附近添加基于文本的替代方法，例如：

★★★★ 4/5

Answer 2

@ j-afarian除了星号外，还具有基于文本的评级（“ 4/5”），但是如果星号仍然是黄色，它仍然会失败WCAG 1.4.3。但是，仅1.4.3 处理文本颜色对比度。由于您正在使用unicode，本质上是文本，因此对于1.4.3来说这是一个公平的游戏。

但是，如果您将unicode换成svg或图像，则如上所述，就不会有颜色对比失败，因为它不再是文本。对于弱视用户而言，这仍然是一个问题，但不是WCAG故障。这是对系统的游戏，破坏了WCAG的目的，但从技术上讲，这不是WCAG的失败。

我很想知道导致各种svg / img问题的“无聊的原因” 。我们也可以解决这些问题。

如果您不能更改unicode星星的（前景）颜色，可以更改背景颜色吗？

<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>

灯塔报告-可访问性对比问题-关于如何解决的任何想法？

2 个答案: