Adr*_*ire 6 accessibility wai-aria reactjs axe
axe 可访问性规则“所有页面内容必须包含在地标中”规定所有顶级 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">
但这引发了另一个问题：咏叹调隐藏元素不包含可聚焦元素
我找不到其他人讨论这个问题，这让我想知道它是否相关。有没有一种干净的方法来拥有具有里程碑式顶部元素的 React 应用程序？或者我应该忽略这个特定的斧头规则？
您可以放心地忽略这一点。就可访问性树而言，该 div 将被忽略。
不要添加aria-hidden到根 div，这将尝试对屏幕阅读器隐藏整个 Web 应用程序。
只要根 div 的内容结构正确，它仍然完全可用。
我唯一要说的是，确保您收到一条警告：“此应用程序需要 JavaScript”回退位于您的根 div 之外。
可以使用该元素的上下文：
其中需要流内容，但没有<article>、<aside>、<footer>或元素<header>祖先<nav>。
由于<body>和<div>元素都可以接受流内容，所以没问题。
| 归档时间： |
|
| 查看次数： |
7373 次 |
| 最近记录： |