2

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 元素不包含可聚焦元素

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

4

2 回答 2

2

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

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

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

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

更多信息

这是<main>作为示例的规范。它指出：-

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

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

由于<body>and<div>元素都可以接受流内容，所以没问题。

于 2020-09-17T09:56:43.963 回答
0

根元素是<div>元素没有问题。您可能在<div>,和. 如果您将在上面显示的示例中运行 ax，您将不会看到此问题。您将在下面的示例中看到它。<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"

于 2020-09-22T09:38:37.693 回答