0

我正在努力提高 Lighthouse 的可访问性分数，并且知道如何解决它向我抛出的所有问题，除了一件事。

我有一个颜色对比问题，我在某些评级中使用了 Unicode ★ 字符。它的颜色为黄色 (#FFD500)，但与白色背景的对比未能通过 AA。我无法更改颜色，但我为屏幕阅读器提供了基于文本的替代方案（使用离屏定位）。因此，使用辅助技术的完全失明的人被涵盖在内，但我真的想不出如何解决有视力用户的低对比度问题。我想使用 aria-hidden="true" 来阻止 Lighthouse 对其进行评估，但没有奏效。

我不能改变颜色，我不能改变大小，我不能在报告中掩盖它。我想我什么都做不了？

请注意，我可以更改图像/svg 的 unicode 星号。这将解决问题，但由于各种无聊的原因，我不会讨论，这种方法会导致其他问题（这也是我选择 unicode 字符的原因）。

4

2 回答 2

1

阻止 Lighthouse 评估某些内容并不能使其合规，并且会aria-hidden="true"向屏幕阅读器隐藏内容，但颜色对比度对于低视力用户而不是盲人用户来说是一个问题。

从技术上讲，您获得的颜色对比度 (1.42:1) 对于任何尺寸都太低了。

如果您绝对无法调整此颜色，那么我的建议是在附近包含基于文本的替代方案，例如：

★ ★ ★ 4/5

于 2018-11-05T23:20:16.310 回答
1

@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>
于 2018-11-06T08:51:02.163 回答