我正在尝试实现通知组件，该组件将显示项目列表，并通过单击顶部固定导航栏上的通知图标打开。我不认为这是一个菜单栏。因为菜单提供了可以执行的操作，并且还可以有一个子菜单。 https://www.w3.org/TR/wai-aria-practices/#menu
谁能让我知道这种组件的咏叹调角色应该是什么？
下面是代码示例。我将通过单击通知图标按钮动态打开模板：-
<button aria-label="notifications">
<mat-icon class="mr-md">notifications</mat-icon>
</button>
<!-- Notification template -->
<div class="notifications__item">
Notifications
<li *ngFor="let notification of notifications" class="notifications__item">
<mat-icon class="notifications__icon material-icons-round">
{{ notification.icon }}
</mat-icon>
<div class="notifications__content">
<div [ngClass]="{ 'notifications__warn': notification?.type }">
<span>{{ notification.title }}</span>
</div>
<div>{{ notification.description }}</div>
</div>
<small class="notifications__caption">
{{ notification.duration }}
</small>
</li>
</div>
还有很多事情需要考虑，你的例子没有涵盖，所以这不是一个完整的答案，它只是根据你采取的路线将你指向相关的 WAI-ARIA。
按钮
首先要考虑的是按钮。您需要告诉屏幕阅读器用户它当前处于什么状态。为此，我们使用aria-expanded来指示它控制的项目当前是打开还是关闭。(aria-expanded="true"为开放，aria-expanded="false"为关闭。
同时，我们希望指示此按钮控制的项目(因为通知列表不是元素"拥有"的 - 例如，如果它是一个在菜单中具有嵌套<ul>的<li>，那么列表将由它"拥有")。
为此，我们将使用aria-controls或aria-owns并将其指向它控制的元素的 ID。对于它们之间的差异，请参阅此堆栈溢出帖子是一个很好的解释，在此示例中，我会说它aria-controls，但再次取决于您在DOM中的实现和定位。
关于按钮本身及其在菜单中的位置，这仍被视为导航，因此它应该位于<nav>元素中。但是，如果它位于您的导航之外，以及"帮助"和"帐户"部分，您可以将这些项目视为工具栏的一部分。(我再说一次，它不适用于这里，但需要看一下)
此外，它似乎不适用于此处，但是如果您在显示通知列表的"弹出窗口"/模式中包含任何链接等(即"查看所有通知"链接)，则应考虑aria-haspopup="true"
通知列表
右边，我们有一个指向容器的按钮(不要忘记为容器提供aria-owns或aria-controls的相关 ID)。接下来容器本身呢？
在这个例子中，容器似乎应该被视为模态。
因此，出于这个原因，您需要考虑：-
- 模态中的陷害焦点，
- 与逃脱接近，
- 将焦点返回到在关闭时激活它的按钮，
- 提供可通过键盘访问的关闭按钮，
- 模态的标题(即使它在视觉上是隐藏的)
我建议添加上面的一些辅助功能，尝试使用屏幕阅读器和键盘，看看它是否易于使用。确定模式后，请就特定用例问题提出更多问题，因为以上是一般指导。
根据您的标记需要考虑的一些事项
从您的示例中需要考虑的其他事项：-
- 在图标上使用
aria-hidden="true"，它们不会为屏幕阅读器添加任何内容(假设您的notification.title是描述性的)。 - 对于通知标题，请考虑将其设置为相关标题(
<h2> - <h6>具体取决于文档中的位置。 - 不要忘记添加一些视觉隐藏的文本来描述警告级别(我可以看到您在
[ngClass]="{ 'notifications__warn': notification?.type }"中有某种形式的着色/区别 - 向屏幕阅读器公开相同的信息。 - 您当前在
<div>中有一个<li>- 也许将外部<div>更改为<ul>，以便它在语义上正确(<div class="notifications__item"><ul class="notifications__item">)
我希望以上内容有助于让您走上正确的轨道，很多东西要阅读，但在阅读链接的文章后，您应该能够更好地决定您使用的模式(因为我什至没有提到将其作为菜单中的子项目)，然后可以就您还不了解的特定细节提出更多问题。
最后的想法/提示
使用屏幕阅读器进行测试- 这是我在了解 WAI-ARIA 如何工作并与事物交互方面可以给出的最大提示。
此外，如果您对 WAI-ARIA 归属是否适用有疑问，最好不要将其包括在内。
不正确的使用或 WAI-ARIA 实际上比根本不包含它更糟糕，因此请确保您在实现之前了解何时合理地使用属性。如果我不确定(因为它仍然发生在我身上！我倾向于查看正在使用的 2 或 3 个示例，看看我的模式是否符合我查看的示例。