CSS sprites 导航和禁用图像的用户答案

【问题标题】：CSS sprites navigation and User with image disabledCSS sprites 导航和禁用图像的用户
【发布时间】：2010-12-03 00:29:14
【问题描述】：

我用 css sprites 制作了一个 css 菜单，但问题在于 sprite 我们不使用仅在后台使用的内联图像，因此如果在浏览器中禁用图像，则不会显示任何内容。有什么解决办法吗？

例如：

查看此菜单并关闭图像：http://line25.com/wp-content/uploads/2009/css-menu/demo/demo.html（如果在浏览器中禁用图像，则不会看到）

此菜单反对此报价

确保您的网站使用图片禁用
Creating a site that relies too heavily on images is never a good
想法。虽然几乎是一回事过去，仍有用户在运行网速非常低。此外，如果一个用户需要——不管怎样原因——禁用图像，它们还能访问他们需要的所有内容？

http://csswizardry.com/quick-tips/#tip-02

我们不应该使用这种类型的导航吗？

【问题讨论】：

标签： css xhtml accessibility css-sprites

【解决方案1】：

为什么需要在菜单中添加替代文本？

【讨论】：

出于可访问性原因，如果图像被禁用，导航应该是可访问的
这是否意味着您的菜单完全由背景图片组成？没有文字？
不，我有链接文本，但文本被 css text-indent 属性隐藏
如果文本被文本缩进隐藏，屏幕阅读器仍然可以阅读。
我觉得 alt-text 是您最不应该担心的事情。

【解决方案2】：

不要将精灵用于内容图像。它们依赖于表示层 (CSS) 中的背景图像。将您的内容放在内容层（HTML）中。

【讨论】：

我不是要内容图片。
图片上有文字。文字传达信息。用户需要这些信息才能知道链接的去向。 这就是内容！
Dorward 那么我们不应该使用这种类型的菜单吗line25.com/wp-content/uploads/2009/css-menu/demo/demo.html
Dorward - 在这个菜单中。内容在内容层上可用，但只有在启用图像且禁用 css 时才能看到。但如果用户在浏览器中禁用图像，则什么也看不到

【解决方案3】：

您可以创建一个 1x1 透明像素图像并将其放在包含精灵的 div 中。例如：

<style type="text/css">
#linkContainer {background:url(images/sprite.gif) 0 50 no-repeat}
//sprite selection width/height, set cursor to pointer so users know its a link
#linkContainer img {width:50px;height:25px;cursor:pointer}  
<style>
<div id="buttonContainer"><img src="pixel.gif" alt="Your alt text"></div>

【讨论】：

我在下拉菜单中使用精灵 cssgirl.com/examples/… 如果图像被用户禁用，则无法访问此菜单
如果图像被禁用，1x1 清晰像素图像就可以了。像素图像的目的是仅在用户禁用图像时生成一个 alt 标签（它是透明的，因此无论如何都不会“看到”）。我在禁用图像的情况下测试了您的网站，如果您知道将鼠标悬停在哪里，下拉菜单仍会显示。将像素图像放在适当的位置将使用户直观地了解实际菜单的位置。
但在这种情况下，我们需要删除对 SEO 和屏幕阅读器有用的链接文本 myurl.html">link text