Question

以下标记从验证程序收到错误：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bla Bla Bla</title>
</head>
<body>

    <h1 role="banner">Bla Bla Bla</h1>

    <section role="main">
        <h1>Bla Bla Bla</h1>
        <p>Bla Bla Bla</p>
    </section>

    <p role="contentinfo"><small>Bla Bla Bla</small></p>

</body>
</html>

错误是：错误：此时元素h1上不允许属性角色。

这是否意味着role="banner"必须位于header元素上？

Answer 1

可以将ARIA角色分配给任何 HTML元素。来自the WAI-ARIA docs：

3.2.7.1 ARIA角色属性

每个HTML元素都可以指定ARIA角色属性。

但是，对于某些元素可以作为一个角色给出的内容存在各种限制，主要是为了防止隐式语义使您使用显式语义进入混乱状态。

如果你看一下上面链接的W3C HTML5规范中的表，你会在“隐式ARIA语义”下看到没有h1祖先的hgroup必须具有{{{ 1}}或heading，如果设置。

这就是您收到验证错误的原因。

您还会从这些表中看到tab具有强head的本地语义，这意味着您无法设置它 - 它必须设置为no role。我不确定这是不是你的意思，因为你的样本中没有presentation元素。

如果确实有header元素，那么您可以将其角色设置为header - 事实上，您可以将其设置为（{1}你完全设置它。这也是我上面链接的那些表格所涵盖的。

您还可以尝试将banner置于h1 section角色中 - 这本来是我第一次尝试修复此问题。

是否允许在h1上使用role =“banner”？

1 个答案: