我需要为菜单显示文本图像而不是实际文本。
我在每个菜单链接中添加了一个范围。这些跨度具有设置的高度和宽度，设置为显示块，文本为减去缩进以隐藏，并且背景图像设置为我想要使用的图像。
<li>
<a href="site.com/page1">
<span id="menu1">
Link Text
</span>
</a>
</li>
这是很好的跨浏览器。当我放大和缩小页面时，它也可以正常工作。是否存在任何不明显的可访问性问题，例如屏幕阅读器？
谢谢
答案 0 :(得分：4)
屏幕阅读器：对于他们的用户（盲人和一些视力不佳的人）一切都会好的，因为文字不在视口范围内，但没有隐藏display: none;或visibility: hidden;所以它还在读。
High contrast mode ：在Windows上，此模式隐藏背景图片并使用自定义颜色显示内容。 CSS仍然处于激活状态，因此文本在视觉上被隐藏，但背景图像已经消失：许多视力不佳的用户的菜单已经消失。
由于某种原因未选择加载图像，选择与否：只要CSS处于活动状态，与高对比度模式相同的问题。
编辑：Chris Coyer在此描述了许多技术以及正反面解释：http://css-tricks.com/css-image-replacement/ 虽然最容易访问的是当你真正想要使用的是使用alt 的HTML图像时不使用背景图像：）
答案 1 :(得分：1)
是的，因为屏幕阅读器不会读取css background，而且它对您的SEO有害。你可以做的是，在那里使用文本然后用以下内容隐藏它：
text-indent, opacity:0
!!!我不确定这是不是黑帽子SEO，因为你只是在写那些已经存在的东西!!!