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

【问题标题】：a11y polymer button doesn´t provide auditive feedback of button statea11y 聚合物按钮不提供按钮状态的听觉反馈
【发布时间】：2020-01-03 19:09:07
【问题描述】：

我有以下聚合物元素，它继承了“paper-behaviors/paper-button-behavior”，但在用户单击按钮时不提供任何类型的听觉反馈。它只是读取按钮的文本，但没有关于它是否被按下的信息。我已经测试了它的 Talkback for Android 和 Narrator for Windows。我无法更改 HTML，我需要让它以直接和简单的方式工作，我对聚合物 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>

【问题讨论】：

当您说您无法更改 HTML 时，您的意思是，您需要更改 HTML，以便更具体地了解您的约束条件吗？
我不知道你的自定义组件是做什么的，所以这很困难。您能否将自定义元素的构造函数放在问题中，以便我可以看到它实际上是什么。如果您尝试制作一个切换按钮，那么使用role="checkbox" 实际上更容易
实际上，这是我最初的解决方案，但在代码审查中被拒绝，因为有可能破坏正在使用相同组件的其他上下文......这很可惜，因为更改为复选框成功了，并正确地提供了听觉反馈。但使用按钮，没有。我现在将添加构造函数代码。
您的解决方案绝对是最好的解决方案，我认为他们没有理由根据我看到的代码将其切换出来，因为看起来这个组件始终充当切换按钮（其中情况下我想不出一个“打破”的场景）。您的另一个选择是在按钮内附加一些 visually hidden 文本，详细说明其状态，而不是“正确”的做法，但它会暴露状态，我认为这是可访问的。
添加了一个“答案”，希望能说明我的意思，我会根据它是否有帮助来删除/改进它，我现在离开了，所以明天会在某个时候拿起这个。祝你好运。

标签： accessibility polymer-2.x talkback narrator android-a11y

【解决方案1】：

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

如果您按以下方式设置功能，它会起作用吗？我意识到它似乎总是将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>

【讨论】：