NVDA 未读出 trumbowyg 工具栏按钮的按下状态，但 VoiceOver 正在读出

如何解决NVDA 未读出 trumbowyg 工具栏按钮的按下状态，但 VoiceOver 正在读出

我希望 trumowyg 工具栏按钮（粗体/斜体等）的按下状态能够被 NVDA 屏幕阅读器读出。我已经实现了 aria-pressed 解决方案，它适用于 VoiceOver；它在选择和取消选择按钮时读出选择/取消选择，但不适用于 NVDA：

function addValuesToTextEditorButtons() {
  const toggleButton = element => {
    // Check to see if the button is pressed
    var pressed = (element.getAttribute("aria-pressed") === "true");
    // Change aria-pressed to the opposite state
    element.setAttribute("aria-pressed",!pressed);
  }
  const handleBtnKeyDown = event => {
    // Prevent the default action to stop scrolling when space is pressed
    event.preventDefault();
    toggleButton(event.target);
  }

  var buttons = $('.trumbowyg-button-pane .trumbowyg-button-group button[type="button"]');
  buttons.each(function (index,element) {
    let title = element.title.split(' ')[0]
    element.value = title
    element.setAttribute('aria-label',title)
    element.setAttribute('aria-pressed',false)
    element.setAttribute('role','button')
    element.addEventListener('click',event => {
      handleBtnKeyDown(event)
    })  
    element.removeAttribute('tabindex')
  });
}

解决方法

首先，确认您设置 aria-pressed 的元素是一个真正的按钮（或 role='button'）。从您的代码片段来看，这似乎是正确的，但这将是要验证的第一件事。 ARIA 属性仅对某些元素有效。（见https://www.w3.org/TR/html53/dom.html#allowed-aria-roles-states-and-properties）

即使属性无效，某些屏幕阅读器仍可能会宣布该属性的值，因此有时这可以解释为什么一个 SR 有效（例如 VO）而另一个无效（NVDA）。

我已经成功地将 aria-pressed 用于所有屏幕阅读器，没有出现任何问题。对于 NVDA，它会将元素声明为“toggle button”并根据值说“pressed”或“not press” .