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

Question

我有以下聚合物元素，它继承了"纸张行为/纸张按钮行为"，但在用户单击按钮时不提供任何类型的听觉反馈。 它只是读取按钮的文本，但没有关于是否按下它的信息。我已经测试了Android的Talkback和Windows的Narrator。我无法更改 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>

Answer 1

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

如果您按如下方式设置函数，它是否有效？我意识到它可能有些奇怪，它似乎总是将aria-pressed设置为真实？

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