无aria-controls时aria-expanded的适用场景及相关技术疑问

核心结论 #

不搭配aria-controls使用aria-expanded是完全有效的，也可以用来"自我声明"节点（如按钮）的状态变化。

针对具体问题的解答 #

1. 不是仅用于指示按钮是否可见
   aria-expanded的核心语义是描述元素的"展开/折叠"状态，而非单纯的可见性。比如按钮点击后，自身内嵌的下拉菜单显示/隐藏，或者按钮从紧凑状态切换为展示更多操作选项的状态，这些场景都可以用它来声明，和按钮本身的可见性无关。

2. "expanded"可以仅代表节点自身的状态变化
   完全可以。比如一个按钮默认只显示"更多"文字，点击后展开显示"编辑 | 删除 | 分享"等操作选项（这些选项是按钮的一部分），此时aria-expanded="true"就用来描述按钮自身从"紧凑"到"展开"的状态变化，无需关联其他外部元素。

aria-expanded的完整语义边界 #

它并非仅用于声明自身或受控元素的可见性，而是聚焦于可展开/折叠交互的状态标识。虽然大部分场景和可见性相关，但也存在可见性之外的适用情况：

• 比如一个代码块的切换按钮，点击后代码从缩略显示变为完整显示，代码块本身一直可见，但状态从"折叠（缩略）"变为"展开（完整）"，此时aria-expanded依然适用。
• 再比如一个导航按钮，点击后从只显示图标变为图标+文本的组合状态，这种功能上的"展开"也符合它的语义。

无aria-controls时的有效适用场景 #

• 按钮自身包含可展开内容：按钮内部嵌套了隐藏的菜单、选项面板，点击按钮后这些内容在按钮内部显示/隐藏，无需关联外部元素ID，直接用aria-expanded声明按钮的状态。
• 受控元素为上下文隐含：比如页面头部的搜索触发按钮，点击后展开页面布局中默认隐藏的搜索框，由于搜索框的关联性在页面上下文里很明确，无需用aria-controls指定ID，aria-expanded单独就能告知辅助技术按钮的状态变化。
• 元素自身的功能状态切换：元素的可见性未变化，但功能或展示形态从"折叠"变为"展开"，比如上述的按钮从图标变为图标+文本，此时用aria-expanded来标识这种状态转换。

内容的提问来源于stack exchange，提问作者NickKnack13