我建议遵循“Tabs design pattern”。如果你在该模式中查看example，它们有按钮而不是链接。这允许用户按下选项卡上的空格键或回车键来激活它。
简化后，它看起来像：

<div role="tablist">
  <button role="tab">tab one text</button>
  <button role="tab">tab two text</button>
  <button role="tab">tab three text</button>
</div>

（代码中还有其他重要的东西，例如aria-selected和role=tabpanel部分，但为了简单起见，我删除了它们。您可以查看example以获得所有信息。）
在代码示例中，<li>不是键盘可聚焦的，因为列表项不是原生可聚焦的。你需要一个tabindex="0"在上面。但是有tabindex只允许你制表到它，并不提供任何行为。你需要键盘事件处理程序来允许ENTER/SPACE选择它。我想这就是你的链接的目的，但是现在你需要我为每个选项卡设置了两个可聚焦元素-<li>和<a>。现在它变得复杂了。我建议遵循前面提到的已建立的设计模式。
顺便说一下，Chrome内置的可访问性检查器Lighthouse使用axe engine。Lighthouse将您的<a role="tab">标记为无效实际上并不准确。它给您的错误是说带有role="tab"的元素必须是带有role="tablist"的元素的直接子元素。在您的代码示例中，带有tab角色的链接是tablist的“孙”而不是子。然而，role="tab"的官方规范说：
作者必须确保带有角色选项卡的元素包含在中，或由带有角色列表的元素拥有。
“包含在中”并不意味着必须是直接子项，可以是孙子、曾孙等。
所以从技术上讲，你的代码是遵循规范的，尽管你实际上有两个标签角色。一个在<li>上，一个在<a>上。你可以这样做，但可能不是你想要的。你的代码现在有4个标签，而不是2个。

在用无序列表<ul>和列表项<li>实现的选项卡结构中，锚标记<a>通常用于提供可单击的选项卡标签。<a>标记的href属性被设置为单击时选项卡打开的内容部分的相应唯一标识符。该标识符通常是分配给内容部分的HTML id属性。
例如，考虑以下HTML代码，它实现了一个带有两个选项卡的简单选项卡结构：

<ul class="tabs">
  <li><a href="#tab1">Tab 1</a></li>
  <li><a href="#tab2">Tab 2</a></li>
</ul>

<div id="tab1" class="tab-content">Content for Tab 1 goes here</div>
<div id="tab2" class="tab-content">Content for Tab 2 goes here</div>

在这段代码中，<a>标签用作标签的可点击标签，而href属性被设置为内容部分的对应id。当用户点击标签时，浏览器滚动到由id标识的内容部分，该部分变得可见。
总的来说，<a>标记是实现具有无序列表和列表项结构的可单击选项卡的关键部分，它使用户能够与选项卡交互并查看相应的内容部分。