灯塔报告-可访问性对比问题-有什么想法可以解决吗？

Question

我正在努力提高灯塔可访问性得分，并知道如何解决它抛给我的一切，除了一件事。

我有一个颜色对比度问题，因此我使用了Unicode★字符的一些评级。它是黄色的(#FFD500)，但与白色背景的对比不能通过AA。我不能改变颜色，但我已经为屏幕阅读器提供了一个基于文本的替代方案(使用屏幕外定位)。因此，使用辅助技术的完全盲人也被覆盖了，但我真的无法想象如何为有视力的用户解决对比度低的问题。我想使用aria-hidden="true“来阻止灯塔对其进行评估，但没有起作用。

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

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

Answer 1

阻止灯塔评估某些内容并不会使其符合要求，而且aria-hidden="true"会对屏幕阅读器隐藏内容，但颜色对比度是低视力用户的问题，而不是盲人用户的问题。

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

如果你绝对不能调整这个颜色，那么我的建议是在附近添加一个基于文本的替代颜色，例如：

★★★★4/5

Answer 2

@j-afarian对基于文本的评级("4/5")有一个很好的想法，除了星星，如果星星仍然是黄色的，它仍然不能通过WCAG 1.4.3。但是，1.4.3 仅处理text颜色对比度。由于您使用的是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>