时间戳

首页 > 解决方案 > 需要在执行函数时宣布 aria 标签

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

问题描述

<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"。我怎样才能做到这一点？

标签： javascriptangularaccessibilitywai-aria

解决方案

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

状态是可以改变的东西，通常是由于用户交互，例如aria-checked.

属性是定义对象“性质”的东西，它的值很少改变，例如aria-required.

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

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

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

aria-expanded是一种状态。它的值将在您进行更改时公布。

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

推荐阅读