下拉选择组件可访问性疑问：按钮链接实现是否合理？

一、用<button><a>做下拉筛选合理吗？ #

要看你的实际需求：

• 如果需要筛选状态能通过URL分享、支持浏览器前进后退，或者需要SEO收录不同筛选结果，用<a>的方案是合理的。原生<select>默认只会触发前端逻辑，没法直接同步URL和页面标题，得额外写代码修改history；而用<a>可以天然实现跳转（不管是服务端渲染还是前端路由），同时同步URL和标题。
• 如果只是需要局部更新表格、不需要保留筛选状态的可分享性，那用原生<select>配合AJAX更新确实更轻量，没必要搞跳转。

二、用链接作为列表项合规吗？ #

分两种情况：

• 如果点击选项是导航到对应筛选结果的页面（或前端路由地址），用<a>完全符合语义——<a>本来就是用来定义导航链接的，这种场景下合规。
• 如果只是触发前端状态变更、不改变URL，那用<a>就不合适了，应该用<button>，因为<a>的语义是“导航到资源”，不是“执行操作”，容易混淆屏幕阅读器用户，还得额外阻止默认跳转行为，多此一举。

三、怎么加ARIA让它像原生select一样有可访问性？ #

需要给按钮、菜单容器、选项都补全ARIA属性，同时实现原生select的键盘交互逻辑：

1. 下拉按钮的配置 #

<button 
  id="tournament-filter-btn"
  aria-haspopup="listbox"
  aria-expanded="false"
  aria-label="选择赛事类型"
>
  当前赛事：NBA
</button>

• aria-haspopup="listbox"：告诉屏幕阅读器这个按钮会弹出一个列表框
• aria-expanded：下拉展开时设为true，收起时设为false，同步状态
• aria-label：给按钮加描述，明确这个筛选是选赛事的

2. 下拉菜单容器的配置 #

<div 
  id="tournament-filter-list"
  role="listbox"
  aria-labelledby="tournament-filter-btn"
  hidden
>
  <!-- 选项列表放在这里 -->
</div>

• role="listbox"：把容器定义成列表框，对应原生select的角色
• aria-labelledby：关联上方的按钮，让屏幕阅读器知道这个列表属于哪个筛选器
• hidden：初始状态隐藏菜单，展开时移除这个属性

3. 每个选项（<a>标签）的配置 #

<a 
  href="/results?tournament=nba"
  role="option"
  aria-selected="false"
  id="opt-nba"
>
  NBA
</a>

• role="option"：把每个链接定义成列表框的选项，对应原生<option>
• aria-selected：当前选中的选项设为true，其他设为false，标记选中状态

4. 必须补上的键盘交互 #

原生select支持键盘操作，自定义下拉也得跟上：

• 点击按钮、按空格键或Enter键，切换菜单的展开/收起状态
• 菜单展开时，用上下箭头在选项间切换，同时把焦点移到当前选项上
• 按Esc键收起菜单，焦点回到按钮
• 选中选项（按Enter/空格键或点击）后，收起菜单，更新按钮显示的文本，同步所有ARIA状态

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