无序列表和可访问性答案

【问题标题】：Unordered lists and accessibility无序列表和可访问性
【发布时间】：2010-09-23 13:08:45
【问题描述】：

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

我不介意它们，我一直以这种方式使用无序列表。只是，当我从页面中删除样式以尝试评估它的可访问性时，让我感到震惊的是，它也可以是普通链接。这是哪里来的？

【问题讨论】：

标签： html css accessibility web-standards

【解决方案1】：

最适合您网站导航的标记是最能代表您的导航内容的 HTML 标记。这就是橡胶与 HTML 语义的交汇点。

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

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

【讨论】：

【解决方案2】：

正如其他发帖者所指出的，从语义上讲，

非常适合菜单，因为它们通常只是一个链接列表。但我真正喜欢将列表用于菜单的是它们提供的语义和视觉子级嵌套逻辑。例如：

<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。一定要喜欢那些清单！

【讨论】：

我应该补充一下，回答原始发帖人的问题：我认为这种结构与多页文档本身一样古老。使用项目符号列表来定义“目录”甚至早于打印过程。它确实使网站更易于访问，因为我们已经习惯了。

【解决方案3】：

删除样式后，项目符号会使导航部分更加明显。如果您使用<div>s 和<span>s 进行导航，删除样式将导致链接彼此相邻。

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

【解决方案6】：

我认为这是为文档结构完成的。我使用过 UL 或 div 标签；虽然我总是发现 UL 更成功。

问候，
弗兰克

【讨论】：