兼具导航与折叠组件触发功能的交互元素的屏幕阅读器可访问性问询

你的担心完全属实 #

这种设计确实存在严重的可访问性问题：

• 屏幕阅读器依赖元素原生语义识别功能：<a>会被播报为「链接」，<button>会被播报为「按钮」，但无法同时识别两个独立动作，用户完全不知道点击后会触发跳转+折叠面板展开这两个操作。
• 键盘导航逻辑混乱：链接仅支持Enter键激活，按钮支持Enter和Space键激活，混用两种功能会让键盘用户的操作预期完全错位。
• 更关键的是，如果是跳转到全新页面（页面刷新），原页面的折叠面板展开后用户根本看不到，这个动作从逻辑上就没有意义。

可行解决方案 #

先梳理交互逻辑的合理性 #

首先要明确场景：

• 如果是跳转至全新页面（刷新页面）：直接放弃同时触发两个动作的需求，要么只做链接跳转，要么只做折叠面板开关——因为跳转后用户会离开当前页面，折叠面板的状态毫无意义。
• 如果是单页应用路由跳转（不刷新页面）：可以实现，但必须通过以下方式解决可访问性问题：

方案1：用按钮元素承载双动作（优先推荐）

• 用原生<button>作为交互载体，按钮的语义更适合触发复合动作。
• 明确告知动作内容：按钮文本直接说明两个操作，比如"前往XX页面并展开详情"；如果文本空间有限，用aria-label补充完整说明，比如aria-label="点击后将导航至XX页面，并展开当前页面的详情折叠面板"。
• 逻辑上先处理折叠面板展开，再触发单页路由跳转。
• 天然支持键盘导航（Enter/Space键激活），符合无障碍规范。

方案2：用链接元素并修正语义（仅在必须用链接时使用）

• 给<a>标签添加role="button"，手动支持Space键激活（默认链接仅支持Enter），避免键盘用户困惑。
• 同样通过文本和aria-label明确说明双动作，比如：

<a href="/target-page" role="button" aria-label="前往XX页面并展开详情">前往XX页面并展开详情</a>

• 注意：这种方式会混淆链接与按钮的原生语义，属于妥协方案，优先选方案1。

方案3：拆分为两个独立交互元素（最稳妥）

把跳转和折叠面板开关拆成两个独立元素：一个链接负责跳转，一个按钮负责展开折叠面板。这样用户可以自主选择要执行的动作，完全符合无障碍规范，也避免了动作冲突的问题。

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