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 应用程序？或者我应该忽略这个特定的斧头规则？
我们的页面上有一些具有以下结构的选项卡：
<ul role="tablist">
<li>
<div role="tab" tabindex="0" aria-selected="true" aria-controls="id1">First tab content...</div>
</li>
<li>
<div role="tab">Second tab content...</div>
</li>
</ul>
在运行 Axe 可访问性测试时，这会导致两个违规，即：
<li> elements must be contained in a <ul> or <ol>、 和Certain ARIA roles must contain particular children（反之亦然，某些子级需要特定的父级角色）。
据我了解，第一次违规是由于tablist角色<ul>不再被视为<ul>. 我不明白第二个违规行为，因为规范没有强制 的元素role="tab"是 的直接子元素tablist。
防止这些违规行为的一种可能的解决方法是升级role="tab"到<li>元素。但问题是一个不同的违规：Nested interactive controls are not announced by screen readers，因为所包含的内容<div>可能是可聚焦的。将其更改为外部<li>将需要大量的 js 和 css 更改，因此这不是一个简单的修复。
这在多大程度上确实需要修复？最好的方法是什么？