当 ol 元素具有角色时，可访问性审核失败

Question

当您在 Google Chrome 中对 https://whosebug.com 等网站进行可访问性审核时，您会注意到我自己的网站出现错误。

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

在 https://whosebug.com 的情况下，带有错误的 HTML 看起来像这样。

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

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

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

Answer 1

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

此错误消息不明确。

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

The ARIA documents says:

Authors MUST ensure elements with role listitem are contained in, or owned by, an element with the role list or group.

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

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