我们的页面上有一些具有以下结构的选项卡：
<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 更改，因此这不是一个简单的修复。
这在多大程度上确实需要修复？最好的方法是什么？