点击导航条上的通知图标就能打开的框应该是什么咏叹调角色？

Question

我是想实现通知组件，显示项目列表，点击顶部固定导航栏上的通知图标就能打开。我认为这不是菜单栏。因为菜单提供了可以执行的操作，而且它还可以有一个子菜单。https:/www.w3.orgTRwai-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>

Answer 1

还有很多东西需要考虑，你的例子没有涉及到，所以这不是一个完整的答案，只是给你指出相关的wai-aria，看你走什么路线。

按钮

首先要考虑的是按钮。你需要告诉屏幕阅读器用户它当前处于什么状态。为此，我们使用 aria-expanded 表示其控制的项目当前是打开还是关闭。(aria-expanded="true" 为开。aria-expanded="false" 为关闭。)

同时，我们希望指出这个按钮控制的是什么项目（因为通知列表不是由元素 "拥有 "的--例如，如果它是个 <li> 嵌套 <ul> 在菜单中，那么列表就会被它 "拥有"）。)

为此，我们将使用 aria-controls 或 aria-owns 并将其指向它所控制的元素的ID。它们之间的区别见 本栈溢出帖 作为一个很好的解释，在这个例子中，我会说是 aria-controls 但这又取决于你的实现和DOM中的定位。

关于按钮本身和它在菜单中的位置，这仍然被认为是导航，所以它应该位于你的 <nav> 元素的一部分。然而，如果这些项目与 "帮助 "和 "账户 "部分一起位于您的导航之外，您可能会认为这些项目是一个 工具栏. (然而我又会说这不适用这里，但可以看看) 。

此外，它似乎并不适用于这里，但如果您在显示通知列表的 "弹出式 "模式中包含任何链接等（即 "查看所有通知 "链接），您应该考虑以下几点 aria-haspopup="true"

通知清单

对了，所以我们有一个按钮指向容器（别忘了给容器相关的ID，以便于 aria-owns 或 aria-controls). 接下来容器本身呢？

在这个例子中，似乎容器应该被当作一个 模态。

因此，为此你需要考虑：----------------------------------。

• 在模态中捕捉焦点。
• 以逃亡结束。
• 将焦点返回到关闭时激活它的按钮上。
• 提供一个可以通过键盘访问的关闭按钮。
• 模式的标题（即使是 隐性)

我建议添加一些上面的可访问性功能，用读屏器和键盘试试，看看是否容易使用。一旦你决定了你的模式，请就具体的用例问题提出更多的问题，因为上面是一般性的指导。

根据你的标记，需要考虑的一些事情

从你的例子中可以考虑的其他事情：-

• 使用 aria-hidden="true" 的图标上，它们不会为屏幕阅读器添加任何东西（假设您的 notification.title 是描述性的）。)
• 对于通知的标题，可以考虑将其作为一个相关的标题(<h2> - <h6> 取决于在文档中的位置。
• 不要忘了添加一些视觉上隐藏的文字来描述警告级别（我可以看到你有某种形式的颜色区分在 [ngClass]="{ 'notifications__warn': notification?.type }" - 将同样的信息暴露在屏幕阅读器上）。)
• 您目前有一个 <li> 之内 <div> - 可能改变外 <div> 变成 <ul> 所以它在语义上是正确的(<div class="notifications__item"> 变成 <ul class="notifications__item">)

我希望上面的内容对你走上正确的轨道是有用的，需要阅读的内容很多，但是在阅读了链接的文章之后，你应该能够更好地决定你使用的是什么模式（因为我甚至没有提到将其作为菜单内的一个子项目），然后可以就具体的细节多问一些你还不明白的问题。

最后的思路技巧

试读 - 这是我能给出的关于WAI-ARIA如何工作和与事物互动的最大建议。

另外，如果您对WAI-ARIA的属性是否适用有疑问，最好的办法是 不 包括它。

不正确的使用或WAI-ARIA实际上比完全不包括它更糟糕，所以在实现一个属性之前，请确保你了解何时合理地使用它。如果我曾经不确定（因为它仍然发生在我身上！），我倾向于看2或3个使用它的例子，看看我的模式是否符合我看的例子。