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

Question

I would like the pressed state of the trumbowyg toolbar buttons (bold/italic etc) to be read out by NVDA screen reader. I have implemented the aria-pressed solution, which works fine for VoiceOver; it reads out select/deselect when the buttons have been selected and deselected, however not for 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

First off, verify that the element you're setting aria-pressed on is a real button (or role='button' ). It looks like that's true from your code snippet but would be the first thing to verify. ARIA attributes are only valid on certain elements. (See https://www.w3.org/TR/html53/dom.html#allowed-aria-roles-states-and-properties )

Some screen readers might still announce the value of the attribute even if it's not valid so sometimes that explains why one SR works (such as VO) whereas another does not (NVDA).

I've used aria-pressed successfully with all screen readers without a problem. For NVDA, it will announce the element as a " toggle button " and will say " pressed " or " not pressed " depending on the value.