0

我希望 NVDA 屏幕阅读器读出 trumbowyg 工具栏按钮（粗体/斜体等）的按下状态。我已经实现了 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')
  });
}
4

1 回答 1

0

首先，确认您设置的元素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，它会将元素宣布为“切换按钮”，并根据值显示“已按下”或“未按下”。

于 2021-07-22T22:53:06.143 回答