下面是一个用Angular编写的下拉菜单示例，其中我使用HTML5 formatweek属性（换句话说，date_to_color）来显示/隐藏项目列表：
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更改时，就从DOM中添加和删除列表。
hidden忽略任何框架或性能问题，从可访问性的角度来看，这两种实现有何不同？
相当多的ARIA属性通过引用其他元素的ID（例如isMenuOpen，<ul
id="my-menu"
role="menu"
aria-labelledby="my-btn"
*ngIf="isMenuOpen"
>
...
</ul>
等来工作）正在从DOM中删除由该属性引用的元素，而该元素比隐藏该元素更难访问元素？
答案 0 :(得分：4)
是的，有区别。考虑这个简单的例子：
<button aria-labelledby="foo"></button>
页面上尚不存在“ foo”元素的位置（尚未）。如果您通过https://validator.w3.org/nu之类的验证器运行此代码，它将失败。
Error: The aria-labelledby attribute must point to an element in the same document.
从WCAG的角度来看，它将失败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中创建/销毁的元素，但是我想在此答案后面提供一些上下文。