无序列表和可访问性

Question

许多(大多数？)旨在实现可访问性和标准合规性的站点使用无序列表进行导航.这是否使网站更易于访问,还是仅提供有用的样式元素？

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

Answer 1

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

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

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

Answer 2

像其他海报一样,在语义上,<ul> 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>s和<span>s进行导航,删除样式将导致链接彼此相邻.