html - WCAG 2.0 - 将相邻图像和低对比度文本链接组合到同一资源

Question

我正在设计一个网站，我想在其中使用不同颜色背景上的白色文本。不幸的是，其中 2 个背景没有提供足够的对比度以符合 WCAG 2.0 AA 标准。

文本是一个“阅读更多”链接。

我的问题是 - 如果链接具有标题属性，这是否会使文本可访问，从而引起 WCAG AA 投诉？

除此之外，还会有一个带有 alt 标签的小人字形图像，这种冗余是否有利于 AA 合规性？

谢谢!

Answer 1

听起来您遇到了两个问题:

1. Colour contrast背景上的文字。
2. Not describing links .

不幸的是，不能依赖标题来传达信息，因为某些用户无法访问它(例如，使用键盘但可以看到屏幕的人)。

对比度问题有一些潜在的调整:

• 对文本所在部分的图像应用效果(例如淡化为黑色)。
• 对文本应用效果，例如增加对比度的阴影。
• 为不同图片上的文字选择不同的颜色。

否则，您将陷入必须提供样式切换器或个性化选项以增加对比度的情况(假设您想要满足 WCAG2-AA)。

我不能确定这些链接没有描述它们的目标，就好像它们上面有一个标题可以提供上下文一样。然而，“阅读更多”链接确实敲响了警钟。

如果 V 形图像具有特定于目标页面的替代文本，那将会有所帮助。例如:

<a href="#"><img src="file.gif" alt="Specific page title ">Read more</a>

注意:由于替代文本像内联文本一样阅读，所以在末尾包含一个空格。

或者如果顺序相反:

<a href="#">Read more<img src="file.gif" alt=" about specific page title "></a>

总的来说，如果您的框有一个描述目标页面的标题，我会制作一个链接并使用脚本使框的其余部分可点击。 (例如，http://ukwindsurfing.com/ 上的中心框)