Javascript 显示/隐藏与从DOM添加/删除的可访问性含义

下面是一个用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>

忽略任何框架或性能问题，从可访问性的角度来看，这两种实现是否有任何不同

---

相当多的ARIA属性通过引用其他元素的ID来工作（例如，

ARIA控件

，

ARIA labelledby

，等等），从DOM中删除这样一个属性引用的元素比隐藏该元素更难访问？

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

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

其中页面上还不存在“foo”元素。如果您通过诸如之类的验证器运行此代码，它将失败

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

从WCAG的角度来看，它将失败

此外，WCAG也是一个问题。按钮（在我的示例中）没有可访问的名称，因为它指向的元素不存在。如果它指向的元素是隐藏的（而不是不存在的），则可以计算可访问名称，，如本节步骤2A所述

屏幕阅读器用户可以使用快捷键，使导航变得快捷和简单。如果我想导航到页面上的“下一步”按钮，我只需按下“B”（屏幕阅读器运行时），我的焦点就会移动到“下一步”按钮。按钮的名称将被宣布，但如果它指向的元素不存在，则将没有名称可宣布

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

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

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

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