需要在执行函数时宣布 aria 标签

Question

<div class="accordion-header" (click)="toggleExpandCollapse()" tabindex="0" (keyup.enter)="toggleExpandCollapse()">

   <span class="accordion-title" role="button" [attr.aria-label]="toggled ? menuItemHeader.label + 'expanded' : menuItemHeader.label + 'collapsed'">`{{ menuItemHeader.label }}</span>`

我目前有这个可以折叠或展开的手风琴元素。当它被折叠时，屏幕阅读器会宣布它是折叠的，如果它被展开也是一样的。 对于可访问性用户，我现在需要的只是当他们按下回车键来展开手风琴时，屏幕阅读器应该宣布“展开”。 所以我需要 (keyup.enter)="toggleExpandCollapse()" 来宣布 aria-label="expanded"。我该怎么做？

Answer 1

aria-* 属性分为两组：状态和属性。

state 是可以更改的，通常是由于用户交互，例如aria-checked。

property 定义了对象的“性质”，它的值很少改变，例如aria-required。

当属性发生更改时，不会通知用户发生更改。

当一个状态改变时，屏幕阅读器会宣布改变。

aria-label 是一个属性。当您进行更改时，它的值将不会公布。

aria-expanded 是一个状态。其值将在您进行更改时公布。

我建议您不要更改对象的 aria-label，而是设置 aria-expanded 并将其值在真假之间切换。

Answer 2

屏幕阅读器将根据aria-expanded 属性的状态自动读取“展开”或“折叠”。那是您要切换的属性。