单击导航栏上的通知图标可以打开的框的 aria-role 应该是什么？
What should be the aria-role for the box that can be opened by clicking on notification icon on navbar?
我正在尝试实现通知组件，该组件将显示项目列表并通过单击顶部固定导航栏上的通知图标打开。我不认为这是一个菜单栏。因为菜单提供了可以执行的操作，它也可以有子菜单。
https://www.w3.org/TR/wai-aria-practices/#menu
谁能告诉我这种组件的 aria-role 应该是什么？
下面是代码示例。我将通过单击通知图标按钮动态打开模板:-
<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，具体取决于您采取的路线.
按钮
首先要考虑的是按钮。您需要告诉屏幕 reader 用户它当前处于什么状态。为此我们使用 aria-expanded 来指示它控制的项目当前是打开还是关闭。 （aria-expanded="true" 表示打开，aria-expanded="false" 表示关闭。）
同时我们想指出这个按钮控制的项目（因为通知列表不是 'owned' 元素 - 例如，如果它是一个 <li> 嵌套 <ul> 在菜单中，则列表将是 'owned'。
为此我们将使用 aria-controls or aria-owns and point it to the ID of the element it controls. For the difference between them see this stack overflow post 作为一个很好的解释，在这个例子中我会说它是 aria-controls 但同样取决于您在 DOM 中的实施和定位。
关于按钮本身及其在菜单中的位置，这仍被视为导航，因此它应位于 <nav> 元素内。但是，如果这与 'help' 和 'account' 部分一起位于您的导航之外，您可以将这些项目视为 toolbar 的一部分。 （再一次，我会说它不适用于这里，但值得一看）
此外，它似乎不适用于此处，但如果您在显示通知列表的 'popup'/模态中包含任何 links 等（即 'view all notifications' link), 你应该考虑 aria-haspopup="true"
通知列表
是的，所以我们有一个指向容器的按钮（不要忘记为容器提供 aria-owns 或 aria-controls 的相关 ID）。接下来容器本身呢？
好吧，在这个例子中，容器似乎应该像 modal.
因此，出于这个原因，您需要考虑：-
- 在模态中捕获焦点，
- 用 Escape 关闭，
- 将焦点返回到关闭时激活它的按钮，
- 提供可通过键盘访问的关闭按钮，
- 模式的标题（即使它是 visually hidden）
我推荐的是在上面添加一些辅助功能，用屏幕reader和键盘试试看是否好用。一旦你决定了你的模式，就特定用例问题提出更多问题，因为以上是一般指导。
根据您的标记需要考虑的一些事项
您的示例中需要考虑的其他事项：-
- 在您的图标上使用
aria-hidden="true"，它们不会为屏幕 reader 添加任何内容（假设您的 notification.title 是描述性的）。
- 对于通知标题，考虑将其设为相关标题（
<h2> - <h6> 取决于文档中的位置。
- 不要忘记添加一些描述警告级别的 visually-hidden 文本（我可以看到您在
[ngClass]="{ 'notifications__warn': notification?.type }" 中有某种形式的着色/区分 - 将相同的信息显示在屏幕上 readers.)
- 您当前在
<div> 中有一个 <li> - 也许可以将外部 <div> 更改为 <ul>，这样它在语义上是正确的（<div class="notifications__item"> 为<ul class="notifications__item">)
我希望以上内容能帮助您走上正轨，需要阅读很多内容，但在阅读 linked 文章后，您应该能够更好地决定您使用的模式（因为我什至没有提到将其作为菜单中的子项目），然后可以就您尚不了解的具体细节提出更多问题。
最后的想法/提示
使用屏幕进行测试 reader - 这是我可以提供的最大提示，用于了解 WAI-ARIA 的工作原理和与事物的交互方式。
此外，如果您怀疑 WAI-ARIA 属性是否适用，最好 [=76=] 不要 包含它。
不正确的使用或 WAI-ARIA 实际上比根本不包含它更糟糕，因此在实施之前确保您了解何时合理使用属性。如果我不确定（因为它仍然发生在我身上！），我倾向于查看 2 或 3 个正在使用的示例，看看我的模式是否适合我查看的示例。
我正在尝试实现通知组件，该组件将显示项目列表并通过单击顶部固定导航栏上的通知图标打开。我不认为这是一个菜单栏。因为菜单提供了可以执行的操作，它也可以有子菜单。 https://www.w3.org/TR/wai-aria-practices/#menu
谁能告诉我这种组件的 aria-role 应该是什么？
下面是代码示例。我将通过单击通知图标按钮动态打开模板:-
<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，具体取决于您采取的路线.
按钮
首先要考虑的是按钮。您需要告诉屏幕 reader 用户它当前处于什么状态。为此我们使用 aria-expanded 来指示它控制的项目当前是打开还是关闭。 （aria-expanded="true" 表示打开，aria-expanded="false" 表示关闭。）
同时我们想指出这个按钮控制的项目（因为通知列表不是 'owned' 元素 - 例如，如果它是一个 <li> 嵌套 <ul> 在菜单中，则列表将是 'owned'。
为此我们将使用 aria-controls or aria-owns and point it to the ID of the element it controls. For the difference between them see this stack overflow post 作为一个很好的解释，在这个例子中我会说它是 aria-controls 但同样取决于您在 DOM 中的实施和定位。
关于按钮本身及其在菜单中的位置，这仍被视为导航，因此它应位于 <nav> 元素内。但是，如果这与 'help' 和 'account' 部分一起位于您的导航之外，您可以将这些项目视为 toolbar 的一部分。 （再一次，我会说它不适用于这里，但值得一看）
此外，它似乎不适用于此处，但如果您在显示通知列表的 'popup'/模态中包含任何 links 等（即 'view all notifications' link), 你应该考虑 aria-haspopup="true"
通知列表
是的，所以我们有一个指向容器的按钮（不要忘记为容器提供 aria-owns 或 aria-controls 的相关 ID）。接下来容器本身呢？
好吧，在这个例子中，容器似乎应该像 modal.
因此，出于这个原因，您需要考虑：-
- 在模态中捕获焦点，
- 用 Escape 关闭，
- 将焦点返回到关闭时激活它的按钮，
- 提供可通过键盘访问的关闭按钮，
- 模式的标题（即使它是 visually hidden）
我推荐的是在上面添加一些辅助功能，用屏幕reader和键盘试试看是否好用。一旦你决定了你的模式，就特定用例问题提出更多问题，因为以上是一般指导。
根据您的标记需要考虑的一些事项
您的示例中需要考虑的其他事项：-
- 在您的图标上使用
aria-hidden="true"，它们不会为屏幕 reader 添加任何内容（假设您的notification.title是描述性的）。 - 对于通知标题，考虑将其设为相关标题（
<h2> - <h6>取决于文档中的位置。 - 不要忘记添加一些描述警告级别的 visually-hidden 文本（我可以看到您在
[ngClass]="{ 'notifications__warn': notification?.type }"中有某种形式的着色/区分 - 将相同的信息显示在屏幕上 readers.) - 您当前在
<div>中有一个<li>- 也许可以将外部<div>更改为<ul>，这样它在语义上是正确的（<div class="notifications__item">为<ul class="notifications__item">)
我希望以上内容能帮助您走上正轨，需要阅读很多内容，但在阅读 linked 文章后，您应该能够更好地决定您使用的模式（因为我什至没有提到将其作为菜单中的子项目），然后可以就您尚不了解的具体细节提出更多问题。
最后的想法/提示
使用屏幕进行测试 reader - 这是我可以提供的最大提示，用于了解 WAI-ARIA 的工作原理和与事物的交互方式。
此外，如果您怀疑 WAI-ARIA 属性是否适用，最好 [=76=] 不要 包含它。
不正确的使用或 WAI-ARIA 实际上比根本不包含它更糟糕，因此在实施之前确保您了解何时合理使用属性。如果我不确定（因为它仍然发生在我身上！），我倾向于查看 2 或 3 个正在使用的示例，看看我的模式是否适合我查看的示例。