2

以下标记从验证器中收到错误：

<!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元素上？

4

1 回答 1

3

ARIA 角色可以分配给任何HTML 元素。来自WAI-ARIA 文档：

3.2.7.1 ARIA 角色属性

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

但是，对于可以将某些元素作为角色赋予的内容有各种限制，主要是为了防止隐式语义使您进入显式语义的混乱状态。

如果您查看与上面链接的 W3C HTML5 规范中的表格，您将在“隐式 ARIA 语义”下看到h1没有hgroup祖先的 a 必须具有headingor角色tab，如果设置的话。

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

您还将从那些head具有强烈本机语义的表中看到no role，这意味着您也不能设置它 - 它必须设置为presentation。我不确定这是否是您的意思，因为您header的样本中没有元素。

如果您确实有一个header元素，那么是的，您可以将其角色设置为banner- 事实上，这就是您可以将其设置为的所有内容（如果您完全设置了它）。我在上面链接到的那些表格也涵盖了这一点。

您也可以尝试将h1内部 a放入section一个banner角色 - 这将是我第一次尝试解决此问题。

于 2012-11-15T08:12:04.953 回答