正确的 Aria 标签？

Question

我有一个带有图标的按钮，可以打开移动导航。我的按钮上有：

:aria-expanded="active" //toggled with JS
aria-controls="menu"
aria-label="Open menu"

包含导航的菜单有：

 id="menu"
 :aria-hidden="!active"

菜单内还有一个

图标按钮。用于关闭菜单；按钮上只有这个：

aria-label="Close menu"

我是否正确理解了如何添加 aria 标签？我错过了什么吗？即使

按钮位于菜单本身内，是否也应该有

aria-expanded

和

aria-controls

？

Answer 1

您的菜单存在一些问题。

aria-expanded 中的值不正确**

[aria-expanded][1]不接受“active”值，只有三种类型：

要在菜单打开时通知辅助技术，该值应为 true。

aria-label 中的值应该提供如下信息：

不要使用“打开菜单”，屏幕阅读器必须默认处理此事件。

“打开”、“关闭”状态在应用时通过属性 aria-expanded 通知。

当图标 X 位于按钮汉堡包内时，您不需要放置 aria-expanded 和 aria-controls。

只需记住更改图标“关闭”中 aria-label 的值即可。

<button aria-label="Close">X</button>