预览跳转功能应使用链接还是button？屏幕阅读器适配疑问

功能对应组件的判断标准 #

核心判断逻辑非常明确：

• 如果点击后行为是导航到独立可访问的资源地址（地址栏URL发生变化、支持右键在新标签页打开、可被用户收藏），就应该用 <a> 链接组件
• 如果点击后行为是当前页内执行动作（包括弹出层、动态生成内容、无独立URL的新页面渲染），就应该用 <button> 按钮组件

针对你的场景的方案选择 #

情况1：预览页有独立可直接访问的URL #

你当前的写法本身就不符合链接的最佳实践，不应该用 href="javascript://" 这种伪协议，直接把 href 属性替换为真实的预览页地址即可。
此时该元素本质就是导航链接，屏幕阅读器识别为「预览链接」是完全符合用户预期的，硬加 role="button" 反而会破坏无障碍体验：习惯用屏幕阅读器的用户会预期按钮是执行当前页操作、链接是跳转新资源，修改角色反而会造成认知混淆，建议和同事明确功能本质后对齐认知即可。

情况2：预览没有独立URL，仅能从编辑页点击触发动态生成 #

这种场景下功能本质是「触发生成预览的动作」，完全不符合链接的适用场景，应该直接替换为原生 <button> 标签：

<button type="button">Preview</button>

原生按钮自带所有无障碍特性：默认被屏幕阅读器识别为按钮、支持回车/空格触发、不需要额外补事件监听，只需要通过CSS把按钮样式调整为你需要的外观即可，比加 role="button" 的hack方案兼容性和可维护性好很多。

为什么不推荐用role="button"的快速修复方案 #

给 <a> 标签加 role="button" 会带来额外的适配成本：

• <a> 标签默认仅支持回车触发点击，原生按钮支持回车和空格两种触发方式，你需要额外加键盘事件监听才能对齐原生按钮的交互
• 需要额外阻止 <a> 标签的默认跳转行为，冗余代码多，容易出现兼容漏洞

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