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

Question

我希望trumbowyg工具栏按钮(粗体/斜体等)的按下状态由NVDA屏幕阅读器读出。我已经实现了aria-pressed解决方案，它在VoiceOver上工作得很好；当按钮被选中和取消选中时，它会读出select/select，但对于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')
  });
}

Answer 1

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

一些屏幕阅读器可能仍然会声明该属性的值，即使它是无效的，所以有时这就解释了为什么一个SR可以工作(比如VO)，而另一个SR不能(比如NVDA)。

我已经成功地在所有屏幕阅读器上使用了aria-pressed，没有出现任何问题。对于NVDA，它会将元素声明为“切换按钮”，并根据值显示“已按下”或“未按下”。