Question

当您使用https://stackoverflow.com之类的网站在Google Chrome浏览器中进行无障碍审核时，您会发现我自己的网站出现错误。

List items (<li>) are not contained within <ul> or <ol> parent elements.

对于https://stackoverflow.com，带有错误的HTML看起来像这样。

<ol class="list-reset grid gs4" role="presentation">
                <li class="grid--cell">
                ...

当我的网站出现此错误时，我删除了角色属性，该错误消失了。

我有一个简单的问题。为什么？

Answer 1

列表项（<li>）不包含在<ul>或<ol>父元素中。

此错误消息不是明确的。

ol和ul元素的隐性角色是list。 li元素的隐式角色是listitem。

作者必须确保角色listitem的元素包含在角色list或group的元素中或由其拥有。

如果您要覆盖ol元素的本机角色，那么您将不再遵守ARIA规范（同时仍然遵循HTML规范）。

只需删除presentation元素上的ol角色，或者不使用列表元素。