如何使用React解决A11y错误“所有页面内容都必须包含地标”？

如何解决如何使用React解决A11y错误“所有页面内容都必须包含地标”？

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应用程序具有里程碑式的顶级元素？还是我应该忽略这个特定的斧头规则？

解决方法

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

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

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

我要说的唯一一件事是确保您在根div之外警告“此应用程序需要JavaScript”后备。

其他信息

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

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

需要流内容的地方，但没有<article>，<aside>，<footer>，<header>或<nav>元素祖先

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

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

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