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

Question

我具有以下聚合物元素，该元素继承了“纸张行为/纸张按钮行为”，但是当用户单击按钮时不提供任何形式的听觉反馈。它仅读取按钮的文本，但不提供有关是否按下按钮的信息。我已经测试了Android版Talkback和Windows版Narrator。我无法更改HTML，我需要使其以直接，简单的方式工作，我对Polymer 2还是很陌生，这使我陷入了悲痛的境地。关于如何使此按钮可访问且符合ay11的任何提示？

我已尝试将复选框的按钮替换掉，并且效果很好，但由于向后兼容的风险，未得到公司的批准。

<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>

Answer 2

我发现对Talkback或Windows Narrator的听觉反馈没有发生，因为该元素在没有aria-pressed属性的情况下启动。

默认情况下，将aria-pressed =“ false”属性加载到DOM中时，屏幕阅读器会选择它，并报告状态。如果不是，即使稍后添加它，它似乎也会忽略它。

现在，我正在研究如何使此属性默认显示在组件的HTML上，因为页面呈现时出于某种原因，它正在被[[stripped out。我想我必须将其传递为一个财产...试图弄清楚这一点，这是另一个故事。