Html 我正在使用 NVDA 并多次读取关闭按钮，但它的读取非常完美

按钮本身看起来不错.您在按钮中嵌入了一个<；svg>；(大概是一个"X"形状)，而按钮没有任何文本，所以您使用的是aria-label.这一切都很好，尽管你的按钮上有多余的tabindex="0".

问题是你的按钮嵌入在标题h2>；中.这是故意的吗？您的实际代码是否做到了这一点，或者这是一个打字错误？

<h2>Default Pop-UP Title
  <button>close</button>
</h2>

您需要关闭<；/h2>；，然后使用按钮.

<h2>Default Pop-UP Title</h2>
<button>close</button>

Update 使用 comments 中的链接，https://codesandbox.io/s/somr32?file=/demo.tsx

根据你是否使用NVDA或JAWS，以及你使用的是Chrome还是Firefox，你会得到各种行为.你真的不能说哪个版本是正确的，因为它们都有优点.精简后的对话框 struct 为:

<div role="presentation" tabindex="-1">
  <div role="dialog" aria-labelledby="heading">
    <h2 id="heading">modal title
      <button aria-label="close"></button>
    </h2>
  </div>
</div>

当对话框打开时，我在代码判断器中查看了document.activeElement，焦点在最外面的<；div>；

<div role="presentation" tabindex="-1">个

可能是通过Focus()调用移到那里的，因为<；div>；的值是tabindex="-1".

当对话框打开时，我听到:

• NVDA+Chrome-(nothing)
• NVDA+Firefox-"clickable Modal title close dialog"
  • 该对话框使用咏叹调标记，通过指向H2
• JAWS+Chrome-"Modal title close heading level 2"
  • 正在宣布H2
• JAWS+Firefox-(nothing)

然后，当您制表符时，焦点移动到X-Close按钮，并宣布以下消息:

• NVDA+Chrome
  • "模型标题关闭对话框"
  • "模型标题关闭标题"
  • "关闭按钮标题2"
  • "模型标题关闭对话框"
  • "标题2级按钮关闭"
  • NVDA+Firefox
    • "模式标题关闭对话框"
    • "通道标题关闭标题"
    • "关闭按钮标题级别2"
    • "模式标题关闭对话框"
    • "标题2级按钮关闭"
  • JAWS+Chrome
    • "通道标题关闭对话框"
    • "关闭标题2级按钮"
  • JAWS+Firefox
    • "模式标题关闭对话框"
    • 他说:"我的名字是一种发酵剂，它是一种发酵剂.它只是一种仇恨，是一种设施的感染，是一种危险的行为.它是一种危险的行为，它是一种危险的行为，它是一种行为，它是一种行为."
    • "关闭按钮"

  如你所见，它到处都是.如果将初始焦点强制放在对话框本身而不是对话框上方的容器上，您可能会获得更多的一致性.