语义 HTML 实践：导航列表答案

【问题标题】：Semantic HTML Practice: the navigation list语义 HTML 实践：导航列表
【发布时间】：2011-01-12 16:07:44
【问题描述】：

我刚刚意识到隐藏文本对于我刚刚制作的 thread 来说是一种糟糕的尝试，

作为旁注，Google 不喜欢隐藏的文字，如果你有很多它，它会认为它具有欺骗性编码。一个可能很好，但是你最好使用alt 图片标签上的属性。

但我有时需要使用图片作为导航链接列表，如下图，所以我在<a>标签上使用css图片背景，并使用<span>隐藏html中的实际文本，

<div id="header" class="align-center">
 <ul id="menu-header">
    <li id="menu-header-home"><a href="#" class="current-header"><span>Home</span></a></li>
    <li id="menu-header-portfolio"><a href="#"><span>Portfolio</span></a></li>
    <li id="menu-header-profile"><a href="#"><span>Profile</span></a></li>
    <li id="menu-header-newsletter"><a href="#"><span>Newsletter</span></a></li>
    <li id="menu-header-blog"><a href="#"><span>Blog</span></a></li>
    <li id="menu-header-shop"><a href="#"><span>Shop</span></a></li>
</ul>        
</div>

它是否严重缺乏语义并且“它会认为它是欺骗性编码”。因为用图片替换文字，我使用了很多隐藏文字？

如果我必须为按钮使用图像而为导航链接列表使用图像，我应该怎么做？

谢谢。

【问题讨论】：

css text-indent 可用于将文本移出屏幕。这行得通吗？
我从来不知道文本缩进的使用。我要试一试。感谢这个想法。

标签： html image navigation html-lists semantic-markup

【解决方案1】：

隐藏文本也意味着某些屏幕阅读器会错过它。

更好的方法是使用 text-indent 将文本定位在屏幕外，在 span 上使用绝对定位也将它们定位在屏幕外，或者只是让它们可见：隐藏。

【讨论】：

谢谢。我可以问 - 'display:none' 和 'visibility: hidden' 一样吗？不是都用来隐藏文字的吗？？
他们是。我想我在某处读过更多的屏幕阅读器会读出可见性：隐藏而不是显示：无，但我现在不确定 - 寻找一些明确的信息。
@lauthiamkok - display: none; 完全隐藏该元素，浏览器会将其视为不存在，而 visibility: hidden; 为查看者隐藏该元素，但浏览器会将其视为仍然存在。示例：包含 visibility: hidden; 元素的 div 将与隐藏元素的大小相同（除非 CSS 另有说明），而包含 display: none; 元素的 div 将为 0px x 0px（除非 CSS 另有说明）