javascript - 显示/隐藏与从 DOM 添加/删除的可访问性影响

Question

下面是一个用 Angular 编写的下拉菜单示例，其中我使用了 HTML5 hidden 属性(换句话说，display: none;)显示/隐藏项目列表:

<button
  id="my-btn
  type="button"
  aria-haspopup="menu"
  aria-controls="my-menu"
  [attr.aria-expanded]="isMenuOpen"
  (click)="isMenuOpen = !isMenuOpen"
>
  Menu
</button>

<ul
  id="my-menu"
  role="menu"
  aria-labelledby="my-btn"
  [hidden]="!isMenuOpen"
>
  ...
</ul>

在下一个示例中，我使用结构指令 *ngIf 而不是属性 hidden 来有条件地呈现列表。换句话说，现在每次 isMenuOpen 更改时都会在 DOM 中添加和删除列表。

<ul
  id="my-menu"
  role="menu"
  aria-labelledby="my-btn"
  *ngIf="isMenuOpen"
>
  ...
</ul>

忽略任何框架或性能问题，从可访问性的 Angular 来看，这两种实现有什么不同吗？

相当多的 ARIA 属性通过引用其他元素的 ID 来工作(例如 aria-controls、aria-labelledby 等)，从 DOM 中删除引用的元素通过这样的属性，是否比隐藏该元素更难以访问？

Answer 1

是的，有区别。考虑这个简单的例子:

<button aria-labelledby="foo"></button>

页面上尚不存在“foo”元素。如果您通过验证器运行此代码，例如 https://validator.w3.org/nu ，它会失败。

错误:aria-labelledby 属性必须指向同一文档中的元素。

从 WCAG 的 Angular 来看，它会失败 4.1.1 - Parsing .

此外，WCAG 4.1.2 - Name, Role, Value将是一个问题。该按钮(在我的示例中)没有可访问的名称，因为它指向的元素不存在。如果它指向的元素是隐藏的(而不是不存在)，则可以计算可访问名称，如 Accessible Name and Description Computation 的步骤 2A 中所述。 。

屏幕阅读器用户可以使用快捷键，使导航变得快速、轻松。如果我想导航到页面上的下一个按钮，我只需按“B”(在屏幕阅读器运行时)，我的焦点就会移到下一个按钮。按钮的名称将被公布，但如果它指向的元素不存在，则不会公布名称。

我还可以通过按 ctrl+ins 调出一个对话框，其中包含页面上所有按钮的列表(如果我使用 JAWS 屏幕阅读器) +b。该列表将显示所有按钮的可访问名称。同样，如果您的按钮指向不存在的元素，则该对话框中不会显示名称。

借助 iOS 上的 VoiceOver，我可以将转子设置为通过按钮导航，这样当我向上或向下滑动时，焦点就会移至下一个按钮(类似于使用 PC 屏幕阅读器按“B”)。当焦点移动到下一个按钮时，将计算并公布其名称。同样，如果它指向的元素不存在，则不会公布名称。

因此，您的问题的简单答案是使用隐藏元素，而不是在 DOM 中创建/销毁的元素，但我想提供该答案背后的一些上下文。