我们如何使用 React 修复 A11y 错误“所有页面内容必须由地标包含”？

Question

ax 可访问性规则所有页面内容必须包含在地标中声明所有顶部 html 元素都应该是地标元素，例如

<html lang="en">
    <head>
        <title>Hello</title>
    </head>
    <body>
        <header>This is the header</header>
        <nav>This is the nav</nav>
        <main>This is the main</main>
        <footer>This is the footer</footer>
    </body>
</html>

但是一个 React 项目需要在 body 下面有一个根元素（需要避免与其他脚本发生冲突

<html lang="en">
    <head>
        <title>Hello</title>
    </head>
    <body>
        <div id="root">
            <header>This is the header</header>
            <nav>This is the nav</nav>
            <main>This is the main</main>
            <footer>This is the footer</footer>
        </div>
    </body>
</html>

我试图将aria-hidden="true"为我的 div 以便屏幕阅读器忽略它

<div id="root" aria-hidden="true">

但这引发了另一个问题： aria-hidden 元素不包含可聚焦元素

我找不到其他人在讨论这个问题，这让我怀疑它是否相关。 有没有一种干净的方式来让 React 应用程序具有里程碑式的顶级元素？ 或者我应该忽略这个特定的斧头规则？

Answer 1

您可以放心地忽略这一点。 就可访问性树而言，此 div 将被忽略。

不要将aria-hidden添加到根 div，这将尝试对屏幕阅读器隐藏整个 Web 应用程序。

只要根 div 的内容结构正确，它仍然可以完全使用。

我唯一要说的是确保你有一个警告，“这个应用程序需要 JavaScript”回退位于你的根 div 之外。

更多信息

这里以<main>的规范为例。 它指出：-

可以使用此元素的上下文：

预期流内容，但没有<article> 、 <aside> 、 <footer> 、 <header>或<nav>元素祖先。

由于<body>和<div>元素都可以接受流内容，所以你很好。

Answer 2

根元素是<div>元素没有问题。 您可能在<main> 、 <header>和<footer>的同一级别上还有另一个<div> 、 <p>或其他一些非地标元素。 如果您将在上面显示的示例上运行 ax，您将不会看到此问题。 您将在下面的示例中看到它。

<html lang="en">
    <head>
        <title>Hello</title>
    </head>
    <body>
        <div id="root">
            <header>This is the header</header>
            <nav>This is the nav</nav>
            <main>This is the main</main>
            <div>I am a stray element</div>
            <footer>This is the footer</footer>
        </div>
    </body>
</html>

例如，您要查找的元素可以是页面上的市场像素或用于弹出模式的变暗层。 在这些情况下，或者如果元素为空（并且以后不会填充内容）或其内容与屏幕阅读器无关（例如纯粹的装饰图像），那么您可以添加此特定元素aria-hidden="true"

我们如何使用 React 修复 A11y 错误“所有页面内容必须由地标包含”？

问题描述

2 个解决方案

解决方案1
2 已采纳 2020-09-17 09:56:43

更多信息

解决方案2
0 2020-09-22 09:38:37

我们如何使用 React 修复 A11y 错误“所有页面内容必须由地标包含”？

问题描述

2 个解决方案

解决方案1 2 已采纳 2020-09-17 09:56:43

更多信息

解决方案2 0 2020-09-22 09:38:37

解决方案1
2 已采纳 2020-09-17 09:56:43

解决方案2
0 2020-09-22 09:38:37