1

我需要为我的菜单显示文本图像而不是实际文本。

我在每个菜单链接中放置了一个跨度。这些跨度有一个设置的高度和宽度，设置为显示块，文本负缩进隐藏，背景图像设置为我要使用的图像。

<li>
  <a href="site.com/page1">
    <span id="menu1"> 
      Link Text
    </span>
  </a> 
</li>

这在跨浏览器上运行良好。当我放大和缩小页面时，它也可以正常工作。是否有任何不明显的可访问性问题，例如对于屏幕阅读器？

谢谢

4

2 回答 2

4

屏幕阅读器：他们的用户（盲人和一些视力不佳的人）会很好，因为文本不在视口范围内，但没有被隐藏，display: none;所以visibility: hidden;仍然可以阅读。

高对比度模式：在 Windows 上，此模式隐藏背景图像并使用自定义颜色显示内容。CSS 仍然处于激活状态，因此文本在视觉上是隐藏的，但背景图像消失了：对于许多视力不佳的用户来说，您的菜单消失了。

由于某种原因或其他原因，图像未加载，无论是否选择：只要 CSS 仍然处于活动状态，就与高对比度模式存在相同的问题。

编辑：Chris Coyer 在此处描述了许多技术以及利弊：http: //css-tricks.com/css-image-replacement/。
虽然最容易使用的是当您真正想要使用的是带有 alt 的 HTML 图像时，不要使用背景图像:)

于 2012-04-04T15:27:34.413 回答
1

是的，因为background屏幕阅读器不会读取 css，而且它对您的 SEO 不利。您可以做的是，在此处使用文本，然后将其隐藏：

text-indent, opacity:0

!!!我不确定它是否被认为是黑帽搜索引擎优化，因为你只是在写一些已经存在的东西！！！

于 2012-04-04T11:04:59.573 回答