如何用 ARIA 属性标记 *ngIf 块？

Question

我想知道如何根据 WAI-ARIA 规范使用 ARIA 属性标记我的 Angular 应用程序。假设我有以下模板，

<div id="no-1" *ngIf="some_condition">some text</div>
<div id="no-2" *ngIf=!some_condition">some other text</div>

<button (click)="some_condition = !some_condition">switch</button>

用 ARIA 属性标记这些元素的正确方法是什么？我的理解是 *ngIf 完全从 DOM 中删除了元素，那么在任何一个 div 上都需要 aria-hidden 吗？当 aria-hidden 为真时，这两个元素都不会出现在 DOM 中，因此看起来毫无意义。不过，我不确定它是否有助于屏幕阅读器，所以我想确定一下。

其次，由于两个div根据some_condition的值在DOM中填充相同的位置，它们是否应该具有相同的ID？按钮是否应该有一个引用该 ID 的 aria-controls？如果不是，如何指定div和按钮的关系？

Answer 1

这是我的理解 *ngIf 从 DOM 中删除元素 总的来说，在任何一个 div 上都需要隐藏 aria-hidden 吗？

正确；该元素不会在页面上存在，因此aria-hidden 不是必需的。

其次，由于两个 div 在 DOM 中填充相同的位置，基于 some_condition 的值，它们是否应该具有相同的 ID？

如果您不需要任何特定的 ID，那么避免重复 ID 是一种很好的做法，但是当它们不同时显示时不会有任何伤害。

按钮是否应该有一个引用该 ID 的 aria-controls？如果 不是，我如何指定 div 和 按钮？

包含aria-controls 是个好主意。如果两个divs 使用相同的ID，那么它是直截了当的。

<div id="no-1">...</div>
<button attr.aria-controls="no-1">Click Me!</button>

如果divs 使用不同的 ID，那么它仍然很简单，但您需要在组件 TS 或内联中使用一些逻辑，如下所示：

<div id="no-1" *ngIf="some_condition">some text</div>
<div id="no-2" *ngIf=!some_condition">some other text</div>

<button [attr.aria-controls]="some_condition ? 'no-1' : 'no-2'">Click Me!</button>

注意我是如何定义 ARIA 属性的。在 Angular 中，您应该在属性前面加上 attr. 这适用于您要添加的任何 ARIA 属性。一些例子：

<!-- this assigns the label inline HTML -->
<section attr.aria-label="This section is important"></section>

<!-- this expects a variable called myLabelVariable to be defined in the component -->
<section [attr.aria-label]="myLabelVariable"></section>