div元素用aria-expanded致无障碍问题，求替代或补充属性方案

核心问题原因 #

aria-expanded 是用于标识可展开/折叠控件状态的属性，但它需要搭配具有交互角色的元素才能被屏幕阅读器正确识别。<div> 是通用容器，默认没有交互角色和可聚焦特性，单独加 aria-expanded 会导致无障碍工具无法正确解析控件的功能和状态。

可行解决方案 #

1. 给<div>补充交互角色与聚焦属性

给div添加以下属性，让它模拟按钮的交互行为：

• 添加 role="button"：告诉屏幕阅读器这个div是一个可点击的按钮控件
• 添加 tabindex="0"：让div可以通过键盘Tab键聚焦，保证键盘可访问
• 绑定键盘事件：支持Enter和Space键触发展开/折叠（按钮的标准键盘交互逻辑）

示例代码：

<div 
  role="button" 
  tabindex="0" 
  aria-expanded="false" 
  aria-controls="dropdown-content"
  onclick="toggleDropdown()"
  onkeydown="handleKeyDown(event)"
>
  菜单标题
</div>
<div id="dropdown-content" hidden>
  <!-- 下拉菜单内容 -->
</div>

对应的JS逻辑（处理键盘交互）：

function handleKeyDown(event) {
  // 按下Enter或Space键时触发折叠/展开
  if (event.key === 'Enter' || event.key === ' ') {
    event.preventDefault();
    toggleDropdown();
  }
}

2. 替换为原生<button>元素（更推荐）

如果布局允许，直接用原生<button>代替<div>是最优解。原生按钮默认就具备：

• 内置的交互角色（无需额外加role="button"）
• 自动支持键盘聚焦（Tab键可访问）
• 默认支持Enter/Space键触发点击
• 屏幕阅读器能直接识别为可交互控件

示例代码：

<button aria-expanded="false" aria-controls="dropdown-content" onclick="toggleDropdown()">
  菜单标题
</button>
<div id="dropdown-content" hidden>
  <!-- 下拉菜单内容 -->
</div>

3. 补充关联控件的属性

无论用div还是按钮，都建议添加aria-controls属性，其值为下拉内容容器的ID，用于建立折叠控件和内容的关联，让屏幕阅读器知道这个控件控制哪个区域的显示/隐藏。

如果下拉菜单是作为导航使用，还可以给下拉内容容器添加role="menu"，菜单项添加role="menuitem"，进一步明确控件语义：

<div id="dropdown-content" role="menu" hidden>
  <div role="menuitem" tabindex="-1">菜单项1</div>
  <div role="menuitem" tabindex="-1">菜单项2</div>
</div>

（注：tabindex="-1"让菜单项可以通过方向键聚焦，需要额外绑定方向键导航逻辑）

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