关于 html:WCAG 2.0 – 将相邻图像和低对比度文本链接组合为同一资源 | 珊瑚贝

WCAG 2.0 – Combining adjacent image and with low contrast text link for the same resource


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

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

我的问题是 – 如果链接具有标题属性,这是否使文本可访问,因此 WCAG AA 投诉?

除此之外,还会有一个小的人字形图像,其中包含 alt 标签,这种冗余是否有利于 AA 合规性?

谢谢!


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

  • 背景上文本的颜色对比。
  • 不描述链接。
  • 不幸的是,由于某些用户无法访问它(例如使用键盘但可以看到屏幕的人),因此无法依靠标题来传达信息。

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

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

    否则,您将不得不提供样式切换器或个性化选项以增加对比度(假设您想满足 WCAG2-AA)。

    我无法确定链接没有描述它们的目标,好像它们上方有一个标题可以提供上下文。但是,”阅读更多”链接确实敲响了警钟。

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

    1
    <img src=”file.gif” alt=”Specific page title”>Read more

    注意:由于 alt 文本像内联文本一样被读取,所以在末尾包含一个空格。

    或者如果顺序相反:

    1
    Read more<img src=”file.gif” alt=” about specific page title”>

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

    • 感谢您的答复。我已经使用 Snook 对比度分析仪调整了背景颜色。我还将向 V 形图标添加描述性 alt 标签,并考虑使整个 div 成为可点击的链接。干杯!


    来源:https://www.codenong.com/18502089/

    微信公众号
    手机浏览(小程序)

    Warning: get_headers(): SSL operation failed with code 1. OpenSSL Error messages: error:14090086:SSL routines:ssl3_get_server_certificate:certificate verify failed in /mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line 57

    Warning: get_headers(): Failed to enable crypto in /mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line 57

    Warning: get_headers(https://static.shanhubei.com/qrcode/qrcode_viewid_9564.jpg): failed to open stream: operation failed in /mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line 57
    0
    分享到:
    没有账号? 忘记密码?