Question

许多（大多数？）旨在实现可访问性和标准合规性的网站使用无序列表进行导航。这是否使网站更易于访问，还是只为样式提供了有用的元素？

我不介意他们，我一直在以这种方式使用无序列表。就是这样，当我从页面中删除样式以试图衡量它的可访问性时，它让我觉得它也可以是简单的链接。这是从哪里来的？

Answer 1

网站导航的最佳标记是最能代表导航内容的HTML标记。这就是橡胶符合HTML语义之路的地方。

您的导航是否是没有任何逻辑顺序的列表？如果是这样，那么<UL>将是一个不错的选择。您的导航更像是一个需要步骤的向导，还是按字母或数字顺序？如果是这样，那么<OL>可能是更好的选择。

如您所述，将导航呈现为普通链接并不提供任何语义含义;它会建议您的导航是一个要阅读的句子。通过在列表中提供链接，您可以提供关于我们如何解释这一系列超文本链接词的提示。

Answer 2

与其他海报一样，在语义上，＆lt; ul＆gt; s对于菜单来说很好，因为它们通常只是一个链接列表。但我真正喜欢使用菜单列表是他们提供的语义和视觉子级嵌套逻辑。例如：

<ul id="mainMenu">
    <li>Home</li>
    <li>Something</li>
    <li>Something Else</li>
    <li>Current section
        <ul>
            <li>A Subsection</li>
            <li>Another subsection</li>
            <li>More!
                <ul>
                    <li>We go deeper</li>
                    <li>Who knows where it ends</li>
                </ul>
            </li>
            <li>Back up one step</li>
        </ul>
    </li>
    <li>And another step</li>
    <li>All done!</li>
</ul>

将它放在浏览器中并吸烟，您会注意到每个级别不仅向右缩进，而且还使用不同的样式项目渲染。这甚至没有添加任何CSS。一定要喜欢这些名单！

Answer 3

删除样式后，子弹使导航部分更加明显。如果您使用<div>和<span>进行导航，则删除该样式会导致链接彼此相邻。

Answer 4

导航基本上是一个链接列表，因此将其标记为列表似乎对我来说是正确的。

Answer 5

我认为这至少部分与seo有关，因为html（还）不支持任何类型的导航列表元素。

使用UL（或OL）为您的导航提供语义分组，尤其是当您有嵌套导航部分时，并说这组链接具有某种逻辑上的一致性和层次结构，至少这是我的理论之一读过。

Jeremy提到的另一个好处是，当关闭样式时，开箱即用的渲染是有意义的。

Answer 6

我认为这是针对文档结构完成的。我使用过UL或div标签;虽然我总是在UL上找到更多的成功。

的问候，
弗兰克

无序列表和可访问性

6 个答案: