我们如何使用 React 修复 A11y 错误 "All page content must be contained by landmarks"？

Question

ax 可访问性规则 All page content must be contained by landmarks 声明所有顶部 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 下面有一个根元素 (required to avoid collisions with other scripts

<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 elements do not contain focusable elements

我找不到其他人讨论这个问题，这让我想知道它是否相关。有没有一种干净的方法可以让 React 应用程序具有标志性的顶级元素？或者我应该忽略这个特定的 ax 规则？

Answer 1

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

不要将 aria-hidden 添加到根目录 div，这将试图从屏幕上隐藏整个 Web 应用程序 reader。

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

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

之外

更多信息

Here is the spec on <main>为例。它指出：-

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

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

因为 <body> 和 <div> 元素都可以接受流式内容，所以没问题。

Answer 2

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

<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>

例如，您要查找的元素可以是页面上的营销像素或 pop-up 模态框的暗化层。在这些情况下，或者元素为空（稍后不会填充内容）或其内容与屏幕阅读器无关（例如纯粹的装饰性图像），那么您可以添加此特定元素 aria-hidden="true"

我们如何使用 React 修复 A11y 错误 "All page content must be contained by landmarks"？

How can we fix the A11y error "All page content must be contained by landmarks" with React?

accessibility

wai-aria

reactjs

axe

更多信息