a11y聚合物按钮不提供按钮状态的听觉反馈

Question

我有以下聚合物元素，它继承了“纸张行为/纸张按钮行为”，但在用户单击按钮时不提供任何类型的听觉反馈。它只读取按钮的文本，但没有关于按钮是否被按下的信息。我已经测试了Android版的Talkback和Windows版的Narrator。我不能改变HTML，我需要让它以一种直接和简单的方式工作，我是聚合物2的新手，这让我很沮丧。关于如何使此按钮可访问并符合ay11标准，有什么建议吗？

我已经尝试过将按钮替换为checkbox，这确实工作得很好，但由于向后兼容的风险而没有得到公司的批准。

<option-button class="optionsButton" role="button" aria-labelledby="button-0" tabindex="0" selected="" aria-pressed="true">
<div class="amount">Button text</div>
</option-button>


 <script>
    class option-button extends Polymer.mixinBehaviors([Polymer.PaperButtonBehavior], Polymer.Element) {
      static get is() { return 'option-button; }
      static get properties() {
        return {
          message : {
            type: String,
            notify: true
          }
        }
      }

    }

    customElements.define(option-button.is, option-button);
  </script>

Answer 1

请注意，这并不是对问题的完整回答，它是对我所做的评论的赞扬，因为它很难在评论中解释。

如果你像下面这样设置你的函数，它能工作吗？我意识到似乎总是将aria-pressed设置为true，这一事实可能有些奇怪。

_handleClick(event) {
    this.dispatchEvent(new CustomEvent(OptionButton.is + '.button-active', {
      bubbles: false,
      composed: true,
      detail: event
    }));
    const previousPressed = this.shadowRoot.querySelector('.OptionButton[aria-pressed="true"]');
    if (previousPressed) {
       previousPressed.setAttribute('aria-pressed', 'false');
       event.target.setAttribute('aria-pressed', 'false');
    }else{
        previousPressed.setAttribute('aria-pressed', 'true');
        event.target.setAttribute('aria-pressed', 'true');
    }
  }

还要将组件更改为

<option-button class="optionsButton" role="button" tabindex="0" selected="" aria-pressed="true"> <!-- removed 'aria-labelledby' for testing -->
<div class="amount">Button text</div>
</option-button>